diff --git a/packages/eui/src/components/tabs/tabs.spec.tsx b/packages/eui/src/components/tabs/tabs.spec.tsx index cffd7da566c..6e9c593920a 100644 --- a/packages/eui/src/components/tabs/tabs.spec.tsx +++ b/packages/eui/src/components/tabs/tabs.spec.tsx @@ -10,8 +10,9 @@ /// /// -import React from 'react'; +import React, { useState } from 'react'; import { EuiTabbedContent, EuiTabbedContentProps } from './tabbed_content'; +import { EuiButton } from '../button'; import { EuiSpacer } from '../spacer'; import { EuiText } from '../text'; @@ -85,6 +86,30 @@ const tabs = [ }, ]; +const tabsSecond = [ + { + id: 'hello', + name: 'New tab 1', + content:

Hello

, + }, + { + id: 'world', + name: 'New tab 2', + content:

World

, + }, +]; + +const DynamicTabbedContent = () => { + const [items, setItems] = useState(tabs); + + return ( + <> + setItems(tabsSecond)}>Change tabs + + + ); +}; + const TabbedContent = () => { const tabProps: EuiTabbedContentProps = { tabs: tabs, @@ -110,8 +135,10 @@ describe('EuiTabs', () => { cy.get('div[role="tabpanel"]').first().should('exist'); cy.get('div[role="tabpanel"]').should('have.length', 1); }); + }); - it('handles keypress events', () => { + describe('Arrow key navigation', () => { + it('should navigate the tabs with arrow keys', () => { cy.realMount(); cy.realPress('Tab'); cy.realPress('ArrowLeft'); @@ -124,15 +151,38 @@ describe('EuiTabs', () => { cy.repeatRealPress('ArrowRight', 3); cy.focused().should('have.text', 'Monosodium Glutamate'); // on arrow right, should loop back to the first tab - cy.repeatRealPress('ArrowRight', 1); + cy.realPress('ArrowRight'); cy.focused().should('have.text', 'Cobalt'); // on arrow left, should loop back to the last tab - cy.repeatRealPress('ArrowLeft', 1); + cy.realPress('ArrowLeft'); cy.focused().should('have.text', 'Monosodium Glutamate'); // on enter, should select the last tab cy.realPress('Enter'); cy.get('div[role="tabpanel"]').last().should('exist'); cy.get('div[role="tabpanel"]').should('have.length', 1); }); + + it('should navigate dynamic tabs correctly after they changed', () => { + cy.mount(); + cy.repeatRealPress('Tab', 2); + // focus the second tab and assert it is focused + cy.realPress('ArrowRight'); + cy.focused().should('have.text', 'Dextrose'); + // click the button to change the tabs + cy.get('button').contains('Change tabs').click(); + // assert that the focus was reset + cy.realPress('Tab'); + cy.realPress('ArrowRight'); + cy.focused().should('have.text', 'New tab 2'); + // press ArrowRight to navigate to the first tab and assert it is focused + cy.realPress('ArrowRight'); + cy.focused().should('have.text', 'New tab 1'); + // press ArrowRight to navigate back to the second tab and assert it is focused + cy.realPress('ArrowRight'); + cy.focused().should('have.text', 'New tab 2'); + // press ArrowLeft to navigate back to the first tab and verify it is focused + cy.realPress('ArrowLeft'); + cy.focused().should('have.text', 'New tab 1'); + }); }); });