|
1 | | -import { render } from '@testing-library/react'; |
2 | | -import { createRef } from 'react'; |
| 1 | +import { render, screen, waitFor } from '@testing-library/react'; |
| 2 | +import { Key, createRef, useState } from 'react'; |
3 | 3 | import { testA11y } from '@interlay/test-utils'; |
| 4 | +import userEvent from '@testing-library/user-event'; |
4 | 5 |
|
5 | 6 | import { Tabs, TabsItem } from '..'; |
6 | 7 |
|
@@ -40,4 +41,62 @@ describe('Tabs', () => { |
40 | 41 | </Tabs> |
41 | 42 | ); |
42 | 43 | }); |
| 44 | + |
| 45 | + it('should display default selected key', async () => { |
| 46 | + render( |
| 47 | + <Tabs defaultSelectedKey='2'> |
| 48 | + <TabsItem key='1' title='Title 1'> |
| 49 | + item 1 |
| 50 | + </TabsItem> |
| 51 | + <TabsItem key='2' title='Title 2'> |
| 52 | + item 2 |
| 53 | + </TabsItem> |
| 54 | + </Tabs> |
| 55 | + ); |
| 56 | + |
| 57 | + expect(screen.getByRole('tab', { name: /title 2/i })).toHaveAttribute('aria-selected', 'true'); |
| 58 | + expect(screen.getByRole('tabpanel')).toHaveTextContent(/item 2$/i); |
| 59 | + }); |
| 60 | + |
| 61 | + it('should be able to control open tab', async () => { |
| 62 | + const Component = () => { |
| 63 | + const [state, setState] = useState<Key>('2'); |
| 64 | + |
| 65 | + return ( |
| 66 | + <Tabs selectedKey={state} onSelectionChange={setState}> |
| 67 | + <TabsItem key='1' title='Title 1'> |
| 68 | + item 1 |
| 69 | + </TabsItem> |
| 70 | + <TabsItem key='2' title='Title 2'> |
| 71 | + item 2 |
| 72 | + </TabsItem> |
| 73 | + </Tabs> |
| 74 | + ); |
| 75 | + }; |
| 76 | + |
| 77 | + render(<Component />); |
| 78 | + |
| 79 | + expect(screen.getByRole('tab', { name: /title 2/i })).toHaveAttribute('aria-selected', 'true'); |
| 80 | + |
| 81 | + userEvent.click(screen.getByRole('tab', { name: /title 1/i })); |
| 82 | + |
| 83 | + await waitFor(() => { |
| 84 | + expect(screen.getByRole('tab', { name: /title 1/i })).toHaveAttribute('aria-selected', 'true'); |
| 85 | + }); |
| 86 | + }); |
| 87 | + |
| 88 | + it('should disabled tab', async () => { |
| 89 | + render( |
| 90 | + <Tabs disabledKeys={['1']}> |
| 91 | + <TabsItem key='1' title='Title 1'> |
| 92 | + item 1 |
| 93 | + </TabsItem> |
| 94 | + <TabsItem key='2' title='Title 2'> |
| 95 | + item 2 |
| 96 | + </TabsItem> |
| 97 | + </Tabs> |
| 98 | + ); |
| 99 | + |
| 100 | + expect(screen.getByRole('tab', { name: /title 1/i })).toHaveAttribute('aria-disabled', 'true'); |
| 101 | + }); |
43 | 102 | }); |
0 commit comments