Skip to content

Commit

Permalink
Merge branch 'develop' into jordanpowell88/percy
Browse files Browse the repository at this point in the history
  • Loading branch information
jordanpowell88 committed Jun 6, 2023
2 parents e006730 + a6bbdc5 commit ff0edf8
Show file tree
Hide file tree
Showing 31 changed files with 1,362 additions and 669 deletions.
10 changes: 9 additions & 1 deletion cli/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
<!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
## 12.13.1
## 12.14.0

_Released 06/06/2023 (PENDING)_

**Features:**

- A new testing type switcher has been added to the Spec Explorer to make it easier to move between E2E and Component Testing. An informational overview of each type is displayed if it isn't configured in your project to help newcomers to each testing type. Addresses [#26448](https://github.com/cypress-io/cypress/issues/26448), [#26836](https://github.com/cypress-io/cypress/issues/26836) and [#26837](https://github.com/cypress-io/cypress/issues/26837).

**Bugfixes:**

- Fixes issue not detecting Angular 16 dependencies in launchpad. Addresses [#26852](https://github.com/cypress-io/cypress/issues/26852)

**Dependency Updates:**

- Upgraded [`find-process`](https://www.npmjs.com/package/find-process) from `1.4.1` to `1.4.7` to address this [Synk](https://security.snyk.io/vuln/SNYK-JS-FINDPROCESS-1090284) security vulnerability. Addressed in [#26631](https://github.com/cypress-io/cypress/pull/26906).
Expand Down
2 changes: 1 addition & 1 deletion packages/app/cypress/e2e/runs.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -331,7 +331,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
moveToRunsPage()
cy.findByText(defaultMessages.runs.connect.buttonProject).click()
cy.contains('button', defaultMessages.runs.connect.modal.selectProject.createProject).click()
cy.findByText(defaultMessages.runs.connectSuccessAlert.title, { timeout: 10000 }).should('be.visible')
cy.findByText(defaultMessages.runs.connectSuccessAlert.title, { timeout: 10000 }).scrollIntoView().should('be.visible')

cy.withCtx(async (ctx) => {
const config = await ctx.project.getConfig()
Expand Down
6 changes: 1 addition & 5 deletions packages/app/cypress/e2e/specs_list_e2e.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ describe('App: Spec List (E2E)', () => {
})

cy.visitApp()
cy.contains('E2E specs')
cy.verifyE2ESelected()
}

const clearSearchAndType = (search: string) => {
Expand All @@ -67,10 +67,6 @@ describe('App: Spec List (E2E)', () => {
cy.findByTestId('app-header-bar').findByText('Specs').should('be.visible')
})

it('shows the "E2E specs" label as the header for the Spec Name column', () => {
cy.findByTestId('specs-testing-type-header').should('contain', 'E2E specs')
})

it('shows a git status for each spec', () => {
cy.findAllByTestId('git-info-row').each((row) => {
cy.wrap(row).find('svg').should('have.length', 1)
Expand Down
2 changes: 1 addition & 1 deletion packages/app/cypress/e2e/specs_list_flaky.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ describe('App: Spec List - Flaky Indicator', () => {
})

cy.visitApp()
cy.contains('E2E specs')
cy.verifyE2ESelected()
})

it('shows the "Flaky" badge on specs considered flaky', () => {
Expand Down
95 changes: 95 additions & 0 deletions packages/app/cypress/e2e/specs_list_switcher.cy.ts
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
})
})
})
})
18 changes: 18 additions & 0 deletions packages/app/cypress/e2e/support/e2eSupport.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,21 @@ beforeEach(() => {
// @ts-ignore - dynamically defined during tests using
expect(window.top?.getEventManager().autDestroyedCount).to.be.undefined
})

function e2eTestingTypeIsSelected () {
cy.findByTestId('specs-testing-type-header').within(() => {
cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('have.attr', 'aria-selected', 'true')
cy.findByTestId('testing-type-switch').contains('button', 'Component').should('not.have.attr', 'aria-selected')
})
}

Cypress.Commands.add('verifyE2ESelected', e2eTestingTypeIsSelected)

function ctTestingTypeIsSelected () {
cy.findByTestId('specs-testing-type-header').within(() => {
cy.findByTestId('testing-type-switch').contains('button', 'E2E').should('not.have.attr', 'aria-selected')
cy.findByTestId('testing-type-switch').contains('button', 'Component').should('have.attr', 'aria-selected', 'true')
})
}

Cypress.Commands.add('verifyCtSelected', ctTestingTypeIsSelected)
2 changes: 2 additions & 0 deletions packages/app/cypress/e2e/support/execute-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ declare global {
*
*/
waitForSpecToFinish(expectedResults?: ExpectedResults, timeout?: number): void
verifyE2ESelected(): void
verifyCtSelected(): void
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/app/cypress/e2e/top-nav.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -699,7 +699,7 @@ describe('Growth Prompts Can Open Automatically', () => {
)

cy.visitApp()
cy.contains('E2E specs')
cy.verifyE2ESelected()
cy.wait(1000)
cy.contains('Configure CI').should('be.visible')
})
Expand All @@ -717,7 +717,7 @@ describe('Growth Prompts Can Open Automatically', () => {
)

cy.visitApp()
cy.contains('E2E specs')
cy.verifyE2ESelected()
cy.wait(1000)
cy.contains('Configure CI').should('not.exist')
})
Expand Down
7 changes: 4 additions & 3 deletions packages/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,10 @@
},
"dependencies": {},
"devDependencies": {
"@cypress-design/vue-button": "0.9.2",
"@cypress-design/vue-icon": "0.22.2",
"@cypress-design/vue-statusicon": "0.4.3",
"@cypress-design/vue-button": "^0.10.1",
"@cypress-design/vue-icon": "^0.23.1",
"@cypress-design/vue-statusicon": "^0.4.7",
"@cypress-design/vue-tabs": "^0.5.1",
"@graphql-typed-document-node/core": "^3.1.0",
"@headlessui/vue": "1.4.0",
"@iconify/iconify": "2.1.2",
Expand Down
3 changes: 2 additions & 1 deletion packages/app/src/components/promo/Promo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,12 @@ const props = defineProps<{
campaign: string
medium: string
cohort?: string
instanceId?: string
}>()
const promoSeenMutation = useMutation(Promo_PromoSeenDocument)
const promoInstanceId = nanoid()
const promoInstanceId = props.instanceId || nanoid()
useQuery({ query: PromoDocument })
.then((queryResult) => {
Expand Down
35 changes: 31 additions & 4 deletions packages/app/src/components/promo/PromoCard.vue
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>
Loading

0 comments on commit ff0edf8

Please sign in to comment.