Skip to content

Commit

Permalink
fix: component spec creation with spec pattern (#19862)
Browse files Browse the repository at this point in the history 
* fix: component spec creation with spec pattern

* Update graphql type

* Create spec from app

* Update fetch policy

* Update spec creation

* Fix TS

* Add tests

* Remove flaky code

Co-authored-by: Tim Griesser <tgriesser10@gmail.com>
  • Loading branch information
@estrada9166 @tgriesser
estrada9166 and tgriesser authored Jan 28, 2022
1 parent 3d0cd7e commit 910f88b
Show file tree
Hide file tree
Showing 22 changed files with 559 additions and 176 deletions.
85 changes: 83 additions & 2 deletions packages/app/cypress/e2e/index.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ describe('App: Index', () => {

//Shows extension warning
cy.get('@enterSpecInput').clear().type('cypress/e2e/MyTest.spec.j')
cy.intercept('mutation-EmptyGeneratorCardStepOne_MatchSpecFile', (req) => {
cy.intercept('mutation-EmptyGenerator_MatchSpecFile', (req) => {
if (req.body.variables.specFile === 'cypress/e2e/MyTest.spec.jx') {
req.on('before:response', (res) => {
res.body.data.matchesSpecPattern = true
Expand Down Expand Up @@ -652,7 +652,7 @@ describe('App: Index', () => {

cy.findByTestId('file-match-indicator').should('contain', '0 Matches')
cy.findByRole('button', { name: 'cypress.config.js' })
cy.findByTestId('spec-pattern').should('contain', 'src/**/*.cy.{js,jsx}')
cy.findByTestId('spec-pattern').should('contain', 'src/specs-folder/*.cy.{js,jsx}')

cy.contains('button', defaultMessages.createSpec.updateSpecPattern)
cy.findByRole('button', { name: 'New Spec', exact: false })
Expand Down Expand Up @@ -687,6 +687,87 @@ describe('App: Index', () => {
.and('contain', defaultMessages.createSpec.component.importFromStory.description)
})
})

it('shows create first spec page with create from component option and goes back if it is cancel', () => {
cy.findByRole('button', { name: 'New Spec', exact: false }).click()

cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
cy.findAllByTestId('card').eq(0)
.should('have.attr', 'tabindex', '0')
.and('contain', defaultMessages.createSpec.component.importFromComponent.description).click()
})

cy.get('[data-cy=file-list-row]').first().click()

cy.get('input').invoke('val').should('eq', 'src/App.cy.jsx')
cy.contains(defaultMessages.createSpec.component.importEmptySpec.header)

cy.contains(defaultMessages.components.button.cancel).click()

cy.contains(defaultMessages.createSpec.newSpecModalTitle)
})

it('shows create first spec page with create from component option', () => {
cy.findByRole('button', { name: 'New Spec', exact: false }).click()

cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
cy.findAllByTestId('card').eq(0)
.should('have.attr', 'tabindex', '0')
.and('contain', defaultMessages.createSpec.component.importFromComponent.description).click()
})

cy.get('[data-cy=file-list-row]').first().click()

cy.get('input').invoke('val').should('eq', 'src/App.cy.jsx')
cy.contains(defaultMessages.createSpec.component.importEmptySpec.header)
cy.contains(defaultMessages.createSpec.component.importEmptySpec.invalidComponentWarning)
cy.get('input').clear()
cy.contains(defaultMessages.createSpec.component.importEmptySpec.invalidComponentWarning).should('not.exist')
cy.contains('button', defaultMessages.createSpec.createSpec).should('be.disabled')

cy.get('input').clear().type('src/specs-folder/MyTest.cy.jsx')
cy.contains('button', defaultMessages.createSpec.createSpec).should('not.be.disabled').click()
cy.contains('h2', defaultMessages.createSpec.successPage.header)

cy.get('[data-cy="file-row"]').contains('src/specs-folder/MyTest.cy.jsx').click()

cy.findByRole('dialog', { name: defaultMessages.createSpec.successPage.header }).as('SuccessDialog').within(() => {
cy.findByRole('link', {
name: 'Okay, run the spec',
}).should('have.attr', 'href', '#/specs/runner?file=src/specs-folder/MyTest.cy.jsx')
})
})

it('shows create first spec page with create from story option', () => {
cy.findByRole('button', { name: 'New Spec', exact: false }).click()

cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
cy.findAllByTestId('card').eq(1)
.should('have.attr', 'tabindex', '0')
.and('contain', defaultMessages.createSpec.component.importFromStory.description).click()
})

cy.get('[data-cy=file-list-row]').first().click()

cy.get('input').invoke('val').should('eq', 'src/stories/Button.stories.cy.jsx')
cy.contains(defaultMessages.createSpec.component.importEmptySpec.header)
cy.contains(defaultMessages.createSpec.component.importEmptySpec.invalidComponentWarning)
cy.get('input').clear()
cy.contains(defaultMessages.createSpec.component.importEmptySpec.invalidComponentWarning).should('not.exist')
cy.contains('button', defaultMessages.createSpec.createSpec).should('be.disabled')

cy.get('input').clear().type('src/specs-folder/Button.stories.cy.jsx')
cy.contains('button', defaultMessages.createSpec.createSpec).should('not.be.disabled').click()
cy.contains('h2', defaultMessages.createSpec.successPage.header)

cy.get('[data-cy="file-row"]').contains('src/specs-folder/Button.stories.cy.jsx').click()

cy.findByRole('dialog', { name: defaultMessages.createSpec.successPage.header }).as('SuccessDialog').within(() => {
cy.findByRole('link', {
name: 'Okay, run the spec',
}).should('have.attr', 'href', '#/specs/runner?file=src/specs-folder/Button.stories.cy.jsx')
})
})
})

describe('Code Generation', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/pages/Specs/Runner.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const isRunMode = window.__CYPRESS_MODE__ === 'run'
// requests, which is what we want.
const query = useQuery({
query: SpecPageContainerDocument,
requestPolicy: 'cache-and-network',
requestPolicy: 'cache-only',
pause: isRunMode && window.top === window,
})
Expand Down
6 changes: 4 additions & 2 deletions packages/app/src/specs/CreateSpecModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
:key="generator.id"
v-model:title="title"
:code-gen-glob="codeGenGlob"
:gql="props.gql"
:gql="props.gql.currentProject"
type="e2e"
spec-file-name="cypress/e2e/filename.cy.js"
@restart="currentGeneratorId = undefined"
@close="close"
/>
Expand Down Expand Up @@ -61,9 +63,9 @@ const emits = defineEmits<{
gql`
fragment CreateSpecModal on Query {
...CreateSpecCards
...EmptyGeneratorCardStepOne
currentProject {
id
...EmptyGenerator
...ComponentGeneratorStepOne_codeGenGlob
...StoryGeneratorStepOne_codeGenGlob
}
Expand Down
52 changes: 29 additions & 23 deletions ...ators/empty/EmptyGeneratorCardStepOne.vue → ...p/src/specs/generators/EmptyGenerator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,23 @@
</Input>

<div
v-if="hasError && props.gql.currentProject"
v-if="hasError && props.gql"
>
<div
class="rounded flex font-medium bg-error-100 p-16px text-error-600 gap-8px items-center"
>
<i-cy-errored-outline_x16 class="icon-dark-error-600" />
<span>{{ t('createSpec.e2e.importEmptySpec.invalidSpecWarning') }}<b>specPattern</b>.</span>
<span>{{ invalidSpecWarning }}<b>specPattern</b>.</span>
</div>

<div class="mt-16px">
<SpecPatterns
:gql="props.gql.currentProject"
:gql="props.gql"
/>
</div>
</div>
<div
v-else-if="showExtensionWarning"
v-else-if="showExtensionWarning && props.type === 'e2e'"
class="rounded flex font-medium bg-warning-100 mt-16px p-16px text-warning-600 gap-8px items-center"
>
<i-cy-errored-outline_x16 class="icon-dark-warning-600" />
Expand Down Expand Up @@ -98,39 +98,40 @@ import Input from '@packages/frontend-shared/src/components/Input.vue'
import Button from '@packages/frontend-shared/src/components/Button.vue'
import { useVModels, whenever } from '@vueuse/core'
import { gql, useMutation } from '@urql/vue'
import SpecPatterns from '../../../components/SpecPatterns.vue'
import { EmptyGeneratorCardStepOneFragment, EmptyGeneratorCardStepOne_MatchSpecFileDocument, EmptyGeneratorCardStepOne_GenerateSpecDocument, GeneratorSuccessFragment } from '../../../generated/graphql'
import SpecPatterns from '../../components/SpecPatterns.vue'
import { EmptyGeneratorFragment, EmptyGenerator_MatchSpecFileDocument, EmptyGenerator_GenerateSpecDocument, GeneratorSuccessFileFragment } from '../../generated/graphql'
import StandardModalFooter from '@packages/frontend-shared/src/components/StandardModalFooter.vue'
import GeneratorSuccess from '../GeneratorSuccess.vue'
import GeneratorSuccess from './GeneratorSuccess.vue'
import TestResultsIcon from '~icons/cy/test-results_x24.svg'
import PlusButtonIcon from '~icons/cy/add-large_x16.svg'
const props = defineProps<{
title: string,
gql: EmptyGeneratorCardStepOneFragment
gql: EmptyGeneratorFragment
type: 'e2e' | 'component' | 'story'
specFileName: string
erroredCodegenCandidate?: string
}>()
const { t } = useI18n()
gql`
fragment EmptyGeneratorCardStepOne on Query {
currentProject {
id
config
...SpecPatterns
}
fragment EmptyGenerator on CurrentProject {
id
config
...SpecPatterns
}
`
gql`
mutation EmptyGeneratorCardStepOne_MatchSpecFile($specFile: String!) {
mutation EmptyGenerator_MatchSpecFile($specFile: String!) {
matchesSpecPattern (specFile: $specFile)
}
`
gql`
mutation EmptyGeneratorCardStepOne_generateSpec($codeGenCandidate: String!, $type: CodeGenType!) {
generateSpecFromSource(codeGenCandidate: $codeGenCandidate, type: $type) {
mutation EmptyGenerator_generateSpec($codeGenCandidate: String!, $type: CodeGenType!, $erroredCodegenCandidate: String) {
generateSpecFromSource(codeGenCandidate: $codeGenCandidate, type: $type, erroredCodegenCandidate: $erroredCodegenCandidate) {
...GeneratorSuccess
}
}`
Expand All @@ -140,28 +141,30 @@ const emits = defineEmits<{
(event: 'update:description', value: string): void
(event: 'restart'): void
(event: 'close'): void
(event: 'updateTitle', value: string): void
}>()
const { title } = useVModels(props, emits)
const specFile = ref('cypress/e2e/filename.cy.js')
const specFile = ref(props.specFileName)
const matches = useMutation(EmptyGeneratorCardStepOne_MatchSpecFileDocument)
const writeFile = useMutation(EmptyGeneratorCardStepOne_GenerateSpecDocument)
const matches = useMutation(EmptyGenerator_MatchSpecFileDocument)
const writeFile = useMutation(EmptyGenerator_GenerateSpecDocument)
const isValidSpecFile = ref(true)
const hasError = computed(() => !isValidSpecFile.value && !!specFile.value)
const result = ref<GeneratorSuccessFragment | null>(null)
const result = ref<GeneratorSuccessFileFragment | null>(null)
whenever(result, () => {
title.value = t('createSpec.successPage.header')
emits('updateTitle', t('createSpec.successPage.header'))
})
const createSpec = async () => {
const { data } = await writeFile.executeMutation({ codeGenCandidate: specFile.value, type: 'e2e' })
const { data } = await writeFile.executeMutation({ codeGenCandidate: specFile.value, type: props.type, erroredCodegenCandidate: props.erroredCodegenCandidate ?? null })
result.value = data?.generateSpecFromSource ?? null
result.value = data?.generateSpecFromSource?.generatedSpecResult?.__typename === 'ScaffoldedFile' ? data?.generateSpecFromSource?.generatedSpecResult : null
}
watch(specFile, async (value) => {
Expand All @@ -178,4 +181,7 @@ const recommendedFileName = computed(() => {
return `{filename}.cy.${split[split.length - 1]}`
})
const invalidSpecWarning = computed(() => props.type === 'e2e' ? t('createSpec.e2e.importEmptySpec.invalidSpecWarning') : t('createSpec.component.importEmptySpec.invalidComponentWarning'))
</script>
26 changes: 23 additions & 3 deletions packages/app/src/specs/generators/GeneratorSuccess.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,11 @@
import ShikiHighlight from '@cy/components/ShikiHighlight.vue'
import Collapsible from '@cy/components/Collapsible.vue'
import { gql } from '@urql/core'
import type { GeneratorSuccessFragment } from '../../generated/graphql'
import type { GeneratorSuccessFileFragment } from '../../generated/graphql'
import { ref } from 'vue'
gql`
fragment GeneratorSuccess on ScaffoldedFile {
fragment GeneratorSuccessFile on ScaffoldedFile {
file {
id
fileName
Expand All @@ -47,7 +48,26 @@ fragment GeneratorSuccess on ScaffoldedFile {
}
`
gql`
fragment GeneratorSuccess on GenerateSpecResponse {
# Used to update the cache after a spec is created, so when the user tries to
# run it, it already exists
currentProject {
id
specs {
id
...SpecNode_InlineSpecList
}
}
generatedSpecResult {
... on ScaffoldedFile {
...GeneratorSuccessFile
}
}
}
`
defineProps<{
file: GeneratorSuccessFragment['file']
file: GeneratorSuccessFileFragment['file']
}>()
</script>
Loading

3 comments on commit 910f88b

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 910f88b Jan 28, 2022

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 x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/10.0.0/circle-10.0-release-910f88b328ec20dca50ea349408d0fdd45a87fb6/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 910f88b Jan 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Circle has built the win32 x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/10.0.0/circle-10.0-release-910f88b328ec20dca50ea349408d0fdd45a87fb6/cypress.tgz

@cypress-bot
Copy link
Contributor

@cypress-bot cypress-bot bot commented on 910f88b Jan 28, 2022

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 x64 version of the Test Runner.

Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.

Run this command to install the pre-release locally:

npm install https://cdn.cypress.io/beta/npm/10.0.0/circle-10.0-release-910f88b328ec20dca50ea349408d0fdd45a87fb6/cypress.tgz

Please sign in to comment.