@testing-library/react#queryAllByRole TypeScript Examples

The following examples show how to use @testing-library/react#queryAllByRole. 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: UMLEditor.test.tsx    From legend-studio with Apache License 2.0 6 votes vote down vote up 
test(integrationTest('Enumeration editor'), async () => {
  await TEST__openElementFromExplorerTree('ui::TestEnumeration', renderResult);
  const editPanelHeader = renderResult.getByTestId(
    LEGEND_STUDIO_TEST_ID.EDIT_PANEL__HEADER_TABS,
  );
  expect(getByText(editPanelHeader, 'TestEnumeration')).not.toBeNull();
  const enumerationEditor = renderResult.getByTestId(
    LEGEND_STUDIO_TEST_ID.ENUMERATION_EDITOR,
  );
  const enums = ['enumA', 'enumB', 'enumC'];
  enums.forEach((e) => getByDisplayValue(enumerationEditor, e));
  fireEvent.click(getByText(enumerationEditor, 'Tagged Values'));
  await waitFor(() => getByText(enumerationEditor, 'ProfileTest'));
  getByDisplayValue(enumerationEditor, 'Enumeration Tag');
  fireEvent.click(getByText(enumerationEditor, 'Stereotypes'));
  await waitFor(() => getByText(enumerationEditor, 'stereotype2'));
  fireEvent.click(getByText(enumerationEditor, 'Values'));
  await waitFor(() => getByDisplayValue(enumerationEditor, 'enumA'));
  const enumB = getByDisplayValue(enumerationEditor, 'enumA');
  const parentElement = enumB.parentElement?.parentElement as HTMLElement;
  const buttons = queryAllByRole(parentElement, 'button');
  expect(buttons).toHaveLength(2);
  fireEvent.click(guaranteeNonNullable(buttons[0])); // navigate
  await waitFor(() => getByText(enumerationEditor, 'enum'));
  const subPropertyPanel = getByTestId(
    enumerationEditor,
    LEGEND_STUDIO_TEST_ID.PANEL,
  );
  getByDisplayValue(subPropertyPanel, 'enumATag');
  fireEvent.click(getByText(subPropertyPanel, 'Stereotypes'));
  await waitFor(() => getByText(subPropertyPanel, 'stereotype1'));
  fireEvent.click(
    guaranteeNonNullable(queryAllByRole(subPropertyPanel, 'button')[0]),
  );
  fireEvent.click(guaranteeNonNullable(buttons[1])); // delete
  expect(queryByText(enumerationEditor, 'enumA')).toBeNull();
});
Example #2
Source File: UMLEditor.test.tsx    From legend-studio with Apache License 2.0 5 votes vote down vote up 
test(integrationTest('Association editor'), async () => {
  await TEST__openElementFromExplorerTree('ui::TestAssociation', renderResult);
  const editPanelHeader = renderResult.getByTestId(
    LEGEND_STUDIO_TEST_ID.EDIT_PANEL__HEADER_TABS,
  );
  expect(getByText(editPanelHeader, 'TestAssociation')).not.toBeNull();
  const associationEditor = renderResult.getByTestId(
    LEGEND_STUDIO_TEST_ID.ASSOCIATION_EDITOR,
  );
  const properties = ['testClassProp', 'testClassSibling'];
  // input fields for association property name are present
  properties.forEach((t) =>
    expect(getByDisplayValue(associationEditor, t)).not.toBeNull(),
  );
  // Tagged Values
  fireEvent.click(getByText(associationEditor, 'Tagged Values'));
  await waitFor(() => getByText(associationEditor, 'ProfileTest'));
  getByDisplayValue(associationEditor, 'Association Tag');
  // Steretypes
  fireEvent.click(getByText(associationEditor, 'Stereotypes'));
  await waitFor(() => getByText(associationEditor, 'stereotype2'));
  // Back to properties
  fireEvent.click(getByText(associationEditor, 'Properties'));
  await waitFor(() => getByDisplayValue(associationEditor, 'testClassProp'));
  const inputA = getByDisplayValue(associationEditor, 'testClassProp');
  const propertyTypeA = inputA.parentElement?.parentElement
    ?.parentElement as HTMLElement;
  fireEvent.change(inputA, { target: { value: 'random' } });
  await waitFor(() => getByDisplayValue(associationEditor, 'random'));
  expect(getAllByDisplayValue(propertyTypeA, '1')).toHaveLength(2);
  expect(getByText(propertyTypeA, 'TestClass')).not.toBeNull();
  expect(getAllByRole(propertyTypeA, 'button')).toHaveLength(2);
  // sub panel property
  const inputB = getByDisplayValue(associationEditor, 'testClassSibling');
  const propertyTypeB = inputB.parentElement?.parentElement
    ?.parentElement as HTMLElement;
  const buttons = getAllByRole(propertyTypeB, 'button');
  expect(buttons).toHaveLength(2);
  expect(queryByDisplayValue(associationEditor, 'ProfileTest')).toBeNull();
  fireEvent.click(guaranteeNonNullable(buttons[1])); // navigate
  const subPropertyPanel = getByTestId(
    associationEditor,
    LEGEND_STUDIO_TEST_ID.PANEL,
  );
  getByDisplayValue(subPropertyPanel, 'association tag');
  fireEvent.click(getByText(subPropertyPanel, 'Stereotypes'));
  await waitFor(() => getByText(subPropertyPanel, 'stereotype1'));
  fireEvent.click(
    guaranteeNonNullable(queryAllByRole(subPropertyPanel, 'button')[0]),
  );
});