-
Notifications
You must be signed in to change notification settings - Fork 395
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' into feature/CXSPA-9028
- Loading branch information
Showing
13 changed files
with
358 additions
and
13 deletions.
There are no files selected for viewing
15 changes: 11 additions & 4 deletions
15
feature-libs/user/account/components/login/login.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 49 additions & 0 deletions
49
...refrontapp-e2e-cypress/cypress/e2e/regression/user_access/navigation-login-a11y.e2e.cy.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| /* | ||
| * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com> | ||
| * SPDX-FileCopyrightText: 2025 SAP Spartacus team <spartacus-team@sap.com> | ||
| * | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| */ | ||
|
|
||
| import * as login from '../../../helpers/login'; | ||
| import { viewportContext } from '../../../helpers/viewport-context'; | ||
|
|
||
| function assertNavigationButtonsAttributes(buttonsSelector: string) { | ||
| cy.get(buttonsSelector).each(($btn) => { | ||
| const btnAriaControl = $btn.attr('aria-controls'); | ||
| cy.wrap($btn) | ||
| .should('have.attr', 'title', `${btnAriaControl} Menu`) | ||
| .should('have.attr', 'aria-label', btnAriaControl); | ||
| }); | ||
| } | ||
|
|
||
| describe('Navigation Login', () => { | ||
| let user; | ||
| viewportContext(['desktop'], () => { | ||
| before(() => { | ||
| cy.visit('/login'); | ||
| user = login.registerUserFromLoginPage(); | ||
| }); | ||
|
|
||
| it('should login and logout successfully and have correct Navigation Menu buttons values', () => { | ||
| login.loginUser(); | ||
|
|
||
| const tokenRevocationRequestAlias = | ||
| login.listenForTokenRevocationRequest(); | ||
|
|
||
| cy.get('cx-login button') | ||
| .as('myAccountBtn') | ||
| .invoke('attr', 'ariaLabel') | ||
| .contains(`Hi, ${user.firstName} ${user.lastName}`); | ||
|
|
||
| const mainCategoryMenuBrandsRootBtnSelector = | ||
| 'cx-category-navigation button[aria-controls]'; | ||
| assertNavigationButtonsAttributes(mainCategoryMenuBrandsRootBtnSelector); | ||
|
|
||
| login.signOutUser(); | ||
| cy.wait(tokenRevocationRequestAlias); | ||
| cy.get('@myAccountBtn').should('not.exist'); | ||
| assertNavigationButtonsAttributes(mainCategoryMenuBrandsRootBtnSelector); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
projects/storefrontlib/layout/a11y/on-dom-change/dom-change.directive.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import { Component, ElementRef } from '@angular/core'; | ||
| import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; | ||
| import { By } from '@angular/platform-browser'; | ||
| import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; | ||
| import { DomChangeDirective } from './dom-change.directive'; | ||
|
|
||
| @Component({ | ||
| template: ` | ||
| <div id="testElement" cxDomChange> | ||
| <div class="targetElement"></div> | ||
| </div> | ||
| `, | ||
| }) | ||
| class TestHostComponent {} | ||
|
|
||
| describe('DomChangeDirective', () => { | ||
| // let component: TestHostComponent; | ||
| let fixture: ComponentFixture<TestHostComponent>; | ||
| let testElement: ElementRef; | ||
|
|
||
| beforeEach(waitForAsync(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [TestHostComponent, DomChangeDirective], | ||
| imports: [BrowserAnimationsModule], | ||
| }).compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(TestHostComponent); | ||
|
|
||
| testElement = fixture.debugElement.query(By.directive(DomChangeDirective)); | ||
| })); | ||
|
|
||
| it('should emit when a child element is added', (done) => { | ||
| const directive = fixture.debugElement | ||
| .query(By.directive(DomChangeDirective)) | ||
| .injector.get(DomChangeDirective); | ||
| const newElement = document.createElement('div'); | ||
|
|
||
| directive.cxDomChange.subscribe((mutation: MutationRecord) => { | ||
| expect(mutation.type).toBe('childList'); | ||
| done(); | ||
| }); | ||
|
|
||
| // Set DOM | ||
| testElement.nativeElement.appendChild(newElement); | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should emit when a child element is removed', (done) => { | ||
| const directive = fixture.debugElement | ||
| .query(By.directive(DomChangeDirective)) | ||
| .injector.get(DomChangeDirective); | ||
| const childElement = | ||
| testElement.nativeElement.querySelector('.targetElement'); | ||
|
|
||
| directive.cxDomChange.subscribe((mutation: MutationRecord) => { | ||
| expect(mutation.type).toBe('childList'); | ||
| done(); | ||
| }); | ||
|
|
||
| // Set DOM | ||
| testElement.nativeElement.removeChild(childElement); | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should filter mutations based on the target selector', (done) => { | ||
| const directive = fixture.debugElement | ||
| .query(By.directive(DomChangeDirective)) | ||
| .injector.get(DomChangeDirective); | ||
| directive.cxDomChangeTargetSelector = '.targetElement'; | ||
|
|
||
| directive.cxDomChange.subscribe((mutation: MutationRecord) => { | ||
| expect(mutation.target).toHaveClass('targetElement'); | ||
| done(); | ||
| }); | ||
|
|
||
| // Set DOM | ||
| const targetElement = | ||
| testElement.nativeElement.querySelector('.targetElement'); | ||
| targetElement.appendChild(document.createTextNode('Test Text')); | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should not emit when mutations do not match target selector', () => { | ||
| let called = false; | ||
| const directive = fixture.debugElement | ||
| .query(By.directive(DomChangeDirective)) | ||
| .injector.get(DomChangeDirective); | ||
| directive.cxDomChangeTargetSelector = '.non-matching-selector'; | ||
|
|
||
| directive.cxDomChange.subscribe(() => { | ||
| called = true; | ||
| }); | ||
|
|
||
| // Set DOM | ||
| const newElement = document.createElement('div'); | ||
| testElement.nativeElement.appendChild(newElement); | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(called).toBe(false); | ||
| }); | ||
| }); |
Oops, something went wrong.