chore: Move component-index generation to scaffold-config package (#2…

…1090) * chore: Move component-index generation to scaffold-config package * Review fixes * Fix review comments for realzies this time
cypress-io · Apr 20, 2022 · 10dfccc · 10dfccc · cypress-bot · Apr 20, 2022
1 parent b8ba111
commit 10dfccc
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 64 deletions.
diff --git a/packages/data-context/src/actions/WizardActions.ts b/packages/data-context/src/actions/WizardActions.ts
@@ -10,11 +10,6 @@ const debug = Debug('cypress:data-context:wizard-actions')
 
 import type { DataContext } from '..'
 
-interface WizardGetCodeComponent {
-  chosenLanguage: 'js' | 'ts'
-  chosenFramework: typeof WIZARD_FRAMEWORKS[number]
-}
-
 export class WizardActions {
   constructor (private ctx: DataContext) {}
 
@@ -200,10 +195,7 @@ export class WizardActions {
       this.scaffoldFixtures(),
       this.scaffoldSupport('component', chosenLanguage),
       this.scaffoldSupport('commands', chosenLanguage),
-      this.getComponentIndexHtml({
-        chosenFramework,
-        chosenLanguage,
-      }),
+      this.scaffoldComponentIndexHtml(chosenFramework),
     ])
   }
 
@@ -325,64 +317,18 @@ export class WizardActions {
     return codeBlocks.join('\n')
   }
 
