diff --git a/packages/data-context/src/actions/WizardActions.ts b/packages/data-context/src/actions/WizardActions.ts index d95a69ce2fab..09a34dff7dac 100644 --- 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 { - 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 += '
' - } - - 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 { + 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` - - - - - - - Components App - ${opts.headModifier} - - - ${opts.bodyModifier} -
- - ` - } - private async scaffoldFile (filePath: string, contents: string, description: string): Promise { 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 new file mode 100644 index 000000000000..46e3d0b93de2 --- /dev/null +++ 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` + + + + + + + Components App + ${headModifier} + + +
+ + + ` + + // 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 index d00d55483e44..2c7b728d30bd 100644 --- 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('
'), }, { 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 new file mode 100644 index 000000000000..20edd9b77be8 --- /dev/null +++ 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` + + + + + + + Components App + + +
+ + ` + + expect(generator()).to.eq(expected) + }) + + it('handles header modifier', () => { + const generator = componentIndexHtmlGenerator('foobar') + + const expected = dedent` + + + + + + + Components App + foobar + + +
+ + ` + + expect(generator()).to.eq(expected) + }) +}) diff --git a/system-tests/projects/pristine/expected-cypress-js-component-create-react-app-v5/cypress/support/component-index.html b/system-tests/projects/pristine/expected-cypress-js-component-create-react-app-v5/cypress/support/component-index.html index 386075efe317..5f9622ae2945 100644 --- a/system-tests/projects/pristine/expected-cypress-js-component-create-react-app-v5/cypress/support/component-index.html +++ b/system-tests/projects/pristine/expected-cypress-js-component-create-react-app-v5/cypress/support/component-index.html @@ -5,10 +5,8 @@ Components App - -
- \ No newline at end of file + diff --git a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/component-index.html b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/component-index.html index 386075efe317..5f9622ae2945 100644 --- a/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/component-index.html +++ b/system-tests/projects/pristine/expected-cypress-ts-component-create-react-app-v5/cypress/support/component-index.html @@ -5,10 +5,8 @@ Components App - -
- \ No newline at end of file +