-
Notifications
You must be signed in to change notification settings - Fork 3.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: IATR-M1.0 Debug Spec component update #25263
Merged
warrensplayer
merged 22 commits into
feature/IATR-M0
from
ankit/IATR-M1.0-spec-component-update
Dec 31, 2022
Merged
Changes from all commits
Commits
Show all changes
22 commits
Select commit
Hold shift + click to select a range
36b2faf
made stats meta data reusable component and completed inital ui chang…
amehta265 f4de398
Added debugArtifacts, layered browser icons, and updated debug failed…
amehta265 dd44de7
updated UI and merged feature branch
amehta265 a1b0601
added preliminary tests for debugArtifacts
amehta265 dea2f61
tests for debugArtifacts and debugFailedTest
amehta265 a16fb90
completed all tests and made responsive UI changes
amehta265 3aede58
added new debugMapping functionality and wired up rest of the components
amehta265 167cf15
merged with feature branch and updated tests
amehta265 54714e0
Merge branch 'feature/IATR-M0' into ankit/IATR-M1.0-spec-component-up…
amehta265 4088d83
changes for responsive UI
amehta265 95023ec
restoring projectId in cypress config for app
amehta265 c43b2d8
cleaning lint issues
amehta265 b5e1bbc
addressing PR comments
amehta265 dbe0fe7
Ensure zero values render icons for ResultCounts
warrensplayer a75501e
Add two missing fields
warrensplayer 9ffadc7
Updates for typescript fixes
warrensplayer dc694dc
Allowing element to render when value is 0
warrensplayer acb411b
completed responsive UI for spec component and test section
amehta265 f24c6e8
merging with remote branch
amehta265 a9fbbee
resolving conflicts with feature branch
amehta265 7352797
merging with feature branch and addressing PR comments
amehta265 c68fbcb
StatsMetadata i18n fix
warrensplayer File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import DebugArtifactLink from './DebugArtifactLink.vue' | ||
|
|
||
| describe('<DebugArtifacts />', () => { | ||
| const artifactMapping: {icon: string, text: string, url: string}[] = [ | ||
| { icon: 'TERMINAL_LOG', text: 'View Log', url: 'www.cypress.io' }, | ||
| { icon: 'IMAGE_SCREENSHOT', text: 'View Screenshot', url: 'cloud.cypress.io' }, | ||
| { icon: 'PLAY', text: 'View Video', url: 'www.cypress.io' }, | ||
| ] | ||
|
|
||
| it('mounts correctly, provides expected tooltip content, and emits correct event', () => { | ||
| artifactMapping.forEach((artifact) => { | ||
| cy.mount(() => ( | ||
| <DebugArtifactLink icon={artifact.icon} popperText={artifact.text} url={artifact.url}/> | ||
| )) | ||
|
|
||
| cy.findByTestId(`artifact-for-${artifact.icon}`).should('have.length', 1) | ||
| cy.findByTestId(`${artifact.icon}-button`).should('be.visible') | ||
| cy.findByTestId(`artifact-for-${artifact.icon}`).realHover().then(() => { | ||
| cy.findByTestId('tooltip-content').should('be.visible').contains(artifact.text) | ||
| }) | ||
|
|
||
| cy.percySnapshot() | ||
| }) | ||
| }) | ||
|
|
||
| it('mounts correctly for all icons together and has correct URLs', () => { | ||
| cy.mount(() => ( | ||
| <div class="flex flex-grow space-x-4.5 pt-24px justify-center" data-cy='debug-artifacts-all'> | ||
| <DebugArtifactLink icon={'TERMINAL_LOG'} popperText={'View Log'} url={'www.cypress.io'}/> | ||
| <DebugArtifactLink icon={'IMAGE_SCREENSHOT'} popperText={'View Screenshot'} url={'cloud.cypress.io'}/> | ||
| <DebugArtifactLink icon={'PLAY'} popperText={'View Video'} url={'www.cypress.io'}/> | ||
| </div> | ||
| )) | ||
|
|
||
| cy.findByTestId('debug-artifacts-all').children().should('have.length', 3) | ||
| cy.findByTestId(`TERMINAL_LOG-button`).should('have.attr', 'href', 'www.cypress.io') | ||
| cy.findByTestId(`IMAGE_SCREENSHOT-button`).should('have.attr', 'href', 'cloud.cypress.io') | ||
| cy.findByTestId(`PLAY-button`).should('have.attr', 'href', 'www.cypress.io') | ||
| }) | ||
| }) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <template> | ||
| <Tooltip | ||
| placement="bottom" | ||
| :data-cy="`artifact-for-${icon}`" | ||
| > | ||
| <ExternalLink | ||
| class="flex h-full w-full items-center justify-center" | ||
| :data-cy="`${icon}-button`" | ||
| :href="props.url || '#'" | ||
| :use-default-hocus="true" | ||
amehta265 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| :aria-label="popperText" | ||
| > | ||
| <component | ||
| :is="ICON_MAP[icon]" | ||
| stroke-color="gray-600" | ||
| fill-color="gray-100" | ||
| hocus-stroke-color="indigo-500" | ||
| hocus-fill-color="indigo-100" | ||
| /> | ||
| </ExternalLink> | ||
| <template #popper> | ||
| <span | ||
| class="font-normal text-sm inline-flex" | ||
| data-cy="tooltip-content" | ||
| > | ||
| {{ popperText }} | ||
| </span> | ||
| </template> | ||
| </Tooltip> | ||
| </template> | ||
| <script lang="ts" setup> | ||
| import { IconTechnologyTerminalLog, IconTechnologyImageScreenshot, IconActionPlaySmall } from '@cypress-design/vue-icon' | ||
| import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue' | ||
| import ExternalLink from '@cy/gql-components/ExternalLink.vue' | ||
|
|
||
| const props = defineProps<{ | ||
| icon: string | ||
| popperText: string | ||
| url: string | null | undefined | ||
| }>() | ||
|
|
||
| type ArtifactType = 'TERMINAL_LOG' | 'IMAGE_SCREENSHOT' | 'PLAY' | ||
|
|
||
| const ICON_MAP: Record<ArtifactType, any> = { | ||
| 'TERMINAL_LOG': IconTechnologyTerminalLog, | ||
| 'IMAGE_SCREENSHOT': IconTechnologyImageScreenshot, | ||
| 'PLAY': IconActionPlaySmall, | ||
| } | ||
|
|
||
| </script> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Noticed an opportunity here, we could grab the very similar looking code here and here to make a
DebugArtifactLinkListcomponent or something. We seem to have the idea of this component 3 places if you include this test, and the presence in the test tells me we want to see the artifact links grouped on their own like this.