FE: Add tests for kafka connect connectors

Author: Vixtir

frontend/src/components/ClusterPage/ClusterPage.tsx

@@ -106,12 +106,6 @@ const ClusterPage: React.FC = () => {
                 element={<KafkaConnect />}
               />
             )}
-            {contextValue.hasKafkaConnectConfigured && (
-              <Route
-                path={getNonExactPath(kafkaConnectRelativePath)}
-                element={<KafkaConnect />}
-              />
-            )}
             {contextValue.hasKsqlDbConfigured && (
               <Route
                 path={getNonExactPath(clusterKsqlDbRelativePath)}

frontend/src/components/ClusterPage/__tests__/ClusterPage.spec.tsx

@@ -6,20 +6,20 @@ import { render, WithRoute } from 'lib/testHelpers';
 import {
   clusterBrokersPath,
   clusterConnectorsPath,
-  clusterConnectsPath,
   clusterConsumerGroupsPath,
   clusterKsqlDbPath,
   clusterPath,
   clusterSchemasPath,
   clusterTopicsPath,
+  kafkaConnectPath,
 } from 'lib/paths';
 import { useClusters } from 'lib/hooks/api/clusters';
 import { onlineClusterPayload } from 'lib/fixtures/clusters';
 
 const CLusterCompText = {
   Topics: 'Topics',
   Schemas: 'Schemas',
-  Connect: 'Connect',
+  Connect: 'Kafka Connect',
   Brokers: 'Brokers',
   ConsumerGroups: 'ConsumerGroups',
   KsqlDb: 'KsqlDb',
@@ -111,7 +111,7 @@ describe('ClusterPage', () => {
     itCorrectlyHandlesConfiguredSchema(
       ClusterFeaturesEnum.KAFKA_CONNECT,
       CLusterCompText.Connect,
-      clusterConnectsPath(onlineClusterPayload.name)
+      kafkaConnectPath(onlineClusterPayload.name)
     );
     itCorrectlyHandlesConfiguredSchema(
       ClusterFeaturesEnum.KAFKA_CONNECT,

frontend/src/components/Connect/Clusters/Clusters.tsx

@@ -1,29 +1,11 @@
 import React from 'react';
-import { Connect } from 'generated-sources';
 import { useConnects } from 'lib/hooks/api/kafkaConnect';
 import useAppParams from 'lib/hooks/useAppParams';
 import { ClusterNameRoute } from 'lib/paths';
 
 import ClustersStatistics from './ui/Statistics/Statistics';
 import List from './ui/List/List';
 
-const testConnects: Connect[] = [
-  {
-    name: 'local',
-    connectorsCount: 5,
-    failedConnectorsCount: 0,
-    tasksCount: 5,
-    failedTasksCount: 0,
-  },
-  {
-    name: 'Cluster name 2',
-    connectorsCount: 5,
-    failedConnectorsCount: 1,
-    tasksCount: 6,
-    failedTasksCount: 3,
-  },
-];
-
 const KafkaConnectClustersPage = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const { data: connects, isLoading } = useConnects(clusterName, true);

frontend/src/components/Connect/Header/__tests__/Header.spec.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Header from 'components/Connect/Header/Header';
+import ClusterContext, {
+  initialValue,
+} from 'components/contexts/ClusterContext';
+import { render } from 'lib/testHelpers';
+import { screen } from '@testing-library/react';
+import { connects } from 'lib/fixtures/kafkaConnect';
+import { useConnects } from 'lib/hooks/api/kafkaConnect';
+
+jest.mock('lib/hooks/api/kafkaConnect', () => ({
+  useConnects: jest.fn(),
+}));
+
+describe('Kafka Connect header', () => {
+  beforeEach(() => {
+    (useConnects as jest.Mock).mockImplementation(() => ({
+      data: connects,
+    }));
+  });
+
+  async function renderComponent({ isReadOnly }: { isReadOnly: boolean }) {
+    render(
+      <ClusterContext.Provider value={{ ...initialValue, isReadOnly }}>
+        <Header />
+      </ClusterContext.Provider>
+    );
+  }
+
+  it('render create connector button', () => {
+    renderComponent({ isReadOnly: false });
+
+    const btn = screen.getByRole('button', { name: 'Create Connector' });
+
+    expect(btn).toBeInTheDocument();
+    expect(btn).toBeEnabled();
+  });
+
+  describe('when no connects', () => {
+    it('create connector button is disabled', () => {
+      renderComponent({ isReadOnly: false });
+
+      const btn = screen.getByRole('button', { name: 'Create Connector' });
+
+      expect(btn).toBeInTheDocument();
+      expect(btn).toBeEnabled();
+    });
+  });
+
+  describe('when cluster is readonly', () => {
+    it('doesnt render create connector button', () => {
+      (useConnects as jest.Mock).mockImplementation(() => ({
+        data: [],
+      }));
+      renderComponent({ isReadOnly: false });
+
+      const btn = screen.queryByRole('button', { name: 'Create Connector' });
+
+      expect(btn).toBeDisabled();
+    });
+  });
+});

frontend/src/components/Connect/List/Statistics/Statistics.tsx

@@ -14,7 +14,7 @@ const ConnectorsStatistics = ({ connectors, isLoading }: Props) => {
   }, [connectors]);
 
   return (
-    <Statistics.Container>
+    <Statistics.Container role="group">
       <Statistics.Item
         title="Connectors"
         count={statistics.connectorsCount}

frontend/src/components/Connect/List/Statistics/__tests__/Statistics.spec.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import { screen, within } from '@testing-library/react';
+import Statistics from 'components/Connect/List/Statistics/Statistics';
+import { FullConnectorInfo } from 'generated-sources';
+import { connectors } from 'lib/fixtures/kafkaConnect';
+
+describe('Kafka Connect Connectors Statistics', () => {
+  async function renderComponent({
+    data,
+    isLoading,
+  }: {
+    data: FullConnectorInfo[] | undefined;
+    isLoading: boolean;
+  }) {
+    render(<Statistics connectors={data ?? []} isLoading={isLoading} />);
+  }
+
+  describe('when data loading', () => {
+    let statistics: HTMLElement;
+    beforeEach(() => {
+      renderComponent({ data: undefined, isLoading: true });
+      statistics = screen.getByRole('group');
+    });
+
+    it('renders statistic container elements', () => {
+      expect(statistics).toBeInTheDocument();
+    });
+
+    describe('Connectors statistic', () => {
+      let connectorStatisticsCell: HTMLElement;
+      beforeEach(() => {
+        connectorStatisticsCell = within(statistics).getByRole('cell', {
+          name: 'Connectors',
+        });
+      });
+      it('exists', () => {
+        expect(connectorStatisticsCell).toBeInTheDocument();
+      });
+
+      it('shows loader', () => {
+        const loader = within(connectorStatisticsCell).getByRole('status');
+        expect(loader).toBeInTheDocument();
+      });
+    });
+    describe('Tasks statistic', () => {
+      let tasksStatisticsCell: HTMLElement;
+      beforeEach(() => {
+        tasksStatisticsCell = within(statistics).getByRole('cell', {
+          name: 'Tasks',
+        });
+      });
+      it('exists', () => {
+        expect(tasksStatisticsCell).toBeInTheDocument();
+      });
+
+      it('shows loader', () => {
+        const loader = within(tasksStatisticsCell).getByRole('status');
+        expect(loader).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('when data is loaded', () => {
+    let connectorsStatistic: HTMLElement;
+    let tasksStatistics: HTMLElement;
+    beforeEach(() => {
+      renderComponent({ data: connectors, isLoading: false });
+      [connectorsStatistic, tasksStatistics] = screen.getAllByRole('cell');
+    });
+
+    describe('Connectors statistics', () => {
+      it('renders statistic', () => {
+        expect(connectorsStatistic).toBeInTheDocument();
+
+        const count = within(connectorsStatistic).getByText(3);
+        expect(count).toBeInTheDocument();
+
+        const alert = within(connectorsStatistic).getByRole('alert');
+        expect(alert).toBeInTheDocument();
+        expect(alert).toHaveTextContent('1');
+      });
+    });
+    describe('Tasks statistics', () => {
+      it('renders statistic', () => {
+        expect(tasksStatistics).toBeInTheDocument();
+
+        const count = within(tasksStatistics).getByText(5);
+        expect(count).toBeInTheDocument();
+
+        const alert = within(tasksStatistics).getByRole('alert');
+        expect(alert).toBeInTheDocument();
+        expect(alert).toHaveTextContent('1');
+      });
+    });
+  });
+});

frontend/src/components/Connect/List/Statistics/models/computeStatistics.ts

@@ -16,7 +16,7 @@ export const computeStatistics = (
   let failedTasksCount = 0;
 
   connectors.forEach((connector) => {
-    if (connector.status.state !== ConnectorState.RUNNING) {
+    if (connector.status.state === ConnectorState.FAILED) {
       failedConnectorsCount += 1;
     }