[CHORE] Specs for Topic Messages component

2021-02-15 14:08:19 +03:00 · 2021-02-15 14:08:19 +03:00 · 677a6e675e
commit 677a6e675e
parent ae6ca2bf5c
12 changed files with 476 additions and 193 deletions
--- a/kafka-ui-react-app/package.json
+++ b/kafka-ui-react-app/package.json
@ -30,8 +30,7 @@
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "eslint -c .eslintrc.json --fix",
-      "git add",
-      "jest --bail --findRelatedTests"
+      "git add"
    ]
  },
  "scripts": {
@ -40,12 +39,13 @@
    "lint": "eslint --ext .tsx,.ts src/",
    "lint:fix": "eslint --ext .tsx,.ts src/ --fix",
    "test": "react-scripts test",
+    "test:CI": "CI=true npm test --watchAll=false",
    "eject": "react-scripts eject",
    "tsc": "tsc"
  },
  "husky": {
    "hooks": {
-      "pre-commit": "npm run tsc --noEmit && lint-staged"
+      "pre-commit": "npm run tsc --noEmit && lint-staged && npm run test:CI"
    }
  },
  "eslintConfig": {
--- a/kafka-ui-react-app/src/components/Topics/Details/Messages/MessageItem.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/MessageItem.tsx
@ -3,11 +3,11 @@ import { format } from 'date-fns';
 import JSONTree from 'react-json-tree';
 import { TopicMessage } from 'generated-sources';

-interface MessageItemProp {
+export interface MessageItemProp {
  partition: TopicMessage['partition'];
  offset: TopicMessage['offset'];
  timestamp: TopicMessage['timestamp'];
-  content: TopicMessage['content'];
+  content?: TopicMessage['content'];
 }

 const MessageItem: React.FC<MessageItemProp> = ({
@ -16,13 +16,11 @@ const MessageItem: React.FC<MessageItemProp> = ({
  timestamp,
  content,
 }) => (
-  <tr key="{timestamp}">
-    <td style={{ width: 200 }}>
-      {timestamp ? format(timestamp, 'yyyy-MM-dd HH:mm:ss') : null}
-    </td>
+  <tr>
+    <td style={{ width: 200 }}>{format(timestamp, 'yyyy-MM-dd HH:mm:ss')}</td>
    <td style={{ width: 150 }}>{offset}</td>
    <td style={{ width: 100 }}>{partition}</td>
-    <td key="{content}" style={{ wordBreak: 'break-word' }}>
+    <td style={{ wordBreak: 'break-word' }}>
      {content && (
        <JSONTree
          data={content}
--- a/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/Messages.tsx
@ -1,4 +1,9 @@
+import 'react-datepicker/dist/react-datepicker.css';
 import React, { useCallback, useEffect, useRef } from 'react';
+import { groupBy, map, concat, maxBy } from 'lodash';
+import MultiSelect from 'react-multi-select-component';
+import { Option } from 'react-multi-select-component/dist/lib/interfaces';
+import { useDebouncedCallback } from 'use-debounce';
 import {
  ClusterName,
  TopicMessageQueryParams,
@ -7,13 +12,6 @@ import {
 import { TopicMessage, Partition, SeekType } from 'generated-sources';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-
-import MultiSelect from 'react-multi-select-component';
-
-import * as _ from 'lodash';
-import { useDebouncedCallback } from 'use-debounce';
-import { Option } from 'react-multi-select-component/dist/lib/interfaces';
 import MessagesTable from './MessagesTable';

 export interface Props {
@ -81,17 +79,17 @@ const Messages: React.FC<Props> = ({
      offset: 0,
      partition: p.partition,
    }));
-    const messageUniqs: FilterProps[] = _.map(
-      _.groupBy(messages, 'partition'),
-      (v) => _.maxBy(v, 'offset')
+    const messageUniqs: FilterProps[] = map(
+      groupBy(messages, 'partition'),
+      (v) => maxBy(v, 'offset')
    ).map((v) => ({
      offset: v ? v.offset : 0,
      partition: v ? v.partition : 0,
    }));

-    return _.map(
-      _.groupBy(_.concat(partitionUniqs, messageUniqs), 'partition'),
-      (v) => _.maxBy(v, 'offset') as FilterProps
+    return map(
+      groupBy(concat(partitionUniqs, messageUniqs), 'partition'),
+      (v) => maxBy(v, 'offset') as FilterProps
    );
  }, [messages, partitions]);

--- a/kafka-ui-react-app/src/components/Topics/Details/Messages/MessagesContainer.ts
+++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/MessagesContainer.ts
@ -1,10 +1,5 @@
 import { connect } from 'react-redux';
-import {
-  ClusterName,
-  RootState,
-  TopicMessageQueryParams,
-  TopicName,
-} from 'redux/interfaces';
+import { ClusterName, RootState, TopicName } from 'redux/interfaces';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { fetchTopicMessages } from 'redux/actions';
 import {
@ -38,11 +33,7 @@ const mapStateToProps = (
 });

 const mapDispatchToProps = {
-  fetchTopicMessages: (
-    clusterName: ClusterName,
-    topicName: TopicName,
-    queryParams: Partial<TopicMessageQueryParams>
-  ) => fetchTopicMessages(clusterName, topicName, queryParams),
+  fetchTopicMessages,
 };

 export default withRouter(
--- a/kafka-ui-react-app/src/components/Topics/Details/Messages/MessagesTable.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/MessagesTable.tsx
@ -3,7 +3,7 @@ import { TopicMessage } from 'generated-sources';
 import CustomParamButton from 'components/Topics/shared/Form/CustomParams/CustomParamButton';
 import MessageItem from './MessageItem';

-interface MessagesTableProp {
+export interface MessagesTableProp {
  messages: TopicMessage[];
  onNext(event: React.MouseEvent<HTMLButtonElement>): void;
 }
@ -14,7 +14,7 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
  }

  return (
-    <div>
+    <>
      <table className="table is-striped is-fullwidth">
        <thead>
          <tr>
@ -48,7 +48,7 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
          />
        </div>
      </div>
-    </div>
+    </>
  );
 };

--- a/kafka-ui-react-app/src/components/Topics/Details/Messages/test/MessageItem.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/test/MessageItem.spec.tsx
@ -0,0 +1,34 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import MessageItem from 'components/Topics/Details/Messages/MessageItem';
+import { messages } from './fixtures';
+
+describe('MessageItem', () => {
+  describe('when content is defined', () => {
+    it('renders table row with JSONTree', () => {
+      const wrapper = shallow(<MessageItem {...messages[0]} />);
+
+      expect(wrapper.find('tr').length).toEqual(1);
+      expect(wrapper.find('td').length).toEqual(4);
+      expect(wrapper.find('JSONTree').length).toEqual(1);
+    });
+
+    it('matches snapshot', () => {
+      expect(shallow(<MessageItem {...messages[0]} />)).toMatchSnapshot();
+    });
+  });
+
+  describe('when content is undefined', () => {
+    it('renders table row without JSONTree', () => {
+      const wrapper = shallow(<MessageItem {...messages[1]} />);
+
+      expect(wrapper.find('tr').length).toEqual(1);
+      expect(wrapper.find('td').length).toEqual(4);
+      expect(wrapper.find('JSONTree').length).toEqual(0);
+    });
+
+    it('matches snapshot', () => {
+      expect(shallow(<MessageItem {...messages[1]} />)).toMatchSnapshot();
+    });
+  });
+});
--- a/kafka-ui-react-app/src/components/Topics/Details/Messages/test/Messages.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/test/Messages.spec.tsx
@ -0,0 +1,178 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { mount, shallow } from 'enzyme';
+import * as useDebounce from 'use-debounce';
+import DatePicker from 'react-datepicker';
+import Messages, { Props } from 'components/Topics/Details/Messages/Messages';
+import MessagesContainer from 'components/Topics/Details/Messages/MessagesContainer';
+import PageLoader from 'components/common/PageLoader/PageLoader';
+import configureStore from 'redux/store/configureStore';
+
+describe('Messages', () => {
+  describe('Container', () => {
+    const store = configureStore();
+
+    it('renders view', () => {
+      const component = shallow(
+        <Provider store={store}>
+          <MessagesContainer />
+        </Provider>
+      );
+
+      expect(component.exists()).toBeTruthy();
+    });
+  });
+
+  describe('View', () => {
+    beforeEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    const setupWrapper = (props: Partial<Props> = {}) => (
+      <Messages
+        clusterName="Test cluster"
+        topicName="Cluster topic"
+        isFetched
+        fetchTopicMessages={jest.fn()}
+        messages={[]}
+        partitions={[]}
+        {...props}
+      />
+    );
+
+    describe('Initial state', () => {
+      it('renders PageLoader', () => {
+        expect(
+          shallow(setupWrapper({ isFetched: false })).exists(PageLoader)
+        ).toBeTruthy();
+      });
+    });
+
+    describe('Table', () => {
+      describe('With messages', () => {
+        const messagesWrapper = mount(
+          setupWrapper({
+            messages: [
+              {
+                partition: 1,
+                offset: 2,
+                timestamp: new Date('05-05-1994'),
+                content: [1, 2, 3],
+              },
+            ],
+          })
+        );
+        it('renders table', () => {
+          expect(
+            messagesWrapper.exists(
+              '[className="table is-striped is-fullwidth"]'
+            )
+          ).toBeTruthy();
+        });
+        it('renders JSONTree', () => {
+          expect(messagesWrapper.find('JSONTree').length).toEqual(1);
+        });
+        it('parses message content correctly', () => {
+          const messages = [
+            {
+              partition: 1,
+              offset: 2,
+              timestamp: new Date('05-05-1994'),
+              content: [1, 2, 3],
+            },
+          ];
+          const content = JSON.stringify(messages[0].content);
+          expect(JSON.parse(content)).toEqual(messages[0].content);
+        });
+      });
+      describe('Without messages', () => {
+        it('renders string', () => {
+          const wrapper = mount(setupWrapper());
+          expect(wrapper.text()).toContain('No messages at selected topic');
+        });
+      });
+    });
+
+    describe('Offset field', () => {
+      describe('Seek Type dependency', () => {
+        const wrapper = mount(setupWrapper());
+
+        it('renders DatePicker', () => {
+          wrapper
+            .find('[id="selectSeekType"]')
+            .simulate('change', { target: { value: 'TIMESTAMP' } });
+
+          expect(
+            wrapper.find('[id="selectSeekType"]').first().props().value
+          ).toEqual('TIMESTAMP');
+
+          expect(wrapper.exists(DatePicker)).toBeTruthy();
+        });
+      });
+
+      describe('With defined offset value', () => {
+        const wrapper = shallow(setupWrapper());
+
+        it('shows offset value in input', () => {
+          const offset = '10';
+
+          wrapper
+            .find('#searchOffset')
+            .simulate('change', { target: { value: offset } });
+
+          expect(wrapper.find('#searchOffset').first().props().value).toEqual(
+            offset
+          );
+        });
+      });
+      describe('With invalid offset value', () => {
+        const wrapper = shallow(setupWrapper());
+
+        it('shows 0 in input', () => {
+          wrapper
+            .find('#searchOffset')
+            .simulate('change', { target: { value: null } });
+
+          expect(wrapper.find('#searchOffset').first().props().value).toBe('0');
+        });
+      });
+    });
+
+    describe('Search field', () => {
+      it('renders input correctly', () => {
+        const query = 20;
+        const mockedUseDebouncedCallback = jest.fn();
+        jest
+          .spyOn(useDebounce, 'useDebouncedCallback')
+          .mockImplementationOnce(() => [
+            mockedUseDebouncedCallback,
+            jest.fn(),
+            jest.fn(),
+          ]);
+
+        const wrapper = shallow(setupWrapper());
+
+        wrapper
+          .find('#searchText')
+          .simulate('change', { target: { value: query } });
+
+        expect(wrapper.find('#searchText').first().props().value).toEqual(
+          query
+        );
+        expect(mockedUseDebouncedCallback).toHaveBeenCalledWith({ q: query });
+      });
+    });
+
+    describe('Submit button', () => {
+      it('fetches topic messages', () => {
+        const mockedfetchTopicMessages = jest.fn();
+        const wrapper = mount(
+          setupWrapper({ fetchTopicMessages: mockedfetchTopicMessages })
+        );
+
+        wrapper.find('[type="submit"]').simulate('click');
+        expect(mockedfetchTopicMessages).toHaveBeenCalled();
+      });
+    });
+  });
+});
--- a/kafka-ui-react-app/src/components/Topics/Details/Messages/test/MessagesTable.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/test/MessagesTable.spec.tsx
@ -0,0 +1,45 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import MessagesTable, {
+  MessagesTableProp,
+} from 'components/Topics/Details/Messages/MessagesTable';
+import { messages } from './fixtures';
+
+describe('MessagesTable', () => {
+  const setupWrapper = (props: Partial<MessagesTableProp> = {}) => (
+    <MessagesTable messages={[]} onNext={jest.fn()} {...props} />
+  );
+
+  describe('when topic is empty', () => {
+    it('renders table row with JSONTree', () => {
+      const wrapper = shallow(setupWrapper());
+      expect(wrapper.exists('table')).toBeFalsy();
+      expect(wrapper.exists('CustomParamButton')).toBeFalsy();
+      expect(wrapper.text()).toEqual('No messages at selected topic');
+    });
+
+    it('matches snapshot', () => {
+      expect(shallow(setupWrapper())).toMatchSnapshot();
+    });
+  });
+
+  describe('when topic contains messages', () => {
+    const onNext = jest.fn();
+    const wrapper = shallow(setupWrapper({ messages, onNext }));
+
+    it('renders table row without JSONTree', () => {
+      expect(wrapper.exists('table')).toBeTruthy();
+      expect(wrapper.exists('CustomParamButton')).toBeTruthy();
+      expect(wrapper.find('MessageItem').length).toEqual(2);
+    });
+
+    it('handles CustomParamButton click', () => {
+      wrapper.find('CustomParamButton').simulate('click');
+      expect(onNext).toHaveBeenCalled();
+    });
+
+    it('matches snapshot', () => {
+      expect(shallow(setupWrapper({ messages, onNext }))).toMatchSnapshot();
+    });
+  });
+});
--- a/kafka-ui-react-app/src/components/Topics/Details/Messages/test/snapshots/MessageItem.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/test/snapshots/MessageItem.spec.tsx.snap
@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageItem when content is defined matches snapshot 1`] = `
+<tr>
+  <td
+    style={
+      Object {
+        "width": 200,
+      }
+    }
+  >
+    1995-05-05 00:00:00
+  </td>
+  <td
+    style={
+      Object {
+        "width": 150,
+      }
+    }
+  >
+    2
+  </td>
+  <td
+    style={
+      Object {
+        "width": 100,
+      }
+    }
+  >
+    1
+  </td>
+  <td
+    style={
+      Object {
+        "wordBreak": "break-word",
+      }
+    }
+  >
+    <JSONTree
+      collectionLimit={50}
+      data={
+        Object {
+          "foo": "bar",
+          "key": "val",
+        }
+      }
+      getItemString={[Function]}
+      hideRoot={true}
+      invertTheme={false}
+      isCustomNode={[Function]}
+      keyPath={
+        Array [
+          "root",
+        ]
+      }
+      labelRenderer={[Function]}
+      postprocessValue={[Function]}
+      shouldExpandNode={[Function]}
+      theme={
+        Object {
+          "base0B": "#363636",
+          "base0D": "#3273dc",
+          "tree": [Function],
+          "value": [Function],
+        }
+      }
+      valueRenderer={[Function]}
+    />
+  </td>
+</tr>
+`;
+
+exports[`MessageItem when content is undefined matches snapshot 1`] = `
+<tr>
+  <td
+    style={
+      Object {
+        "width": 200,
+      }
+    }
+  >
+    2020-05-07 00:00:00
+  </td>
+  <td
+    style={
+      Object {
+        "width": 150,
+      }
+    }
+  >
+    20
+  </td>
+  <td
+    style={
+      Object {
+        "width": 100,
+      }
+    }
+  >
+    2
+  </td>
+  <td
+    style={
+      Object {
+        "wordBreak": "break-word",
+      }
+    }
+  />
+</tr>
+`;
--- a/kafka-ui-react-app/src/components/Topics/Details/Messages/test/snapshots/MessagesTable.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/test/snapshots/MessagesTable.spec.tsx.snap
@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessagesTable when topic contains messages matches snapshot 1`] = `
+<Fragment>
+  <table
+    className="table is-striped is-fullwidth"
+  >
+    <thead>
+      <tr>
+        <th>
+          Timestamp
+        </th>
+        <th>
+          Offset
+        </th>
+        <th>
+          Partition
+        </th>
+        <th>
+          Content
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <MessageItem
+        content={
+          Object {
+            "foo": "bar",
+            "key": "val",
+          }
+        }
+        key="Fri May 05 1995 00:00:00 GMT+0400 (Moscow Summer Time)"
+        offset={2}
+        partition={1}
+        timestamp={1995-05-04T20:00:00.000Z}
+      />
+      <MessageItem
+        key="Thu May 07 2020 00:00:00 GMT+0300 (Moscow Standard Time)"
+        offset={20}
+        partition={2}
+        timestamp={2020-05-06T21:00:00.000Z}
+      />
+    </tbody>
+  </table>
+  <div
+    className="columns"
+  >
+    <div
+      className="column is-full"
+    >
+      <CustomParamButton
+        btnText="Next"
+        className="is-link is-pulled-right"
+        onClick={[MockFunction]}
+        type="fa-chevron-right"
+      />
+    </div>
+  </div>
+</Fragment>
+`;
+
+exports[`MessagesTable when topic is empty matches snapshot 1`] = `
+<div>
+  No messages at selected topic
+</div>
+`;
--- a/kafka-ui-react-app/src/components/Topics/Details/Messages/test/fixtures.ts
+++ b/kafka-ui-react-app/src/components/Topics/Details/Messages/test/fixtures.ts
@ -0,0 +1,19 @@
+import { TopicMessage } from 'generated-sources';
+
+export const messages: TopicMessage[] = [
+  {
+    partition: 1,
+    offset: 2,
+    timestamp: new Date('05-05-1995'),
+    content: {
+      foo: 'bar',
+      key: 'val',
+    },
+  },
+  {
+    partition: 2,
+    offset: 20,
+    timestamp: new Date('05-07-2020'),
+    content: undefined,
+  },
+];
--- a/kafka-ui-react-app/src/tests/Topics/Details/Messages/Messages.spec.tsx
+++ b/kafka-ui-react-app/src/tests/Topics/Details/Messages/Messages.spec.tsx
@ -1,156 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import JSONTree from 'react-json-tree';
-import * as useDebounce from 'use-debounce';
-import DatePicker from 'react-datepicker';
-import Messages, { Props } from 'components/Topics/Details/Messages/Messages';
-import PageLoader from 'components/common/PageLoader/PageLoader';
-
-describe('Messages component', () => {
-  beforeEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  const setupWrapper = (props: Partial<Props> = {}) => (
-    <Messages
-      clusterName="Test cluster"
-      topicName="Cluster topic"
-      isFetched
-      fetchTopicMessages={jest.fn()}
-      messages={[]}
-      partitions={[]}
-      {...props}
-    />
-  );
-
-  describe('Initial state', () => {
-    it('renders PageLoader', () => {
-      expect(
-        shallow(setupWrapper({ isFetched: false })).exists(PageLoader)
-      ).toBeTruthy();
-    });
-  });
-
-  describe('Messages table', () => {
-    describe('With messages', () => {
-      const messagesWrapper = mount(
-        setupWrapper({
-          messages: [
-            {
-              partition: 1,
-              offset: 2,
-              timestamp: new Date('05-05-1994'),
-              content: [1, 2, 3],
-            },
-          ],
-        })
-      );
-      it('renders table', () => {
-        expect(
-          messagesWrapper.exists('[className="table is-striped is-fullwidth"]')
-        ).toBeTruthy();
-      });
-      it('renders JSONTree', () => {
-        expect(messagesWrapper.find(JSONTree).length).toEqual(1);
-      });
-      it('parses message content correctly', () => {
-        const messages = [
-          {
-            partition: 1,
-            offset: 2,
-            timestamp: new Date('05-05-1994'),
-            content: [1, 2, 3],
-          },
-        ];
-        const content = JSON.stringify(messages[0].content);
-        expect(JSON.parse(content)).toEqual(messages[0].content);
-      });
-    });
-    describe('Without messages', () => {
-      it('renders string', () => {
-        const wrapper = mount(setupWrapper());
-        expect(wrapper.text()).toContain('No messages at selected topic');
-      });
-    });
-  });
-
-  describe('Offset field', () => {
-    describe('Seek Type dependency', () => {
-      const wrapper = mount(setupWrapper());
-
-      it('renders DatePicker', () => {
-        wrapper
-          .find('[id="selectSeekType"]')
-          .simulate('change', { target: { value: 'TIMESTAMP' } });
-
-        expect(
-          wrapper.find('[id="selectSeekType"]').first().props().value
-        ).toEqual('TIMESTAMP');
-
-        expect(wrapper.exists(DatePicker)).toBeTruthy();
-      });
-    });
-
-    describe('With defined offset value', () => {
-      const wrapper = shallow(setupWrapper());
-
-      it('shows offset value in input', () => {
-        const offset = '10';
-
-        wrapper
-          .find('#searchOffset')
-          .simulate('change', { target: { value: offset } });
-
-        expect(wrapper.find('#searchOffset').first().props().value).toEqual(
-          offset
-        );
-      });
-    });
-    describe('With invalid offset value', () => {
-      const wrapper = shallow(setupWrapper());
-
-      it('shows 0 in input', () => {
-        wrapper
-          .find('#searchOffset')
-          .simulate('change', { target: { value: null } });
-
-        expect(wrapper.find('#searchOffset').first().props().value).toBe('0');
-      });
-    });
-  });
-
-  describe('Search field', () => {
-    it('renders input correctly', () => {
-      const query = 20;
-      const mockedUseDebouncedCallback = jest.fn();
-      jest
-        .spyOn(useDebounce, 'useDebouncedCallback')
-        .mockImplementationOnce(() => [
-          mockedUseDebouncedCallback,
-          jest.fn(),
-          jest.fn(),
-        ]);
-
-      const wrapper = shallow(setupWrapper());
-
-      wrapper
-        .find('#searchText')
-        .simulate('change', { target: { value: query } });
-
-      expect(wrapper.find('#searchText').first().props().value).toEqual(query);
-      expect(mockedUseDebouncedCallback).toHaveBeenCalledWith({ q: query });
-    });
-  });
-
-  describe('Submit button', () => {
-    it('fetches topic messages', () => {
-      const mockedfetchTopicMessages = jest.fn();
-      const wrapper = mount(
-        setupWrapper({ fetchTopicMessages: mockedfetchTopicMessages })
-      );
-
-      wrapper.find('[type="submit"]').simulate('click');
-      expect(mockedfetchTopicMessages).toHaveBeenCalled();
-    });
-  });
-});