Skip to content

Commit 0a3ee16

Browse files
amehta265amehta265
authored
feat: IATR-M1.0 Debug Spec component update (#25263)
Co-authored-by: Stokes Player <stokes.player@gmail.com> Closes #24849
1 parent 031dd8b commit 0a3ee16

20 files changed

+1802
-189
lines changed

‎packages/app/src/debug/DebugArtifactLink.cy.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import DebugArtifactLink from './DebugArtifactLink.vue'
2+
3+
describe('<DebugArtifacts />', () => {
4+
const artifactMapping: {icon: string, text: string, url: string}[] = [
5+
{ icon: 'TERMINAL_LOG', text: 'View Log', url: 'www.cypress.io' },
6+
{ icon: 'IMAGE_SCREENSHOT', text: 'View Screenshot', url: 'cloud.cypress.io' },
7+
{ icon: 'PLAY', text: 'View Video', url: 'www.cypress.io' },
8+
]
9+
10+
it('mounts correctly, provides expected tooltip content, and emits correct event', () => {
11+
artifactMapping.forEach((artifact) => {
12+
cy.mount(() => (
13+
<DebugArtifactLink icon={artifact.icon} popperText={artifact.text} url={artifact.url}/>
14+
))
15+
16+
cy.findByTestId(`artifact-for-${artifact.icon}`).should('have.length', 1)
17+
cy.findByTestId(`${artifact.icon}-button`).should('be.visible')
18+
cy.findByTestId(`artifact-for-${artifact.icon}`).realHover().then(() => {
19+
cy.findByTestId('tooltip-content').should('be.visible').contains(artifact.text)
20+
})
21+
22+
cy.percySnapshot()
23+
})
24+
})
25+
26+
it('mounts correctly for all icons together and has correct URLs', () => {
27+
cy.mount(() => (
28+
<div class="flex flex-grow space-x-4.5 pt-24px justify-center" data-cy='debug-artifacts-all'>
29+
<DebugArtifactLink icon={'TERMINAL_LOG'} popperText={'View Log'} url={'www.cypress.io'}/>
30+
<DebugArtifactLink icon={'IMAGE_SCREENSHOT'} popperText={'View Screenshot'} url={'cloud.cypress.io'}/>
31+
<DebugArtifactLink icon={'PLAY'} popperText={'View Video'} url={'www.cypress.io'}/>
32+
</div>
33+
))
34+
35+
cy.findByTestId('debug-artifacts-all').children().should('have.length', 3)
36+
cy.findByTestId(`TERMINAL_LOG-button`).should('have.attr', 'href', 'www.cypress.io')
37+
cy.findByTestId(`IMAGE_SCREENSHOT-button`).should('have.attr', 'href', 'cloud.cypress.io')
38+
cy.findByTestId(`PLAY-button`).should('have.attr', 'href', 'www.cypress.io')
39+
})
40+
})

‎packages/app/src/debug/DebugArtifactLink.vue

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<Tooltip
3+
placement="bottom"
4+
:data-cy="`artifact-for-${icon}`"
5+
>
6+
<ExternalLink
7+
class="flex h-full w-full items-center justify-center"
8+
:data-cy="`${icon}-button`"
9+
:href="props.url || '#'"
10+
:use-default-hocus="true"
11+
:aria-label="popperText"
12+
>
13+
<component
14+
:is="ICON_MAP[icon]"
15+
stroke-color="gray-600"
16+
fill-color="gray-100"
17+
hocus-stroke-color="indigo-500"
18+
hocus-fill-color="indigo-100"
19+
/>
20+
</ExternalLink>
21+
<template #popper>
22+
<span
23+
class="font-normal text-sm inline-flex"
24+
data-cy="tooltip-content"
25+
>
26+
{{ popperText }}
27+
</span>
28+
</template>
29+
</Tooltip>
30+
</template>
31+
<script lang="ts" setup>
32+
import { IconTechnologyTerminalLog, IconTechnologyImageScreenshot, IconActionPlaySmall } from '@cypress-design/vue-icon'
33+
import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
34+
import ExternalLink from '@cy/gql-components/ExternalLink.vue'
35+
36+
const props = defineProps<{
37+
icon: string
38+
popperText: string
39+
url: string | null | undefined
40+
}>()
41+
42+
type ArtifactType = 'TERMINAL_LOG' | 'IMAGE_SCREENSHOT' | 'PLAY'
43+
44+
const ICON_MAP: Record<ArtifactType, any> = {
45+
'TERMINAL_LOG': IconTechnologyTerminalLog,
46+
'IMAGE_SCREENSHOT': IconTechnologyImageScreenshot,
47+
'PLAY': IconActionPlaySmall,
48+
}
49+
50+
</script>

‎packages/app/src/debug/DebugContainer.cy.tsx

+58-14
Original file line numberDiff line numberDiff line change
@@ -261,8 +261,8 @@ describe('<DebugContainer />', () => {
261261
{ id: 'a1c', groupIds: ['a'] },
262262
] as DebugSpecListSpecFragment[]
263263
const tests = [
264-
{ specId: 'a1c', id: 'random1' },
265-
{ specId: 'a1c', id: 'random2' },
264+
{ specId: 'a1c', id: 'random1', thumbprint: 'unique1' },
265+
{ specId: 'a1c', id: 'random2', thumbprint: 'unique2' },
266266
] as DebugSpecListTestsFragment[]
267267
const groups = [
268268
{ id: 'a', testingType: 'e2e' },
@@ -272,7 +272,16 @@ describe('<DebugContainer />', () => {
272272
const debugMappingArray = specsList({ specs, tests, groups, localSpecs: [], currentTestingType: 'e2e' })
273273

274274
expect(debugMappingArray).to.have.length(1)
275-
expect(debugMappingArray[0]).to.deep.equal({ spec: { id: 'a1c', groupIds: ['a'] }, tests: [{ specId: 'a1c', id: 'random1' }, { specId: 'a1c', id: 'random2' }], groups: [{ id: 'a', testingType: 'e2e' }], foundLocally: false, testingType: 'e2e', matchesCurrentTestingType: true })
275+
expect(debugMappingArray).to.have.eql([
276+
{
277+
spec: { id: 'a1c', groupIds: ['a'] },
278+
tests: { 'unique1': [{ specId: 'a1c', id: 'random1', thumbprint: 'unique1' }], 'unique2': [{ specId: 'a1c', id: 'random2', thumbprint: 'unique2' }] },
279+
groups: { 'a': { id: 'a', testingType: 'e2e' } },
280+
foundLocally: false,
281+
testingType: 'e2e',
282+
matchesCurrentTestingType: true,
283+
},
284+
])
276285
})
277286

278287
it('maps correctly for multiple specs and test', () => {
@@ -282,23 +291,48 @@ describe('<DebugContainer />', () => {
282291
{ id: '789', groupIds: ['a', 'b'] },
283292
] as DebugSpecListSpecFragment[]
284293
const tests = [
285-
{ specId: '123', id: 'random1' },
286-
{ specId: '456', id: 'random2' },
287-
{ specId: '456', id: 'random3' },
288-
{ specId: '789', id: 'random4' },
289-
{ specId: '123', id: 'random6' },
294+
{ specId: '123', id: 'random1', thumbprint: 'unique1' },
295+
{ specId: '456', id: 'random2', thumbprint: 'unique2' },
296+
{ specId: '456', id: 'random3', thumbprint: 'unique3' },
297+
{ specId: '789', id: 'random4', thumbprint: 'unique4' },
298+
{ specId: '123', id: 'random6', thumbprint: 'unique5' },
299+
{ specId: '789', id: 'random7', thumbprint: 'unique4' },
290300
] as DebugSpecListTestsFragment[]
291301
const groups = [
292302
{ id: 'a', testingType: 'e2e' },
293303
{ id: 'b', testingType: 'e2e' },
294304
] as DebugSpecListGroupsFragment[]
295305

296306
const debugMappingArray = specsList({ specs, tests, localSpecs: [], currentTestingType: 'e2e', groups })
307+
const expectedSpec123 = {
308+
spec: { id: '123', groupIds: ['a'] },
309+
tests: { 'unique1': [{ specId: '123', id: 'random1', thumbprint: 'unique1' }], 'unique5': [{ specId: '123', id: 'random6', thumbprint: 'unique5' }] },
310+
groups: { 'a': { id: 'a', testingType: 'e2e' } },
311+
foundLocally: false,
312+
testingType: 'e2e',
313+
matchesCurrentTestingType: true,
314+
}
315+
316+
const expectedSpec456 = {
317+
spec: { id: '456', groupIds: ['b'] },
318+
tests: { 'unique2': [{ specId: '456', id: 'random2', thumbprint: 'unique2' }], 'unique3': [{ specId: '456', id: 'random3', thumbprint: 'unique3' }] },
319+
groups: { 'b': { id: 'b', testingType: 'e2e' } },
320+
foundLocally: false,
321+
testingType: 'e2e',
322+
matchesCurrentTestingType: true,
323+
}
324+
325+
const expectedSpec789 = {
326+
spec: { id: '789', groupIds: ['a', 'b'] },
327+
tests: { 'unique4': [{ specId: '789', id: 'random4', thumbprint: 'unique4' }, { specId: '789', id: 'random7', thumbprint: 'unique4' }] },
328+
groups: { 'a': { id: 'a', testingType: 'e2e' }, 'b': { id: 'b', testingType: 'e2e' } },
329+
foundLocally: false,
330+
testingType: 'e2e',
331+
matchesCurrentTestingType: true,
332+
}
297333

298334
const expected = [
299-
{ spec: { id: '123', groupIds: ['a'] }, tests: [{ specId: '123', id: 'random1' }, { specId: '123', id: 'random6' }], groups: [{ id: 'a', testingType: 'e2e' }], foundLocally: false, testingType: 'e2e', matchesCurrentTestingType: true },
300-
{ spec: { id: '456', groupIds: ['b'] }, tests: [{ specId: '456', id: 'random2' }, { specId: '456', id: 'random3' }], groups: [{ id: 'b', testingType: 'e2e' }], foundLocally: false, testingType: 'e2e', matchesCurrentTestingType: true },
301-
{ spec: { id: '789', groupIds: ['a', 'b'] }, tests: [{ specId: '789', id: 'random4' }], groups: [{ id: 'a', testingType: 'e2e' }, { id: 'b', testingType: 'e2e' }], foundLocally: false, testingType: 'e2e', matchesCurrentTestingType: true },
335+
expectedSpec123, expectedSpec456, expectedSpec789,
302336
]
303337

304338
expect(debugMappingArray).to.deep.equal(expected)
@@ -310,13 +344,23 @@ describe('<DebugContainer />', () => {
310344
{ id: '456', groupIds: ['a'] },
311345
{ id: '789', groupIds: ['a'] },
312346
] as DebugSpecListSpecFragment[]
313-
const tests = [{ specId: '123', id: 'random1' }] as DebugSpecListTestsFragment[]
347+
const tests = [{ specId: '123', id: 'random1', thumbprint: 'unique1' }] as DebugSpecListTestsFragment[]
314348
const groups = [{ id: 'a', testingType: 'e2e' }] as DebugSpecListGroupsFragment[]
315349

316350
const debugMappingArray = specsList({ specs, tests, localSpecs: [], currentTestingType: 'e2e', groups })
317351

318-
expect(debugMappingArray).to.have.length(1)
319-
expect(debugMappingArray).to.deep.equal([{ spec: { id: '123', groupIds: ['a'] }, tests: [{ specId: '123', id: 'random1' }], groups: [{ id: 'a', testingType: 'e2e' }], foundLocally: false, testingType: 'e2e', matchesCurrentTestingType: true }])
352+
expect(debugMappingArray).to.deep.equal(
353+
[
354+
{
355+
spec: { id: '123', groupIds: ['a'] },
356+
tests: { 'unique1': [{ specId: '123', id: 'random1', thumbprint: 'unique1' }] },
357+
groups: { 'a': { id: 'a', testingType: 'e2e' } },
358+
foundLocally: false,
359+
testingType: 'e2e',
360+
matchesCurrentTestingType: true,
361+
},
362+
],
363+
)
320364
})
321365

322366
it('throws an error when a test does not map to a spec', () => {

‎packages/app/src/debug/DebugContainer.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ fragment DebugSpecs on Query {
8282
__typename
8383
... on CloudProject {
8484
id
85-
runByNumber(runNumber: 11) {
85+
runByNumber(runNumber: 1) {
8686
...DebugPageHeader
8787
cancelledBy {
8888
id

0 commit comments

Comments
 (0)