@testing-library/dom#within TypeScript Examples

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();
});

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();
});

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();
});

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();
});

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();
});

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();
});

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();
    });
  });
});

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);
    });
  });
});

test('list sorting', async () => {
  const { container } = render(list);
  await waitFor(() => {
    const tableHead = container.querySelector('thead');
    const { getByText } = within(tableHead);
    fireEvent.click(getByText('KEYWORDS'));
  });
});

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);
    });
  });
});