Merge pull request #5 from flow-build/test/DAT-393

Test/DAT-393

Author: wallace-sf

.github/workflows/main.yml

@@ -8,7 +8,7 @@ jobs:
     strategy:
       matrix:
         node: ['18.x']
-        os: [ubuntu-latest, windows-latest, macOS-latest]
+        os: [ubuntu-latest, macOS-latest]
 
     steps:
       - name: Checkout repo
@@ -29,5 +29,8 @@ jobs:
       - name: Lint
         run: yarn lint
 
+      - name: Test
+        run: yarn test
+
       - name: Build
         run: yarn build

.github/workflows/size.yml

@@ -7,7 +7,7 @@ jobs:
     strategy:
       matrix:
         node: ['18.x']
-        os: [ubuntu-latest, windows-latest, macOS-latest]
+        os: [ubuntu-latest, macOS-latest]
     env:
       CI_JOB_NUMBER: 1
     steps:

__tests__/WorkflowManager.test.tsx

@@ -0,0 +1,153 @@
+import React, { PropsWithChildren } from 'react';
+
+import { renderHook, act, waitFor } from '@testing-library/react';
+
+import {
+  WorkflowManager,
+  WorkflowManagerConfig,
+  useMqtt,
+  useSubscribe,
+  useUnsubscribe,
+} from '../src';
+import { store } from './store';
+import { MqttClientExtended } from './types';
+
+const props = {
+  brokerUrl: 'ws://broker.mqttdashboard.com:8000/mqtt',
+  options: {
+    clientId: `clientId-${Math.random().toString(16).substring(2, 8)}`,
+    reconnectPeriod: 1000,
+  },
+};
+
+let wrapper: React.FC<PropsWithChildren>;
+
+describe('WorkflowManager component', () => {
+  beforeEach(() => {
+    WorkflowManagerConfig.setStore(store);
+
+    wrapper = ({ children }) => (
+      <WorkflowManager {...props}>{children}</WorkflowManager>
+    );
+  });
+
+  it('should connect with mqtt', async () => {
+    const { result } = renderHook(() => useMqtt(), { wrapper });
+
+    await waitFor(
+      () => {
+        const status = result.current?.status;
+        return expect(status === 'connected').toBe(true);
+      },
+      { timeout: 2000 },
+    );
+
+    expect(result.current?.status).toBe('connected');
+
+    await act(async () => {
+      result.current.client?.end();
+    });
+  });
+
+  it('should not connect with mqtt: invalid broker url', async () => {
+    const { result } = renderHook(() => useMqtt(), {
+      wrapper: ({ children }) => (
+        <WorkflowManager
+          brokerUrl="ws://broker.mqttdashboard@@.com:8000/mqtt"
+          options={{ ...props.options, connectTimeout: 2000 }}
+        >
+          {children}
+        </WorkflowManager>
+      ),
+    });
+
+    await waitFor(
+      () => {
+        const status = result.current?.status;
+
+        return expect(status === 'reconnecting').toBe(true);
+      },
+      { timeout: 2000 },
+    );
+
+    expect(result.current?.status).toBe('reconnecting');
+
+    await act(async () => {
+      result.current.client?.end();
+    });
+  });
+
+  it('should subscribe to topics', async () => {
+    const { result: resultSub } = renderHook(() => useSubscribe(), { wrapper });
+    const { result: resultMqtt } = renderHook(() => useMqtt(), { wrapper });
+
+    const subscribe = resultSub.current;
+    const client = resultMqtt.current.client as MqttClientExtended;
+
+    await waitFor(
+      () => {
+        const status = resultMqtt.current?.status;
+        return expect(status === 'connected').toBe(true);
+      },
+      { timeout: 2000 },
+    );
+
+    expect(resultMqtt.current.status).toBe('connected');
+
+    const topic = 'workflowManager/test/1';
+
+    subscribe(topic);
+
+    const lastMessageId = client?.getLastMessageId();
+    const subscribedTopics = client?.messageIdToTopic[lastMessageId];
+
+    expect(subscribedTopics).toContain(topic);
+
+    await act(async () => {
+      client?.end();
+    });
+  });
+
+  it('should unsubscribe from topics', async () => {
+    const { result: resultSub } = renderHook(() => useSubscribe(), { wrapper });
+    const { result: resultUnsub } = renderHook(() => useUnsubscribe(), {
+      wrapper,
+    });
+    const { result: resultMqtt } = renderHook(() => useMqtt(), { wrapper });
+
+    const subscribe = resultSub.current;
+    const unsubscribe = resultUnsub.current;
+    const client = resultMqtt.current.client as MqttClientExtended;
+
+    await waitFor(
+      () => {
+        const status = resultMqtt.current?.status;
+        return expect(status === 'connected').toBe(true);
+      },
+      { timeout: 2000 },
+    );
+
+    expect(resultMqtt.current.status).toBe('connected');
+
+    const topic = 'workflowManager/test/1';
+
+    subscribe(topic);
+
+    const lastMessageId = client?.getLastMessageId();
+    const subscribedTopics = client?.messageIdToTopic[lastMessageId];
+
+    expect(subscribedTopics).toContain(topic);
+
+    unsubscribe(topic);
+
+    const newLastMessageId = client?.getLastMessageId();
+    const newSubscribedTopics =
+      client?.messageIdToTopic[newLastMessageId] || [];
+
+    expect(newSubscribedTopics).not.toContain(topic);
+
+    await act(async () => {
+      client?.end();
+    });
+  });
+});

