Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions packages/app/cypress/e2e/integration/code-gen.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'

const extensionInputSelector = `[placeholder="${defaultMessages.components.fileSearch.byExtensionInput}"]`

describe('Code Generation', () => {
beforeEach(() => {
cy.scaffoldProject('react-code-gen')
cy.openProject('react-code-gen')
cy.startAppServer('component')
cy.visitApp()
})

const checkCodeGenCandidates = (specs: string[]) => {
cy.findByTestId('file-match-indicator').contains(`${specs.length} Match${specs.length > 1 ? 'es' : ''}`)
cy.findAllByTestId('file-list-row').should('have.length', specs.length)
.each((row, i) => cy.wrap(row).contains(specs[i]))
}

it('should generate spec from component', () => {
cy.findByTestId('new-spec-button').click()
cy.findByTestId('create-spec-modal').should('be.visible').within(() => {
cy.contains('Create a new spec').should('be.visible')
cy.get('[data-cy="external"]').should('have.attr', 'href', 'https://on.cypress.io')
})

cy.contains('Create from component').click()
const componentGlob = '**/*.{jsx,tsx}'

cy.findByTestId('file-match-button').contains(componentGlob)
checkCodeGenCandidates(['Button.jsx', 'Button.stories.jsx'])

cy.intercept('query-ComponentGeneratorStepOne').as('code-gen-candidates')
cy.findByTestId('file-match-button').click()
cy.get(extensionInputSelector).clear().type('**/App.*')
cy.wait('@code-gen-candidates')

checkCodeGenCandidates(['App.css', 'App.cy.js', 'App.js'])

cy.get(extensionInputSelector).clear().type(componentGlob, { parseSpecialCharSequences: false })
cy.contains('Button.jsx').click()
cy.findByTestId('file-row').contains('src/stories/Button.cy.js').click()

cy.withCtx(async (ctx) => {
const spec = await (await ctx.project.findSpecs(ctx.currentProject?.projectRoot ?? '', 'component'))
.find((spec) => spec.relative === 'src/stories/Button.cy.jsx')

expect(spec).to.exist
})
})

it('should generate spec from story', () => {
cy.findByTestId('new-spec-button').click()

cy.contains('Create from story').click()
const storyGlob = '**/*.stories.*'

cy.findByTestId('file-match-button').contains(storyGlob)
checkCodeGenCandidates(['Button.stories.jsx'])

cy.contains('Button.stories.jsx').click()
cy.findByTestId('file-row').contains('src/stories/Button.stories.cy.js').click()
cy.contains('composeStories')

cy.withCtx(async (ctx) => {
const spec = await (await ctx.project.findSpecs(ctx.currentProject?.projectRoot ?? '', 'component'))
.find((spec) => spec.relative === 'src/stories/Button.stories.cy.jsx')

expect(spec).to.exist
})
})
})
14 changes: 12 additions & 2 deletions packages/app/src/specs/CreateSpecModal.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@ describe('<CreateSpecModal />', () => {
gql={{
currentProject: {
id: 'id',
codeGenGlob: '**.vue',
codeGenGlobs: {
id: 'super-unique-id',
__typename: 'CodeGenGlobs',
component: '**.vue',
story: '**/*.stories.*',
},
storybook: null,
currentTestingType: 'component',
},
Expand Down Expand Up @@ -67,7 +72,12 @@ describe('playground', () => {
gql={{
currentProject: {
id: 'id',
codeGenGlob: '**.vue',
codeGenGlobs: {
id: 'super-unique-id',
__typename: 'CodeGenGlobs',
component: '**.vue',
story: '**/*.stories.*',
},
storybook: null,
currentTestingType: 'component',
},
Expand Down
11 changes: 10 additions & 1 deletion packages/app/src/specs/CreateSpecModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
v-if="generator"
:key="generator.id"
v-model:title="title"
:code-gen-glob="props.gql.currentProject?.codeGenGlob"
:code-gen-glob="codeGenGlob"
@restart="currentGeneratorId = undefined"
@close="close"
/>
Expand Down Expand Up @@ -64,6 +64,7 @@ fragment CreateSpecModal on Query {
currentProject {
id
...ComponentGeneratorStepOne_codeGenGlob
...StoryGeneratorStepOne_codeGenGlob
}
}
`
Expand All @@ -79,6 +80,14 @@ const generator = computed(() => {
return null
})

const codeGenGlob = computed(() => {
if (!generator.value) {
return null
}

return props.gql.currentProject?.codeGenGlobs[generator.value.id]
})

whenever(not(generator), () => {
title.value = t('createSpec.newSpecModalTitle')
})
Expand Down
14 changes: 12 additions & 2 deletions packages/app/src/specs/NoSpecsPage.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,12 @@ describe('<NoSpecsPage />', () => {
storybook: null,
configFileAbsolutePath: '/usr/bin/cypress.config.ts',
configFilePath: 'cypress.config.ts',
codeGenGlob: '**.vue',
codeGenGlobs: {
id: 'super-unique-id',
__typename: 'CodeGenGlobs',
component: '**.vue',
story: '**/*.stories.*',
},
currentTestingType: 'component',
}
},
Expand Down Expand Up @@ -56,8 +61,13 @@ describe('<NoSpecsPage />', () => {
configFilePath: 'cypress.config.ts',
id: 'id',
storybook: null,
codeGenGlob: '**.vue',
currentTestingType: 'e2e',
codeGenGlobs: {
id: 'super-unique-id',
__typename: 'CodeGenGlobs',
component: '**.vue',
story: '**/*.stories.*',
},
}
},
render: (gql) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@ export const ComponentGenerator: SpecGenerator = {
entry: ComponentGeneratorStepOne,
disabled: () => { },
matches: filters.matchesCT,
id: 'component-generator',
id: 'component',
}
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ import TestResultsIcon from '~icons/cy/test-results_x24.svg'

const props = defineProps<{
title: string,
codeGenGlob: any
codeGenGlob: string
}>()

const { t } = useI18n()
Expand All @@ -89,7 +89,10 @@ title.value = t('createSpec.component.importFromComponent.chooseAComponentHeader
gql`
fragment ComponentGeneratorStepOne_codeGenGlob on CurrentProject {
id
codeGenGlob(type: component)
codeGenGlobs {
id
component
}
}
`

Expand Down Expand Up @@ -149,7 +152,7 @@ whenever(result, () => {

const makeSpec = async (file) => {
const { data } = await mutation.executeMutation({
codeGenCandidate: file.relative,
codeGenCandidate: file.absolute,
type: 'component',
})

Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/specs/generators/empty/EmptyGenerator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@ export const EmptyGenerator: SpecGenerator = {
entry: EmptyGeneratorCard,
matches: filters.matchesE2E,
disabled: () => { },
id: 'empty-generator',
id: 'empty',
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@ export const ScaffoldGenerator: SpecGenerator = {
entry: ScaffoldGeneratorStepOne,
matches: filters.matchesE2E,
disabled: () => { },
id: 'scaffold-generator',
id: 'scaffold',
}
2 changes: 1 addition & 1 deletion packages/app/src/specs/generators/story/StoryGenerator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@ export const StoryGenerator: SpecGenerator = {

return false
},
id: 'story-generator',
id: 'story',
}
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
>
<router-link
class="outline-none"
:to="{ path: 'specs/runner', query: { file: result.spec.relative } }
:to="{ path: '/specs/runner', query: { file: result.spec.relative } }
"
>
<Button
Expand Down Expand Up @@ -70,7 +70,7 @@ import TestResultsIcon from '~icons/cy/test-results_x24.svg'

const props = defineProps<{
title: string,
codeGenGlob: any
codeGenGlob: string
}>()

const { t } = useI18n()
Expand All @@ -89,7 +89,10 @@ title.value = t('createSpec.component.importFromStory.header')
gql`
fragment StoryGeneratorStepOne_codeGenGlob on CurrentProject {
id
codeGenGlob(type: story)
codeGenGlobs {
id
story
}
}
`

Expand Down Expand Up @@ -149,8 +152,8 @@ whenever(result, () => {

const makeSpec = async (file) => {
const { data } = await mutation.executeMutation({
codeGenCandidate: file.relative,
type: 'component',
codeGenCandidate: file.absolute,
type: 'story',
})

result.value = data?.generateSpecFromSource
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/specs/generators/types.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Component } from 'vue'

export type GeneratorId = 'component-generator' | 'empty-generator' | 'scaffold-generator' | 'story-generator'
export type GeneratorId = 'component' | 'empty' | 'scaffold' | 'story'

export interface SpecGenerator {
card: Component
Expand Down
13 changes: 6 additions & 7 deletions packages/data-context/src/sources/ProjectDataSource.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { CodeGenType, SpecType } from '@packages/graphql/src/gen/nxs.gen'
import type { SpecType } from '@packages/graphql/src/gen/nxs.gen'
import { FrontendFramework, FRONTEND_FRAMEWORKS, ResolvedFromConfig, RESOLVED_FROM, SpecFileWithExtension, STORYBOOK_GLOB } from '@packages/types'
import { scanFSForAvailableDependency } from 'create-cypress-tests'
import path from 'path'
Expand Down Expand Up @@ -144,7 +144,7 @@ export class ProjectDataSource {
return guess ?? null
}

async getCodeGenGlob (type: CodeGenType) {
async getCodeGenGlobs () {
const project = this.ctx.currentProject

if (!project) {
Expand All @@ -153,13 +153,12 @@ export class ProjectDataSource {

const looseComponentGlob = '/**/*.{js,jsx,ts,tsx,.vue}'

if (type === 'story') {
return STORYBOOK_GLOB
}

const framework = await this.frameworkLoader.load(project.projectRoot)

return framework?.glob ?? looseComponentGlob
return {
component: framework?.glob ?? looseComponentGlob,
story: STORYBOOK_GLOB,
}
}

async getCodeGenCandidates (glob: string): Promise<SpecFileWithExtension[]> {
Expand Down
25 changes: 19 additions & 6 deletions packages/data-context/src/sources/WizardDataSource.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,36 @@ export class WizardDataSource {
return WIZARD_STEPS.find((step) => step.type === this.data.currentStep)?.title
}

packagesToInstall (): Array<NexusGenObjects['WizardNpmPackage']> | null {
async packagesToInstall (): Promise<Array<NexusGenObjects['WizardNpmPackage']> | null> {
if (!this.chosenFramework || !this.chosenBundler) {
return null
}

return [
const packages = [
{
name: this.chosenFramework.name,
name: this.chosenFramework.name as string,
description: PACKAGES_DESCRIPTIONS[this.chosenFramework.package],
package: this.chosenFramework.package,
},
{
name: this.chosenBundler.name,
name: this.chosenBundler.name as string,
description: PACKAGES_DESCRIPTIONS[this.chosenBundler.package],
package: this.chosenBundler.package,
package: this.chosenBundler.package as string,
},
]

const storybookInfo = await this.ctx.storybook.loadStorybookInfo()
const { storybookDep } = this.chosenFramework

if (storybookInfo && storybookDep) {
packages.push({
name: storybookDep,
description: PACKAGES_DESCRIPTIONS[storybookDep],
package: storybookDep,
})
}

return packages
}

get chosenTestingTypePluginsInitialized () {
Expand Down Expand Up @@ -121,7 +134,7 @@ export class WizardDataSource {
content: configFileContent,
status: 'changes',
warningText: ['Please merge the code below with your existing',
'<span class="px-1 inline-block rounded bg-warning-200 text-warning-600">cypress.config.js</span>'].join(' '),
'<span class="rounded bg-warning-200 px-1 text-warning-600 inline-block">cypress.config.js</span>'].join(' '),
warningLink: 'https://on.cypress.io/guides/configuration',
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export const e2eProjectDirs = [
'plugins-root-async-error',
'pristine',
'pristine-with-config-file',
'react-code-gen',
'read-only-project-root',
'record',
'remote-debugging-disconnect',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,12 @@ export const createTestCurrentProject = (title: string, currentProject: Partial<
},
config,
cloudProject: CloudProjectStubs.componentProject,
codeGenGlob: '/**/*.vue',
codeGenGlobs: {
id: 'super-unique-id',
__typename: 'CodeGenGlobs',
component: '**/*.vue',
story: '**/*.stories.*',
},
currentBrowser: stubBrowsers[0],
browsers: stubBrowsers,
...currentProject,
Expand Down
Loading