Adding Loader indicator to the TopicsConsumerGroups pages + migrating its test from Enzyme to react testing library (#1734)

kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups.tsx

@@ -8,11 +8,13 @@ import { Tag } from 'components/common/Tag/Tag.styled';
 import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
 import { Link } from 'react-router-dom';
 import getTagColor from 'components/ConsumerGroups/Utils/TagColor';
+import PageLoader from 'components/common/PageLoader/PageLoader';
 
-interface Props extends Topic, TopicDetails {
+export interface Props extends Topic, TopicDetails {
   clusterName: ClusterName;
   topicName: TopicName;
   consumerGroups: ConsumerGroup[];
+  isFetched: boolean;
   fetchTopicConsumerGroups(
     clusterName: ClusterName,
     topicName: TopicName
@@ -24,11 +26,16 @@ const TopicConsumerGroups: React.FC<Props> = ({
   fetchTopicConsumerGroups,
   clusterName,
   topicName,
+  isFetched,
 }) => {
   React.useEffect(() => {
     fetchTopicConsumerGroups(clusterName, topicName);
   }, [clusterName, fetchTopicConsumerGroups, topicName]);
 
+  if (!isFetched) {
+    return <PageLoader />;
+  }
+
   return (
     <div>
       <Table isFullwidth>

kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroupsContainer.ts

@@ -3,7 +3,10 @@ import { RootState, TopicName, ClusterName } from 'redux/interfaces';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { fetchTopicConsumerGroups } from 'redux/actions';
 import TopicConsumerGroups from 'components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups';
-import { getTopicConsumerGroups } from 'redux/reducers/topics/selectors';
+import {
+  getTopicConsumerGroups,
+  getTopicsConsumerGroupsFetched,
+} from 'redux/reducers/topics/selectors';
 
 interface RouteProps {
   clusterName: ClusterName;
@@ -23,6 +26,7 @@ const mapStateToProps = (
   consumerGroups: getTopicConsumerGroups(state, topicName),
   topicName,
   clusterName,
+  isFetched: getTopicsConsumerGroupsFetched(state),
 });
 
 const mapDispatchToProps = {

kafka-ui-react-app/src/components/Topics/Topic/Details/ConsumerGroups/__test__/TopicConsumerGroups.spec.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'lib/testHelpers';
-import ConsumerGroups from 'components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups';
+import { screen } from '@testing-library/react';
+import ConsumerGroups, {
+  Props,
+} from 'components/Topics/Topic/Details/ConsumerGroups/TopicConsumerGroups';
 import { ConsumerGroupState } from 'generated-sources';
 
-describe('Details', () => {
+describe('TopicConsumerGroups', () => {
-  const mockFn = jest.fn();
+  const mockClusterName = 'localClusterName';
-  const mockClusterName = 'local';
+  const mockTopicName = 'localTopicName';
-  const mockTopicName = 'local';
   const mockWithConsumerGroup = [
     {
       groupId: 'amazon.msk.canary.group.broker-7',
@@ -30,29 +32,40 @@ describe('Details', () => {
     },
   ];
 
-  it("don't render ConsumerGroups in Topic", () => {
+  const setUpComponent = (props: Partial<Props> = {}) => {
-    const component = shallow(
+    const { name, topicName, consumerGroups, isFetched } = props;
+
+    return render(
       <ConsumerGroups
         clusterName={mockClusterName}
-        consumerGroups={[]}
+        consumerGroups={consumerGroups?.length ? consumerGroups : []}
-        name={mockTopicName}
+        name={name || mockTopicName}
-        fetchTopicConsumerGroups={mockFn}
+        fetchTopicConsumerGroups={jest.fn()}
-        topicName={mockTopicName}
+        topicName={topicName || mockTopicName}
+        isFetched={'isFetched' in props ? !!isFetched : false}
       />
     );
-    expect(component.find('td').text()).toEqual('No active consumer groups');
+  };
+
+  describe('Default Setup', () => {
+    beforeEach(() => {
+      setUpComponent();
+    });
+    it('should view the Page loader when it is fetching state', () => {
+      expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+  });
+
+  it("don't render ConsumerGroups in Topic", () => {
+    setUpComponent({ isFetched: true });
+    expect(screen.getByText(/No active consumer groups/i)).toBeInTheDocument();
   });
 
   it('render ConsumerGroups in Topic', () => {
-    const component = shallow(
+    setUpComponent({
-      <ConsumerGroups
+      consumerGroups: mockWithConsumerGroup,
-        clusterName={mockClusterName}
+      isFetched: true,
-        consumerGroups={mockWithConsumerGroup}
+    });
-        name={mockTopicName}
+    expect(screen.getAllByRole('rowgroup')).toHaveLength(2);
-        fetchTopicConsumerGroups={mockFn}
-        topicName={mockTopicName}
-      />
-    );
-    expect(component.exists('tbody')).toBeTruthy();
   });
 });

kafka-ui-react-app/src/redux/reducers/topics/selectors.ts

@@ -33,6 +33,10 @@ const getReplicationFactorUpdateStatus = createLeagcyFetchingSelector(
 );
 const getTopicDeletingStatus = createLeagcyFetchingSelector('DELETE_TOPIC');
 
+const getTopicConsumerGroupsStatus = createLeagcyFetchingSelector(
+  'GET_TOPIC_CONSUMER_GROUPS'
+);
+
 export const getIsTopicDeleted = createSelector(
   getTopicDeletingStatus,
   (status) => status === 'fetched'
@@ -88,6 +92,11 @@ export const getTopicReplicationFactorUpdated = createSelector(
   (status) => status === 'fetched'
 );
 
+export const getTopicsConsumerGroupsFetched = createSelector(
+  getTopicConsumerGroupsStatus,
+  (status) => status === 'fetched'
+);
+
 export const getTopicList = createSelector(
   getAreTopicsFetched,
   getAllNames,