detect storybook, code-gen and index-html configurability

Author: ZachJW34

npm/react/package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@cypress/mount-utils": "0.0.0-development",
+    "@storybook/testing-react": "0.0.22",
     "debug": "4.3.2",
     "find-webpack": "2.2.1",
     "find-yarn-workspace-root": "2.0.0"

npm/react/plugins/react-scripts/index.js

@@ -4,14 +4,14 @@ const { getLegacyDevServer } = require('../utils/legacy-setup-dev-server')
 
 function devServer (cypressDevServerConfig, {
   webpackConfigPath,
-} = {
-  webpackConfigPath: 'react-scripts/config/webpack.config',
-}) {
+  template,
+} = {}) {
   return startDevServer({
     options: cypressDevServerConfig,
     webpackConfig: findReactScriptsWebpackConfig(cypressDevServerConfig.config, {
-      webpackConfigPath,
+      webpackConfigPath: webpackConfigPath || 'react-scripts/config/webpack.config',
     }),
+    template,
   })
 }
 

npm/react/src/index.ts

@@ -1,3 +1,6 @@
 export * from './mount'
 
 export * from './mountHook'
+
+// TODO: Create our own version and eliminate this dependency?
+export * from '@storybook/testing-react'

npm/vue/package.json

@@ -28,6 +28,7 @@
     "@intlify/vue-i18n-loader": "2.0.0-rc.1",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
+    "@storybook/testing-vue3": "^0.0.1",
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-service": "~4.4.0",
     "@vue/compiler-sfc": "3.2.6",

npm/vue/src/index.ts

@@ -12,6 +12,8 @@ import {
   setupHooks,
 } from '@cypress/mount-utils'
 
+export * from '@storybook/testing-vue3'
+
 const DEFAULT_COMP_NAME = 'unknown'
 
 type GlobalMountOptions = Required<MountingOptions<any>>['global']

packages/app/src/navigation/SidebarNavigation.vue

