-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Implement testing type switch promos (#26894)
* feat: Implement testing type switch promos * Add tests, changelog entry * Add tests * Fix button styling * Styling fixes, add framework links * Add missing testId * run ci * Fix spec * chore: updating v8 snapshot cache * chore: updating v8 snapshot cache * chore: updating v8 snapshot cache * Fix styling issues * Resolve code review findings * Fix issue with yarn.lock * Fix extra padding at bottom of promo * Add tests for utm params * Add test for switching testing type when both configured * Fix changelog version * Address review comments * Widen promo when no image defined * Prevent flash of promo before query resolves * Reduce top margin * reduce size of text box to match latest figma * update button style to match figma * increase width at which we collapse sidenav * add short versions of the headings * remove skeletons from header * avoid extra height * adjustments for column alignment * fix flaky test * update tests for responsive text changes * update changelog * restore spacing between header items * avoid occasional flash of promo on page load * update text handling * fix types and tests * Update packages/app/src/specs/SpecsList.vue Co-authored-by: Stokes Player <stokes@cypress.io> * updated final e2e bullet * fix question mark icon flashing * text formatting * remove superfluous snapshot [skip ci] --------- Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> Co-authored-by: marktnoonan <mark@cypress.io> Co-authored-by: astone123 <adams@cypress.io> Co-authored-by: Stokes Player <stokes@cypress.io> Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>
- Loading branch information
6 people
authored
Jun 6, 2023
1 parent
777b4e8
commit 25582dd
Showing
24 changed files
with
1,024 additions
and
174 deletions.
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
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,95 @@ | ||
| describe('App: Spec List Testing Type Switcher', () => { | ||
| context('ct unconfigured', () => { | ||
| beforeEach(() => { | ||
| cy.scaffoldProject('cypress-in-cypress') | ||
| cy.openProject('cypress-in-cypress') | ||
|
|
||
| cy.withCtx(async (ctx, o) => { | ||
| const config = await ctx.file.readFileInProject('cypress.config.js') | ||
| const newCypressConfig = config.replace(`component:`, `_component:`) | ||
|
|
||
| await ctx.actions.file.writeFileInProject('cypress.config.js', newCypressConfig) | ||
| }) | ||
|
|
||
| cy.startAppServer('e2e') | ||
|
|
||
| cy.visitApp() | ||
| cy.verifyE2ESelected() | ||
| }) | ||
|
|
||
| it('switches testing types', () => { | ||
| cy.findByTestId('testing-type-switch').within(() => { | ||
| cy.findByText('Component').click() | ||
| }) | ||
|
|
||
| cy.verifyCtSelected() | ||
|
|
||
| cy.contains('Component testing is not set up for this project') | ||
|
|
||
| cy.findByTestId('testing-type-setup-button').should('be.visible') | ||
| }) | ||
| }) | ||
|
|
||
| context('e2e unconfigured', () => { | ||
| beforeEach(() => { | ||
| cy.scaffoldProject('cypress-in-cypress') | ||
| cy.openProject('cypress-in-cypress') | ||
|
|
||
| cy.withCtx(async (ctx, o) => { | ||
| const config = await ctx.file.readFileInProject('cypress.config.js') | ||
| const newCypressConfig = config.replace(`e2e:`, `_e2e:`) | ||
|
|
||
| await ctx.actions.file.writeFileInProject('cypress.config.js', newCypressConfig) | ||
| }) | ||
|
|
||
| cy.startAppServer('component') | ||
|
|
||
| cy.visitApp() | ||
| cy.verifyCtSelected() | ||
| }) | ||
|
|
||
| it('switches testing types', () => { | ||
| cy.findByTestId('testing-type-switch').within(() => { | ||
| cy.findByText('E2E').click() | ||
| }) | ||
|
|
||
| cy.contains('End-to-end testing is not set up for this project') | ||
|
|
||
| cy.findByTestId('testing-type-setup-button').should('be.visible') | ||
| }) | ||
| }) | ||
|
|
||
| context('both testing types configured', () => { | ||
| beforeEach(() => { | ||
| cy.scaffoldProject('cypress-in-cypress') | ||
| cy.findBrowsers() | ||
| cy.openProject('cypress-in-cypress') | ||
|
|
||
| cy.startAppServer('component') | ||
|
|
||
| cy.visitApp() | ||
| cy.verifyCtSelected() | ||
| }) | ||
|
|
||
| it('displays expected switch content', () => { | ||
| cy.findByTestId('unconfigured-icon').should('not.exist') | ||
|
|
||
| cy.withCtx((ctx, o) => { | ||
| o.sinon.stub(ctx.actions.project, 'setAndLoadCurrentTestingType') | ||
| o.sinon.stub(ctx.actions.project, 'reconfigureProject').resolves() | ||
| }) | ||
|
|
||
| cy.findByTestId('testing-type-switch').within(() => { | ||
| cy.findByText('E2E').click() | ||
| }) | ||
|
|
||
| cy.verifyE2ESelected() | ||
|
|
||
| cy.withCtx((ctx) => { | ||
| expect(ctx.coreData.app.relaunchBrowser).eq(true) | ||
| expect(ctx.actions.project.setAndLoadCurrentTestingType).to.have.been.calledWith('e2e') | ||
| expect(ctx.actions.project.reconfigureProject).to.have.been.called | ||
| }) | ||
| }) | ||
| }) | ||
| }) |
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
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 |
|---|---|---|
| @@ -1,27 +1,54 @@ | ||
| <template> | ||
| <div class="grid grid-cols-[480px] xl:grid-cols-[300px_470px] p-[40px] gap-y-[16px] gap-x-[100px]"> | ||
| <div | ||
| class="p-[40px]" | ||
| :class="gridClasses" | ||
| > | ||
| <div> | ||
| <h2 class="text-xl font-semibold text-gray-900"> | ||
| {{ title }} | ||
| </h2> | ||
| <p class="text-grey-700"> | ||
| <p class="text-gray-700"> | ||
| {{ body }} | ||
| </p> | ||
| <slot name="content" /> | ||
| </div> | ||
| <div class="row-end-[span_2] xl:col-start-2"> | ||
| <div | ||
| v-if="slots.image" | ||
| class="row-end-[span_2] xl:col-start-2" | ||
| > | ||
| <slot name="image" /> | ||
| </div> | ||
| <div class="self-end"> | ||
| <div | ||
| v-if="slots.action" | ||
| class="self-end" | ||
| > | ||
| <slot name="action" /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { computed, useSlots } from 'vue' | ||
| defineProps<{ | ||
| title: string | ||
| body: string | ||
| }>() | ||
| const slots = useSlots() | ||
| const gridClasses = computed(() => { | ||
| const classes = ['grid', 'grid-cols-[480px]', 'gap-y-[16px]'] | ||
| // If `image` is defined then lay out side-by-side on xl viewport, | ||
| // otherwise it should flow vertically | ||
| if (slots.image) { | ||
| classes.push('xl:grid-cols-[300px_470px]', 'gap-x-[100px]') | ||
| } else { | ||
| classes.push('xl:grid-cols-[744px]') | ||
| } | ||
| return classes | ||
| }) | ||
| </script> |
Oops, something went wrong.
25582ddThere 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.
Circle has built the
linux x64version of the Test Runner.Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version
Run this command to install the pre-release locally:
25582ddThere 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.
Circle has built the
linux arm64version of the Test Runner.Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version
Run this command to install the pre-release locally:
25582ddThere 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.
Circle has built the
darwin x64version of the Test Runner.Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version
Run this command to install the pre-release locally:
25582ddThere 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.
Circle has built the
darwin arm64version of the Test Runner.Learn more about this pre-release build at https://on.cypress.io/advanced-installation#Install-pre-release-version
Run this command to install the pre-release locally: