@testing-library/react#findByText TypeScript Examples

The following examples show how to use @testing-library/react#findByText. 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: AsyncDualSelectWidget.test.tsx    From ke with MIT License 6 votes vote down vote up 
test('It should handle change', async () => {
  defaultProps.submitChange = jest.fn()
  const handleChange = defaultProps.submitChange
  const screen = render(<AsyncDualSelectWidget {...(defaultProps as any)} />)
  await waitFor(() => screen.findByText('test'))
  const testOption = screen.getByText('test')
  const selectButton = screen.getByText('SELECT')
  fireEvent.click(testOption)
  fireEvent.click(selectButton)
  expect(handleChange).toBeCalled()
})
Example #2
Source File: AsyncDualSelectWidget.test.tsx    From ke with MIT License 6 votes vote down vote up 
test('It should move the item from the left list to the right list', async () => {
  const screen = render(<AsyncDualSelectWidget {...(defaultProps as any)} />)

  await waitFor(() => screen.findByText('test'))

  const leftList = screen.queryByTestId('ds-left-list')
  await waitFor(() => findByText(leftList as HTMLElement, 'test'))
  expect(leftList?.textContent).toContain('test')

  const testOption = screen.getByText('test')
  const selectButton = screen.getByText('SELECT')
  fireEvent.click(testOption)
  fireEvent.click(selectButton)

  const rightList = screen.queryByTestId('ds-right-list')
  expect(getByText(rightList as HTMLElement, 'test')).not.toBeNull()
  expect(queryByText(leftList as HTMLElement, 'test')).toBeNull()
})
Example #3
Source File: Feed.spec.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
it('should update feed item on subscription message', async () => {
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
  ]);
  await screen.findByTestId('adItem');
  await waitFor(async () => {
    const [el] = await screen.findAllByLabelText('Upvote');
    // eslint-disable-next-line testing-library/no-node-access, testing-library/prefer-screen-queries
    expect(await findByText(el.parentElement, '5')).toBeInTheDocument();
  });
  nextCallback({
    postsEngaged: {
      id: defaultFeedPage.edges[0].node.id,
      numUpvotes: 6,
      numComments: 7,
    },
  });
  await waitFor(async () => {
    const [el] = await screen.findAllByLabelText('Upvote');
    // eslint-disable-next-line testing-library/no-node-access, testing-library/prefer-screen-queries
    expect(await findByText(el.parentElement, '6')).toBeInTheDocument();
  });
});
Example #4
Source File: Feed.spec.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
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');
});
Example #5
Source File: Feed.spec.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
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');
});
Example #6
Source File: Feed.spec.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
it('should hide post', async () => {
  let mutationCalled = false;
  renderComponent([
    createFeedMock({
      pageInfo: defaultFeedPage.pageInfo,
      edges: [defaultFeedPage.edges[0]],
    }),
    {
      request: {
        query: HIDE_POST_MUTATION,
        variables: { id: '4f354bb73009e4adfa5dbcbf9b3c4ebf' },
      },
      result: () => {
        mutationCalled = true;
        return { data: { _: true } };
      },
    },
  ]);
  const [menuBtn] = await screen.findAllByLabelText('Options');
  menuBtn.click();
  const contextBtn = await screen.findByText('Hide');
  contextBtn.click();
  await waitFor(() => expect(mutationCalled).toBeTruthy());
  await waitFor(() =>
    expect(
      screen.queryByTitle('Eminem Quotes Generator - Simple PHP RESTful API'),
    ).not.toBeInTheDocument(),
  );
});
Example #7
Source File: Feed.spec.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
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');
});
Example #8
Source File: Feed.spec.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
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');
});
Example #9
Source File: AsyncDualSelectWidget.test.tsx    From ke with MIT License 5 votes vote down vote up 
test('It should render values from server', async () => {
  const screen = render(<AsyncDualSelectWidget {...(defaultProps as any)} />)
  await waitFor(() => screen.findByText('test'))
  expect(screen.getByText('test')).toBeDefined()
  expect(screen.getByText('peretest')).toBeDefined()
})
Example #10
Source File: Feed.spec.tsx    From apps with GNU Affero General Public License v3.0 5 votes vote down vote up 
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(),
  );
});
Example #11
Source File: Feed.spec.tsx    From apps with GNU Affero General Public License v3.0 5 votes vote down vote up 
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');
});