feat: IATR empty states #25219
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
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
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 |
|---|---|---|
|
|
@@ -7,30 +7,36 @@ import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes' | |
|
|
||
| describe('<DebugContainer />', () => { | ||
| context('empty states', () => { | ||
| const validateEmptyState = (expectedMessages: string[]) => { | ||
| cy.mountFragment(DebugSpecsFragmentDoc, { | ||
| render: (gqlVal) => { | ||
| return ( | ||
| <DebugContainer | ||
| loading={false} | ||
| gql={gqlVal} | ||
| /> | ||
| ) | ||
| }, | ||
| }) | ||
|
|
||
| expectedMessages.forEach((message) => { | ||
| cy.findByTestId('debug-empty').contains(message) | ||
| }) | ||
astone123 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| } | ||
|
|
||
| it('shows not logged in', () => { | ||
| validateEmptyState([defaultMessages.debugPage.emptyStates.connectToCypressCloud, defaultMessages.debugPage.emptyStates.debugDirectlyInCypress, defaultMessages.debugPage.emptyStates.notLoggedInTestMessage]) | ||
| cy.findByRole('button', { name: 'Connect to Cypress Cloud' }).should('be.visible') | ||
| }) | ||
|
|
||
| it('is logged in with no project', () => { | ||
|
There was a problem hiding this comment. In ACI there were three separate "no project" states - are these all being rolled into this single "no project connected" condition?
There was a problem hiding this comment. Yeah, I believe here we're just doing one view that is based on There was a problem hiding this comment. @astone123 I am going to check with Peter and I will file a follow up issue if we need to add these additional states. I do not want to increase the scope of this issue beyond the original requirements. |
||
| const loginConnectStore = useLoginConnectStore() | ||
|
|
||
| loginConnectStore.setUserFlag('isLoggedIn', true) | ||
| loginConnectStore.setProjectFlag('isProjectConnected', false) | ||
|
|
||
| validateEmptyState([defaultMessages.debugPage.emptyStates.debugDirectlyInCypress, defaultMessages.debugPage.emptyStates.reviewRerunAndDebug, defaultMessages.debugPage.emptyStates.noProjectTestMessage]) | ||
| cy.findByRole('button', { name: 'Connect a Cypress Cloud project' }).should('be.visible') | ||
| }) | ||
|
|
||
| it('has no runs', () => { | ||
|
|
@@ -42,13 +48,37 @@ describe('<DebugContainer />', () => { | |
| render: (gqlVal) => { | ||
| return ( | ||
| <DebugContainer | ||
| loading={false} | ||
| gql={gqlVal} | ||
| /> | ||
| ) | ||
| }, | ||
| }) | ||
|
|
||
| cy.findByTestId('debug-empty').contains(defaultMessages.debugPage.emptyStates.recordYourFirstRun) | ||
| cy.findByTestId('debug-empty').contains(defaultMessages.debugPage.emptyStates.almostThere) | ||
| cy.findByTestId('debug-empty').contains(defaultMessages.debugPage.emptyStates.noRunsTestMessage) | ||
astone123 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| cy.findByDisplayValue('npx cypress run --record --key 2aaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa').should('be.visible') | ||
| }) | ||
|
|
||
| it('is loading', () => { | ||
| const loginConnectStore = useLoginConnectStore() | ||
|
|
||
| loginConnectStore.setUserFlag('isLoggedIn', true) | ||
| loginConnectStore.setProjectFlag('isProjectConnected', true) | ||
| cy.mountFragment(DebugSpecsFragmentDoc, { | ||
| render: (gqlVal) => { | ||
| return ( | ||
| <DebugContainer | ||
| loading={true} | ||
| gql={gqlVal} | ||
| /> | ||
| ) | ||
| }, | ||
| }) | ||
|
|
||
| cy.findByTestId('debug-empty').should('not.exist') | ||
| cy.findByTestId('debug-loading').should('be.visible') | ||
| }) | ||
| }) | ||
|
|
||
|
|
@@ -70,6 +100,7 @@ describe('<DebugContainer />', () => { | |
| render: (gqlVal) => { | ||
| return ( | ||
| <DebugContainer | ||
| loading={false} | ||
astone123 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| gql={gqlVal} | ||
| /> | ||
| ) | ||
|
|
||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import DebugNotLoggedIn from './DebugNotLoggedIn.vue' | ||
| import DebugNoProject from './DebugNoProject.vue' | ||
| import DebugNoRuns from './DebugNoRuns.vue' | ||
| import DebugLoading from './DebugLoading.vue' | ||
| import { useLoginConnectStore } from '@packages/frontend-shared/src/store/login-connect-store' | ||
|
|
||
| describe('Debug page empty states', () => { | ||
| beforeEach(() => { | ||
| cy.viewport(900, 800) | ||
astone123 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| }) | ||
|
|
||
| context('not logged in', () => { | ||
| it('renders', () => { | ||
| const loginConnectStore = useLoginConnectStore() | ||
|
|
||
| // We need to set isLoggedIn so that CloudConnectButton shows the correct state | ||
| loginConnectStore.setUserFlag('isLoggedIn', false) | ||
|
|
||
| cy.mount(<DebugNotLoggedIn />) | ||
|
|
||
| cy.percySnapshot() | ||
| }) | ||
| }) | ||
|
|
||
| context('no project', () => { | ||
| it('renders', () => { | ||
| const loginConnectStore = useLoginConnectStore() | ||
|
|
||
| // We need to set isLoggedIn so that CloudConnectButton shows the correct state | ||
| loginConnectStore.setUserFlag('isLoggedIn', true) | ||
|
|
||
| cy.mount(<DebugNoProject />) | ||
|
|
||
| cy.percySnapshot() | ||
| }) | ||
| }) | ||
|
|
||
| context('no runs', () => { | ||
| it('renders', () => { | ||
| cy.mount(<DebugNoRuns />) | ||
|
|
||
| cy.percySnapshot() | ||
| }) | ||
| }) | ||
|
|
||
| context('loading', () => { | ||
| it('renders', () => { | ||
| cy.mount(<DebugLoading />) | ||
|
|
||
| cy.percySnapshot() | ||
| }) | ||
| }) | ||
| }) | ||
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,75 @@ | ||
| <template> | ||
| <div class="flex flex-col my-45px items-center"> | ||
| <div class="flex flex-col items-center justify-evenly"> | ||
| <div><i-cy-box-open_x48 class="icon-dark-gray-500 icon-light-indigo-100" /></div> | ||
| <div class="flex flex-col mx-[20%] mt-25px mb-20px items-center"> | ||
| <div class="font-medium my-5px text-center text-gray-900 text-18px"> | ||
| {{ title }} | ||
| </div> | ||
| <div class="font-normal my-5px text-center leading-relaxed text-16px text-gray-600"> | ||
| {{ description }} | ||
| </div> | ||
| </div> | ||
| <slot name="cta" /> | ||
| </div> | ||
| <div class="flex flex-col my-40px w-full items-center"> | ||
| <div class="border-t border-l border-r rounded-t-md bg-gray-50 border-0 border-gray-100 py-20px px-15px w-[75%]"> | ||
| <div class="bg-white border rounded-md flex border-gray-100 w-max p-5px text-14px text-gray-700"> | ||
| <div><i-cy-status-failed_x12 /></div> | ||
| <div class="mx-1"> | ||
| - | ||
| </div> | ||
| <div | ||
| v-if="exampleTestName" | ||
| class="mx-1 pb-1px text-gray-100" | ||
| > | ||
| | | ||
astone123 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </div> | ||
| <div | ||
| v-if="exampleTestName" | ||
| class="mx-1 text-14px text-gray-700" | ||
| > | ||
| {{ exampleTestName }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div | ||
| v-for="(row, i) in loadingRows" | ||
| :key="i" | ||
| class="bg-white border flex border-b-0 border-gray-100 py-5 px-17px w-[75%] items-center overflow-hidden last:border-b last:rounded-b-md" | ||
| > | ||
| <div> | ||
| <i-cy-dot-solid_x4 class="icon-light-gray-200" /> | ||
| </div> | ||
| <div class="ml-10px"> | ||
| <div class="rounded-full bg-gray-50 h-16px w-40px" /> | ||
| </div> | ||
| <div class="ml-10px"> | ||
| <i-cy-chevron-right_x16 class="icon-dark-gray-200" /> | ||
| </div> | ||
| <div class="ml-10px"> | ||
| <div | ||
| class="rounded-full bg-gray-50 h-16px" | ||
| :class="row.widthClass" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
|
|
||
| defineProps<{ | ||
| title: String | ||
astone123 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| description?: String | ||
| exampleTestName?: String | ||
| }>() | ||
|
|
||
| const loadingRows = [ | ||
| { widthClass: 'w-341px' }, | ||
| { widthClass: 'w-407px' }, | ||
| { widthClass: 'w-505px' }, | ||
astone123 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ] | ||
|
|
||
| </script> | ||
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.
Re: updating from "Log in" to "Connect" - there were conversations around this back when we put this in for ACI, concern then was that the top-level "Log In" button in the upper-right would have the same action so this button should use the same wording.
I'm assuming this was an update driven by design? If so then okay, just felt weird to see this get reversed
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.
Yeah, I talked to Emil about this - I think this should only affect the wording for the button on the runs page