diff --git a/examples/ahiqar-arabic-karshuni-with-variants-local.html b/examples/ahiqar-arabic-karshuni-with-variants-local.html
index fb2fc78d..a1328e70 100644
--- a/examples/ahiqar-arabic-karshuni-with-variants-local.html
+++ b/examples/ahiqar-arabic-karshuni-with-variants-local.html
@@ -1,13 +1,13 @@
-
- TIDO
-
+TIDO
-
+
-
+
+
+
-
-
-
+
-
+
+
+});
+
-
+
\ No newline at end of file
diff --git a/src/components/panels/Panel.vue b/src/components/panels/Panel.vue
index feaa6717..7052d66d 100644
--- a/src/components/panels/Panel.vue
+++ b/src/components/panels/Panel.vue
@@ -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);
@@ -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: {
@@ -359,7 +342,7 @@ export default {
},
events: eventsSingleSelectMode,
}];
-
+
tabs.value = [...tabs.value, {
component,
label,
diff --git a/tests/cypress/e2e/annotation.cy.js b/tests/cypress/e2e/annotation.cy.js
index 38aee8e0..93be9043 100644
--- a/tests/cypress/e2e/annotation.cy.js
+++ b/tests/cypress/e2e/annotation.cy.js
@@ -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,
diff --git a/tests/cypress/e2e/variants.cy.js b/tests/cypress/e2e/variants.cy.js
new file mode 100644
index 00000000..f3ac20c3
--- /dev/null
+++ b/tests/cypress/e2e/variants.cy.js
@@ -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
+
+ })
+ })
+ });
\ No newline at end of file
diff --git a/tests/cypress/support/globals.js b/tests/cypress/support/globals.js
index 1e9055ac..755d4d1e 100644
--- a/tests/cypress/support/globals.js
+++ b/tests/cypress/support/globals.js
@@ -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',
+ }
};