-  private async getComponentIndexHtml (opts: WizardGetCodeComponent): Promise<NexusGenObjects['ScaffoldedFile']> {
-    const [storybookInfo] = await Promise.all([
-      this.ctx.storybook.loadStorybookInfo(),
-      this.ensureDir('component'),
-    ])
-    const framework = opts.chosenFramework.type
-    let headModifier = ''
-    let bodyModifier = ''
-
-    if (framework === 'nextjs') {
-      headModifier += '<div id="__next_css__DO_NOT_USE__"></div>'
-    }
-
-    const previewHead = storybookInfo?.files.find(({ name }) => name === 'preview-head.html')
-
-    if (previewHead) {
-      headModifier += previewHead.content
-    }
-
-    const previewBody = storybookInfo?.files.find(({ name }) => name === 'preview-body.html')
-
-    if (previewBody) {
-      headModifier += previewBody.content
-    }
-
-    const template = this.getComponentTemplate({
-      headModifier,
-      bodyModifier,
-    })
+  private async scaffoldComponentIndexHtml (chosenFramework: typeof WIZARD_FRAMEWORKS[number]): Promise<NexusGenObjects['ScaffoldedFile']> {
+    await this.ensureDir('component')
 
     const componentIndexHtmlPath = path.join(this.projectRoot, 'cypress', 'support', 'component-index.html')
 
     return this.scaffoldFile(
       componentIndexHtmlPath,
-      template,
+      chosenFramework.componentIndexHtml(),
       'The HTML used as the wrapper for all component tests',
     )
   }
 
-  private getComponentTemplate = (opts: { headModifier: string, bodyModifier: string }) => {
-    // TODO: Properly indent additions and strip newline if none
-    return dedent`
-      <!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>
-          ${opts.headModifier}
-        </head>
-        <body>
-          ${opts.bodyModifier}
-          <div data-cy-root></div>
-        </body>
-      </html>`
-  }
-
   private async scaffoldFile (filePath: string, contents: string, description: string): Promise<NexusGenObjects['ScaffoldedFile']> {
     try {
       debug('scaffoldFile: start %s', filePath)

diff --git a/packages/scaffold-config/src/component-index-template.ts b/packages/scaffold-config/src/component-index-template.ts
@@ -0,0 +1,27 @@
+import dedent from 'dedent'
+
+const componentIndexHtmlGenerator = (headModifier: string = '') => {
+  return () => {
+    const template = dedent`
+    <!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>
+        ${headModifier}
+      </head>
+      <body>
+        <div data-cy-root></div>
+      </body>
+    </html>
+  `
+
+    // If the framework supplies an empty string for the modifier,
+    // strip out the empty line
+    return template.replace(/\n {4}\n/g, '\n')
+  }
+}
+
+export default componentIndexHtmlGenerator
diff --git a/packages/scaffold-config/src/frameworks.ts b/packages/scaffold-config/src/frameworks.ts
@@ -2,6 +2,7 @@ import path from 'path'
 import dedent from 'dedent'
 import fs from 'fs-extra'
 import * as dependencies from './dependencies'
+import componentIndexHtmlGenerator from './component-index-template'
 import { defineConfigAvailable } from '@packages/data-context/src/sources/migration/codegen'
 import semver from 'semver'
 import resolveFrom from 'resolve-from'
@@ -122,6 +123,7 @@ export const WIZARD_FRAMEWORKS = [
     codeGenFramework: 'react',
     glob: '*.{js,jsx,tsx}',
     mountModule: 'cypress/react',
+    componentIndexHtml: componentIndexHtmlGenerator(),
   },
   {
     type: 'vueclivue2',
@@ -142,6 +144,7 @@ export const WIZARD_FRAMEWORKS = [
     codeGenFramework: 'vue',
     glob: '*.vue',
     mountModule: 'cypress/vue2',
+    componentIndexHtml: componentIndexHtmlGenerator(),
   },
   {
     type: 'vueclivue3',
@@ -162,6 +165,7 @@ export const WIZARD_FRAMEWORKS = [
     codeGenFramework: 'vue',
     glob: '*.vue',
     mountModule: 'cypress/vue',
+    componentIndexHtml: componentIndexHtmlGenerator(),
   },
   {
     type: 'nextjs',
@@ -181,6 +185,7 @@ export const WIZARD_FRAMEWORKS = [
     codeGenFramework: 'react',
     glob: '*.{js,jsx,tsx}',
     mountModule: 'cypress/react',
+    componentIndexHtml: componentIndexHtmlGenerator('<div id="__next_css__DO_NOT_USE__"></div>'),
   },
   {
     type: 'nuxtjs',
@@ -200,6 +205,7 @@ export const WIZARD_FRAMEWORKS = [
     codeGenFramework: 'vue',
     glob: '*.vue',
     mountModule: 'cypress/vue2',
+    componentIndexHtml: componentIndexHtmlGenerator(),
   },
   {
     type: 'vue2',
@@ -219,6 +225,7 @@ export const WIZARD_FRAMEWORKS = [
     codeGenFramework: 'vue',
     glob: '*.vue',
     mountModule: 'cypress/vue2',
+    componentIndexHtml: componentIndexHtmlGenerator(),
   },
   {
     type: 'vue3',
@@ -238,6 +245,7 @@ export const WIZARD_FRAMEWORKS = [
     codeGenFramework: 'vue',
     glob: '*.vue',
     mountModule: 'cypress/vue',
+    componentIndexHtml: componentIndexHtmlGenerator(),
   },
   {
     type: 'react',
@@ -257,5 +265,6 @@ export const WIZARD_FRAMEWORKS = [
     codeGenFramework: 'react',
     glob: '*.{js,jsx,tsx}',
     mountModule: 'cypress/react',
+    componentIndexHtml: componentIndexHtmlGenerator(),
   },
 ] as const
diff --git a/packages/scaffold-config/test/unit/component-index-template.spec.ts b/packages/scaffold-config/test/unit/component-index-template.spec.ts
@@ -0,0 +1,46 @@
+import { expect } from 'chai'
+import dedent from 'dedent'
+import componentIndexHtmlGenerator from '../../src/component-index-template'
+
+describe('componentIndexHtmlGenerator', () => {
+  it('strips spaces and newlines appropriately', () => {
+    const generator = componentIndexHtmlGenerator()
+
+    const expected = dedent`
+    <!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 data-cy-root></div>
+      </body>
+    </html>`
+
+    expect(generator()).to.eq(expected)
+  })
+
+  it('handles header modifier', () => {
+    const generator = componentIndexHtmlGenerator('foobar')
+
+    const expected = dedent`
+    <!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>
+        foobar
+      </head>
+      <body>
+        <div data-cy-root></div>
+      </body>
+    </html>`
+
+    expect(generator()).to.eq(expected)
+  })
+})
diff --git a/...ne/expected-cypress-js-component-create-react-app-v5/cypress/support/component-index.html b/...ne/expected-cypress-js-component-create-react-app-v5/cypress/support/component-index.html
@@ -5,10 +5,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 data-cy-root></div>
   </body>
-</html>
+</html>
diff --git a/...ne/expected-cypress-ts-component-create-react-app-v5/cypress/support/component-index.html b/...ne/expected-cypress-ts-component-create-react-app-v5/cypress/support/component-index.html
@@ -5,10 +5,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 data-cy-root></div>
   </body>
-</html>
+</html>