feat: server logic for create from React component

npm/webpack-preprocessor/__snapshots__/compilation.spec.js

@@ -1,6 +1,6 @@
 exports['webpack preprocessor - e2e correctly preprocesses the file 1'] = `
 it("is a test",(function(){expect(1).to.equal(1),expect(2).to.equal(2),expect(Math.min.apply(Math,[3,4])).to.equal(3)}));
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9zcGVjX291dHB1dC5qcyIsIm1hcHBpbmdzIjoiQUFBQUEsR0FBRyxhQUFhLFdBR2RDLE9BRmdCLEdBRU5DLEdBQUdDLE1BQU0sR0FDbkJGLE9BSG1CLEdBR1RDLEdBQUdDLE1BQU0sR0FDbkJGLE9BQU9HLEtBQUtDLElBQUwsTUFBQUQsS0FBWSxDQUFDLEVBQUcsS0FBS0YsR0FBR0MsTUFBTSIsInNvdXJjZXMiOlsid2VicGFjazovL0BjeXByZXNzL3dlYnBhY2stcHJlcHJvY2Vzc29yLy4vdGVzdC9fdGVzdC1vdXRwdXQvZXhhbXBsZV9zcGVjLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIml0KCdpcyBhIHRlc3QnLCAoKSA9PiB7XG4gIGNvbnN0IFthLCBiXSA9IFsxLCAyXVxuXG4gIGV4cGVjdChhKS50by5lcXVhbCgxKVxuICBleHBlY3QoYikudG8uZXF1YWwoMilcbiAgZXhwZWN0KE1hdGgubWluKC4uLlszLCA0XSkpLnRvLmVxdWFsKDMpXG59KVxuIl0sIm5hbWVzIjpbIml0IiwiZXhwZWN0IiwidG8iLCJlcXVhbCIsIk1hdGgiLCJtaW4iXSwic291cmNlUm9vdCI6IiJ9
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9zcGVjX291dHB1dC5qcyIsIm1hcHBpbmdzIjoiQUFBQUEsR0FBRyxhQUFhLFdBR2RDLE9BRmdCLEdBRU5DLEdBQUdDLE1BQU0sR0FDbkJGLE9BSG1CLEdBR1RDLEdBQUdDLE1BQU0sR0FDbkJGLE9BQU9HLEtBQUtDLElBQUcsTUFBUkQsS0FBWSxDQUFDLEVBQUcsS0FBS0YsR0FBR0MsTUFBTSIsInNvdXJjZXMiOlsid2VicGFjazovL0BjeXByZXNzL3dlYnBhY2stcHJlcHJvY2Vzc29yLy4vdGVzdC9fdGVzdC1vdXRwdXQvZXhhbXBsZV9zcGVjLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIml0KCdpcyBhIHRlc3QnLCAoKSA9PiB7XG4gIGNvbnN0IFthLCBiXSA9IFsxLCAyXVxuXG4gIGV4cGVjdChhKS50by5lcXVhbCgxKVxuICBleHBlY3QoYikudG8uZXF1YWwoMilcbiAgZXhwZWN0KE1hdGgubWluKC4uLlszLCA0XSkpLnRvLmVxdWFsKDMpXG59KVxuIl0sIm5hbWVzIjpbIml0IiwiZXhwZWN0IiwidG8iLCJlcXVhbCIsIk1hdGgiLCJtaW4iXSwic291cmNlUm9vdCI6IiJ9
 `
 
 exports['webpack preprocessor - e2e has less verbose syntax error 1'] = `

npm/webpack-preprocessor/test/unit/cross-origin-callback-loader.spec.ts

@@ -220,7 +220,6 @@ describe('./lib/cross-origin-callback-loader', () => {
       expectAddFileSource(store).to.equal(stripIndent`
         __cypressCrossOriginCallback = () => {
           const utils = require('../support/utils');
-
           utils.foo();
         }`)
     })
@@ -230,9 +229,7 @@ describe('./lib/cross-origin-callback-loader', () => {
         `it('test', () => {
           cy.origin('http://www.foobar.com:3500', () => {
             require('../support/commands')
-
             const utils = require('../support/utils')
-
             const _ = require('lodash')
           })
         })`,
@@ -241,9 +238,7 @@ describe('./lib/cross-origin-callback-loader', () => {
       expectAddFileSource(store).to.equal(stripIndent`
         __cypressCrossOriginCallback = () => {
           require('../support/commands');
-
           const utils = require('../support/utils');
-
           const _ = require('lodash');
         }`)
     })
@@ -270,9 +265,7 @@ describe('./lib/cross-origin-callback-loader', () => {
         `it('test', () => {
           cy.origin('http://www.foobar.com:3500', () => {
             const someVar = 'someValue'
-
             const result = require('./fn')(someVar)
-
             expect(result).to.equal('mutated someVar')
           })
         })`,
@@ -281,9 +274,7 @@ describe('./lib/cross-origin-callback-loader', () => {
       expectAddFileSource(store).to.equal(stripIndent`
         __cypressCrossOriginCallback = () => {
           const someVar = 'someValue';
-
           const result = require('./fn')(someVar);
-
           expect(result).to.equal('mutated someVar');
         }`)
     })
@@ -293,7 +284,6 @@ describe('./lib/cross-origin-callback-loader', () => {
         `it('test', () => {
           cy.origin('http://www.foobar.com:3500', { args: { foo: 'foo'}}, ({ foo }) => {
             const result = require('./fn')(foo)
-
             expect(result).to.equal('mutated someVar')
           })
         })`,
@@ -304,7 +294,6 @@ describe('./lib/cross-origin-callback-loader', () => {
           foo
         }) => {
           const result = require('./fn')(foo);
-
           expect(result).to.equal('mutated someVar');
         }`)
     })

