Added tests for flow list component

src/containers/Flow/FlowList/FlowList.test.tsx

@@ -1,23 +1,80 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { FlowList } from './FlowList';
 import { MockedProvider } from '@apollo/client/testing';
-import { getFlowCountQuery } from '../../../mocks/Flow';
-import { MemoryRouter } from 'react-router';
+import {
+  getFlowCountQuery,
+  filterFlowQuery,
+  filterFlowNewQuery,
+  getFlowCountNewQuery,
+  getFlowQuery,
+} from '../../../mocks/Flow';
+import { MemoryRouter, Router } from 'react-router-dom';
+import { createBrowserHistory } from 'history';
+import { setUserSession } from '../../../services/AuthService';
+import { Flow } from '../Flow';
 
-const mocks = [getFlowCountQuery];
+const mocks = [
+  getFlowCountQuery,
+  filterFlowQuery,
+  filterFlowNewQuery,
+  getFlowCountNewQuery,
+  getFlowQuery,
+];
 
 const flowList = (
-  <MockedProvider mocks={mocks}>
+  <MockedProvider mocks={mocks} addTypename={false}>
     <MemoryRouter>
       <FlowList />
     </MemoryRouter>
   </MockedProvider>
 );
 
-describe('<Flow />', () => {
-  it('should render Flow', () => {
+setUserSession(JSON.stringify({ roles: ['Admin'] }));
+
+describe('<FlowList />', () => {
+  test('should render Flow', async () => {
     const { getByText } = render(flowList);
     expect(getByText('Loading...')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(getByText('Flows'));
+    });
+  });
+
+  test('should search flow and check if flow keywprds are present below the name', async () => {
+    const { getByText, getByTestId, queryByPlaceholderText } = render(flowList);
+    await waitFor(() => {
+      // type "Help Workflow" in search box and enter
+      expect(getByTestId('searchInput')).toBeInTheDocument();
+      const searchInput = queryByPlaceholderText('Search');
+      fireEvent.change(searchInput, { target: { value: 'Help Workflow' } });
+      fireEvent.keyPress(searchInput, { key: 'enter', keyCode: 13 });
+      expect(getByText('help, मदद')).toBeInTheDocument();
+    });
+  });
+
+  test('click on Make a copy', async () => {
+    const { container } = render(flowList);
+    await waitFor(() => {
+      expect(container.querySelector('#copy-icon')).toBeInTheDocument();
+      fireEvent.click(container.querySelector('#copy-icon'));
+    });
+  });
+
+  test('should redirect to make a copy', async () => {
+    const history: any = createBrowserHistory();
+    history.push({ pathname: `/flow/1/edit`, state: 'copy' });
+
+    const copyFlow = (match: any) => (
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <Router history={history}>
+          <Flow match={match} />
+        </Router>
+      </MockedProvider>
+    );
+    const { container } = render(copyFlow({ params: { id: 1 } }));
+    await waitFor(() => {
+      expect(container.querySelector('input[name="name"]')?.value).toBe('Copy of Help');
+    });
   });
 });

src/containers/List/List.tsx

@@ -399,6 +399,7 @@ export const List: React.SFC<ListProps> = ({
                   color="default"
                   data-testid="additionalButton"
                   className={styles.additonalButton}
+                  id="copy-icon"
                   onClick={() => action.dialog(additionalActionParameter)}
                   key={key}
                 >

src/mocks/Flow.tsx

@@ -159,3 +159,48 @@ export const getPublishedFlowQuery = {
     },
   },
 };
+
+export const filterFlowNewQuery = {
+  request: {
+    query: FILTER_FLOW,
+    variables: {
+      filter: { name: 'Help Workflow' },
+      opts: {
+        limit: 50,
+        offset: 0,
+        order: 'ASC',
+        orderWith: 'name',
+      },
+    },
+  },
+
+  result: {
+    data: {
+      flows: [
+        {
+          id: '1',
+          ignoreKeywords: true,
+          keywords: ['help', 'मदद'],
+          name: 'Help Workflow',
+          updatedAt: '2021-03-05T04:32:23Z',
+          uuid: '3fa22108-f464-41e5-81d9-d8a298854429',
+        },
+      ],
+    },
+  },
+};
+
+export const getFlowCountNewQuery = {
+  request: {
+    query: GET_FLOW_COUNT,
+    variables: {
+      filter: { name: 'Help Workflow' },
+    },
+  },
+
+  result: {
+    data: {
+      countFlows: 1,
+    },
+  },
+};