Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tests variant item selection #466

Merged
merged 7 commits into from
Sep 11, 2024
Merged

Tests variant item selection #466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2eb9d97
test: add variant items selection test
Sep 10, 2024
e413599
fix: remove selectAll from VariantsView
Sep 10, 2024
4e21fae
Merge branch 'main-variants' into tests-variant-item-selection
orlinmalkja Sep 10, 2024
0fab119
refactor: add selectedAll variable
Sep 10, 2024
b81eb47
refactor: add new icon names
Sep 11, 2024
3784661
fix: remove the SelectAll from variants view
Sep 11, 2024
f0ce3a7
style: remove an unused variable
Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 63 additions & 73 deletions examples/ahiqar-arabic-karshuni-with-variants-local.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>TIDO</title>

<head><title>TIDO</title>
<meta charset="utf-8">
<meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
<meta name="description" content="">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
<meta name="viewport" content="initial-scale=1,maximum-scale=5,minimum-scale=1,width=device-width">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="dist/tido.css">
<style>
html, body {
margin: 0;
Expand All @@ -17,17 +17,15 @@
}
</style>
</head>

<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<noscript><strong>We're sorry but TIDO doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong></noscript>

<script type="module" src="/src/main.js"></script>
<div id="app"></div>
<script src="dist/tido.js"></script>
<script>
window.addEventListener('load', function () {
window.tido = new window.Tido({
window.addEventListener('load', function () {
window.tido = new window.Tido({
"collection": "http://localhost:8181/ahiqar/textapi/ahiqar/arabic-karshuni/collection.json",
"labels": {
"item": "Sheet",
Expand Down Expand Up @@ -105,75 +103,67 @@
]
},
{
"label": "annotations",
"views": [
{
"id": "annotations1",
"label": "Editorial",
"connector": {
"id": 5,
"options": {
"types": [
{
"name": "Person",
"icon": "person"
},
{
"name": "Place",
"icon": "marker"
},
{
"name": "Editorial Comment",
"icon": "chat"
},
{
"name": "Reference",
"icon": "externalLink"
}
]
"label": "annotations",
"views": [
{
"id": "annotations1",
"label": "Editorial",
"connector": {
"id": 5,
"options": {
"types": [
{
"name": "Person",
"icon": "person"
},
{
"name": "Place",
"icon": "marker"
},
{
"name": "Editorial Comment",
"icon": "chat"
},
{
"name": "Reference",
"icon": "externalLink"
}
]
}
}
}
},
{
"id": "annotations2",
"label": "Motif",
"connector": {
"id": 5,
"options": {
"types": [
{
"name": "Motif",
"icon": "pen"
}
]
},
{
"id": "annotations2",
"label": "Motif",
"connector": {
"id": 5,
"options": {
"types": [
{
"name": "Motif",
"icon": "pen"
}
]
}
}
}
},
{
"id": "annotations3",
"label": "Variants",
"connector": {
"id": 5,
"options": {
"types": [
{
"name": "Variant",
"icon": "pen"
}
]
},
{
"id": "annotations3",
"label": "Variants",
"connector": {
"id": 6
}
}
}
]
}
]
}
],
"translations": {
"en": {
"contents_and_metadata": "Contents & Metadata"
}
}
});
});
</script>
});
</script>
</body>
</html>
</html>
21 changes: 2 additions & 19 deletions src/components/panels/Panel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,7 +320,7 @@ export default {
}];
}

function createVariantsView(view, i) {
function createVariantsView(view) {
const annotationStore = useAnnotationsStore();
const { connector, label } = view;
const { component } = findComponent(connector.id);
Expand All @@ -334,23 +334,6 @@ export default {
},
};

unsubscribe.value = annotationStore.$onAction(({ name, args }) => {
if (tabs.value.length
&& tabs.value[0]?.actions?.length
&& (name === 'setActiveAnnotations')) {
const activeAnnotations = args[0];
const activeAmount = Object.keys(activeAnnotations).length;
const filteredAmount = annotationStore.filteredAnnotations.length;
let newSelected = activeAmount > 0 && activeAmount === filteredAmount;

if (!newSelected && activeAmount > 0) newSelected = null;

if (tabs.value[i].actions[0].props.selected !== newSelected) {
tabs.value[i].actions[0].props.selected = newSelected;
}
}
});

const actions = [{
component: 'PanelToggleAction',
props: {
Expand All @@ -359,7 +342,7 @@ export default {
},
events: eventsSingleSelectMode,
}];

tabs.value = [...tabs.value, {
component,
label,
Expand Down
14 changes: 1 addition & 13 deletions tests/cypress/e2e/annotation.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,5 @@
import { commonSelectors } from '../support/globals';

const ahiqarSelectors = {
list: '.panels-wrapper > .panel:nth-child(4) [role="tablist"] .annotations-list',
listItem: '.panels-wrapper > .panel:nth-child(4) [role="tablist"] .annotations-list .item',
listOfSecondTab: '.panels-wrapper > .panel:nth-child(4) [role="tabpanel"]:nth-child(2) .annotations-list',
tab: '.panels-wrapper > .panel:nth-child(4) [role="tablist"] [data-pc-section="nav"] [data-pc-name="tabpanel"]',
text: '.panels-wrapper > .panel:nth-child(3) #text-content',
annotationPanelActionCheckbox: '.panel-header .actions > div:first-child #panel-check-action',
}
import { commonSelectors, ahiqarSelectors, gflSelectors } from '../support/globals';

const gflSelectors = {
listItem: '.panels-wrapper > .panel:nth-child(3) [role="tablist"] .annotations-list .item',
}

const selectors = {
...commonSelectors,
Expand Down
77 changes: 77 additions & 0 deletions tests/cypress/e2e/variants.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { commonSelectors, ahiqarSelectors, gflSelectors } from '../support/globals';

const selectors = {
...commonSelectors,
...ahiqarSelectors,
}

describe('VariantsAnnotation', () => {

beforeEach(() => {
cy
.visit(`/ahiqar-arabic-karshuni-with-variants-local.html?tido=m20_i1_p0.0-1.0-2.0-3.2`)
})

describe('Variants items selection', () => {
it('select (unselect) a variant item', () => {
// should select a variant item and add its witness after the highlighted text + the highlighted text should become light blue
cy
.get(selectors.list)
.children()
.eq(0)
.click()
.should('have.class', 'active') // the variant item is selected
.get('div#MD12675N1l4l2l6l4l40')
.find('span.witnesses')
.find('span').contains('DFM 614') // the witness is added
.parent()
.next()
.invoke('attr', 'data-annotation-level')
.should('eq', '1') // highlighted text should become light blue

// --- select sequentially another variant item ---
.get(selectors.list)
.children()
.eq(1)
.click()
.should('have.class', 'active') // the variant item is selected
.get('div#MD12675N1l4l2l6l4l40')
.find('span.witnesses')
.find('span').contains('Ming. syr. 258') // the witness is added
.parent()
.children().should('have.length',2)
.parent()
.next()
.invoke('attr', 'data-annotation-level')
.should('eq', '1') // highlighted text should stay light blue

// ---- unselect the first variant item -----
.get(selectors.list)
.children()
.eq(0)
.click()
.should('not.have.class', 'active')
.get('div#MD12675N1l4l2l6l4l40')
.find('span.witnesses')
.children()
.should('have.length', 1) .contains('Ming. syr. 258') // remove 'DFM-614' witness
.parent()
.next()
.invoke('attr', 'data-annotation-level')
.should('eq', '1') // highlighted text should stay light blue (we still have one witness)

// --- unselect the second variant item
.get(selectors.list)
.children()
.eq(1)
.click()
.get('div#MD12675N1l4l2l6l4l40')
.find('span.witnesses')
.should('be.empty') // remove the last remaining witness
.next()
.invoke('attr', 'data-annotation-level')
.should('eq', '0') // highlighted text becomes grey

})
})
});
11 changes: 11 additions & 0 deletions tests/cypress/support/globals.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,15 @@ export default {
},
ahiqarApiBaseUrl: 'http://localhost:8181/ahiqar',
gflApiBaseUrl: 'http://localhost:8181/gfl',
ahiqarSelectors: {
list: '.panels-wrapper > .panel:nth-child(4) div[role="tablist"] .annotations-list',
listItem: '.panels-wrapper > .panel:nth-child(4) [role="tablist"] .annotations-list .item',
listOfSecondTab: '.panels-wrapper > .panel:nth-child(4) [role="tabpanel"]:nth-child(2) .annotations-list',
tab: '.panels-wrapper > .panel:nth-child(4) [role="tablist"] [data-pc-section="nav"] [data-pc-name="tabpanel"]',
text: '.panels-wrapper > .panel:nth-child(3) #text-content',
annotationPanelActionCheckbox: '.panel-header .actions > div:first-child #panel-check-action',
},
gflSelectors: {
listItem: '.panels-wrapper > .panel:nth-child(3) [role="tablist"] .annotations-list .item',
}
};
Loading