packages/config/test/__babel_fixtures__/adding-component/destructure-require-ts/output.ts

@@ -1,5 +1,4 @@
 const { defineConfig: cypressDefineConfig } = require("cypress");
-
 export default cypressDefineConfig({
   component: {
     devServer: {

packages/data-context/package.json

@@ -46,6 +46,7 @@
     "prettier": "2.5.1",
     "randexp": "0.5.3",
     "randomstring": "1.1.5",
+    "react-docgen": "6.0.0-alpha.3",
     "semver": "7.3.2",
     "simple-git": "3.4.0",
     "stringify-object": "^3.0.0",

packages/data-context/src/actions/ProjectActions.ts

@@ -6,14 +6,18 @@ import path from 'path'
 import assert from 'assert'
 
 import type { ProjectShape } from '../data/coreDataShape'
-
 import type { DataContext } from '..'
 import { codeGenerator, SpecOptions, hasNonExampleSpec } from '../codegen'
 import templates from '../codegen/templates'
 import { insertValuesInConfigFile } from '../util'
 import { getError } from '@packages/errors'
 import { resetIssuedWarnings } from '@packages/config'
 import { WizardFrontendFramework, WIZARD_FRAMEWORKS } from '@packages/scaffold-config'
+import { parse as parseReactComponent, resolver as reactDocgenResolvers } from 'react-docgen'
+import fs from 'fs-extra'
+import Debug from 'debug'
+
+const debug = Debug('cypress:data-context:sources:ProjectActions')
 
 export interface ProjectApiShape {
   /**
@@ -76,6 +80,11 @@ type SetForceReconfigureProjectByTestingType = {
   testingType?: TestingType
 }
 
+interface ReactComponentDescriptor {
+  description: string
+  displayName: string
+}
+
 export class ProjectActions {
   constructor (private ctx: DataContext) {}
 
@@ -345,7 +354,25 @@ export class ProjectActions {
     this.api.insertProjectPreferencesToCache(this.ctx.lifecycleManager.projectTitle, args)
   }
 
-  async codeGenSpec (codeGenCandidate: string, codeGenType: CodeGenType): Promise<NexusGenUnions['GeneratedSpecResult']> {
+  // @ts-ignore
+  async getReactComponentsFromFile (filePath: string): Promise<ReactComponentDescriptor[]> {
+    try {
+      const src = await fs.readFile(filePath, 'utf8')
+
+      let result = parseReactComponent(src, reactDocgenResolvers.findAllExportedComponentDefinitions)
+      // types appear to be incorrect in [email protected]
+      // TODO: update when 6.0.0 stable is out for fixed types.
+      const defs = (Array.isArray(result) ? result : [result]) as ReactComponentDescriptor[]
+
+      return defs
+    } catch (err) {
+      debug(err)
+
+      return []
+    }
+  }
+
+  async codeGenSpec (codeGenCandidate: string, codeGenType: CodeGenType, componentName?: string): Promise<NexusGenUnions['GeneratedSpecResult']> {
     const project = this.ctx.currentProject
 
     assert(project, 'Cannot create spec without currentProject.')
@@ -371,6 +398,7 @@ export class ProjectActions {
       specPattern,
       currentProject: this.ctx.currentProject,
       specs: this.ctx.project.specs,
+      componentName,
     })
 
     let codeGenOptions = await newSpecCodeGenOptions.getCodeGenOptions()

packages/data-context/src/codegen/spec-options.ts

@@ -2,7 +2,7 @@ import type { ParsedPath } from 'path'
 import type { CodeGenType } from '@packages/graphql/src/gen/nxs.gen'
 import type { WizardFrontendFramework } from '@packages/scaffold-config'
 import fs from 'fs-extra'
-import { upperFirst } from 'lodash'
+import { uniq, upperFirst } from 'lodash'
 import path from 'path'
 import { getDefaultSpecFileName } from '../sources/migration/utils'
 import { toPosix } from '../util'
@@ -16,6 +16,7 @@ interface CodeGenOptions {
   currentProject: string | null
   framework?: WizardFrontendFramework
   specs?: FoundSpec[]
+  componentName?: string
 }
 
 // Spec file extensions that we will preserve when updating the file name
@@ -28,7 +29,7 @@ interface CodeGenOptions {
 export const expectedSpecExtensions = ['.cy', '.spec', '.test', '-spec', '-test', '_spec']
 
 type ComponentExtension = `.cy.${'js' | 'ts' | 'jsx' | 'tsx'}`
-type TemplateKey = 'e2e' | 'componentEmpty' | 'vueComponent'
+type TemplateKey = 'e2e' | 'componentEmpty' | 'vueComponent' | 'reactComponent'
 export class SpecOptions {
   private parsedPath: ParsedPath;
 
@@ -54,19 +55,14 @@ export class SpecOptions {
       throw new Error('Cannot generate a spec without a framework')
     }
 
-    // This only works for Vue projects right now. If the framework is not Vue, we're generating an empty component test
-    if (this.options.framework.codeGenFramework !== 'vue') {
-      return {
-        codeGenType: this.options.codeGenType,
-        fileName: await this.buildFileName(),
-        templateKey: 'componentEmpty' as TemplateKey,
-        overrideCodeGenDir: '',
-      }
+    switch (this.options.framework.codeGenFramework) {
+      case 'react':
+        return await this.getReactSpecOptions()
+      case 'vue':
+        return await this.getVueSpecOptions()
+      default:
+        throw new Error(`Unable to generate spec for ${this.options.framework.codeGenFramework}`)
     }
-
-    const frameworkOptions = await this.getFrameworkComponentOptions()
-
-    return frameworkOptions
   }
 
   private getRelativePathToComponent (specParsedPath?: ParsedPath) {
@@ -81,7 +77,7 @@ export class SpecOptions {
     return `./${this.parsedPath.base}`
   }
 
-  private async getFrameworkComponentOptions () {
+  private async getVueSpecOptions () {
     const componentName = this.buildComponentNameFromFilename(this.parsedPath.name)
 
     const extension = await this.getVueExtension()
@@ -92,7 +88,7 @@ export class SpecOptions {
     if (!this.options.isDefaultSpecPattern) {
       parsedSpecPath = path.parse(await getDefaultSpecFileName({
         currentProject: this.options.currentProject,
-        testingType: this.options.codeGenType === 'componentEmpty' || this.options.codeGenType === 'component' ? 'component' : 'e2e',
+        testingType: 'component',
         fileExtensionToUse: (extension === '.cy.ts' || extension === '.cy.tsx') ? 'ts' : 'js',
         specPattern: this.options.specPattern,
         name: componentName,
@@ -112,6 +108,39 @@ export class SpecOptions {
     }
   }
 
+  private async getReactSpecOptions () {
+    // For React specs, use the component name that the user selected. Otherwise fall back to the component file name.
+    const componentName = this.options.componentName || this.parsedPath.name
+
+    const extension = `.cy${this.parsedPath.ext}`
+
+    let parsedSpecPath: ParsedPath | undefined
+
+    // If we have a custom spec pattern, write the spec to a path that matches the pattern instead of the component directory
+    if (!this.options.isDefaultSpecPattern) {
+      parsedSpecPath = path.parse(await getDefaultSpecFileName({
+        currentProject: this.options.currentProject,
+        testingType: 'component',
+        fileExtensionToUse: (extension === '.cy.ts' || extension === '.cy.tsx') ? 'ts' : 'js',
+        specPattern: this.options.specPattern,
+        name: componentName,
+        specs: this.options.specs }))
+    }
+
+    // The path to import the component from
+    const componentPath = this.getRelativePathToComponent(parsedSpecPath)
+
+    return {
+      codeGenType: this.options.codeGenType,
+      componentName,
+      componentPath,
+      // If the component name and file name are different, the spec file should be combined (ex: SpecNameComponentName.cy.xx)
+      fileName: await this.buildComponentSpecFilename(extension, parsedSpecPath, uniq([this.parsedPath.name, componentName]).join('')),
+      templateKey: 'reactComponent' as TemplateKey,
+      overrideCodeGenDir: parsedSpecPath?.dir,
+    }
+  }
+
   private async getVueExtension (): Promise<ComponentExtension> {
     try {
       const fileContent = await fs
@@ -153,11 +182,11 @@ export class SpecOptions {
     .join('')
   }
 
-  private buildComponentSpecFilename (specExt: string, filePath?: ParsedPath) {
+  private buildComponentSpecFilename (specExt: string, filePath?: ParsedPath, fileName?: string) {
     const { dir, base, ext } = filePath || this.parsedPath
     const cyWithExt = this.getSpecExtension(filePath) + ext
 
-    const name = base.slice(0, -cyWithExt.length)
+    const name = fileName || base.slice(0, -cyWithExt.length)
 
     const finalExtension = filePath ? cyWithExt : specExt
 

packages/data-context/src/codegen/templates.ts

@@ -4,6 +4,7 @@ import cypressEx from '@packages/example'
 const getPath = (dir: string) => path.join(__dirname, dir)
 
 export default {
+  reactComponent: getPath('./templates/react-component'),
   vueComponent: getPath('./templates/vue-component'),
   componentEmpty: getPath('./templates/empty-component'),
   e2e: getPath('./templates/empty-e2e'),

packages/data-context/src/codegen/templates/react-component/react-component.ejs

@@ -0,0 +1,13 @@
+---
+fileName: <%= fileName %>
+---
+
+import React from 'react'
+import { <%- componentName %> } from '<%- componentPath %>'
+
+describe('<<%- componentName %> />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<<%- componentName %> />)
+  })
+})

packages/data-context/src/sources/migration/codegen.ts

@@ -536,6 +536,7 @@ export function getSpecPattern (cfg: LegacyCypressConfigJson, testingType: Testi
 function formatWithBundledBabel (config: string) {
   const ast = parse(config)
 
+  // @ts-ignore - transitive babel types have a minor conflict - readonly vs non readonly.
   let { code } = generate(ast, {}, config)
   // By default babel generates imports like this:
   // const {

packages/data-context/test/unit/actions/ProjectActions.spec.ts

@@ -3,6 +3,7 @@ import { ProjectActions } from '../../../src/actions/ProjectActions'
 import { createTestDataContext } from '../helper'
 import { expect } from 'chai'
 import sinon from 'sinon'
+import path from 'path'
 import { SpecWithRelativeRoot } from '@packages/types'
 
 describe('ProjectActions', () => {
@@ -17,6 +18,51 @@ describe('ProjectActions', () => {
     actions = new ProjectActions(ctx)
   })
 
+  context('getReactComponentsFromFile', () => {
+    const absolutePathPrefix = path.resolve('./test/unit/actions/project')
+
+    it('returns React components from file with class component', async () => {
+      const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-class.jsx`)
+
+      expect(reactComponents).to.have.length(1)
+      expect(reactComponents[0].displayName).to.equal('Counter')
+    })
+
+    it('returns React components from file with functional component', async () => {
+      const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-functional.jsx`)
+
+      expect(reactComponents).to.have.length(1)
+      expect(reactComponents[0].displayName).to.equal('Counter')
+    })
+
+    it('returns only exported React components from file with functional components', async () => {
+      const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-multiple-components.jsx`)
+
+      expect(reactComponents).to.have.length(1)
+      expect(reactComponents[0].displayName).to.equal('CounterContainer')
+    })
+
+    it('returns React components from a tsx file', async () => {
+      const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter.tsx`)
+
+      expect(reactComponents).to.have.length(1)
+      expect(reactComponents[0].displayName).to.equal('Counter')
+    })
+
+    it('returns React components that are exported by default', async () => {
+      const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-default.tsx`)
+
+      expect(reactComponents).to.have.length(1)
+      expect(reactComponents[0].displayName).to.equal('CounterDefault')
+    })
+
+    it('does not throw while parsing empty file', async () => {
+      const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/empty.jsx`)
+
+      expect(reactComponents).to.have.length(0)
+    })
+  })
+
   context('hasNonExampleSpec', () => {
     context('testing type not set yet', () => {
       it('should indicate there are NO non example spec files if empty', async () => {

packages/data-context/test/unit/actions/project/counter-class.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export class Counter extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      count: 0,
+    }
+  }
+
+  click = () => {
+    this.setState({
+      count: this.state.count + 1,
+    })
+  }
+
+  render () {
+    return <p onClick={this.click}>count: {this.state.count}</p>
+  }
+}