Add test run button to the test page (#649)

web/cypress/integration/Trace/RunTest.spec.ts

@@ -0,0 +1,29 @@
+import {createTest, deleteTest, getResultId, testId} from '../utils/common';
+
+describe('Run Test', () => {
+  beforeEach(() => {
+    createTest();
+  });
+
+  afterEach(() => {
+    deleteTest();
+  });
+
+  it('should show and click the Run Test button when the test has finished', () => {
+    cy.visit(`http://localhost:3000/test/${testId}`);
+    cy.get('[data-cy^=result-card]').first().click();
+    cy.location('href').should('match', /\/test\/.*/i);
+
+    cy.get(`[data-cy^=test-run-result-]`).first().click();
+    cy.location('href').should('match', /\/run\/.*/i);
+
+    cy.get('[data-cy=run-test-button]', {timeout: 10000}).should('be.visible');
+    cy.get(`[data-cy^=run-test-button]`).first().click();
+
+    cy.wait(2000);
+    cy.location().then(({pathname}) => {
+      const testRunResultId = getResultId(pathname);
+      cy.location('pathname').should('eq', `/test/${testId}/run/${testRunResultId}`);
+    });
+  });
+});

web/src/components/AssertionForm/AssertionFormProvider.tsx

@@ -1,5 +1,6 @@
 import {noop} from 'lodash';
 
+import VersionMismatchModal from 'components/VersionMismatchModal/VersionMismatchModal';
 import {useTestDefinition} from 'providers/TestDefinition/TestDefinition.provider';
 import {useTestRun} from 'providers/TestRun/TestRun.provider';
 import {createContext, Dispatch, SetStateAction, useCallback, useContext, useMemo, useState} from 'react';
@@ -10,7 +11,6 @@ import SelectorService from 'services/Selector.service';
 import {TTestDefinitionEntry} from 'types/TestDefinition.types';
 import {DrawerState} from '../ResizableDrawer/ResizableDrawer';
 import {IValues} from './AssertionForm';
-import AssertionFormConfirmModal from './AssertionFormConfirmModal';
 
 interface IFormProps {
   defaultValues?: IValues;
@@ -122,7 +122,8 @@ const AssertionFormProvider: React.FC<{testId: string}> = ({children}) => {
   return (
     <Context.Provider value={contextValue}>
       {children}
-      <AssertionFormConfirmModal
+      <VersionMismatchModal
+        description="Changing and saving changes will result in a new version that will become the latest."
         isOpen={isConfirmationModalOpen}
         latestVersion={test?.version || 1}
         currentVersion={run.testVersion}

web/src/components/TestHeader/TestHeader.tsx

@@ -1,5 +1,11 @@
+import {Button} from 'antd';
+import {useState} from 'react';
+
 import {useSetIsCollapsedCallback} from 'components/ResizableDrawer/useSetIsCollapsedCallback';
 import TestState from 'components/TestState';
+import VersionMismatchModal from 'components/VersionMismatchModal/VersionMismatchModal';
+import {TestState as TestStateEnum} from 'constants/TestRun.constants';
+import {useTestDefinition} from 'providers/TestDefinition/TestDefinition.provider';
 import {TTest} from 'types/Test.types';
 import {TTestRunState} from 'types/TestRun.types';
 import Info from './Info';
@@ -21,14 +27,23 @@ const TestHeader = ({
   extraContent,
   onBack,
   showInfo,
-  test: {name, referenceTestRun, serviceUnderTest},
-  test,
+  test: {name, referenceTestRun, serviceUnderTest, version = 1},
   testState,
   testVersion,
   totalSpans,
 }: IProps) => {
+  const {runTest} = useTestDefinition();
+  const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
   const onClick = useSetIsCollapsedCallback();
 
+  const handleRunTestOnClick = () => {
+    if (testVersion !== version) {
+      setIsConfirmationModalOpen(true);
+      return;
+    }
+    runTest();
+  };
+
   return (
     <S.TestHeader>
       <S.Content>
@@ -53,12 +68,29 @@ const TestHeader = ({
         </div>
       </S.Content>
       {extraContent}
-      {testState && !extraContent && (
+      {!extraContent && testState && testState !== TestStateEnum.FINISHED && (
         <S.StateContainer onClick={onClick} data-cy="test-run-result-status">
           <S.StateText>Test status:</S.StateText>
           <TestState testState={testState} />
         </S.StateContainer>
       )}
+      {!extraContent && testState && testState === TestStateEnum.FINISHED && (
+        <Button data-cy="run-test-button" ghost onClick={handleRunTestOnClick} type="primary">
+          Run Test
+        </Button>
+      )}
+      <VersionMismatchModal
+        description="Running the test will use the latest version of the test."
+        currentVersion={testVersion}
+        isOpen={isConfirmationModalOpen}
+        latestVersion={version}
+        okText="Run Test"
+        onCancel={() => setIsConfirmationModalOpen(false)}
+        onConfirm={() => {
+          setIsConfirmationModalOpen(false);
+          runTest();
+        }}
+      />
     </S.TestHeader>
   );
 };

web/src/components/VersionMismatchModal/VersionMismatchModal.tsx

@@ -0,0 +1,39 @@
+import {Modal} from 'antd';
+
+interface IProps {
+  cancelText?: string;
+  currentVersion: number;
+  description?: string;
+  isOpen: boolean;
+  latestVersion: number;
+  okText?: string;
+  onCancel(): void;
+  onConfirm(): void;
+}
+
+const VersionMismatchModal = ({
+  cancelText = 'Cancel',
+  currentVersion,
+  description,
+  isOpen,
+  latestVersion,
+  okText = 'OK',
+  onCancel,
+  onConfirm,
+}: IProps) => (
+  <Modal
+    cancelText={cancelText}
+    okText={okText}
+    onCancel={onCancel}
+    onOk={onConfirm}
+    title="Version Mismatch"
+    visible={isOpen}
+  >
+    <p>
+      You are viewing version {currentVersion} of this test, and the latest version is {latestVersion}.
+    </p>
+    <p>{description}</p>
+  </Modal>
+);
+
+export default VersionMismatchModal;

web/src/gateways/TestRun.gateway.ts

@@ -1,7 +1,7 @@
-import {endpoints} from '../redux/apis/TraceTest.api';
-import { TRawTestDefinition } from '../types/TestDefinition.types';
+import {endpoints} from 'redux/apis/TraceTest.api';
+import {TRawTestDefinition} from 'types/TestDefinition.types';
 
-const {getRunList, getRunById, reRun, dryRun} = endpoints;
+const {getRunList, getRunById, reRun, dryRun, runTest} = endpoints;
 
 const TestRunGateway = () => ({
   get(testId: string, take = 25, skip = 0) {
@@ -16,6 +16,9 @@ const TestRunGateway = () => ({
   dryRun(testId: string, runId: string, testDefinition: Partial<TRawTestDefinition>) {
     return dryRun.initiate({testId, runId, testDefinition});
   },
+  runTest(testId: string) {
+    return runTest.initiate({testId});
+  },
 });
 
 export default TestRunGateway();

web/src/providers/TestDefinition/TestDefinition.provider.tsx

@@ -20,6 +20,7 @@ interface IContext {
   update(selector: string, testDefinition: TTestDefinitionEntry): void;
   remove(selector: string): void;
   publish(): void;
+  runTest(): void;
   cancel(): void;
   dryRun(definitionList: TTestDefinitionEntry[]): void;
   assertionResults?: TAssertionResults;
@@ -38,6 +39,7 @@ export const Context = createContext<IContext>({
   update: noop,
   remove: noop,
   publish: noop,
+  runTest: noop,
   dryRun: noop,
   cancel: noop,
   isLoading: false,
@@ -64,14 +66,15 @@ const TestDefinitionProvider: React.FC<IProps> = ({children, testId, runId}) =>
   const isInitialized = useAppSelector(state => TestDefinitionSelectors.selectIsInitialized(state));
   const {data: test} = useGetTestByIdQuery({testId});
 
-  const {add, cancel, publish, remove, dryRun, update, isDraftMode, init, reset, revert} = useTestDefinitionCrud({
-    testId,
-    runId,
-  });
+  const {add, cancel, publish, runTest, remove, dryRun, update, isDraftMode, init, reset, revert} =
+    useTestDefinitionCrud({
+      testId,
+      runId,
+    });
 
   useEffect(() => {
-    init(run.result);
-  }, [init, isInitialized, reset, run.result]);
+    if (run.state === 'FINISHED') init(run.result);
+  }, [init, run.result, run.state]);
 
   useEffect(() => {
     return () => {
@@ -106,6 +109,7 @@ const TestDefinitionProvider: React.FC<IProps> = ({children, testId, runId}) =>
       isError: false,
       isDraftMode,
       publish,
+      runTest,
       dryRun,
       assertionResults,
       definitionList,
@@ -125,6 +129,7 @@ const TestDefinitionProvider: React.FC<IProps> = ({children, testId, runId}) =>
       isDraftMode,
       isLoading,
       publish,
+      runTest,
       remove,
       update,
       test,

web/src/providers/TestDefinition/hooks/useTestDefinitionCrud.ts

@@ -11,10 +11,12 @@ import {
   reset as resetAction,
   clearAffectedSpans,
   revertDefinition,
+  setSelectedAssertion,
 } from '../../../redux/slices/TestDefinition.slice';
 import {TAssertionResults} from '../../../types/Assertion.types';
 import {TTestDefinitionEntry} from '../../../types/TestDefinition.types';
 import useDraftMode from './useDraftMode';
+import TestRunGateway from '../../../gateways/TestRun.gateway';
 
 interface IProps {
   runId: string;
@@ -44,10 +46,18 @@ const useTestDefinitionCrud = ({runId, testId}: IProps) => {
     const {id} = await dispatch(TestDefinitionActions.publish({testId, runId})).unwrap();
     setIsDraftMode(false);
     dispatch(clearAffectedSpans());
+    dispatch(setSelectedAssertion(''));
 
     navigate(`/test/${testId}/run/${id}`);
   }, [dispatch, navigate, runId, setIsDraftMode, testId]);
 
+  const runTest = useCallback(async () => {
+    const {id} = await dispatch(TestRunGateway.runTest(testId)).unwrap();
+    dispatch(resetAction());
+
+    navigate(`/test/${testId}/run/${id}`);
+  }, [dispatch, navigate, runId, testId]);
+
   const cancel = useCallback(() => {
     setIsDraftMode(false);
     dispatch(resetDefinitionList());
@@ -88,7 +98,7 @@ const useTestDefinitionCrud = ({runId, testId}: IProps) => {
     dispatch(resetAction());
   }, [dispatch]);
 
-  return {revert, init, reset, add, remove, update, publish, cancel, dryRun, isDraftMode};
+  return {revert, init, reset, add, remove, update, publish, runTest, cancel, dryRun, isDraftMode};
 };
 
 export default useTestDefinitionCrud;