From c94969fec2efd6aee625c17ed71ad44a708aa0c0 Mon Sep 17 00:00:00 2001 From: Pavitra Khatri Date: Mon, 2 Dec 2024 12:05:56 +0530 Subject: [PATCH] Add stepped class in wizard/tabs --- .../form/tabsontop/v1/tabsontop/README.md | 1 + .../v1/tabsontop/clientlibs/site/js/tabs.js | 4 ++ .../verticaltabs/v1/verticaltabs/README.md | 1 + .../clientlibs/site/js/verticaltabs.js | 4 ++ .../form/wizard/v1/wizard/README.md | 4 +- .../v1/wizard/clientlibs/commons/js/common.js | 6 ++- .../wizard/clientlibs/site/js/wizardview.js | 49 +++++++++++++++++++ ui.frontend/src/view/FormTabs.js | 28 +++++++++++ .../specs/tabsontop/tabsontop.runtime.cy.js | 3 ++ .../tabsontop.runtime.repeatability.cy.js | 36 ++++++++++++++ .../verticaltabs/verticaltabs.runtime.cy.js | 2 + .../verticaltabs.runtime.repeatability.cy.js | 36 ++++++++++++++ .../specs/wizard/wizard.runtime.cy.js | 6 +++ .../wizard/wizard.runtime.repeatability.cy.js | 37 ++++++++++++++ 14 files changed, 215 insertions(+), 2 deletions(-) diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md index 34f4f2afc0..95c3bffba8 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/README.md @@ -50,6 +50,7 @@ BLOCK cmp-tabs ELEMENT cmp-tabs__tablist ELEMENT cmp-tabs__tab MOD cmp-tabs__tab--active + MOD cmp-tabs__tab--stepped ELEMENT cmp-tabs__title ELEMENT cmp-tabs__icon ELEMENT cmp-tabs__label diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js index 4dd738e70b..1489af4264 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/clientlibs/site/js/tabs.js @@ -27,6 +27,10 @@ tab: "cmp-tabs__tab--active", tabpanel: "cmp-tabs__tabpanel--active" }, + stepped: { + tab: "cmp-tabs__tab--stepped", + tabpanel: "cmp-tabs__tabpanel--stepped" + }, label: `.${Tabs.bemBlock}__label`, description: `.${Tabs.bemBlock}__longdescription`, qm: `.${Tabs.bemBlock}__questionmark`, diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md index d616724e0c..8a5f4638b9 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/README.md @@ -48,6 +48,7 @@ BLOCK cmp-verticaltabs ELEMENT cmp-verticaltabs__label-container ELEMENT cmp-verticaltabs__tab MOD cmp-verticaltabs__tab--active + MOD cmp-verticaltabs__tab--stepped ELEMENT cmp-verticaltabs__title ELEMENT cmp-verticaltabs__icon ELEMENT cmp-verticaltabs__label diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js index 69667ae682..5e0e654d42 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/clientlibs/site/js/verticaltabs.js @@ -27,6 +27,10 @@ tab: "cmp-verticaltabs__tab--active", tabpanel: "cmp-verticaltabs__tabpanel--active" }, + stepped: { + tab: "cmp-verticaltabs__tab--stepped", + tabpanel: "cmp-verticaltabs__tabpanel--stepped" + }, label: `.${VerticalTabs.bemBlock}__label`, description: `.${VerticalTabs.bemBlock}__longdescription`, qm: `.${VerticalTabs.bemBlock}__questionmark`, diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md index 19aa9653be..748e9ea4b4 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md @@ -46,8 +46,10 @@ It is already included by its edit and policy dialogs. ``` BLOCK cmp-adaptiveform-wizard ELEMENT cmp-adaptiveform-wizard__label - ELEMENT cmp-adaptiveform-wizard__label-container + ELEMENT cmp-adaptiveform-wizard__label-container ELEMENT cmp-adaptiveform-wizard__tab + MOD cmp-adaptiveform-wizard__tab--active + MOD cmp-adaptiveform-wizard__tab--stepped ELEMENT cmp-adaptiveform-wizard__wizardpanel ELEMENT cmp-adaptiveform-wizard__previousNav ELEMENT cmp-adaptiveform-wizard__nextNav diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js index 419285efb7..9bae30ad8a 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js @@ -29,7 +29,11 @@ active: { tab: "cmp-adaptiveform-wizard__tab--active", wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--active" - } + }, + stepped: { + tab: "cmp-adaptiveform-wizard__tab--stepped", + wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--stepped", + } }; _active; diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js index 71f22f814e..6d5594f4de 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js @@ -41,6 +41,10 @@ tab: "cmp-adaptiveform-wizard__tab--active", wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--active" }, + stepped: { + tab: "cmp-adaptiveform-wizard__tab--stepped", + wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--stepped", + }, label: `.${Wizard.bemBlock}__label`, description: `.${Wizard.bemBlock}__longdescription`, qm: `.${Wizard.bemBlock}__questionmark`, @@ -332,6 +336,30 @@ this.focusWithoutScroll(this.getCachedTabs()[index]); } + navigate(index) { + this._active = index; + this.#addSteppedClass(); + this.refreshActive(); + } + + #addSteppedClass() { + const tabs = this.getCachedTabs(); + const wizardPanels = this.getCachedWizardPanels(); + const activeChildId = this.#getActiveWizardTabId(tabs) + const activeTab = this.#getTabNavElementById(activeChildId); + if (activeTab.classList.contains(Wizard.selectors.active.tab)) { + activeTab.classList.add(Wizard.selectors.stepped.tab); + + const correspondingPanel = Array.from(wizardPanels).find(panel => + panel.getAttribute("aria-labelledby") === activeTab.id + ); + + if (correspondingPanel) { + correspondingPanel.classList.add(Wizard.selectors.stepped.wizardpanel); + } + } + } + #syncWizardNavLabels() { const tabs = this.getCachedTabs(); const wizardPanels = this.getCachedWizardPanels(); @@ -388,6 +416,14 @@ this.cacheElements(this._elements.self); let repeatedWizardPanel = this.#getWizardPanelElementById(childView.id + Wizard.#wizardPanelIdSuffix); repeatedWizardPanel.setAttribute("aria-labelledby", childView.id + Wizard.#tabIdSuffix); + const steppedTabClass = Array.from(navigationTabToBeRepeated.classList).find(cls => cls.includes('--stepped')); + if (steppedTabClass) { + navigationTabToBeRepeated.classList.remove(steppedTabClass); + } + const steppedWizardPanelClass = Array.from(repeatedWizardPanel.classList).find(cls => cls.includes('--stepped')); + if (steppedWizardPanelClass) { + repeatedWizardPanel.classList.remove(steppedWizardPanelClass); + } this.refreshActive(); this.#getTabIndexById(); if (childView.getInstanceManager().getModel().minOccur != undefined && childView.getInstanceManager().children.length > childView.getInstanceManager().getModel().minOccur) { @@ -490,6 +526,19 @@ return -1; } + #getActiveWizardTabId(tabs) { + if (tabs) { + var result = tabs[0].id; + for (var i = 0; i < tabs.length; i++) { + if (tabs[i].classList.contains(Wizard.selectors.active.tab)) { + result = tabs[i].id; + break; + } + } + return result; + } + } + #getBeforeViewElement(instanceManager, instanceIndex) { let result = {}; let instanceManagerId = instanceManager.getId(); diff --git a/ui.frontend/src/view/FormTabs.js b/ui.frontend/src/view/FormTabs.js index e432c30ca4..462d87d8e8 100644 --- a/ui.frontend/src/view/FormTabs.js +++ b/ui.frontend/src/view/FormTabs.js @@ -286,9 +286,29 @@ class FormTabs extends FormPanel { */ navigate(tabId) { this.#_active = tabId; + this.addSteppedClass(tabId); this.#refreshActive(); } + + addSteppedClass(tabId) { + var tabs = this.#getCachedTabs(); + var tabpanels= this.#getCachedTabPanels(); + const activeTabId = this.getActiveTabId(tabs); + const activeTabElement = this.#getTabNavElementById(activeTabId); + if (activeTabElement.classList.contains(this.#_selectors.active.tab)) { + activeTabElement.classList.add(this.#_selectors.stepped.tab); + + const correspondingPanel = Array.from(tabpanels).find(panel => + panel.getAttribute("aria-labelledby") === activeTabElement.id + ); + + if (correspondingPanel) { + correspondingPanel.classList.add(this.#_selectors.stepped.tabpanel); + } + } + } + /** * Returns the id of the active tab, if no tab is active returns 0th element id * @@ -384,6 +404,14 @@ class FormTabs extends FormPanel { this.#cacheElements(this._elements.self); var repeatedTabPanel = this.#getTabPanelElementById(childView.id + this.#tabPanelIdSuffix); repeatedTabPanel.setAttribute("aria-labelledby", childView.id + this.#tabIdSuffix); + const steppedTabClass = Array.from(navigationTabToBeRepeated.classList).find(cls => cls.includes('--stepped')); + if (steppedTabClass) { + navigationTabToBeRepeated.classList.remove(steppedTabClass); + } + const steppedTabpanelClass = Array.from(repeatedTabPanel.classList).find(cls => cls.includes('--stepped')); + if (steppedTabpanelClass) { + repeatedTabPanel.classList.remove(steppedTabpanelClass); + } this.#bindEventsToTab(navigationTabToBeRepeated.id); this.#refreshActive(); if (childView.getInstanceManager().getModel().minOccur != undefined && childView.getInstanceManager().children.length > childView.getInstanceManager().getModel().minOccur) { diff --git a/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js index e47f9aa364..94634c0248 100644 --- a/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js +++ b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js @@ -90,10 +90,13 @@ describe("Form with Panel Container", () => { tab2().should('have.class', 'cmp-tabs__tab--active'); tab2().should('have.attr', 'aria-selected', 'true'); tab1().should('have.attr', 'aria-selected', 'false'); + tab1().should('have.class', 'cmp-tabs__tab--stepped'); tab1().click(); tab1().should('have.class', 'cmp-tabs__tab--active'); + tab1().should('have.class', 'cmp-tabs__tab--stepped'); tab1().should('have.attr', 'aria-selected', 'true'); tab2().should('have.attr', 'aria-selected', 'false'); + tab2().should('have.class', 'cmp-tabs__tab--stepped'); }); it("switch tab in runtime using keyboard", () => { diff --git a/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.repeatability.cy.js b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.repeatability.cy.js index 68b9332bfa..0e0becc251 100644 --- a/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.repeatability.cy.js +++ b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.repeatability.cy.js @@ -145,4 +145,40 @@ describe("Form with TabsOnTop Container", () => { }) }); + it("After clicking on every tab, if tab-1 is repeated, the repeated instance should not have stepped class", () => { + getTabs().should('have.length', 4); + getTabPanels().should('have.length', 4); + getTabAtIndex(0).should('have.class', 'cmp-tabs__tab--active'); + getTabPanelAtIndex(0).should('have.class', 'cmp-tabs__tabpanel--active'); + getTabAtIndex(1).click(); + getTabAtIndex(1).should('have.class', 'cmp-tabs__tab--active'); + getTabPanelAtIndex(1).should('have.class', 'cmp-tabs__tabpanel--active'); + getTabAtIndex(0).should('have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(0).should('have.class', 'cmp-tabs__tabpanel--stepped'); + getTabAtIndex(2).click(); + getTabAtIndex(2).should('have.class', 'cmp-tabs__tab--active'); + getTabPanelAtIndex(2).should('have.class', 'cmp-tabs__tabpanel--active'); + getTabAtIndex(1).should('have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(1).should('have.class', 'cmp-tabs__tabpanel--stepped'); + getTabAtIndex(0).should('have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(0).should('have.class', 'cmp-tabs__tabpanel--stepped'); + getTabAtIndex(3).click(); + getTabAtIndex(3).should('have.class', 'cmp-tabs__tab--active'); + getTabPanelAtIndex(3).should('have.class', 'cmp-tabs__tabpanel--active'); + getTabAtIndex(2).should('have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(2).should('have.class', 'cmp-tabs__tabpanel--stepped'); + getTabAtIndex(1).should('have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(1).should('have.class', 'cmp-tabs__tabpanel--stepped'); + getTabAtIndex(0).should('have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(0).should('have.class', 'cmp-tabs__tabpanel--stepped'); + cy.get("button").contains("+R1").click().then(() => { + getTabs().should('have.length', 5); + getTabPanels().should('have.length', 5); + getTabAtIndex(1).should('have.class', 'cmp-tabs__tab--active'); + getTabAtIndex(1).should('not.have.class', 'cmp-tabs__tab--stepped'); + getTabPanelAtIndex(1).should('have.class', 'cmp-tabs__tabpanel--active'); + getTabPanelAtIndex(1).should('not.have.class', 'cmp-tabs__tabpanel--stepped'); + }) + }) + }) diff --git a/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js b/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js index 860105eca4..e1c422bcc0 100644 --- a/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js +++ b/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.cy.js @@ -90,8 +90,10 @@ tab2().should('have.class','cmp-verticaltabs__tab--active'); tab2().should('have.attr','aria-selected','true'); tab1().should('have.attr','aria-selected','false'); + tab1().should('have.class','cmp-verticaltabs__tab--stepped'); tab1().click(); tab1().should('have.class','cmp-verticaltabs__tab--active'); + tab1().should('have.class','cmp-verticaltabs__tab--stepped'); tab1().should('have.attr','aria-selected','true'); tab2().should('have.attr','aria-selected','false'); }); diff --git a/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.repeatability.cy.js b/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.repeatability.cy.js index f8d0d04158..ac33bcc5a1 100644 --- a/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.repeatability.cy.js +++ b/ui.tests/test-module/specs/verticaltabs/verticaltabs.runtime.repeatability.cy.js @@ -130,5 +130,41 @@ describe("Form with VerticalTabs Container", () => { }) }) + it("After clicking on every tab, if tab-1 is repeated, the repeated instance should not have stepped class", () => { + getTabs().should('have.length', 4); + getTabPanels().should('have.length', 4); + getTabAtIndex(0).should('have.class', 'cmp-verticaltabs__tab--active'); + getTabPanelAtIndex(0).should('have.class', 'cmp-verticaltabs__tabpanel--active'); + getTabAtIndex(1).click(); + getTabAtIndex(1).should('have.class', 'cmp-verticaltabs__tab--active'); + getTabPanelAtIndex(1).should('have.class', 'cmp-verticaltabs__tabpanel--active'); + getTabAtIndex(0).should('have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(0).should('have.class', 'cmp-verticaltabs__tabpanel--stepped'); + getTabAtIndex(2).click(); + getTabAtIndex(2).should('have.class', 'cmp-verticaltabs__tab--active'); + getTabPanelAtIndex(2).should('have.class', 'cmp-verticaltabs__tabpanel--active'); + getTabAtIndex(1).should('have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(1).should('have.class', 'cmp-verticaltabs__tabpanel--stepped'); + getTabAtIndex(0).should('have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(0).should('have.class', 'cmp-verticaltabs__tabpanel--stepped'); + getTabAtIndex(3).click(); + getTabAtIndex(3).should('have.class', 'cmp-verticaltabs__tab--active'); + getTabPanelAtIndex(3).should('have.class', 'cmp-verticaltabs__tabpanel--active'); + getTabAtIndex(2).should('have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(2).should('have.class', 'cmp-verticaltabs__tabpanel--stepped'); + getTabAtIndex(1).should('have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(1).should('have.class', 'cmp-verticaltabs__tabpanel--stepped'); + getTabAtIndex(0).should('have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(0).should('have.class', 'cmp-verticaltabs__tabpanel--stepped'); + cy.get("button").contains("+R1").click().then(() => { + getTabs().should('have.length', 5); + getTabPanels().should('have.length', 5); + getTabAtIndex(1).should('have.class', 'cmp-verticaltabs__tab--active'); + getTabAtIndex(1).should('not.have.class', 'cmp-verticaltabs__tab--stepped'); + getTabPanelAtIndex(1).should('have.class', 'cmp-verticaltabs__tabpanel--active'); + getTabPanelAtIndex(1).should('not.have.class', 'cmp-verticaltabs__tabpanel--stepped'); + }) + }) + }) diff --git a/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js b/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js index f8d003c23b..7d75be997b 100644 --- a/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js +++ b/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js @@ -54,17 +54,21 @@ describe("Form with Wizard Layout Container", () => { cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true}); cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('not.have.class', 'cmp-adaptiveform-wizard__tab--active'); + cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); cy.get(".cmp-adaptiveform-wizard__tab").eq(1).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('not.have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true}); cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('not.have.class', 'cmp-adaptiveform-wizard__tab--active'); + cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); cy.get(".cmp-adaptiveform-wizard__tab").eq(1).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('not.have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); cy.expectNoConsoleErrors(); }); @@ -90,9 +94,11 @@ describe("Form with Wizard Layout Container", () => { cy.get(".cmp-adaptiveform-wizard__nav--previous").click({force: true}); cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); + cy.get(".cmp-adaptiveform-wizard__tab").eq(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); cy.get(".cmp-adaptiveform-wizard__tab").eq(1).should('not.have.class', 'cmp-adaptiveform-wizard__tab--active'); cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); cy.get(".cmp-adaptiveform-wizard__wizardpanel").eq(1).should('not.have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); cy.expectNoConsoleErrors(); }); diff --git a/ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js b/ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js index f749a1829b..6f03946a2f 100644 --- a/ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js +++ b/ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js @@ -151,6 +151,43 @@ describe("Form with Wizard Container", () => { getWizardPanels().should('have.length', 6); }) }); + + it("After clicking on every tab, if tab-1 is repeated, the repeated instance should not have stepped class", () => { + getTabs().should('have.length', 4); + getWizardPanels().should('have.length', 4); + getTabAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); + getWizardPanelAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true}); + getTabAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); + getWizardPanelAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + getTabAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true}); + getTabAtIndex(2).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); + getWizardPanelAtIndex(2).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + getTabAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + getTabAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + cy.get(".cmp-adaptiveform-wizard__nav--next").click({force: true}); + getTabAtIndex(3).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); + getWizardPanelAtIndex(3).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + getTabAtIndex(2).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(2).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + getTabAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + getTabAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(0).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + cy.get("button").contains("+R1").click().then(() => { + getTabs().should('have.length', 5); + getWizardPanels().should('have.length', 5); + getTabAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__tab--active'); + getWizardPanelAtIndex(1).should('have.class', 'cmp-adaptiveform-wizard__wizardpanel--active'); + getTabAtIndex(1).should('not.have.class', 'cmp-adaptiveform-wizard__tab--stepped'); + getWizardPanelAtIndex(1).should('not.have.class', 'cmp-adaptiveform-wizard__wizardpanel--stepped'); + }) + cy.expectNoConsoleErrors(); + }) }) describe('visibility of navigation buttons', function () {