@testing-library/react#findByRole TypeScript Examples

it('should open comment popup on upvote', async () => {
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    {
      request: {
        query: UPVOTE_MUTATION,
        variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf' },
      },
      result: () => {
        return { data: { _: true } };
      },
    },
  ]);
  const [el] = await screen.findAllByLabelText('Upvote');
  el.click();
  await waitFor(async () =>
    expect(await screen.findByRole('textbox')).toBeInTheDocument(),
  );
});

it('should replace placeholders with posts and ad', async () => {
  renderComponent();
  await waitForNock();
  const elements = await screen.findAllByTestId('postItem');
  expect(elements.length).toBeGreaterThan(0);
  await Promise.all(
    elements.map(async (el) =>
      // eslint-disable-next-line testing-library/prefer-screen-queries
      expect((await findAllByRole(el, 'link'))[0]).toHaveAttribute('href'),
    ),
  );
  await waitFor(async () => {
    const el = await screen.findByTestId('adItem');
    // eslint-disable-next-line testing-library/prefer-screen-queries
    expect(await findByRole(el, 'link')).toHaveAttribute('href', ad.link);
  });
});

it('should report broken link', async () => {
  let mutationCalled = false;
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    {
      request: {
        query: REPORT_POST_MUTATION,
        variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf', reason: 'BROKEN' },
      },
      result: () => {
        mutationCalled = true;
        return { data: { _: true } };
      },
    },
  ]);
  const [menuBtn] = await screen.findAllByLabelText('Options');
  menuBtn.click();
  const contextBtn = await screen.findByText('Report');
  contextBtn.click();
  const brokenLinkBtn = await screen.findByText('Broken link');
  brokenLinkBtn.click();
  const submitBtn = await screen.findByText('Submit report');
  submitBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await waitFor(() =>
    expect(
      screen.queryByTitle('Eminem Quotes Generator - Simple PHP RESTful API'),
    ).not.toBeInTheDocument(),
  );
  await screen.findByRole('alert');
  const feed = await screen.findByTestId('posts-feed');
  expect(feed).toHaveAttribute('aria-live', 'assertive');
});

it('should report nsfw', async () => {
  let mutationCalled = false;
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    {
      request: {
        query: REPORT_POST_MUTATION,
        variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf', reason: 'NSFW' },
      },
      result: () => {
        mutationCalled = true;
        return { data: { _: true } };
      },
    },
  ]);
  const [menuBtn] = await screen.findAllByLabelText('Options');
  menuBtn.click();
  const contextBtn = await screen.findByText('Report');
  contextBtn.click();
  const brokenLinkBtn = await screen.findByText('NSFW');
  brokenLinkBtn.click();
  const submitBtn = await screen.findByText('Submit report');
  submitBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await waitFor(() =>
    expect(
      screen.queryByTitle('Eminem Quotes Generator - Simple PHP RESTful API'),
    ).not.toBeInTheDocument(),
  );
  await screen.findByRole('alert');
  const feed = await screen.findByTestId('posts-feed');
  expect(feed).toHaveAttribute('aria-live', 'assertive');
});

it('should block a source', async () => {
  let mutationCalled = false;
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    createTagsSettingsMock(),
    {
      request: {
        query: ADD_FILTERS_TO_FEED_MUTATION,
        variables: { filters: { excludeSources: ['echojs'] } },
      },
      result: () => {
        mutationCalled = true;
        return { data: { _: true } };
      },
    },
  ]);
  await waitFor(async () => {
    const data = await queryClient.getQueryData(
      getFeedSettingsQueryKey(defaultUser),
    );
    expect(data).toBeTruthy();
  });
  const [menuBtn] = await screen.findAllByLabelText('Options');
  menuBtn.click();
  const contextBtn = await screen.findByText(
    "Don't show articles from Echo JS",
  );
  contextBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await screen.findByRole('alert');
  const feed = await screen.findByTestId('posts-feed');
  expect(feed).toHaveAttribute('aria-live', 'assertive');
});

it('should block a tag', async () => {
  let mutationCalled = false;
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    createTagsSettingsMock(),
    {
      request: {
        query: ADD_FILTERS_TO_FEED_MUTATION,
        variables: { filters: { blockedTags: ['javascript'] } },
      },
      result: () => {
        mutationCalled = true;
        return { data: { _: true } };
      },
    },
  ]);
  await waitFor(async () => {
    const data = await queryClient.getQueryData(
      getFeedSettingsQueryKey(defaultUser),
    );
    expect(data).toBeTruthy();
  });
  const [menuBtn] = await screen.findAllByLabelText('Options');
  menuBtn.click();
  const contextBtn = await screen.findByText('Not interested in #javascript');
  contextBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await screen.findByRole('alert');
  const feed = await screen.findByTestId('posts-feed');
  expect(feed).toHaveAttribute('aria-live', 'assertive');
});

