chore: add tabs.cy.ts (#6621)

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);

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: {

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: `
+            <tui-root>
+                <tui-tabs [(activeItemIndex)]="activeItemIndex">
+                    <button
+                        id="cards"
+                        tuiTab
+                    >
+                        Cards
+                    </button>
+                    <button
+                        id="tariff"
+                        tuiTab
+                    >
+                        Rate
+                    </button>
+                    <button
+                        id="calls"
+                        disabled
+                        tuiTab
+                    >
+                        Challenges
+                    </button>
+                    <button
+                        id="settings"
+                        tuiTab
+                    >
+                        Settings
+                    </button>
+                </tui-tabs>
+            </tui-root>
+        `,
+    })
+    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));
+    });
+});