@testing-library/react#getByLabelText TypeScript Examples

test('renders sensible dates as expected', () => {
  MockDate.set('2020-07-21')
  const { container } = render(
    <MockFormik initialValues={{ experiment: { startDatetime: '', endDatetime: '' } }}>
      <BasicInfo completionBag={completionBag} />
    </MockFormik>,
  )
  const startDateInput = getByLabelText(container, /Start date/)
  const endDateInput = getByLabelText(container, /End date/)

  act(() => {
    fireEvent.change(startDateInput, { target: { value: '2020-07-28' } })
    fireEvent.change(endDateInput, { target: { value: '2020-10-28' } })
  })
  expect(container).toMatchSnapshot()
})

test('renders date validation errors as expected', () => {
  MockDate.set('2020-07-21')
  const { container } = render(
    <MockFormik initialValues={{ experiment: { startDatetime: '', endDatetime: '' } }}>
      <BasicInfo completionBag={completionBag} />
    </MockFormik>,
  )
  const startDateInput = getByLabelText(container, /Start date/)
  const endDateInput = getByLabelText(container, /End date/)

  // Start date before today
  fireEvent.change(startDateInput, { target: { value: '2020-07-20' } })
  expect(container).toMatchSnapshot()

  // Start date too far into the future
  fireEvent.change(startDateInput, { target: { value: '2025-07-20' } })
  expect(container).toMatchSnapshot()

  // End date before start date
  act(() => {
    fireEvent.change(startDateInput, { target: { value: '2020-07-28' } })
    fireEvent.change(endDateInput, { target: { value: '2020-07-20' } })
  })
  expect(container).toMatchSnapshot()

  // End date too far into the future
  fireEvent.change(endDateInput, { target: { value: '2025-07-21' } })
  expect(container).toMatchSnapshot()
})

it('should close when the button is clicked', async () => {
    const close = jest.fn();

    const [user, dialog] = testRender(<AboutDialog isOpen={true} onClose={close} />);

    await user.click(dialog.getByLabelText('Close'));

    expect(close).toHaveBeenCalled();
});

it('should manage license dialog open/close', async () => {
    const [user, dialog] = testRender(
        <AboutDialog isOpen={true} onClose={() => undefined} />,
    );

    expect(
        dialog.queryByRole('dialog', { name: 'Open Source Software Licenses' }),
    ).toBeNull();

    await user.click(dialog.getByText('Software Licenses'));

    const licenseDialog = dialog.getByRole('dialog', {
        name: 'Open Source Software Licenses',
    });

    expect(licenseDialog).toBeVisible();

    await user.click(getByLabelText(licenseDialog, 'Close'));

    await waitFor(() => expect(licenseDialog).not.toBeVisible());
});

describe('showDocs setting switch', () => {
    it('should toggle setting', async () => {
        const [user, settings] = testRender(<Settings />);

        const showDocs = settings.getByLabelText('Documentation');
        expect(showDocs).toBeChecked();

        await user.click(showDocs);
        expect(showDocs).not.toBeChecked();
    });
});

describe('darkMode setting switch', () => {
    it('should toggle setting', async () => {
        const [user, settings] = testRender(<Settings />);

        const darkMode = settings.getByLabelText('Dark mode');
        expect(darkMode).not.toBeChecked();
        expect(localStorage.getItem('usehooks-ts-ternary-dark-mode')).toBe(null);

        await user.click(darkMode);
        expect(darkMode).toBeChecked();
        expect(localStorage.getItem('usehooks-ts-ternary-dark-mode')).toBe('"dark"');

        await user.click(darkMode);
        expect(darkMode).not.toBeChecked();
        expect(localStorage.getItem('usehooks-ts-ternary-dark-mode')).toBe('"light"');
    });
});

describe('flashCurrentProgram setting switch', () => {
    it('should toggle the setting', async () => {
        const [user, settings] = testRender(<Settings />);

        expect(localStorage.getItem('setting.flashCurrentProgram')).toBe(null);

        await user.click(settings.getByLabelText('Include current program'));
        expect(localStorage.getItem('setting.flashCurrentProgram')).toBe('true');

        await user.click(settings.getByLabelText('Include current program'));
        expect(localStorage.getItem('setting.flashCurrentProgram')).toBe('false');
    });
});

describe('hubName setting', () => {
    it('should migrate old settings', () => {
        // old settings did not use json format, so lack quotes
        localStorage.setItem('setting.hubName', 'old name');

        const [, settings] = testRender(<Settings />);

        const textBox = settings.getByLabelText('Hub name');

        expect(textBox).toHaveValue('old name');
    });

    it('should update the setting', async () => {
        const [user, settings] = testRender(<Settings />);

        expect(localStorage.getItem('setting.hubName')).toBe(null);

        const textBox = settings.getByLabelText('Hub name');
        await user.type(textBox, 'test name');

        expect(localStorage.getItem('setting.hubName')).toBe('"test name"');
    });
});

describe('about dialog', () => {
    it('should open the dialog when the button is clicked', async () => {
        const [user, settings] = testRender(<Settings />);

        const appName = process.env.REACT_APP_NAME;

        expect(settings.queryByRole('dialog', { name: `About ${appName}` })).toBeNull();

        await user.click(settings.getByText('About'));

        const dialog = settings.getByRole('dialog', { name: `About ${appName}` });

        expect(dialog).toBeVisible();

        await user.click(getByLabelText(dialog, 'Close'));

        await waitFor(() => expect(dialog).not.toBeVisible());
    });
});

describe('useMainDetail', () => {
  function setup() {
    const Wrapper: React.FC<React.PropsWithChildren<unknown>> = () => {
      const { tabs, content } = useMainDetail(mainDetailConfig);
      return (
        <div>
          {tabs}
          {content}
        </div>
      );
    };

    return render(<Wrapper></Wrapper>);
  }

  it('displays one tab panel at a time', () => {
    const { getByText, getByRole } = setup();
    expect(getByText(TAB1_LABEL)).not.toBeNull();
    expect(getByText(TAB2_LABEL)).not.toBeNull();

    const tabPanel = getByRole('tabpanel');
    expect(tabPanel).not.toBeNull();
    expect(tabPanel.textContent).toContain(TAB1_CONTENT);

    expect(getByText(TAB1_CONTENT)).not.toBeNull();
  });

  it('Allows to switch tabpanel', () => {
    const { getByText, getByRole, getByLabelText } = setup();

    act(() => {
      getByText(TAB2_LABEL).click();
    });

    getByLabelText(TAB2_LABEL);

    const tabPanel = getByRole('tabpanel');
    expect(tabPanel.textContent).toContain(TAB2_CONTENT);
  });

  it('Properly labels the tabs', () => {
    const { getByText, getByRole, getByLabelText } = setup();

    expect(getByRole('tabpanel')).toBe(getByLabelText(TAB1_LABEL));
    act(() => {
      getByText(TAB2_LABEL).click();
    });
    expect(getByRole('tabpanel')).toBe(getByLabelText(TAB2_LABEL));
  });
});