Topic.spec.tsx 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import React from 'react';
  2. import { render, WithRoute } from 'lib/testHelpers';
  3. import { screen } from '@testing-library/react';
  4. import Topic from 'components/Topics/Topic/Topic';
  5. import {
  6. clusterTopicPath,
  7. clusterTopicEditPath,
  8. clusterTopicSendMessagePath,
  9. getNonExactPath,
  10. } from 'lib/paths';
  11. import { useAppDispatch } from 'lib/hooks/redux';
  12. const topicText = {
  13. edit: 'Edit',
  14. send: 'Send Message',
  15. detail: 'Details',
  16. loading: 'Loading',
  17. };
  18. jest.mock('components/Topics/Topic/Edit/Edit', () => () => (
  19. <div>{topicText.edit}</div>
  20. ));
  21. jest.mock('components/Topics/Topic/SendMessage/SendMessage', () => () => (
  22. <div>{topicText.send}</div>
  23. ));
  24. jest.mock('components/Topics/Topic/Details/Details', () => () => (
  25. <div>{topicText.detail}</div>
  26. ));
  27. jest.mock('lib/hooks/redux', () => ({
  28. ...jest.requireActual('lib/hooks/redux'),
  29. useAppDispatch: jest.fn(),
  30. }));
  31. const useDispatchMock = jest.fn(jest.fn());
  32. describe('Topic Component', () => {
  33. beforeEach(() => {
  34. (useAppDispatch as jest.Mock).mockImplementation(() => useDispatchMock);
  35. });
  36. const renderComponent = (pathname: string) =>
  37. render(
  38. <WithRoute path={getNonExactPath(clusterTopicPath())}>
  39. <Topic />
  40. </WithRoute>,
  41. { initialEntries: [pathname] }
  42. );
  43. it('renders Edit page', () => {
  44. renderComponent(clusterTopicEditPath('local', 'myTopicName'));
  45. expect(screen.getByText(topicText.edit)).toBeInTheDocument();
  46. });
  47. it('renders Send Message page', () => {
  48. renderComponent(clusterTopicSendMessagePath('local', 'myTopicName'));
  49. expect(screen.getByText(topicText.send)).toBeInTheDocument();
  50. });
  51. it('renders Details Container page', () => {
  52. renderComponent(clusterTopicPath('local', 'myTopicName'));
  53. expect(screen.getByText(topicText.detail)).toBeInTheDocument();
  54. });
  55. it('resets topic messages after unmount', () => {
  56. const component = renderComponent(clusterTopicPath('local', 'myTopicName'));
  57. component.unmount();
  58. expect(useDispatchMock).toHaveBeenCalledTimes(1);
  59. });
  60. });