fix: do not scaffold fixtures if folder exist

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

@@ -290,11 +290,26 @@ export class WizardActions {
   private async scaffoldFixtures (): Promise<NexusGenObjects['ScaffoldedFile']> {
     const exampleScaffoldPath = path.join(this.projectRoot, 'cypress/fixtures/example.json')
 
-    await this.ensureDir('fixtures')
+    try {
+      const fixturesPath = path.join(this.projectRoot, 'cypress/fixtures')
+
+      await this.ctx.fs.stat(fixturesPath)
+
+      return {
+        status: 'skipped',
+        description: 'Fixtures folder already exists',
+        file: {
+          absolute: exampleScaffoldPath,
+          contents: '// Skipped',
+        },
+      }
+    } catch {
+      await this.ensureDir('fixtures')
 
-    return this.scaffoldFile(exampleScaffoldPath,
-      `${JSON.stringify(FIXTURE_DATA, null, 2)}\n`,
-      'Added an example fixtures file/folder')
+      return this.scaffoldFile(exampleScaffoldPath,
+        `${JSON.stringify(FIXTURE_DATA, null, 2)}\n`,
+        'Added an example fixtures file/folder')
+    }
   }
 
   private wizardGetConfigCodeE2E (lang: CodeLanguageEnum): string {

packages/launchpad/cypress/e2e/project-setup.cy.ts

@@ -12,6 +12,11 @@ describe('Launchpad: Setup Project', () => {
   function scaffoldAndOpenProject (name: Parameters<typeof cy.scaffoldProject>[0], args?: Parameters<typeof cy.openProject>[1]) {
     cy.scaffoldProject(name)
     cy.openProject(name, args)
+
+    // Delete the fixtures folder so it scaffold correctly the example
+    cy.withCtx(async (ctx) => {
+      await ctx.actions.file.removeFileInProject('cypress/fixtures')
+    })
   }
 
   const verifyWelcomePage = ({ e2eIsConfigured, ctIsConfigured }) => {

packages/launchpad/cypress/e2e/scaffold-project.cy.ts

@@ -21,49 +21,65 @@ import type { SnapshotScaffoldTestResult } from '@packages/launchpad/cypress/tas
 //
 // To update your expected files, just delete the `expected-cypress` and re-run the test,
 // or modify them by hand.
-function scaffoldAndOpenE2EProject (
-  name: Parameters<typeof cy.scaffoldProject>[0],
-  language: 'js' | 'ts',
-  args?: Parameters<typeof cy.openProject>[1],
-) {
-  cy.scaffoldProject(name)
-  cy.openProject(name, args)
+function scaffoldAndOpenE2EProject (opts: {
+  name: Parameters<typeof cy.scaffoldProject>[0]
+  language: 'js' | 'ts'
+  args?: Parameters<typeof cy.openProject>[1]
+  removeFixturesFolder?: boolean
+}) {
+  cy.scaffoldProject(opts.name)
+  cy.openProject(opts.name, opts.args)
+
+  if (opts.removeFixturesFolder) {
+    // Delete the fixtures folder so it scaffold correctly the example
+    cy.withCtx(async (ctx) => {
+      await ctx.actions.file.removeFileInProject('cypress/fixtures')
+    })
+  }
 
   cy.visitLaunchpad()
 
   cy.contains('Welcome to Cypress!').should('be.visible')
   cy.contains('[data-cy-testingtype="e2e"]', 'Not Configured')
   cy.contains('[data-cy-testingtype="component"]', 'Not Configured')
   cy.contains('E2E Testing').click()
-  cy.contains(language === 'js' ? 'JavaScript' : 'TypeScript').click()
+  cy.contains(opts.language === 'js' ? 'JavaScript' : 'TypeScript').click()
   cy.contains('Next').click()
   cy.contains('We added the following files to your project.')
   cy.contains('Continue').click()
 }
 
-function scaffoldAndOpenCTProject (
-  name: Parameters<typeof cy.scaffoldProject>[0],
-  language: 'js' | 'ts',
-  framework: typeof WIZARD_FRAMEWORKS[number]['name'],
-  bundler?: typeof WIZARD_FRAMEWORKS[number]['supportedBundlers'][number]['name'],
-  args?: Parameters<typeof cy.openProject>[1],
-) {
-  cy.scaffoldProject(name)
-  cy.openProject(name, args)
+function scaffoldAndOpenCTProject (opts: {
+  name: Parameters<typeof cy.scaffoldProject>[0]
+  language: 'js' | 'ts'
+  framework: typeof WIZARD_FRAMEWORKS[number]['name']
+  bundler?: typeof WIZARD_FRAMEWORKS[number]['supportedBundlers'][number]['name']
+  args?: Parameters<typeof cy.openProject>[1]
+  removeFixturesFolder?: boolean
+}) {
+  cy.scaffoldProject(opts.name)
+  cy.openProject(opts.name, opts.args)
+
+  if (opts.removeFixturesFolder) {
+    // Delete the fixtures folder so it scaffold correctly the example
+    cy.withCtx(async (ctx) => {
+      await ctx.actions.file.removeFileInProject('cypress/fixtures')
+    })
+  }
 
   cy.visitLaunchpad()
 
   cy.contains('Welcome to Cypress!').should('be.visible')
   cy.contains('[data-cy-testingtype="e2e"]', 'Not Configured')
   cy.contains('[data-cy-testingtype="component"]', 'Not Configured')
   cy.contains('Component Testing').click()
-  cy.contains(language === 'js' ? 'JavaScript' : 'TypeScript').click()
+  cy.contains(opts.language === 'js' ? 'JavaScript' : 'TypeScript').click()
 
   cy.contains('React.js(detected)').click()
-  cy.contains(framework).click()
-  if (bundler) {
+  cy.contains(opts.framework).click()
+  if (opts.bundler) {
     cy.contains('Webpack(detected)').click()
-    cy.contains(bundler).click()
+    cy.contains(opts.bundler).click()
   }
 
   cy.contains('Next Step').click()
@@ -72,13 +88,14 @@ function scaffoldAndOpenCTProject (
   cy.contains('Continue').click()
 }
 
-function assertScaffoldedFilesAreCorrect (language: 'js' | 'ts', testingType: Cypress.TestingType, ctFramework?: string) {
+function assertScaffoldedFilesAreCorrect (opts: { language: 'js' | 'ts', testingType: Cypress.TestingType, ctFramework?: string, customDirectory?: string}) {
   cy.withCtx((ctx) => ctx.currentProject).then((currentProject) => {
     cy.task<SnapshotScaffoldTestResult>('snapshotCypressDirectory', {
       currentProject,
-      testingType,
-      language,
-      ctFramework,
+      testingType: opts.testingType,
+      language: opts.language,
+      ctFramework: opts.ctFramework,
+      customDirectory: opts.customDirectory,
     })
     .then((result) => {
       if (result.status === 'ok') {
@@ -95,22 +112,44 @@ function assertScaffoldedFilesAreCorrect (language: 'js' | 'ts', testingType: Cy
 
 describe('scaffolding new projects', { defaultCommandTimeout: 7000 }, () => {
   it('scaffolds E2E for a JS project', () => {
-    scaffoldAndOpenE2EProject('pristine', 'js')
-    assertScaffoldedFilesAreCorrect('js', 'e2e')
+    const language = 'js'
+
+    scaffoldAndOpenE2EProject({ name: 'pristine', language, removeFixturesFolder: true })
+    assertScaffoldedFilesAreCorrect({ language, testingType: 'e2e' })
   })
 
   it('scaffolds E2E for a TS project', () => {
-    scaffoldAndOpenE2EProject('pristine', 'ts')
-    assertScaffoldedFilesAreCorrect('ts', 'e2e')
+    const language = 'ts'
+
+    scaffoldAndOpenE2EProject({ name: 'pristine', language, removeFixturesFolder: true })
+    assertScaffoldedFilesAreCorrect({ language, testingType: 'e2e' })
+  })
+
+  it('scaffolds E2E and skip fixtures for a JS project', () => {
+    const language = 'js'
+
+    scaffoldAndOpenE2EProject({ name: 'pristine', language, removeFixturesFolder: false })
+    assertScaffoldedFilesAreCorrect({ language, testingType: 'e2e', customDirectory: 'without-fixtures' })
   })
 
   it('scaffolds CT for a JS project', () => {
-    scaffoldAndOpenCTProject('pristine', 'js', 'Create React App')
-    assertScaffoldedFilesAreCorrect('js', 'component', 'Create React App (v5)')
+    const language = 'js'
+
+    scaffoldAndOpenCTProject({ name: 'pristine', language, framework: 'Create React App', removeFixturesFolder: true })
+    assertScaffoldedFilesAreCorrect({ language, testingType: 'component', ctFramework: 'Create React App (v5)' })
   })
 
   it('scaffolds CT for a TS project', () => {
-    scaffoldAndOpenCTProject('pristine', 'ts', 'Create React App')
-    assertScaffoldedFilesAreCorrect('ts', 'component', 'Create React App (v5)')
+    const language = 'ts'
+
+    scaffoldAndOpenCTProject({ name: 'pristine', language, framework: 'Create React App', removeFixturesFolder: true })
+    assertScaffoldedFilesAreCorrect({ language, testingType: 'component', ctFramework: 'Create React App (v5)' })
+  })
+
+  it('scaffolds CT and skip fixtures for a JS project', () => {
+    const language = 'js'
+
+    scaffoldAndOpenCTProject({ name: 'pristine', language, framework: 'Create React App', removeFixturesFolder: false })
+    assertScaffoldedFilesAreCorrect({ language, testingType: 'component', ctFramework: 'Create React App (v5)', customDirectory: 'without-fixtures' })
   })
 })

packages/launchpad/cypress/tasks/snapshotsScaffold.ts

@@ -79,13 +79,14 @@ interface SnapshotCypressDirectoryOptions {
   language: 'js' | 'ts'
   testingType: Cypress.TestingType
   ctFramework?: string
+  customDirectory?: string
 }
 
 function removeHyphensAndBrackets (str: string) {
   return str.toLowerCase().replaceAll(' ', '-').replaceAll('(', '').replaceAll(')', '')
 }
 
-export async function snapshotCypressDirectory ({ currentProject, language, testingType, ctFramework }: SnapshotCypressDirectoryOptions): Promise<SnapshotScaffoldTestResult> {
+export async function snapshotCypressDirectory ({ currentProject, language, testingType, ctFramework, customDirectory }: SnapshotCypressDirectoryOptions): Promise<SnapshotScaffoldTestResult> {
   if (!currentProject.startsWith(cyTmpDir)) {
     throw Error(dedent`
       snapshotCypressDirectory is designed to be used with system-tests infrastructure.
@@ -96,32 +97,35 @@ export async function snapshotCypressDirectory ({ currentProject, language, test
   }
 
   const projectDir = currentProject.replace(cyTmpDir, systemTestsDir)
-  const projectName = projectDir.replace(systemTestsDir, '').slice(1)
 
   let expectedScaffoldDir = path.join(projectDir, `expected-cypress-${language}-${testingType}`)
 
   if (ctFramework) {
     expectedScaffoldDir += `-${removeHyphensAndBrackets(ctFramework)}`
   }
 
+  if (customDirectory) {
+    expectedScaffoldDir += `-${customDirectory}`
+  }
+
   const joinPosix = (...s: string[]) => path.join(...s).split(path.sep).join(path.posix.sep)
 
   const files = (
     await Promise.all([
-      globby(joinPosix(currentProject, 'cypress'), { onlyFiles: true }),
-      globby(joinPosix(currentProject, 'cypress.config.*'), { onlyFiles: true }),
+      globby(joinPosix(expectedScaffoldDir, 'cypress'), { onlyFiles: true }),
+      globby(joinPosix(expectedScaffoldDir, 'cypress.config.*'), { onlyFiles: true }),
     ])
   ).reduce((acc, curr) => {
     return [acc, curr].flat(2)
   }, [])
 
-  const actualRelativeFiles = files.map((file) => {
-    const cyTmpDirPosix = joinPosix(cyTmpDir)
+  const expectedRelativeFiles = files.map((file) => {
+    const cyTmpDirPosix = joinPosix(expectedScaffoldDir)
 
-    return file.slice(cyTmpDirPosix.length + projectName.length + 2)
+    return file.replace(cyTmpDirPosix, '').slice(1)
   })
 
-  const filesToDiff = actualRelativeFiles.map<FileToDiff>((file) => {
+  const filesToDiff = expectedRelativeFiles.map<FileToDiff>((file) => {
     return {
       actual: joinPosix(path.join(currentProject, file)),
       expected: joinPosix(path.join(expectedScaffoldDir, file)),

system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+})

system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress'
+import { devServer } from '@cypress/react/plugins/react-scripts'
+
+export default defineConfig({
+  component: {
+    devServer,
+  },
+})

system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5-without-fixtures/cypress/support/component-index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+
+  </head>
+  <body>
+
+    <div id="__cy_root"></div>
+  </body>
+</html>