github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/ui/Tabs.spec.tsx (about)

     1  import { render, screen } from '@testing-library/react';
     2  import React, { useState } from 'react';
     3  import { Tab, TabPanel, Tabs } from './Tabs';
     4  import userEvent from '@testing-library/user-event';
     5  
     6  function TabsComponent() {
     7    const [value, setTab] = useState(0);
     8  
     9    return (
    10      <>
    11        <Tabs value={value} onChange={(e, value) => setTab(value)}>
    12          <Tab label="Tab_1" />
    13          <Tab label="Tab_2" />
    14        </Tabs>
    15        <TabPanel value={value} index={0}>
    16          Tab_1_Content
    17        </TabPanel>
    18        <TabPanel value={value} index={1}>
    19          Tab_2_Content
    20        </TabPanel>
    21      </>
    22    );
    23  }
    24  
    25  describe('Tabs', () => {
    26    beforeEach(() => {
    27      render(<TabsComponent />);
    28    });
    29  
    30    it('shows all tabs', () => {
    31      expect(screen.getByText('Tab_1')).toBeVisible();
    32      expect(screen.getByText('Tab_2')).toBeVisible();
    33    });
    34  
    35    it('toggling tabs works', () => {
    36      expect(screen.getByText('Tab_1_Content')).toBeVisible();
    37      expect(screen.queryByText('Tab_2_Content')).toBeNull();
    38  
    39      userEvent.click(screen.getByText('Tab_2'), { button: 1 });
    40  
    41      expect(screen.getByText('Tab_2_Content')).toBeVisible();
    42      expect(screen.queryByText('Tab_1_Content')).toBeNull();
    43    });
    44  });