feat: create from React component UI

npm/webpack-dev-server/cypress/e2e/react.cy.ts

@@ -129,6 +129,8 @@ for (const project of WEBPACK_REACT) {
 
       // 4. recreate spec, with same name as removed spec
       cy.findByTestId('new-spec-button').click()
+      cy.findByRole('button', { name: 'Create new empty spec' }).should('be.visible').click()
+
       cy.findByRole('dialog').within(() => {
         cy.get('input').clear().type('src/App.cy.jsx')
         cy.contains('button', 'Create spec').click()

packages/app/cypress/e2e/create-from-component.cy.ts

@@ -1,10 +1,10 @@
 import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
 import { getPathForPlatform } from '../../src/paths'
 
-function validateCreateFromComponentCard (beforeEachFn: () => void, expectedSpecPath: string) {
+function validateCreateFromVueComponentCard (beforeEachFn: () => void, expectedSpecPath: string) {
   beforeEach(beforeEachFn)
 
-  it('Shows create from component card for Vue projects with default spec patterns', () => {
+  it('Shows create from component card for Vue projects', () => {
     cy.get('@ComponentCard')
     .within(() => {
       cy.findByRole('button', {
@@ -82,31 +82,175 @@ function validateCreateFromComponentCard (beforeEachFn: () => void, expectedSpec
       .should('have.attr', 'href', `#/specs/runner?file=${expectedSpecPath}`).click()
     })
 
-    cy.findByText('<HelloWorld ... />', { timeout: 10000 }).should('be.visible')
+    cy.waitForSpecToFinish({ passCount: 1 })
+  })
+}
+
+function validateCreateFromReactComponentCard (beforeEachFn: () => void, expectedSpecPath: string) {
+  beforeEach(beforeEachFn)
+
+  it('Shows create from component card for React projects', () => {
+    cy.get('@ComponentCard')
+    .within(() => {
+      cy.findByRole('button', {
+        name: 'Create from component',
+      }).should('be.visible')
+      .and('not.be.disabled')
+    })
+  })
+
+  it('Can be closed with the x button', () => {
+    cy.get('@ComponentCard').click()
+
+    cy.findByRole('button', { name: 'Close' }).as('DialogCloseButton')
+
+    cy.get('@DialogCloseButton').click()
+    cy.findByRole('dialog', {
+      name: 'Choose a component',
+    }).should('not.exist')
+  })
+
+  it('Lists files in the project', () => {
+    cy.get('@ComponentCard').click()
+
+    cy.findByText('5 matches').should('be.visible')
+
+    cy.findByText('App').should('be.visible')
+    cy.findByText('index').should('be.visible')
+  })
+
+  it('Allows for the user to search through their components', () => {
+    cy.get('@ComponentCard').click()
+
+    cy.findByText('*.{js,jsx,ts,tsx}').should('be.visible')
+    cy.findByText('5 matches').should('be.visible')
+    cy.findByLabelText('file-name-input').type('App')
+
+    cy.findByText('App').should('be.visible')
+    cy.findByText('1 of 5 matches').should('be.visible')
+    cy.findByText('index').should('not.exist')
+    cy.findByText('component').should('not.exist')
+  })
+
+  it('shows \'No components found\' if there are no exported components', () => {
+    cy.get('@ComponentCard').click()
+
+    cy.findByText('index').should('be.visible').click()
+
+    cy.findByTestId('react-component-row').should('not.exist')
+    cy.contains('No components found').should('be.visible')
+  })
+
+  it('shows \'Unable to parse file\' if there was an error parsing the file', () => {
+    cy.get('@ComponentCard').click()
+
+    // This component has a syntax error so we will fail to parse it
+    cy.findByText('Invalid').should('be.visible').click()
+
+    cy.findByTestId('react-component-row').should('not.exist')
+    cy.contains('Unable to parse file').should('be.visible')
+  })
+
+  it('shows success modal when component spec is created', () => {
+    cy.get('@ComponentCard').click()
+
+    // Expand the row
+    cy.findByText('App').should('be.visible').click()
+
+    // Click on 'app' component
+    cy.findByTestId('react-component-row').should('contain', 'App').click()
+
+    cy.findByRole('dialog', {
+      name: defaultMessages.createSpec.successPage.header,
+    }).as('SuccessDialog').within(() => {
+      cy.contains(getPathForPlatform(expectedSpecPath)).should('be.visible')
+      cy.findByRole('button', { name: 'Close' }).should('be.visible')
+
+      cy.findByRole('link', { name: 'Okay, run the spec' })
+      .should('have.attr', 'href', `#/specs/runner?file=${expectedSpecPath}`)
+
+      cy.findByRole('button', { name: 'Create another spec' }).click()
+    })
+
+    // 'Create from component' card appears again when the user selects "create another spec"
+    cy.findByText('Create from component').should('be.visible')
+  })
+
+  it('runs generated spec', () => {
+    cy.get('@ComponentCard').click()
+
+    // Expand the row
+    cy.findByText('App').should('be.visible').click()
+
+    // Click on 'app' component
+    cy.findByTestId('react-component-row').should('contain', 'App').click()
+
+    cy.findByRole('dialog', {
+      name: defaultMessages.createSpec.successPage.header,
+    }).as('SuccessDialog').within(() => {
+      cy.contains(getPathForPlatform(expectedSpecPath)).should('be.visible')
+      cy.findByRole('button', { name: 'Close' }).should('be.visible')
+
+      // There appears to be a race condition here where sometimes we try to run the spec
+      // before the file has been written to. Waiting here for 1 second resolves the issue.
+      cy.wait(1000)
+
+      cy.findByRole('link', { name: 'Okay, run the spec' })
+      .should('have.attr', 'href', `#/specs/runner?file=${expectedSpecPath}`).click()
+    })
+
+    cy.waitForSpecToFinish({ passCount: 1 })
   })
 }
 
 describe('Create from component card', () => {
-  context('project with default spec pattern', () => {
-    validateCreateFromComponentCard(() => {
-      cy.scaffoldProject('no-specs-vue-2')
-      cy.openProject('no-specs-vue-2')
-      cy.startAppServer('component')
-      cy.visitApp()
-
-      cy.findAllByTestId('card').eq(0).as('ComponentCard')
-    }, 'src/components/HelloWorld.cy.js')
-  })
-
-  context('project with custom spec pattern', () => {
-    validateCreateFromComponentCard(() => {
-      cy.scaffoldProject('no-specs-vue-2')
-      cy.openProject('no-specs-vue-2', ['--config-file', 'cypress-custom-spec-pattern.config.js'])
-      cy.startAppServer('component')
-      cy.visitApp()
-
-      cy.findByText('New spec').click()
-      cy.findAllByTestId('card').eq(0).as('ComponentCard')
-    }, 'src/specs-folder/HelloWorld.cy.js')
+  context('Vue', () => {
+    context('project with default spec pattern', () => {
+      validateCreateFromVueComponentCard(() => {
+        cy.scaffoldProject('no-specs-vue-2')
+        cy.openProject('no-specs-vue-2')
+        cy.startAppServer('component')
+        cy.visitApp()
+
+        cy.findAllByTestId('card').eq(0).as('ComponentCard')
+      }, 'src/components/HelloWorld.cy.js')
+    })
+
+    context('project with custom spec pattern', () => {
+      validateCreateFromVueComponentCard(() => {
+        cy.scaffoldProject('no-specs-vue-2')
+        cy.openProject('no-specs-vue-2', ['--config-file', 'cypress-custom-spec-pattern.config.js'])
+        cy.startAppServer('component')
+        cy.visitApp()
+
+        cy.findByText('New spec').click()
+        cy.findAllByTestId('card').eq(0).as('ComponentCard')
+      }, 'src/specs-folder/HelloWorld.cy.js')
+    })
+  })
+
+  context('React', () => {
+    context('project with default spec pattern', () => {
+      validateCreateFromReactComponentCard(() => {
+        cy.scaffoldProject('no-specs')
+        cy.openProject('no-specs')
+        cy.startAppServer('component')
+        cy.visitApp()
+
+        cy.findAllByTestId('card').eq(0).as('ComponentCard')
+      }, 'src/App.cy.jsx')
+    })
+
+    context('project with custom spec pattern', () => {
+      validateCreateFromReactComponentCard(() => {
+        cy.scaffoldProject('no-specs')
+        cy.openProject('no-specs', ['--config-file', 'cypress-custom-spec-pattern.config.ts'])
+        cy.startAppServer('component')
+        cy.visitApp()
+
+        cy.findByText('New spec').click()
+        cy.findAllByTestId('card').eq(0).as('ComponentCard')
+      }, 'src/specs-folder/App.cy.jsx')
+    })
   })
 })

packages/app/cypress/e2e/specs.cy.ts

@@ -524,6 +524,12 @@ describe('App: Specs', () => {
     })
   })
 
+  function selectEmptySpecCard () {
+    cy.findAllByTestId('card').should('have.length', 2)
+    cy.findByRole('button', { name: 'Create from component' }).should('be.visible')
+    cy.findByRole('button', { name: 'Create new empty spec' }).should('be.visible').click()
+  }
+
   describe('Testing Type: Component', {
     viewportHeight: 768,
     viewportWidth: 1024,
@@ -535,7 +541,7 @@ describe('App: Specs', () => {
         cy.startAppServer('component')
         cy.visitApp()
 
-        cy.findAllByTestId('card').eq(0).as('EmptyCard')
+        cy.findAllByTestId('card').eq(1).as('EmptyCard')
       })
 
       it('shows create new empty spec card', () => {
@@ -589,7 +595,9 @@ describe('App: Specs', () => {
 
           // 'Create a new spec' dialog presents with options when user indicates they want to create
           // another spec.
-          cy.findByRole('dialog', { name: 'Enter the path for your new spec' }).should('be.visible')
+          cy.findAllByTestId('card').should('have.length', 2)
+          cy.findByRole('button', { name: 'Create new empty spec' }).should('be.visible')
+          cy.findByRole('button', { name: 'Create from component' }).should('be.visible')
         })
 
         it('navigates to spec runner when selected', () => {
@@ -628,7 +636,7 @@ describe('App: Specs', () => {
           })
 
           cy.contains('Review the docs')
-          .should('have.attr', 'href', 'https://on.cypress.io/mount')
+          .should('have.attr', 'href', 'https://on.cypress.io/styling-components')
 
           cy.log('should not contain the link if you navigate away and back')
           cy.get('body').type('f')
@@ -709,13 +717,17 @@ describe('App: Specs', () => {
       it('shows new spec button to start creation workflow', () => {
         cy.findByRole('button', { name: 'New spec', exact: false }).click()
 
+        selectEmptySpecCard()
+
         cy.findByRole('dialog', { name: 'Enter the path for your new spec' }).should('be.visible')
       })
 
       it('shows create first spec page with create empty option and goes back if it is cancel', () => {
         cy.findByRole('button', { name: 'New spec', exact: false }).click()
 
-        cy.contains('Cancel').click()
+        selectEmptySpecCard()
+
+        cy.contains('Back').click()
 
         cy.findByRole('dialog', { name: 'Enter the path for your new spec' }).should('not.exist')
       })
@@ -738,6 +750,8 @@ describe('App: Specs', () => {
 
         cy.findByRole('button', { name: 'New spec' }).click()
 
+        selectEmptySpecCard()
+
         cy.findByRole('dialog', {
           name: 'Enter the path for your new spec',
         }).within(() => {

packages/app/src/paths.ts

@@ -18,3 +18,7 @@ export function getPathForPlatform (posixPath?: string) {
 
   return posixPath
 }
+
+export function posixify (path: string): string {
+  return path.replace(/\\/g, '/')
+}

packages/app/src/runner/SpecRunnerHeaderOpenMode.vue

@@ -153,8 +153,8 @@
       dismissible
     >
       <template #title>
-        <ExternalLink href="https://on.cypress.io/mount">
-          <i-cy-book_x16 class="inline-block icon-dark-indigo-500 icon-light-indigo-200" />
+        <i-cy-book_x16 class="pr-2px inline-block icon-dark-indigo-500 icon-light-indigo-200" />
+        <ExternalLink href="https://on.cypress.io/styling-components">
           {{ t('runner.header.reviewDocs') }}
         </ExternalLink>
         {{ t('runner.header.troubleRendering') }}