fixup! BREAKING CHANGE(web-react): Rename Tabs props and clean up its…

… types #DS-1096
lmc-eu · May 14, 2024 · 34a2319 · 34a2319
1 parent ffb2eef
commit 34a2319
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/packages/web-react/src/components/Tabs/__tests__/TabItem.test.tsx b/packages/web-react/src/components/Tabs/__tests__/TabItem.test.tsx
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { fireEvent, render, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
@@ -15,26 +15,28 @@ describe('TabItem', () => {
   restPropsTest((props) => <TabItem forTabPane={0} {...props} />, 'button');
 
   it('should render button tag when there is no href prop', () => {
-    const dom = render(<TabItem forTabPane={0} />);
+    render(<TabItem forTabPane={0} />);
+
+    const element = screen.getByRole('tab');
 
-    const element = dom.container.querySelector('button') as HTMLElement;
     expect(element).toHaveClass('Tabs__link');
   });
 
   it('should have ARIA attributtes', () => {
-    const dom = render(<TabItem forTabPane="test" />);
+    render(<TabItem forTabPane="test" />);
+
+    const element = screen.getByRole('tab');
 
-    const element = dom.container.querySelector('button') as HTMLElement;
     expect(element).toHaveAttribute('id', 'test-tab');
     expect(element).toHaveAttribute('aria-controls', 'test');
     expect(element).toHaveAttribute('type', 'button');
   });
 
   it('should handle tab switch when clicked', async () => {
     const selectTabMock = jest.fn();
-    const dom = render(withTabsContext(TabItem, { selectedId: 0, selectTab: selectTabMock })({ forTabPane: 'test' }));
+    render(withTabsContext(TabItem, { selectedId: 0, selectTab: selectTabMock })({ forTabPane: 'test' }));
 
-    fireEvent.click(dom.getByRole('tab') as HTMLElement);
+    fireEvent.click(screen.getByRole('tab'));
 
     await waitFor(() => expect(selectTabMock).toHaveBeenCalled());
   });

diff --git a/packages/web-react/src/components/Tabs/__tests__/TabPane.test.tsx b/packages/web-react/src/components/Tabs/__tests__/TabPane.test.tsx
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
@@ -33,8 +33,20 @@ describe('TabPane', () => {
   );
 
   it('should not render tab pane if tab is not selected', () => {
-    const dom = render(withTabsContext(TabPane, { selectedId: 'another-tab', selectTab: jest.fn() })({ id: 'test' }));
+    render(withTabsContext(TabPane, { selectedId: 'another-tab', selectTab: jest.fn() })({ id: 'test' }));
 
-    expect(dom.container.querySelector('#test') as HTMLElement).toBeNull();
+    expect(screen.queryByRole('tabpanel')).not.toBeInTheDocument();
+  });
+
+  it('should render tab pane if tab is selected', () => {
+    render(withTabsContext(TabPane, { selectedId: 'test', selectTab: jest.fn() })({ id: 'test' }));
+
+    const tabPane = screen.queryByRole('tabpanel');
+
+    expect(tabPane).toBeInTheDocument();
+    expect(tabPane).toHaveAttribute('id', 'test');
+    expect(tabPane).toHaveAttribute('aria-labelledby', 'test-tab');
+    expect(tabPane).toHaveClass('TabsPane');
+    expect(tabPane).toHaveClass('is-selected');
   });
 });