@testing-library/react#queryAllByTestId JavaScript Examples

getTransformationFieldGroups = () => {
  const allGroups = screen.getAllByTestId('transformation-field-group');

  return allGroups.map(group => ({
    marcField: {
      container: getByTestId(group, 'transformation-marcField'),
      input: getByTestId(group, 'transformation-marcField').querySelector('input'),
      isInvalid: getByTestId(group, 'transformation-marcField').classList.contains('isInvalid'),
    },
    indicator1: {
      container: getByTestId(group, 'transformation-indicator1'),
      input: getByTestId(group, 'transformation-indicator1').querySelector('input'),
      isInvalid: getByTestId(group, 'transformation-indicator1').classList.contains('isInvalid'),
    },
    indicator2: {
      container: getByTestId(group, 'transformation-indicator2'),
      input: getByTestId(group, 'transformation-indicator2').querySelector('input'),
      isInvalid: getByTestId(group, 'transformation-indicator2').classList.contains('isInvalid'),
    },
    subfield: {
      container: getByTestId(group, 'transformation-subfield'),
      input: getByTestId(group, 'transformation-subfield').querySelector('input'),
      isInvalid: getByTestId(group, 'transformation-subfield').classList.contains('isInvalid'),
    },
    isInvalid: Boolean(queryAllByTestId(group, 'transformation-invalid').length),
  }));
}

describe("Notifications list component", () => {

    const mockWebId = "http://piratillajudoka.inrupt.net/profile/card#me";
    const mockLoad = jest.fn();

    let component;

    beforeEach(() => {
        const { container, rerender } = render(<IntlProvider messages={locales["en"]} locale="en"><NotificationsList userWebId={mockWebId} loadRoutes={mockLoad}></NotificationsList></IntlProvider>);
        component = container;
    });

    describe("renders correctly", () => {
        test("div", () => {
            expect(component).not.toBeNull();
            expect(queryByTestId(component, "notificationslist-div")).not.toBeNull();
        });
        test("list", () => {
            expect(component).not.toBeNull();
            expect(queryByTestId(component, "notificationslist-divcomponent")).not.toBeNull();
        });
        test("button", () => {
            expect(component).not.toBeNull();
            waitForElement(() => {
                expect(queryByTestId(component, "notificationslist-button")).not.toBeNull();
            });
        });
    });

    test("notifications", () => {
        waitForElement(() => {
            expect(queryAllByTestId(component, "notification")).not.toBeNull();
        });
    });

    test("click", () => {
        waitForElement(() => {
            fireEvent.click(queryByTestId(component, "notificationslist-button"));
            expect(mockLoad).toBeCalled();
        });

    });
});

describe('DiscussionTopics', () => {
  let axiosMock;
  let store;
  let container;
  beforeEach(() => {
    initializeMockApp({
      authenticatedUser: {
        userId: 3,
        username: 'abc123',
        administrator: true,
        roles: [],
      },
    });

    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
    store = initializeStore();
  });

  afterEach(() => {
    axiosMock.reset();
  });

  const createComponent = (data) => {
    const wrapper = render(
      <AppProvider store={store}>
        <IntlProvider locale="en">
          <OpenedXConfigFormProvider value={contextValue}>
            <Formik initialValues={data}>
              <DiscussionTopics />
            </Formik>
          </OpenedXConfigFormProvider>
        </IntlProvider>
      </AppProvider>,
    );
    container = wrapper.container;
  };

  const mockStore = async (mockResponse) => {
    axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, mockResponse);
    await executeThunk(fetchProviders(courseId), store.dispatch);
  };

  test('renders each discussion topic correctly', async () => {
    await mockStore(legacyApiResponse);
    createComponent(appConfig);
    await waitFor(() => {
      expect(queryAllByTestId(container, 'course')).toHaveLength(1);
      expect(queryAllByTestId(container, '13f106c6-6735-4e84-b097-0456cff55960')).toHaveLength(1);
    });
  });

  test('renders discussion topic heading, label and helping text', async () => {
    await mockStore(legacyApiResponse);
    createComponent(appConfig);
    await waitFor(() => {
      expect(queryByText(container, messages.discussionTopics.defaultMessage)).toBeInTheDocument();
      expect(queryByText(container, messages.discussionTopicsLabel.defaultMessage)).toBeInTheDocument();
      expect(queryByText(container, messages.discussionTopicsHelp.defaultMessage)).toBeInTheDocument();
    });
  });

  test('add topic button is rendered correctly', async () => {
    await mockStore(legacyApiResponse);
    createComponent(appConfig);
    await waitFor(() => {
      expect(queryByText(container, messages.addTopicButton.defaultMessage, { selector: 'button' }))
        .toBeInTheDocument();
    });
  });

  test('calls "onClick" callback when add topic button is clicked', async () => {
    await mockStore(legacyApiResponse);
    createComponent(appConfig);

    const addTopicButton = queryByText(container, messages.addTopicButton.defaultMessage, { selector: 'button' });
    await waitFor(async () => {
      expect(queryByText(container, messages.configureAdditionalTopic.defaultMessage)).not.toBeInTheDocument();
      await act(async () => fireEvent.click(addTopicButton));
      expect(queryByText(container, messages.configureAdditionalTopic.defaultMessage)).toBeInTheDocument();
    });
  });

  test('updates discussion topic name', async () => {
    await mockStore(legacyApiResponse);
    createComponent(appConfig);
    const topicCard = queryByTestId(container, '13f106c6-6735-4e84-b097-0456cff55960');

    await act(async () => userEvent.click(queryByLabelText(topicCard, 'Expand')));
    await act(async () => {
      fireEvent.change(topicCard.querySelector('input'), { target: { value: 'new name' } });
    });
    await act(async () => userEvent.click(queryByLabelText(topicCard, 'Collapse')));

    expect(queryByText(topicCard, 'new name')).toBeInTheDocument();
  });
});