it('should be able to navigate through posts', async () => {
  const [firstPost, secondPost] = defaultFeedPage.edges;
  renderComponent();
  await waitForNock();

  mockGraphQL(createPostMock({ id: firstPost.node.id }));
  const [first] = await screen.findAllByLabelText('Comments');
  fireEvent.click(first);

  await screen.findByRole('dialog');
  const title = await screen.findByTestId('post-modal-title');
  expect(title).toHaveTextContent(firstPost.node.title);

  await screen.findByRole('navigation');
  const next = await screen.findByLabelText('Next');
  const params = { id: secondPost.node.id, title: secondPost.node.title };
  mockGraphQL(createPostMock(params));
  fireEvent.click(next);
  const secondTitle = await screen.findByTestId('post-modal-title');
  expect(secondTitle).toHaveTextContent(secondPost.node.title);

  await screen.findByRole('navigation');
  const previous = await screen.findByLabelText('Previous');
  mockGraphQL(createPostMock({ id: firstPost.node.id }));
  fireEvent.click(previous);
  const firstTitle = await screen.findByTestId('post-modal-title');
  expect(firstTitle).toHaveTextContent(firstPost.node.title);
});

it('should add one placeholder when loading', async () => {
  renderComponent();
  expect(await screen.findByRole('article')).toHaveAttribute('aria-busy');
});

it('should send comment through the comment popup', async () => {
  let mutationCalled = false;
  const newComment = {
    __typename: 'Comment',
    id: '4f354bb73009e4adfa5dbcbf9b3c4ebf',
    content: 'comment',
    createdAt: new Date(2017, 1, 10, 0, 1).toISOString(),
    permalink: 'https://daily.dev',
  };
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    {
      request: {
        query: UPVOTE_MUTATION,
        variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf' },
      },
      result: () => {
        return { data: { _: true } };
      },
    },
    {
      request: {
        query: COMMENT_ON_POST_MUTATION,
        variables: {
          id: '4f354bb73009e4adfa5dbcbf9b3c4ebf',
          content: 'comment',
        },
      },
      result: () => {
        mutationCalled = true;
        return {
          data: {
            comment: newComment,
          },
        };
      },
    },
  ]);
  const [upvoteBtn] = await screen.findAllByLabelText('Upvote');
  upvoteBtn.click();
  const input = (await screen.findByRole('textbox')) as HTMLTextAreaElement;
  fireEvent.change(input, { target: { value: 'comment' } });
  const commentBtn = await screen.findByText('Comment');
  commentBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await waitFor(async () =>
    expect(screen.queryByRole('textbox')).not.toBeInTheDocument(),
  );
});

it('should report broken link with comment', async () => {
  let mutationCalled = false;
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    {
      request: {
        query: REPORT_POST_MUTATION,
        variables: {
          id: '4f354bb73009e4adfa5dbcbf9b3c4ebf',
          reason: 'BROKEN',
          comment: 'comment',
        },
      },
      result: () => {
        mutationCalled = true;
        return { data: { _: true } };
      },
    },
  ]);
  const [menuBtn] = await screen.findAllByLabelText('Options');
  menuBtn.click();
  const contextBtn = await screen.findByText('Report');
  contextBtn.click();
  const brokenLinkBtn = await screen.findByText('Broken link');
  brokenLinkBtn.click();
  const input = (await screen.findByRole('textbox')) as HTMLTextAreaElement;
  fireEvent.change(input, { target: { value: 'comment' } });
  const submitBtn = await screen.findByText('Submit report');
  submitBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await waitFor(() =>
    expect(
      screen.queryByTitle('Eminem Quotes Generator - Simple PHP RESTful API'),
    ).not.toBeInTheDocument(),
  );
  await screen.findByRole('alert');
  const feed = await screen.findByTestId('posts-feed');
  expect(feed).toHaveAttribute('aria-live', 'assertive');
});

it('should open a modal to view post details', async () => {
  renderComponent();
  await waitForNock();
  const [first] = await screen.findAllByLabelText('Comments');
  fireEvent.click(first);
  await screen.findByRole('dialog');
});