@@ -34,7 +34,8 @@ import SettingsIcon from '~icons/cy/settings_x24'
 const navigation = [
   { name: 'Specs', icon: SpecsIcon, href: '/' },
   { name: 'Runs', icon: CodeIcon, href: '/runs' },
-  { name: 'Settings', icon: SettingsIcon, href: '/settings' }
+  { name: 'Settings', icon: SettingsIcon, href: '/settings' },
+  { name: 'New Spec', icon: SettingsIcon, href: '/newspec' }
 ]
 
 defineProps<{

packages/app/src/pages/NewSpec.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="query.data.value?.wizard.storybook?.configured">
+    <h2>New Spec</h2>
+    <ul v-if="query.data.value?.wizard?.storybook?.mainJs?.stories">
+      <li v-for="story of query.data.value?.wizard.storybook.mainJs.stories" @click="storyClick(story)">{{story}}</li>
+    </ul>
+  </div>
+  <div v-else>
+    Storybook is not configured for this project
+  </div>
+</template>
+
+<route>
+{
+  name: "New Spec Page"
+}
+</route>
+
+<script lang="ts" setup>
+import { gql, useMutation, useQuery } from '@urql/vue'
+import { MainQueryDocument, GenerateSpecFromStoryDocument } from '../generated/graphql'
+
+gql`
+query MainQuery {
+  wizard {
+    storybook {
+      configured
+      mainJs {
+        stories
+      }
+    }
+  }
+}
+`
+
+gql`
+mutation GenerateSpecFromStory($storyPath: String!) {
+  generateSpecFromStory (storyPath: $storyPath) {
+    storybook {
+      generatedSpecs {
+        name,
+        relative,
+        absolute
+      }
+    }
+  }
+} 
+`
+
+const query = useQuery({query: MainQueryDocument})
+const mutation = useMutation(GenerateSpecFromStoryDocument)
+
+async function storyClick(story) {
+  await mutation.executeMutation({storyPath: story})
+  const generatedSpecs = mutation.data.value?.generateSpecFromStory.storybook?.generatedSpecs || []
+  const newSpec = generatedSpecs[generatedSpecs.length - 1];
+  // Runner doesn't pick up new file without timeout, I'm guessing a race condition between file watcher and runner starting
+  setTimeout(() => {
+    window.location.href = `${window.location.origin}/__/#/tests/component/${newSpec.relative}`
+  }, 500)
+}
+</script>

packages/graphql/schemas/schema.graphql

@@ -250,9 +250,15 @@ type Mutation {
   """Add project to projects array and cache it"""
   addProject(path: String!): App!
 
+  """Create an index.html for component testing."""
+  appCreateComponentTemplate(template: String!): App
+
   """Create a Cypress config file for a new project"""
   appCreateConfigFile(code: String!, configFilename: String!): App
 
+  """Generate spec from Storybook story"""
+  generateSpecFromStory(framework: String, storyPath: String!): Wizard!
+
   """
   Initializes open_project global singleton to manager current project state
   """
@@ -514,6 +520,48 @@ enum ResolvedType {
   string
 }
 
+"""Storybook detection"""
+type Storybook {
+  """Whether Storybook is configured"""
+  configured: Boolean!
+
+  """Generated specs"""
+  generatedSpecs: [StorybookFile!]!
+
+  """Detected Storybook main.js file"""
+  mainJs: StorybookMainJs
+
+  """Detected Storybook preview-body.html file"""
+  previewBody: StorybookHtmlFile
+
+  """Detected Storybook preview-head.html file"""
+  previewHead: StorybookHtmlFile
+
+  """Detected Storybook preview.js file"""
+  previewJs: StorybookFile
+}
+
+type StorybookFile {
+  absolute: String!
+  name: String!
+  relative: String!
+}
+
+type StorybookHtmlFile {
+  absolute: String!
+  content: String!
+  name: String!
+  relative: String!
+}
+
+type StorybookMainJs {
+  absolute: String!
+  name: String!
+  relative: String!
+  stories: [JSON]
+  storyGlobs: [String]
+}
+
 """The bundlers that we can use with Cypress"""
 enum SupportedBundlers {
   vite
@@ -564,8 +612,14 @@ type Wizard {
 
   """Configuration file based on bundler and framework of choice"""
   sampleCode(lang: WizardCodeLanguage! = js): String
+
+  """Sample index.html template code"""
+  sampleTemplate: String
   step: WizardStep!
 
+  """Foo"""
+  storybook: Storybook
+
   """
   The testing type we are setting in the wizard, null if this has not been chosen
   """

packages/graphql/src/actions/BaseActions.ts

@@ -2,6 +2,7 @@ import type { BaseContext } from '../context/BaseContext'
 import type { FoundBrowser, OpenProjectLaunchOptions, LaunchOpts, LaunchArgs, FullConfig } from '@packages/types'
 import type { BrowserContract } from '../contracts/BrowserContract'
 import type { Project } from '../entities/Project'
+import type { Storybook } from '../entities/Storybook'
 
 /**
  * Acts as the contract for all actions, inherited by:
@@ -17,6 +18,7 @@ export abstract class BaseActions {
   abstract installDependencies (): void
 
   abstract createConfigFile (code: string, configFilename: string): void
+  abstract createComponentTemplate(template: string): void
 
   abstract loadProjects (): Promise<Project[]>
   abstract addProject (projectRoot: string): Project
@@ -36,4 +38,8 @@ export abstract class BaseActions {
   abstract resolveOpenProjectConfig (): FullConfig | null
 
   abstract isFirstTime (projectRoot: string, testingType: Cypress.TestingType): boolean
+
+  abstract detectStorybook (projectRoot: string): Promise<Storybook>
+
+  abstract generateSpecFromStory(storyPath: string, projectRoot: string): Promise<Cypress.Cypress['spec'] | null>
 }