describe('TopicItem', () => {
  let axiosMock;
  let store;
  let container;

  beforeEach(() => {
    initializeMockApp({
      authenticatedUser: {
        userId: 3,
        username: 'abc123',
        administrator: true,
        roles: [],
      },
    });

    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
    store = initializeStore();
  });

  afterEach(() => {
    axiosMock.reset();
  });

  const createComponent = (props) => {
    const wrapper = render(
      <AppProvider store={store}>
        <IntlProvider locale="en">
          <Formik initialValues={appConfig}>
            <TopicItem {...props} />
          </Formik>
        </IntlProvider>
      </AppProvider>,
    );
    container = wrapper.container;
  };

  const mockStore = async (mockResponse) => {
    axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, mockResponse);
    await executeThunk(fetchProviders(courseId), store.dispatch);
  };

  test('displays a collapsible card for discussion topic', async () => {
    await mockStore(legacyApiResponse);
    createComponent(generalTopic);

    expect(queryAllByTestId(container, 'course')).toHaveLength(1);
  });

  test('displays collapse view of general discussion topic', async () => {
    await mockStore(legacyApiResponse);
    createComponent(generalTopic);

    const generalTopicNode = queryByTestId(container, 'course');
    expect(queryByLabelText(generalTopicNode, 'Expand')).toBeInTheDocument();
    expect(queryByLabelText(generalTopicNode, 'Collapse')).not.toBeInTheDocument();
    expect(queryByText(generalTopicNode, 'General')).toBeInTheDocument();
  });

  test('displays expand view of general discussion topic', async () => {
    await mockStore(legacyApiResponse);
    createComponent(generalTopic);

    const generalTopicNode = queryByTestId(container, 'course');
    userEvent.click(queryByLabelText(generalTopicNode, 'Expand'));

    expect(queryByLabelText(generalTopicNode, 'Expand')).not.toBeInTheDocument();
    expect(queryByLabelText(generalTopicNode, 'Collapse')).toBeInTheDocument();
    expect(queryByRole(generalTopicNode, 'button', { name: 'Delete Topic' })).not.toBeInTheDocument();
    expect(generalTopicNode.querySelector('input')).toBeInTheDocument();
  });

  test('displays expand view of additional discussion topic', async () => {
    await mockStore(legacyApiResponse);
    createComponent(additionalTopic);

    const topicCard = queryByTestId(container, '13f106c6-6735-4e84-b097-0456cff55960');
    userEvent.click(queryByLabelText(topicCard, 'Expand'));

    expect(queryByLabelText(topicCard, 'Expand')).not.toBeInTheDocument();
    expect(queryByLabelText(topicCard, 'Collapse')).toBeInTheDocument();
    expect(queryByRole(topicCard, 'button', { name: 'Delete Topic' })).toBeInTheDocument();
    expect(topicCard.querySelector('input')).toBeInTheDocument();
  });

  test('renders delete topic popup with providerName, label, helping text, a delete and a cancel button', async () => {
    await mockStore(legacyApiResponse);
    createComponent(additionalTopic);

    const topicCard = queryByTestId(container, '13f106c6-6735-4e84-b097-0456cff55960');
    userEvent.click(queryByLabelText(topicCard, 'Expand'));
    userEvent.click(queryByRole(topicCard, 'button', { name: 'Delete Topic' }));

    expect(queryAllByText(container, messages.discussionTopicDeletionLabel.defaultMessage)).toHaveLength(1);
    expect(queryByText(container, messages.discussionTopicDeletionLabel.defaultMessage)).toBeInTheDocument();
    expect(queryByText(container, messages.discussionTopicDeletionHelp.defaultMessage)).toBeInTheDocument();
    expect(queryByText(container, messages.discussionTopicDeletionHelp.defaultMessage)).toBeInTheDocument();
    expect(queryByText(container, messages.deleteButton.defaultMessage)).toBeInTheDocument();
    expect(queryByText(container, messages.cancelButton.defaultMessage)).toBeInTheDocument();
  });

  test('shows help text on field focus', async () => {
    await mockStore(legacyApiResponse);
    createComponent(additionalTopic);

    const topicCard = queryByTestId(container, '13f106c6-6735-4e84-b097-0456cff55960');
    userEvent.click(queryByLabelText(topicCard, 'Expand'));
    topicCard.querySelector('input').focus();

    expect(queryByText(topicCard, messages.addTopicHelpText.defaultMessage)).toBeInTheDocument();
  });
});