feat(frontend): improve cypress trigger and automate tabs (#3442)

kubeshop · Dec 14, 2023 · a40721b · a40721b
1 parent 0e5a4ea
commit a40721b
Show file tree

Hide file tree

Showing 12 changed files with 143 additions and 37 deletions.
diff --git a/web/src/components/ResourceCard/TestCard.tsx b/web/src/components/ResourceCard/TestCard.tsx
@@ -43,7 +43,7 @@ const TestCard = ({onEdit, onDelete, onDuplicate, onRun, onViewAll, test}: IProp
         <S.TitleContainer>
           <S.Title level={3}>{test.name}</S.Title>
           <S.Text>
-            {test.trigger.method} • {test.trigger.entryPoint}
+            {test.trigger.method} {test.trigger.entryPoint && `• ${test.trigger.entryPoint}`}
           </S.Text>
         </S.TitleContainer>
 

diff --git a/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx b/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx
@@ -3,14 +3,42 @@ import {useState} from 'react';
 import RunDetailAutomateDefinition from 'components/RunDetailAutomateDefinition';
 import RunDetailAutomateMethods from 'components/RunDetailAutomateMethods';
 import CliCommand from 'components/RunDetailAutomateMethods/methods/CLICommand';
+import Cypress from 'components/RunDetailAutomateMethods/methods/Cypress';
 import DeepLink from 'components/RunDetailAutomateMethods/methods/DeepLink';
 import {CLI_RUNNING_TESTS_URL} from 'constants/Common.constants';
+import {TriggerTypes} from 'constants/Test.constants';
 import Test from 'models/Test.model';
 import TestRun from 'models/TestRun.model';
 import {useVariableSet} from 'providers/VariableSet';
 import {ResourceType} from 'types/Resource.type';
 import * as S from './RunDetailAutomate.styled';
 
+function getMethods(triggerType: TriggerTypes) {
+  switch (triggerType) {
+    case TriggerTypes.cypress:
+      return [
+        {
+          id: 'cypress',
+          label: 'Cypress',
+          component: Cypress,
+        },
+      ];
+    default:
+      return [
+        {
+          id: 'cli',
+          label: 'CLI',
+          component: CliCommand,
+        },
+        {
+          id: 'deeplink',
+          label: 'Deep Link',
+          component: DeepLink,
+        },
+      ];
+  }
+}
+
 interface IProps {
   test: Test;
   run: TestRun;
@@ -34,26 +62,21 @@ const RunDetailAutomate = ({test, run}: IProps) => {
       <S.SectionRight>
         <RunDetailAutomateMethods
           resourceType={ResourceType.Test}
-          methods={[
-            {
-              id: 'cli',
-              label: 'CLI',
-              children: (
-                <CliCommand
-                  id={test.id}
-                  variableSetId={variableSetId}
-                  fileName={fileName}
-                  resourceType={ResourceType.Test}
-                  docsUrl={CLI_RUNNING_TESTS_URL}
-                />
-              ),
-            },
-            {
-              id: 'deeplink',
-              label: 'Deep Link',
-              children: <DeepLink test={test} variableSetId={variableSetId} run={run} />,
-            },
-          ]}
+          methods={getMethods(test.trigger.type).map(({id, label, component: Component}) => ({
+            id,
+            label,
+            children: (
+              <Component
+                docsUrl={CLI_RUNNING_TESTS_URL}
+                fileName={fileName}
+                id={test.id}
+                resourceType={ResourceType.Test}
+                run={run}
+                test={test}
+                variableSetId={variableSetId}
+              />
+            ),
+          }))}
         />
       </S.SectionRight>
     </S.Container>

diff --git a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx
@@ -39,7 +39,13 @@ const RunDetailAutomateDefinition = ({id, version, resourceType, fileName, onFil
         value={definition}
         language="yaml"
         actions={
-          <Button data-cy="file-viewer-download" icon={<DownloadOutlined />} onClick={onDownload} type="primary">
+          <Button
+            data-cy="file-viewer-download"
+            icon={<DownloadOutlined />}
+            onClick={onDownload}
+            size="small"
+            type="primary"
+          >
             Download File
           </Button>
         }

diff --git a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx b/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx
@@ -14,14 +14,22 @@ interface IMethodProps {
   children: React.ReactNode;
 }
 
+export interface IMethodChildrenProps {
+  docsUrl?: string;
+  fileName?: string;
+  id: string;
+  resourceType: ResourceType;
+  variableSetId?: string;
+}
+
 const RunDetailAutomateMethods = ({resourceType, methods = []}: IProps) => {
   const [query, updateQuery] = useSearchParams();
 
   return (
     <S.Container>
       <S.TitleContainer>
         <S.Title>Running Techniques</S.Title>
-        <S.Subtitle>Methods to automate the running of this {resourceType}</S.Subtitle>
+        <S.Subtitle>Methods to automate the running of this {resourceType.slice(0, -1)}</S.Subtitle>
       </S.TitleContainer>
       <S.TabsContainer>
         <Tabs

diff --git a/web/src/components/RunDetailAutomateMethods/methods/CLICommand/CliCommand.tsx b/web/src/components/RunDetailAutomateMethods/methods/CLICommand/CliCommand.tsx
@@ -1,19 +1,11 @@
 import {ReadOutlined} from '@ant-design/icons';
 import {FramedCodeBlock} from 'components/CodeBlock';
-import {ResourceType} from 'types/Resource.type';
 import * as S from './CliCommand.styled';
 import Controls from './Controls';
 import useCliCommand from './hooks/useCliCommand';
+import {IMethodChildrenProps} from '../../RunDetailAutomateMethods';
 
-interface IProps {
-  id: string;
-  variableSetId?: string;
-  fileName?: string;
-  resourceType: ResourceType;
-  docsUrl?: string;
-}
-
-const CLiCommand = ({id, variableSetId, fileName = '', resourceType, docsUrl}: IProps) => {
+const CLiCommand = ({id, variableSetId, fileName = '', resourceType, docsUrl}: IMethodChildrenProps) => {
   const {command, onGetCommand} = useCliCommand();
 
   return (

diff --git a/web/src/components/RunDetailAutomateMethods/methods/Cypress/Cypress.styled.ts b/web/src/components/RunDetailAutomateMethods/methods/Cypress/Cypress.styled.ts
@@ -0,0 +1,22 @@
+import {Typography} from 'antd';
+import styled from 'styled-components';
+
+export const Title = styled(Typography.Title).attrs({
+  level: 3,
+})`
+  && {
+    font-size: ${({theme}) => theme.size.md};
+    font-weight: 600;
+    margin-bottom: 16px;
+  }
+`;
+
+export const TitleContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Container = styled.div`
+  margin: 16px 0;
+`;
diff --git a/web/src/components/RunDetailAutomateMethods/methods/Cypress/Cypress.tsx b/web/src/components/RunDetailAutomateMethods/methods/Cypress/Cypress.tsx
@@ -0,0 +1,22 @@
+import {Typography} from 'antd';
+import {FramedCodeBlock} from 'components/CodeBlock';
+import {CypressCodeSnippet} from 'constants/Automate.constants';
+import Test from 'models/Test.model';
+import * as S from './Cypress.styled';
+import {IMethodChildrenProps} from '../../RunDetailAutomateMethods';
+
+interface IProps extends IMethodChildrenProps {
+  test: Test;
+}
+
+const Cypress = ({test}: IProps) => (
+  <S.Container>
+    <S.TitleContainer>
+      <S.Title>Cypress Integration</S.Title>
+    </S.TitleContainer>
+    <Typography.Paragraph>The code snippet below enables you to run this test via a cypress run.</Typography.Paragraph>
+    <FramedCodeBlock title="Cypress code snippet:" language="javascript" value={CypressCodeSnippet(test.name)} />
+  </S.Container>
+);
+
+export default Cypress;
diff --git a/web/src/components/RunDetailAutomateMethods/methods/Cypress/index.ts b/web/src/components/RunDetailAutomateMethods/methods/Cypress/index.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './Cypress';
diff --git a/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.tsx b/web/src/components/RunDetailAutomateMethods/methods/DeepLink/DeepLink.tsx
@@ -5,11 +5,11 @@ import TestRun from 'models/TestRun.model';
 import Controls from './Controls';
 import * as S from './DeepLink.styled';
 import useDeepLink from './hooks/useDeepLink';
+import {IMethodChildrenProps} from '../../RunDetailAutomateMethods';
 
-interface IProps {
+interface IProps extends IMethodChildrenProps {
   test: Test;
   run: TestRun;
-  variableSetId?: string;
 }
 
 const DeepLink = ({test, variableSetId, run: {variableSet}}: IProps) => {
@@ -32,7 +32,7 @@ const DeepLink = ({test, variableSetId, run: {variableSet}}: IProps) => {
         maxHeight="80px"
         actions={
           <a target="_blank" href={deepLink}>
-            <S.TryItButton ghost type="primary">
+            <S.TryItButton ghost size="small" type="primary">
               Try it
             </S.TryItButton>
           </a>

diff --git a/web/src/components/RunDetailLayout/HeaderLeft.tsx b/web/src/components/RunDetailLayout/HeaderLeft.tsx
@@ -44,7 +44,7 @@ const HeaderLeft = ({name, triggerType, origin}: IProps) => {
   const description = useMemo(() => {
     return (
       <>
-        v{testVersion} • {triggerType} • Ran {createdTimeAgo} • {source && <>Run via {source.toUpperCase()}</>}
+        v{testVersion} • {triggerType} • Ran {createdTimeAgo} {source && <>• Run via {source.toUpperCase()}</>}
         {testSuiteId && !!testSuiteRunId && (
           <>
             {' '}

diff --git a/web/src/components/RunDetailTriggerResponse/RunDetailTriggerData.tsx b/web/src/components/RunDetailTriggerResponse/RunDetailTriggerData.tsx
@@ -6,9 +6,11 @@ import TestRunAnalyticsService from 'services/Analytics/TestRunAnalytics.service
 import ResponseVariableSet from './ResponseVariableSet';
 import * as S from './RunDetailTriggerResponse.styled';
 import {IPropsComponent} from './RunDetailTriggerResponseFactory';
+import ResponseMetadata from './ResponseMetadata';
 
 const TABS = {
   VariableSet: 'variable-set',
+  Metadata: 'metadata',
 } as const;
 
 const RunDetailTriggerData = ({state, triggerTime = 0}: IPropsComponent) => {
@@ -39,6 +41,9 @@ const RunDetailTriggerData = ({state, triggerTime = 0}: IPropsComponent) => {
           <Tabs.TabPane key={TABS.VariableSet} tab="Variable Set">
             <ResponseVariableSet />
           </Tabs.TabPane>
+          <Tabs.TabPane key={TABS.Metadata} tab="Metadata">
+            <ResponseMetadata />
+          </Tabs.TabPane>
         </Tabs>
       </S.TabsContainer>
     </S.Container>

diff --git a/web/src/constants/Automate.constants.ts b/web/src/constants/Automate.constants.ts
@@ -0,0 +1,26 @@
+export function CypressCodeSnippet(testName: string) {
+  return `import Tracetest from '@tracetest/cypress';
+
+const TRACETEST_API_TOKEN = Cypress.env('TRACETEST_API_TOKEN') || '';
+const tracetest = Tracetest();
+
+describe('Cypress Test', () => {
+  before(done => {
+    tracetest.configure(TRACETEST_API_TOKEN).then(() => done());
+  });
+
+  beforeEach(() => {
+    cy.visit('/', {
+      onBeforeLoad: win => tracetest.capture(win.document),
+    });
+  });
+
+  afterEach(done => {
+    tracetest.runTest('').then(() => done());
+  });
+
+  it('${testName}', () => {
+    // ...cy commands
+  });
+});`;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// eslint-disable-next-line no-restricted-exports
		export {default} from './Cypress';