@testing-library/dom#within TypeScript Examples

The following examples show how to use @testing-library/dom#within. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ComboBox.test.tsx    From chroma-react with MIT License 6 votes vote down vote up 
test('it renders the provided select options', async () => {
  const props = getBaseProps();
  const { findByTestId, findByRole } = renderWithTheme(
    <ComboBox {...props} data-testid={testId}>
      <SelectOption title="option1" value="option1" data-testid={optionId} />
    </ComboBox>
  );

  const select = await findByTestId(testId);

  fireEvent.click(select);

  const listOptions = await findByRole('listbox');
  expect(listOptions).toBeInTheDocument();

  const option = await within(listOptions).findByTestId(optionId);
  expect(option).toBeInTheDocument();
});
Example #2
Source File: ComboBox.test.tsx    From chroma-react with MIT License 6 votes vote down vote up 
test('it sets the default checked state on options', async () => {
  const props = getBaseProps();
  const { findByTestId } = renderWithTheme(
    <ComboBox {...props} value={['option2']} data-testid={testId}>
      <SelectOption title="option1" value="option1" />
      <SelectOption title="option2" value="option2" data-testid={optionId} />
      <SelectOption title="option3" value="option3" />
    </ComboBox>
  );

  const select = await findByTestId(testId);
  fireEvent.click(select);

  const checkedOption = await findByTestId(optionId);
  const visuallyHiddenCheck = await within(checkedOption).findByText('✓');
  expect(visuallyHiddenCheck).toBeInTheDocument();
});
Example #3
Source File: ComboBox.test.tsx    From chroma-react with MIT License 6 votes vote down vote up 
test('it sets the default, multiple checked state', async () => {
  const props = getBaseProps();
  const { findByTestId, findAllByTestId } = renderWithTheme(
    <ComboBox {...props} value={['option2', 'option3']} data-testid={testId}>
      <SelectOption title="option1" value="option1" />
      <SelectOption title="option2" value="option2" data-testid={optionId} />
      <SelectOption title="option3" value="option3" data-testid={optionId} />
    </ComboBox>
  );

  const select = await findByTestId(testId);
  fireEvent.click(select);

  const [checkedOption2, checkedOption3] = await findAllByTestId(optionId);

  const visuallyHiddenCheck2 = await within(checkedOption2).findByText('✓');
  expect(visuallyHiddenCheck2).toBeInTheDocument();

  const visuallyHiddenCheck3 = await within(checkedOption3).findByText('✓');
  expect(visuallyHiddenCheck3).toBeInTheDocument();
});
Example #4
Source File: RoverOption.test.tsx    From chroma-react with MIT License 6 votes vote down vote up 
test('it sets the checked state on an option', async () => {
  const props = getBaseProps();
  const { findByTestId } = renderWithTheme(
    <RoverOption
      {...props}
      value="option2"
      option={
        <SelectOption title="option2" value="option2" data-testid={optionId} />
      }
    />
  );

  const option = await findByTestId(optionId);
  const visuallyHiddenCheck = await within(option).findByText('✓');
  expect(visuallyHiddenCheck).toBeInTheDocument();
});
Example #5
Source File: RoverOption.test.tsx    From chroma-react with MIT License 6 votes vote down vote up 
test('it *does not* set the checked state on an option if value is not option value', async () => {
  const props = getBaseProps();
  const { findByTestId } = renderWithTheme(
    <RoverOption
      {...props}
      value="option1"
      option={
        <SelectOption title="option2" value="option2" data-testid={optionId} />
      }
    />
  );

  const option = await findByTestId(optionId);
  const visuallyHiddenCheck = await within(option).queryByText('✓');
  expect(visuallyHiddenCheck).not.toBeInTheDocument();
});
Example #6
Source File: Select.test.tsx    From chroma-react with MIT License 6 votes vote down vote up 
test('it sets the default checked state on options', async () => {
  const props = getBaseProps();
  const { findByTestId } = renderWithTheme(
    <Select {...props} value="option2" data-testid={testId}>
      <SelectOption title="option1" value="option1" />
      <SelectOption title="option2" value="option2" data-testid={optionId} />
      <SelectOption title="option3" value="option3" />
    </Select>
  );

  const select = await findByTestId(testId);

  fireEvent.click(select);
  const checkedOption = await findByTestId(optionId);
  const visuallyHiddenCheck = await within(checkedOption).findByText('✓');
  expect(visuallyHiddenCheck).toBeInTheDocument();
});
Example #7
Source File: List.test.tsx    From glific-frontend with GNU Affero General Public License v3.0 5 votes vote down vote up 
describe('<List />', () => {
  test('should have loading', () => {
    const { getByText } = render(list);
    waitFor(() => {
      expect(getByText('Loading...')).toBeInTheDocument();
    });
  });

  test('should have add new button', async () => {
    const { container } = render(list);
    await waitFor(() => {
      expect(container.querySelector('button.MuiButton-containedPrimary')).toBeInTheDocument();
    });
  });

  test('should have a table, search and reset', async () => {
    const { container, getByTestId } = render(list);

    await waitFor(() => {
      expect(container.querySelector('table')).toBeInTheDocument();
      fireEvent.change(getByTestId('searchInput')?.querySelector('input'), {
        target: { value: 'Unread' },
      });
    });

    await waitFor(() => {
      fireEvent.submit(getByTestId('searchForm'));
      fireEvent.click(getByTestId('resetButton'));
    });
  });

  test('list has proper headers', async () => {
    const { container } = render(list);
    await waitFor(() => {
      const tableHead = container.querySelector('thead');
      const { getByText } = within(tableHead);
      expect(getByText('LABEL')).toBeInTheDocument();
      expect(getByText('DESCRIPTION')).toBeInTheDocument();
      expect(getByText('KEYWORDS')).toBeInTheDocument();
      expect(getByText('ACTIONS')).toBeInTheDocument();
    });
  });

  test('A row in the table should have an edit and delete button', async () => {
    const { container } = render(list);

    await waitFor(() => {
      const tableRow = container.querySelector('tbody tr');
      const { getByLabelText } = within(tableRow);
      expect(getByLabelText('Edit')).toBeInTheDocument();
      expect(getByLabelText('Delete')).toBeInTheDocument();
    });
  });
});
Example #8
Source File: List.test.tsx    From glific-frontend with GNU Affero General Public License v3.0 5 votes vote down vote up 
describe('<List /> actions', () => {
  test('add new Button contains a route to add new page', async () => {
    const { container } = render(listButtons);
    await waitFor(() => {
      const button = container.querySelector('button.MuiButton-containedPrimary');
      fireEvent.click(button);
    });

    await waitFor(() => {
      expect(container.querySelector('div.ItemAdd')).toBeInTheDocument();
    });
  });

  test('click on delete button opens dialog box', async () => {
    const { container } = render(list);

    await waitFor(() => {
      const { queryByLabelText } = within(container.querySelector('tbody tr'));
      const button = queryByLabelText('Delete');
      fireEvent.click(button);
    });

    await waitFor(() => {
      expect(screen.queryByRole('dialog')).toBeInTheDocument();
    });
  });

  test('click on agree button shows alert', async () => {
    const { getAllByTestId } = render(list);

    await waitFor(() => {
      const button = getAllByTestId('DeleteIcon')[0];
      fireEvent.click(button);
    });

    await waitFor(() => {
      const agreeButton = screen
        .queryByRole('dialog')
        ?.querySelector('button.MuiButton-containedSecondary');
      fireEvent.click(agreeButton);
    });
  });
});
Example #9
Source File: List.test.tsx    From glific-frontend with GNU Affero General Public License v3.0 5 votes vote down vote up 
test('list sorting', async () => {
  const { container } = render(list);
  await waitFor(() => {
    const tableHead = container.querySelector('thead');
    const { getByText } = within(tableHead);
    fireEvent.click(getByText('KEYWORDS'));
  });
});
Example #10
Source File: List.test.tsx    From glific-frontend with GNU Affero General Public License v3.0 5 votes vote down vote up 
describe('DialogMessage tests', () => {
  let props = { ...orgProps };

  test('dialogMessage with custom component for delete', async () => {
    const useCustomDialog = () => {
      const component = (
        <div>
          <input type="text" placeholder="Testing custom dialog with input text" />
        </div>
      );
      return {
        component,
        handleOkCallback: jest.fn(),
        isConfirmed: true,
      };
    };

    props.dialogMessage = useCustomDialog;
    props.additionalAction = [
      {
        icon: ApprovedIcon,
        parameter: 'id',
        label: 'Approve',
        button: () => <button onClick={() => jest.fn()}>Approve</button>,
      },
      {
        icon: ActivateIcon,
        parameter: 'id',
        label: 'Activate',
        button: () => <button onClick={() => jest.fn()}>Activate</button>,
      },
    ];

    const list = (
      <MockedProvider mocks={ORG_LIST_MOCK} addTypename={false}>
        <Router>
          <List {...props} />
        </Router>
      </MockedProvider>
    );

    const { container } = render(list);

    await waitFor(() => {
      const { queryByLabelText } = within(container.querySelector('tbody tr'));
      const button = queryByLabelText('Delete');

      fireEvent.click(button);
    });
  });
});