From a40721b86d8a3e7871ededb72d4a53200a38593a Mon Sep 17 00:00:00 2001 From: Jorge Padilla Date: Thu, 14 Dec 2023 16:34:46 -0500 Subject: [PATCH] feat(frontend): improve cypress trigger and automate tabs (#3442) --- web/src/components/ResourceCard/TestCard.tsx | 2 +- .../RunDetailAutomate/RunDetailAutomate.tsx | 63 +++++++++++++------ .../RunDetailAutomateDefinition.tsx | 8 ++- .../RunDetailAutomateMethods.tsx | 10 ++- .../methods/CLICommand/CliCommand.tsx | 12 +--- .../methods/Cypress/Cypress.styled.ts | 22 +++++++ .../methods/Cypress/Cypress.tsx | 22 +++++++ .../methods/Cypress/index.ts | 2 + .../methods/DeepLink/DeepLink.tsx | 6 +- .../components/RunDetailLayout/HeaderLeft.tsx | 2 +- .../RunDetailTriggerData.tsx | 5 ++ web/src/constants/Automate.constants.ts | 26 ++++++++ 12 files changed, 143 insertions(+), 37 deletions(-) create mode 100644 web/src/components/RunDetailAutomateMethods/methods/Cypress/Cypress.styled.ts create mode 100644 web/src/components/RunDetailAutomateMethods/methods/Cypress/Cypress.tsx create mode 100644 web/src/components/RunDetailAutomateMethods/methods/Cypress/index.ts create mode 100644 web/src/constants/Automate.constants.ts diff --git a/web/src/components/ResourceCard/TestCard.tsx b/web/src/components/ResourceCard/TestCard.tsx index eb40a447bd..2a49f01ad5 100644 --- 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 {test.name} - {test.trigger.method} • {test.trigger.entryPoint} + {test.trigger.method} {test.trigger.entryPoint && `• ${test.trigger.entryPoint}`} diff --git a/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx b/web/src/components/RunDetailAutomate/RunDetailAutomate.tsx index b9d2d846b4..41e26d711f 100644 --- 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) => { - ), - }, - { - id: 'deeplink', - label: 'Deep Link', - children: , - }, - ]} + methods={getMethods(test.trigger.type).map(({id, label, component: Component}) => ({ + id, + label, + children: ( + + ), + }))} /> diff --git a/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx b/web/src/components/RunDetailAutomateDefinition/RunDetailAutomateDefinition.tsx index 1abbebe5de..d1f37a4e73 100644 --- 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={ - } diff --git a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx b/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx index a1a4a430bb..19827a2cf0 100644 --- a/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx +++ b/web/src/components/RunDetailAutomateMethods/RunDetailAutomateMethods.tsx @@ -14,6 +14,14 @@ 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(); @@ -21,7 +29,7 @@ const RunDetailAutomateMethods = ({resourceType, methods = []}: IProps) => { Running Techniques - Methods to automate the running of this {resourceType} + Methods to automate the running of this {resourceType.slice(0, -1)} { +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 new file mode 100644 index 0000000000..96afc21ad8 --- /dev/null +++ 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 new file mode 100644 index 0000000000..f12bc98e19 --- /dev/null +++ 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) => ( + + + Cypress Integration + + The code snippet below enables you to run this test via a cypress run. + + +); + +export default Cypress; diff --git a/web/src/components/RunDetailAutomateMethods/methods/Cypress/index.ts b/web/src/components/RunDetailAutomateMethods/methods/Cypress/index.ts new file mode 100644 index 0000000000..1753fd7c96 --- /dev/null +++ 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 index 98c2d7af9d..29d1934df9 100644 --- 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={ - + Try it diff --git a/web/src/components/RunDetailLayout/HeaderLeft.tsx b/web/src/components/RunDetailLayout/HeaderLeft.tsx index 79ca222300..e719fd5c3b 100644 --- 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 index 8557419d62..ba639dfd40 100644 --- 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) => { + + + diff --git a/web/src/constants/Automate.constants.ts b/web/src/constants/Automate.constants.ts new file mode 100644 index 0000000000..1ba009e8a8 --- /dev/null +++ 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 + }); +});`; +}