fixed test cases

src/components/floweditor/FlowEditor.test.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { MockedProvider } from '@apollo/client/testing';
 import { render, waitFor, fireEvent, screen } from '@testing-library/react';
 import { vi } from 'vitest';
@@ -15,6 +15,7 @@ import {
   resetFlowCount,
   getFlowTranslations,
   getTemplateFlow,
+  unsavedFlow,
 } from 'mocks/Flow';
 import { conversationQuery } from 'mocks/Chat';
 import {
@@ -29,20 +30,19 @@ import * as Notification from 'common/notification';
 
 window.location = { assign: vi.fn() } as any;
 
-vi.mock('react-router-dom', async () => {
-  return {
-    ...(await vi.importActual<any>('react-router-dom')),
-    useParams: () => ({ uuid: 'b050c652-65b5-4ccf-b62b-1e8b3f328676' }),
-  };
-});
-
 vi.mock('axios');
 const mockedAxios = axios as any;
 
 vi.mock('../simulator/Simulator', () => ({
   default: ({ message }: { message: string }) => <div data-testid="simulator">{message}</div>, // Mocking the component's behavior
 }));
 
+const mockedUsedNavigate = vi.fn();
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
+  useNavigate: () => mockedUsedNavigate,
+}));
+
 const mocks = [
   messageReceivedSubscription({ organizationId: null }),
   messageSendSubscription({ organizationId: null }),
@@ -60,16 +60,19 @@ const mocks = [
   getFlowTranslations,
 ];
 
-const activeFlowMocks = [...mocks, getActiveFlow];
+const activeFlowMocks = [...mocks, getActiveFlow, getActiveFlow];
 const inActiveFlowMocks = [...mocks, getInactiveFlow];
 const noKeywordMocks = [...mocks, getFlowWithoutKeyword, resetFlowCount];
 const templateFlowMocks = [...mocks, getTemplateFlow, resetFlowCount];
+const flowWithUnsavedChanges = [...mocks, unsavedFlow, unsavedFlow];
 
-const wrapperFunction = (mocks: any) => (
+const wrapperFunction = (mocks: any, uuid: string = 'b050c652-65b5-4ccf-b62b-1e8b3f328676') => (
   <MockedProvider mocks={mocks} addTypename={false}>
-    <Router>
-      <FlowEditor />
-    </Router>
+    <MemoryRouter initialEntries={[`/flow/configure/${uuid}`]}>
+      <Routes>
+        <Route path="flow/configure/:uuid" element={<FlowEditor />} />
+      </Routes>
+    </MemoryRouter>
   </MockedProvider>
 );
 
@@ -95,6 +98,12 @@ test('it should have a back button that redirects to flow page', async () => {
   await waitFor(() => {
     expect(getByTestId('back-button')).toBeInTheDocument();
   });
+
+  fireEvent.click(getByTestId('back-button'));
+
+  await waitFor(() => {
+    expect(mockedUsedNavigate).toHaveBeenCalled();
+  });
 });
 
 test('it should display name of the flow', async () => {
@@ -314,3 +323,17 @@ test('template words should have template: prefix', async () => {
     expect(screen.getByTestId('simulator')).toHaveTextContent('template:help workflow');
   });
 });
+
+test('if flow is not published it should show warning', async () => {
+  const { getByTestId } = render(wrapperFunction(flowWithUnsavedChanges, '63397051-789d-418d-9388-2ef7eb1268bb'));
+
+  await waitFor(() => {
+    expect(getByTestId('back-button')).toBeInTheDocument();
+  });
+
+  fireEvent.click(getByTestId('back-button'));
+
+  await waitFor(() => {
+    expect(screen.getByTestId('dialogBox')).toBeInTheDocument();
+  });
+});

src/components/floweditor/FlowEditor.tsx

@@ -22,8 +22,6 @@ import styles from './FlowEditor.module.css';
 import { checkElementInRegistry, loadfiles, setConfig } from './FlowEditor.helper';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { BackdropLoader, FlowTranslation } from 'containers/Flow/FlowTranslation';
-import { P } from 'pino';
-import dayjs from 'dayjs';
 
 declare function showFlowEditor(node: any, config: any): void;
 
@@ -351,7 +349,7 @@ export const FlowEditor = () => {
     }
 
     refetch().then(({ data }) => {
-      const isFlowPublished = !dayjs(data.flows[0].lastChangedAt).isAfter(data.flows[0].lastPublishedAt);
+      const isFlowPublished = data.flows[0].lastChangedAt === null;
       if (isFlowPublished) {
         navigate('/flow');
       } else {
@@ -368,7 +366,7 @@ export const FlowEditor = () => {
         <div className={styles.Title}>
           <BackIconFlow onClick={handleBack} className={styles.BackIcon} data-testid="back-button" />
           <div>
-            <Typography variant="h6" data-testid="flowData">
+            <Typography variant="h6" data-testid="flowName">
               {flowData ? flowTitle : 'Flow'}
             </Typography>
             <div>{flowKeywords}</div>

src/mocks/Flow.tsx

@@ -267,12 +267,12 @@ export const filterFlowWithNameOrKeywordOrTagQuery = {
   },
 };
 
-const getFlowDetails = (isActive = true, keywords = ['help'], isTemplate = false) => ({
+const getFlowDetails = (data?: any, uuid: string = 'b050c652-65b5-4ccf-b62b-1e8b3f328676') => ({
   request: {
     query: GET_FLOW_DETAILS,
     variables: {
       filter: {
-        uuid: 'b050c652-65b5-4ccf-b62b-1e8b3f328676',
+        uuid,
       },
       opts: {},
     },
@@ -283,20 +283,27 @@ const getFlowDetails = (isActive = true, keywords = ['help'], isTemplate = false
       flows: [
         {
           id: '1',
-          isActive,
           name: 'help workflow',
-          keywords,
-          isTemplate,
+          isActive: true,
+          keywords: ['keyword'],
+          isTemplate: false,
+          lastPublishedAt: '2021-03-05T04:32:23Z',
+          lastChangedAt: null,
+          ...data,
         },
       ],
     },
   },
 });
 
-export const getActiveFlow = getFlowDetails();
-export const getInactiveFlow = getFlowDetails(false);
-export const getFlowWithoutKeyword = getFlowDetails(true, []);
-export const getTemplateFlow = getFlowDetails(true, [], true);
+export const getActiveFlow = getFlowDetails({ keywords: ['help'] });
+export const getInactiveFlow = getFlowDetails({ isActive: false });
+export const getFlowWithoutKeyword = getFlowDetails({ isActive: true, keywords: [] });
+export const getTemplateFlow = getFlowDetails({ isActive: true, keywords: [], isTemplate: true });
+export const unsavedFlow = getFlowDetails(
+  { lastChangedAt: '2021-04-05T04:32:23Z' },
+  '63397051-789d-418d-9388-2ef7eb1268bb'
+);
 
 export const getFlowCountQuery = (filter: any) => ({
   request: {