__tests__/store.ts

@@ -0,0 +1,7 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+import { workflowManagerReducer } from '../src';
+
+export const store = configureStore({
+  reducer: { workflowManagerReducer },
+});

__tests__/types.ts

@@ -0,0 +1,4 @@
+import { MqttClient } from 'mqtt-browser';
+export interface MqttClientExtended extends MqttClient {
+  messageIdToTopic: Record<string, string[]>;
+}

jest.config.ts

@@ -1,9 +1,9 @@
 export default {
   clearMocks: true,
   preset: 'ts-jest',
-  roots: ['<rootDir>/src'],
+  roots: ['<rootDir>/__tests__'],
   testEnvironment: 'jsdom',
-  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  testRegex: 'WorkflowManager.test.tsx',
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },

src/WorkflowManager.tsx

@@ -23,6 +23,7 @@ export const WorkflowManager: FC<WorkflowManagerProps> = ({
         const mqttInstance = connect(brokerUrl, options);
 
         mqttInstance.on('connect', () => {
+          if (status !== 'connected') setStatus('connected');
           setStatus('connected');
         });
 
@@ -31,15 +32,16 @@ export const WorkflowManager: FC<WorkflowManagerProps> = ({
         });
 
         mqttInstance.on('offline', () => {
-          setStatus('offline');
+          if (status !== 'offline') setStatus('offline');
         });
 
         mqttInstance.on('error', () => {
-          setStatus('error');
+          if (status !== 'error') setStatus('error');
           invariant(false, ERROR_MESSAGES.ERROR_OCURRED);
         });
 
         mqttInstance.on('reconnect', () => {
+          if (status !== 'reconnecting') setStatus('reconnecting');
           setStatus('reconnecting');
         });
 
@@ -51,7 +53,7 @@ export const WorkflowManager: FC<WorkflowManagerProps> = ({
         invariant(false, ERROR_MESSAGES.FAILED_TO_CONNECT);
       }
     }
-  }, [brokerUrl, options, client]);
+  }, [brokerUrl, options, client, status]);
 
   useEffect(() => {
     init();

src/WorkflowManagerConfig.ts

@@ -114,6 +114,11 @@ class WorkflowManagerConfig implements WorkflowManagerConfigProps {
     client?.on('message', this._onMessageArrived(topic));
   }
 
+  /**
+   * @description Unsubscribe to a topic or topics.
+   * @param {(string | string[])} topic
+   * @param {IClientUnsubscribeOptions} options
+   */
   public unsubscribe(
     topic: string | string[],
     options: IClientUnsubscribeOptions = {} as IClientUnsubscribeOptions,

src/__tests__/WorkflowManager.test.tsx

@@ -8,7 +8,7 @@ import { ERROR_MESSAGES } from '../utils';
 export const useMqtt = (): IMqttContext => {
   const context = useContext(MqttContext);
 
-  invariant(context, ERROR_MESSAGES.NO_WRAPPER);
+  invariant(!!context, ERROR_MESSAGES.NO_WRAPPER);
 
   return context as IMqttContext;
 };