From 67aee62ed51cdbea95c3115b6ae762b6ca08734e Mon Sep 17 00:00:00 2001 From: malkja Date: Tue, 1 Oct 2024 18:15:27 +0200 Subject: [PATCH 1/5] test: add tests of single select mode for the variants feature --- tests/cypress/e2e/variants.cy.js | 72 ++++++++++++++++++++++++++++++-- 1 file changed, 69 insertions(+), 3 deletions(-) diff --git a/tests/cypress/e2e/variants.cy.js b/tests/cypress/e2e/variants.cy.js index a438f6be..807ec0fa 100644 --- a/tests/cypress/e2e/variants.cy.js +++ b/tests/cypress/e2e/variants.cy.js @@ -18,7 +18,6 @@ const selectors = { }) Cypress.Commands.add('clickTarget', () => { - // click witness of the drop down having button named 'buttonName' cy .get('div#text-content div#MD12675N1l4l2l6l4l42') .children() @@ -33,7 +32,29 @@ const selectors = { .contains('p',description).parent() }) - + Cypress.Commands.add('clickSingleSelectButton', () => { + + cy + .get('.panels-wrapper .panel:nth-child(4)') + .find('.panel-header') + .find('.actions') + .children().eq(2) + .find('input[type="checkbox"]') + .click() + }) + + Cypress.Commands.add('checkNoAnnotationsAvailable', () => { + cy + .get('.panels-wrapper .panel:nth-child(4) .panel-body') + .find('div[id="pv_id_6_2_content"]') + .children().eq(0) + .children().eq(1) // annotation content + .children().eq(0).should('not.have.class', 'annotations-list') + .find('span').contains('No Annotations available') + }) + + + describe('VariantsAnnotation', () => { @@ -205,7 +226,7 @@ const selectors = { describe('Highlighted Text selection', () => { it('should click at a highlighted text, show its witnesses and select all related variant items in variants tab', () => { - cy + cy // click at one target .clickTarget() @@ -262,4 +283,49 @@ const selectors = { }) }) + + describe('Single select mode', () => { + + it('when in single select mode, after clicking at one target then its variant items should be shown as selected, \ + after unclicking the target then the variant items should not be shown', () => { + + // in NOT single select mode we have 11 variant items shown + cy + .get(selectors.list) + .should('be.visible') + .children() + .should("have.length", 11) + + .clickSingleSelectButton() + .should('have.attr', 'value', 'true') // we are in single select mode + .then(() => { + cy.checkNoAnnotationsAvailable() // check that the variant items are removed the list + + cy.clickTarget() + // The variant items of this target should be shown in the annotations tab as selected + cy.get('.panels-wrapper .panel:nth-child(4) .panel-body div#pv_id_6_2_content') + .find('.annotations-list') + .children().should('have.length', 4) + .each(($li) => { + expect($li).to.have.class('active') + }) + // unclick the target + cy + .get('div#text-content div#MD12675N1l4l2l6l4l42') + .children() + .eq(2) // target becomes the third child element, since 'witnesses' span was added in the text + .click() + // we expect the selected annotations to be hidden from the tab + cy.checkNoAnnotationsAvailable() + } + ) + + .clickSingleSelectButton() // turn off the single select mode + cy + .get(selectors.list) + .should('be.visible') + .children() + .should("have.length", 11) // we have 11 variant items as in the normal mode - no single select mode + }) + }) }); \ No newline at end of file From 623c81207f6dd4223a515375ff9adea04a8b102d Mon Sep 17 00:00:00 2001 From: malkja Date: Wed, 2 Oct 2024 14:44:20 +0200 Subject: [PATCH 2/5] refactor: remove temporarily the 'witness details' and 'variants details' buttons --- .../annotations/variants/VariantsTopBar.vue | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/components/annotations/variants/VariantsTopBar.vue b/src/components/annotations/variants/VariantsTopBar.vue index 55ba7c96..6704ed73 100644 --- a/src/components/annotations/variants/VariantsTopBar.vue +++ b/src/components/annotations/variants/VariantsTopBar.vue @@ -67,27 +67,9 @@ function toggleWitness(witness: Witness, isActive: boolean) { -
{{ Object.keys(annotationsStore.activeAnnotations).length }} Variants selected -
Date: Wed, 2 Oct 2024 14:59:08 +0200 Subject: [PATCH 3/5] refactor: separate the single select mode test into multiple small tests --- tests/cypress/e2e/variants.cy.js | 79 +++++++++++++++++++------------- 1 file changed, 47 insertions(+), 32 deletions(-) diff --git a/tests/cypress/e2e/variants.cy.js b/tests/cypress/e2e/variants.cy.js index 807ec0fa..7c6ef45c 100644 --- a/tests/cypress/e2e/variants.cy.js +++ b/tests/cypress/e2e/variants.cy.js @@ -202,6 +202,8 @@ const selectors = { .should('eq', 'http://ahikar.uni-goettingen.de/ns/annotations/3r14z/annotation-variants-t_Brit_Mus_Add_7209_N1l5l3l5l5l29l4_w_3_0') }) + /* + Commented out this test, since we hide the witnesses details dialog box it('Should show a dialog box containing a list of a witnesses and a description of them', () => { // the witnesses are the unique set of the ones which appear in the variants list cy @@ -222,6 +224,7 @@ const selectors = { .checkTextInWitnessItemDescription('Ming. syr. 258', 'test') .checkTextInWitnessItemDescription('Sach. 339', 'test') }) + */ }) describe('Highlighted Text selection', () => { @@ -286,30 +289,36 @@ const selectors = { describe('Single select mode', () => { - it('when in single select mode, after clicking at one target then its variant items should be shown as selected, \ - after unclicking the target then the variant items should not be shown', () => { - - // in NOT single select mode we have 11 variant items shown - cy - .get(selectors.list) - .should('be.visible') - .children() - .should("have.length", 11) - - .clickSingleSelectButton() - .should('have.attr', 'value', 'true') // we are in single select mode - .then(() => { - cy.checkNoAnnotationsAvailable() // check that the variant items are removed the list + it('should hide the variant items when single select mode is on', () => { + cy.wait(500).then(() => { + // we wait till the text panel and annotations panel are fully loaded + cy + .clickSingleSelectButton().then(() => { + cy.checkNoAnnotationsAvailable() + }) + }) + }) + it('should show variant items of the target as selected when clicking the target in single select mode', () => { + cy.wait(500).then(() => { + cy + .clickSingleSelectButton().then(() => { + cy.clickTarget() + cy.get('.panels-wrapper .panel:nth-child(4) .panel-body div#pv_id_6_2_content') + .find('.annotations-list') + .children().should('have.length', 4) + .each(($li) => { + expect($li).to.have.class('active') + }) + }) + }) + }) + + it('should hide the selected variant items after unclicking the target in single select mode', () => { + cy.wait(500).then(() => { + cy.clickSingleSelectButton() cy.clickTarget() - // The variant items of this target should be shown in the annotations tab as selected - cy.get('.panels-wrapper .panel:nth-child(4) .panel-body div#pv_id_6_2_content') - .find('.annotations-list') - .children().should('have.length', 4) - .each(($li) => { - expect($li).to.have.class('active') - }) - // unclick the target + // below we unclick the target cy .get('div#text-content div#MD12675N1l4l2l6l4l42') .children() @@ -317,15 +326,21 @@ const selectors = { .click() // we expect the selected annotations to be hidden from the tab cy.checkNoAnnotationsAvailable() - } - ) - - .clickSingleSelectButton() // turn off the single select mode - cy - .get(selectors.list) - .should('be.visible') - .children() - .should("have.length", 11) // we have 11 variant items as in the normal mode - no single select mode - }) + }) + }) + + it('should show again all the variant item when we switch off the single select mode', () => { + cy.wait(500).then(() => { + cy + .clickSingleSelectButton() // set the single select mode + cy + .clickSingleSelectButton() // switch off the single select mode + cy + .get(selectors.list) + .should('be.visible') + .children() + .should("have.length", 11) // we have 11 variant items as in the normal mode - no single select mode + }) + }) }) }); \ No newline at end of file From 8ab9189f9ecb6e48faa922c75c18e0a40ee93ed2 Mon Sep 17 00:00:00 2001 From: malkja Date: Wed, 2 Oct 2024 15:36:30 +0200 Subject: [PATCH 4/5] refactor: rewrite the class name of 'selected' state --- .../annotations/variants/VariantsTopBar.vue | 1 - tests/cypress/e2e/variants.cy.js | 21 ++++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/annotations/variants/VariantsTopBar.vue b/src/components/annotations/variants/VariantsTopBar.vue index 6704ed73..01779b49 100644 --- a/src/components/annotations/variants/VariantsTopBar.vue +++ b/src/components/annotations/variants/VariantsTopBar.vue @@ -4,7 +4,6 @@ import {computed, reactive, ref, watch} from "vue"; import colors from "tailwindcss/colors"; import BaseDialog from "@/components/base/BaseDialog.vue"; import ActiveVariantsDetails from "@/components/annotations/variants/ActiveVariantsDetails.vue"; -import BaseButton from "@/components/base/BaseButton.vue"; import WitnessesDetails from "@/components/annotations/variants/WitnessesDetails.vue"; import BaseDropdown from "@/components/base/BaseDropdown.vue"; import BaseCheckbox from "@/components/base/BaseCheckbox.vue"; diff --git a/tests/cypress/e2e/variants.cy.js b/tests/cypress/e2e/variants.cy.js index 7c6ef45c..13ce9eef 100644 --- a/tests/cypress/e2e/variants.cy.js +++ b/tests/cypress/e2e/variants.cy.js @@ -247,17 +247,17 @@ const selectors = { .get(selectors.list) .children() .eq(2) - .should('not.have.class', 't-bg-gray-300') + .should('not.have.class', 'active') .next() - .should('have.class', 't-bg-gray-300') + .should('have.class', 'active') .next() - .should('have.class', 't-bg-gray-300') + .should('have.class', 'active') .next() - .should('have.class', 't-bg-gray-300') + .should('have.class', 'active') .next() - .should('have.class', 't-bg-gray-300') + .should('have.class', 'active') .next() - .should('not.have.class', 't-bg-gray-300') + .should('not.have.class', 'active') }) // @@ -276,13 +276,13 @@ const selectors = { .get(selectors.list) .children() .eq(3) - .should('not.have.class', 't-bg-gray-300') + .should('not.have.class', 'active') .next() - .should('not.have.class', 't-bg-gray-300') + .should('not.have.class', 'active') .next() - .should('not.have.class', 't-bg-gray-300') + .should('not.have.class', 'active') .next() - .should('not.have.class', 't-bg-gray-300') + .should('not.have.class', 'active') }) }) @@ -300,6 +300,7 @@ const selectors = { }) it('should show variant items of the target as selected when clicking the target in single select mode', () => { + cy.wait(500).then(() => { cy .clickSingleSelectButton().then(() => { From 2b5b2ed31352d1d2599ecb9bd46fce29557b90f0 Mon Sep 17 00:00:00 2001 From: malkja Date: Wed, 2 Oct 2024 16:20:07 +0200 Subject: [PATCH 5/5] test: before each test we wait till the text panel and annotations content is loaded --- tests/cypress/e2e/variants.cy.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/tests/cypress/e2e/variants.cy.js b/tests/cypress/e2e/variants.cy.js index 13ce9eef..e505cb31 100644 --- a/tests/cypress/e2e/variants.cy.js +++ b/tests/cypress/e2e/variants.cy.js @@ -61,6 +61,10 @@ const selectors = { beforeEach(() => { cy .visit(`/ahiqar-arabic-karshuni-with-variants-local.html?tido=m20_i1_p0.0-1.0-2.0-3.2`) + .get('#text-content') + .should('be.visible') + .get(selectors.list) + .should('be.visible') }) describe('Variants items selection', () => { @@ -300,7 +304,7 @@ const selectors = { }) it('should show variant items of the target as selected when clicking the target in single select mode', () => { - + cy.wait(500).then(() => { cy .clickSingleSelectButton().then(() => {