Merge remote-tracking branch 'origin/10.0-release' into feat/attach-file

cypress-io · Dec 14, 2021 · 39771b9 · 39771b9
2 parents 80a4162 + b302739
commit 39771b9
Show file tree

Hide file tree

Showing 114 changed files with 749 additions and 455 deletions.
diff --git a/packages/app/cypress/e2e/integration/code-gen.spec.ts b/packages/app/cypress/e2e/integration/code-gen.spec.ts
@@ -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(['App.cy.jsx', 'App.jsx', 'index.jsx', '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.jsx', 'App.jsx'])
+
+    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
+    })
+  })
+})
diff --git a/packages/app/src/specs/CreateSpecModal.spec.tsx b/packages/app/src/specs/CreateSpecModal.spec.tsx
@@ -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',
           },
@@ -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',
           },

diff --git a/packages/app/src/specs/CreateSpecModal.vue b/packages/app/src/specs/CreateSpecModal.vue
@@ -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"
       />
@@ -64,6 +64,7 @@ fragment CreateSpecModal on Query {
   currentProject {
     id
     ...ComponentGeneratorStepOne_codeGenGlob
+    ...StoryGeneratorStepOne_codeGenGlob
   }
 }
 `
@@ -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')
 })

diff --git a/packages/app/src/specs/NoSpecsPage.spec.tsx b/packages/app/src/specs/NoSpecsPage.spec.tsx
@@ -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',
           }
         },
@@ -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) => {

diff --git a/packages/app/src/specs/generators/component/ComponentGenerator.tsx b/packages/app/src/specs/generators/component/ComponentGenerator.tsx
@@ -8,5 +8,5 @@ export const ComponentGenerator: SpecGenerator = {
   entry: ComponentGeneratorStepOne,
   disabled: () => { },
   matches: filters.matchesCT,
-  id: 'component-generator',
+  id: 'component',
 }
diff --git a/packages/app/src/specs/generators/component/ComponentGeneratorStepOne.vue b/packages/app/src/specs/generators/component/ComponentGeneratorStepOne.vue
@@ -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()
@@ -89,7 +89,10 @@ title.value = t('createSpec.component.importFromComponent.chooseAComponentHeader
 gql`
 fragment ComponentGeneratorStepOne_codeGenGlob on CurrentProject {
   id
-  codeGenGlob(type: component)
+  codeGenGlobs {
+    id
+    component
+  }
 }
 `
 
@@ -149,7 +152,7 @@ whenever(result, () => {
 
 const makeSpec = async (file) => {
   const { data } = await mutation.executeMutation({
-    codeGenCandidate: file.relative,
+    codeGenCandidate: file.absolute,
     type: 'component',
   })
 

diff --git a/packages/app/src/specs/generators/empty/EmptyGenerator.tsx b/packages/app/src/specs/generators/empty/EmptyGenerator.tsx
@@ -7,5 +7,5 @@ export const EmptyGenerator: SpecGenerator = {
   entry: EmptyGeneratorCard,
   matches: filters.matchesE2E,
   disabled: () => { },
-  id: 'empty-generator',
+  id: 'empty',
 }
diff --git a/packages/app/src/specs/generators/scaffold/ScaffoldGenerator.tsx b/packages/app/src/specs/generators/scaffold/ScaffoldGenerator.tsx
@@ -8,5 +8,5 @@ export const ScaffoldGenerator: SpecGenerator = {
   entry: ScaffoldGeneratorStepOne,
   matches: filters.matchesE2E,
   disabled: () => { },
-  id: 'scaffold-generator',
+  id: 'scaffold',
 }
diff --git a/packages/app/src/specs/generators/story/StoryGenerator.tsx b/packages/app/src/specs/generators/story/StoryGenerator.tsx
@@ -14,5 +14,5 @@ export const StoryGenerator: SpecGenerator = {
 
     return false
   },
-  id: 'story-generator',
+  id: 'story',
 }
diff --git a/packages/app/src/specs/generators/story/StoryGeneratorStepOne.vue b/packages/app/src/specs/generators/story/StoryGeneratorStepOne.vue
@@ -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
@@ -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()
@@ -89,7 +89,10 @@ title.value = t('createSpec.component.importFromStory.header')
 gql`
 fragment StoryGeneratorStepOne_codeGenGlob on CurrentProject {
   id
-  codeGenGlob(type: story)
+  codeGenGlobs {
+    id
+    story
+  }
 }
 `
 
@@ -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

diff --git a/packages/app/src/specs/generators/types.ts b/packages/app/src/specs/generators/types.ts
@@ -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

diff --git a/packages/data-context/src/sources/ProjectDataSource.ts b/packages/data-context/src/sources/ProjectDataSource.ts
@@ -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'
@@ -144,7 +144,7 @@ export class ProjectDataSource {
     return guess ?? null
   }
 
-  async getCodeGenGlob (type: CodeGenType) {
+  async getCodeGenGlobs () {
     const project = this.ctx.currentProject
 
     if (!project) {
@@ -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[]> {

diff --git a/packages/data-context/src/sources/WizardDataSource.ts b/packages/data-context/src/sources/WizardDataSource.ts
@@ -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 () {
@@ -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',
     }
 

diff --git a/packages/frontend-shared/cypress/e2e/support/e2eProjectDirs.ts b/packages/frontend-shared/cypress/e2e/support/e2eProjectDirs.ts
@@ -57,6 +57,7 @@ export const e2eProjectDirs = [
   'plugins-root-async-error',
   'pristine',
   'pristine-with-config-file',
+  'react-code-gen',
   'read-only-project-root',
   'record',
   'remote-debugging-disconnect',

diff --git a/packages/frontend-shared/cypress/support/mock-graphql/stubgql-CloudTypes.ts b/packages/frontend-shared/cypress/support/mock-graphql/stubgql-CloudTypes.ts
@@ -186,8 +186,8 @@ export const CloudOrganizationStubs = {
 } as const
 
 export const CloudProjectStubs = {
-  e2eProject: createCloudProject({ slug: 'efgh' }),
-  componentProject: createCloudProject({ slug: 'abcd' }),
+  e2eProject: createCloudProject({ slug: 'efgh', name: 'e2e-project' }),
+  componentProject: createCloudProject({ slug: 'abcd', name: 'component-project' }),
 } as const
 
 interface CloudTypesContext {
@@ -207,7 +207,7 @@ export const CloudRunQuery: MaybeResolver<Query> = {
     return CloudProjectStubs.componentProject
   },
   cloudProjectsBySlugs (args: QueryCloudProjectsBySlugsArgs) {
-    return args.slugs.map((s) => projectsBySlug[s] ?? createCloudProject({ slug: s }))
+    return args.slugs.map((s) => projectsBySlug[s] ?? createCloudProject({ slug: s, name: `cloud-project-${s}` }))
   },
   cloudViewer (args, ctx) {
     if (ctx.__server__) {

diff --git a/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Project.ts b/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Project.ts
@@ -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,