From d6a372098e14e12042377d002e1e02e86fe5f089 Mon Sep 17 00:00:00 2001 From: Maksim Ivanov Date: Wed, 31 Jan 2024 12:55:25 +0300 Subject: [PATCH] chore: add `tabs.cy.ts` (#6621) --- .../demo-cypress/src/support/component.ts | 9 +- .../src/tests/mobile-calendar.cy.ts | 2 +- projects/demo-cypress/src/tests/tabs.cy.ts | 85 +++++++++++++++ .../tabs/test/tabs.component.spec.ts | 101 ------------------ 4 files changed, 93 insertions(+), 104 deletions(-) create mode 100644 projects/demo-cypress/src/tests/tabs.cy.ts delete mode 100644 projects/kit/components/tabs/test/tabs.component.spec.ts diff --git a/projects/demo-cypress/src/support/component.ts b/projects/demo-cypress/src/support/component.ts index 37e404638e4b..2502e0a5305c 100644 --- a/projects/demo-cypress/src/support/component.ts +++ b/projects/demo-cypress/src/support/component.ts @@ -10,8 +10,13 @@ declare global { } export const stableMount: typeof mount = (...mountArgs) => - mount(...mountArgs).then(async mountResponse => - mountResponse.fixture.whenStable().then(() => mountResponse), + mount(...mountArgs).then(mountResponse => + cy + .get('body') + .find('tui-root') + .then(async () => + mountResponse.fixture.whenStable().then(() => mountResponse), + ), ); Cypress.Commands.add('mount', stableMount); diff --git a/projects/demo-cypress/src/tests/mobile-calendar.cy.ts b/projects/demo-cypress/src/tests/mobile-calendar.cy.ts index f13298f2dc09..73084901556c 100644 --- a/projects/demo-cypress/src/tests/mobile-calendar.cy.ts +++ b/projects/demo-cypress/src/tests/mobile-calendar.cy.ts @@ -124,7 +124,7 @@ describe('Mobile calendar', () => { ); }); - it('Year selection scrolls through months', () => { + it('year selection scrolls through months', () => { cy.mount(TestComponent, { imports: [TuiRootModule, TuiMobileCalendarModule], componentProperties: { diff --git a/projects/demo-cypress/src/tests/tabs.cy.ts b/projects/demo-cypress/src/tests/tabs.cy.ts new file mode 100644 index 000000000000..8fff3b76d6ea --- /dev/null +++ b/projects/demo-cypress/src/tests/tabs.cy.ts @@ -0,0 +1,85 @@ +import {Component} from '@angular/core'; +import {TuiRootModule} from '@taiga-ui/core'; +import {TuiTabsModule} from '@taiga-ui/kit'; + +describe('Tabs', () => { + let component: TestComponent; + + @Component({ + template: ` + + + + + + + + + `, + }) + class TestComponent { + activeItemIndex = 0; + } + + beforeEach(() => + cy + .mount(TestComponent, { + imports: [TuiRootModule, TuiTabsModule], + }) + .then(wrapper => { + component = wrapper.component; + }), + ); + + it('navigation by arrows works when going right', () => { + cy.get('button').eq(0).focus(); + cy.get('body').type('{rightArrow}'); + cy.get('button').eq(1).focused(); + }); + + it('navigation by arrows works when going left', () => { + cy.get('button').eq(1).focus(); + cy.get('body').type('{leftArrow}'); + cy.get('button').eq(0).focused(); + }); + + it('navigation by arrows skips disabled when going right', () => { + cy.get('button').eq(1).focus(); + cy.get('body').type('{rightArrow}'); + cy.get('button').eq(2).focused(); + }); + + it('navigation by arrows skips disabled when going left', () => { + cy.get('button').eq(3).focus(); + cy.get('body').type('{leftArrow}'); + cy.get('button').eq(1).focused(); + }); + + it('updates activeItemIndex', () => { + cy.get('button') + .eq(3) + .click() + .then(() => expect(component.activeItemIndex).to.equal(3)); + }); +}); diff --git a/projects/kit/components/tabs/test/tabs.component.spec.ts b/projects/kit/components/tabs/test/tabs.component.spec.ts deleted file mode 100644 index 6e78cbb09fae..000000000000 --- a/projects/kit/components/tabs/test/tabs.component.spec.ts +++ /dev/null @@ -1,101 +0,0 @@ -import {Component} from '@angular/core'; -import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {tuiIsNativeFocused} from '@taiga-ui/cdk'; -import {TuiTabsModule} from '@taiga-ui/kit'; -import {tuiDispatchOnActive} from '@taiga-ui/testing'; -import {NG_EVENT_PLUGINS} from '@tinkoff/ng-event-plugins'; - -// TODO: move to cypress component testing -xdescribe('Tabs', () => { - @Component({ - template: ` - - - - - - - `, - }) - class TestComponent { - activeItemIndex = 0; - } - - let fixture: ComponentFixture; - let component: TestComponent; - let buttons: readonly HTMLElement[]; - - beforeEach(async () => { - TestBed.configureTestingModule({ - imports: [TuiTabsModule], - declarations: [TestComponent], - providers: NG_EVENT_PLUGINS, - }); - await TestBed.compileComponents(); - fixture = TestBed.createComponent(TestComponent); - fixture.detectChanges(); - component = fixture.componentInstance; - buttons = [ - document.getElementById('cards')!, - document.getElementById('tariff')!, - document.getElementById('calls')!, - document.getElementById('settings')!, - ]; - }); - - it('Navigation by arrows works when going right', () => { - buttons[0].focus(); - tuiDispatchOnActive('arrowRight'); - fixture.detectChanges(); - - expect(tuiIsNativeFocused(buttons[1])).toBe(true); - }); - - it('Navigation by arrows works when going left', () => { - buttons[1].focus(); - tuiDispatchOnActive('arrowLeft'); - - expect(tuiIsNativeFocused(buttons[0])).toBe(true); - }); - - it('Navigation by arrows skips disabled when going right', () => { - buttons[1].focus(); - tuiDispatchOnActive('arrowRight'); - - expect(tuiIsNativeFocused(buttons[3])).toBe(true); - }); - - it('Navigation by arrows skips disabled when going left', () => { - buttons[3].focus(); - tuiDispatchOnActive('arrowLeft'); - - expect(tuiIsNativeFocused(buttons[1])).toBe(true); - }); - - it('Updates activeItemIndex', () => { - buttons[3].click(); - - expect(component.activeItemIndex).toBe(3); - }); -});