address comments

Author: ZachJW34

packages/app/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

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

@@ -186,7 +186,7 @@ export class ProjectActions {
     await this.api.clearLatestProjectsCache()
   }
 
-  async createComponentIndexHtml (template: string) {
+  createComponentIndexHtml (template: string) {
     const project = this.ctx.activeProject
 
     if (!project) {
@@ -196,7 +196,7 @@ export class ProjectActions {
     if (this.ctx.activeProject?.isFirstTimeCT) {
       const indexHtmlPath = path.resolve(this.ctx.activeProject.projectRoot, 'cypress/component/support/index.html')
 
-      this.ctx.fs.outputFileSync(indexHtmlPath, template)
+      this.ctx.fs.outputFile(indexHtmlPath, template)
     }
   }
 }

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

@@ -1,3 +1,4 @@
+import type { FoundSpec, FullConfig } from '@packages/types'
 import { CsfFile, readCsfOrMdx } from '@storybook/csf-tools'
 import endent from 'endent'
 import * as path from 'path'
@@ -13,15 +14,18 @@ export class StorybookActions {
       throw Error(`Cannot generate a spec without activeProject.`)
     }
 
-    const spec = await this.generate(storyPath, project.projectRoot)
+    const config = await this.ctx.project.getConfig(project.projectRoot)
+
+    const spec = await this.generate(storyPath, project.projectRoot, config.componentFolder)
 
     this.ctx.wizardData.generatedSpec = spec
   }
 
   private async generate (
     storyPath: string,
     projectRoot: string,
-  ): Promise<Cypress.Cypress['spec'] | null> {
+    componentFolder: FullConfig['componentFolder'],
+  ): Promise<FoundSpec | null> {
     const storyFile = path.parse(storyPath)
     const storyName = storyFile.name.split('.')[0]
 
@@ -38,11 +42,12 @@ export class StorybookActions {
         return null
       }
 
+      const specFileExtension = '.cy-spec'
       const newSpecContent = this.generateSpecFromCsf(parsed, storyFile)
       const newSpecPath = path.join(
         storyPath,
         '..',
-        `${parsed.meta.component}.cy-spec${storyFile.ext}`,
+        `${parsed.meta.component}${specFileExtension}${storyFile.ext}`,
       )
 
       // If this passes then the file exists and we don't want to overwrite it
@@ -56,10 +61,18 @@ export class StorybookActions {
 
       await this.ctx.fs.outputFileSync(newSpecPath, newSpecContent)
 
+      const parsedSpec = path.parse(newSpecPath)
+
+      // Can this be obtained from the spec watcher?
       return {
-        name: path.parse(newSpecPath).name,
+        baseName: parsedSpec.base,
+        fileName: parsedSpec.base.replace(specFileExtension, ''),
+        specFileExtension,
+        fileExtension: parsedSpec.ext,
+        name: path.relative(componentFolder || projectRoot, newSpecPath),
         relative: path.relative(projectRoot, newSpecPath),
         absolute: newSpecPath,
+        specType: 'component',
       }
     } catch (e) {
       return null