From 8ff3c8b8e815206f8f0e3e86e5377b7394b6ffcb Mon Sep 17 00:00:00 2001 From: BlueWinds Date: Mon, 25 Apr 2022 11:59:54 -0700 Subject: [PATCH 01/18] chore: Remove storybook related data-context and tests --- packages/app/cypress/e2e/specs.cy.ts | 174 +++++++++--------- packages/data-context/src/DataContext.ts | 6 - .../src/sources/StorybookDataSource.ts | 59 ------ .../src/sources/WizardDataSource.ts | 7 - packages/data-context/src/sources/index.ts | 1 - .../test/unit/codegen/files/react/Button.jsx | 4 +- .../test/unit/codegen/files/vue/Button.vue | 8 +- .../unit/sources/WizardDataSource.spec.ts | 18 +- packages/scaffold-config/src/dependencies.ts | 30 --- packages/scaffold-config/src/frameworks.ts | 8 - packages/types/src/index.ts | 2 - packages/types/src/storybook.ts | 18 -- system-tests/package.json | 1 - .../projects/no-specs-no-storybook/.babelrc | 3 - .../no-specs-no-storybook/cypress.config.js | 13 -- .../cypress/component/.gitkeep | 0 .../cypress/e2e/.gitkeep | 0 .../no-specs-no-storybook/package.json | 9 - .../no-specs-no-storybook/src/App.jsx | 9 - .../no-specs-no-storybook/src/index.css | 13 -- .../no-specs-no-storybook/src/index.jsx | 11 -- .../no-specs-no-storybook/webpack.config.js | 14 -- .../projects/no-specs/src/stories/Button.jsx | 25 --- .../no-specs/src/stories/Button.stories.jsx | 40 ---- .../.storybook/main.js | 5 - .../app.js | 0 .../cypress.config.js | 3 - .../cypress/support/e2e.js | 0 .../package.json | 9 - .../react-code-gen/.storybook/main.js | 12 -- .../react-code-gen/.storybook/preview.js | 9 - .../projects/react-code-gen/cypress.config.js | 14 -- .../cypress/component/support.js | 0 .../projects/react-code-gen/package.json | 8 - .../projects/react-code-gen/src/App.css | 38 ---- .../projects/react-code-gen/src/App.cy.jsx | 8 - .../projects/react-code-gen/src/App.jsx | 25 --- .../projects/react-code-gen/src/index.css | 13 -- .../projects/react-code-gen/src/index.jsx | 17 -- .../projects/react-code-gen/src/logo.svg | 1 - .../react-code-gen/src/stories/Button.jsx | 50 ----- .../src/stories/Button.stories.jsx | 46 ----- .../react-code-gen/src/stories/button.css | 30 --- yarn.lock | 5 - 44 files changed, 93 insertions(+), 673 deletions(-) delete mode 100644 packages/data-context/src/sources/StorybookDataSource.ts delete mode 100644 packages/types/src/storybook.ts delete mode 100644 system-tests/projects/no-specs-no-storybook/.babelrc delete mode 100644 system-tests/projects/no-specs-no-storybook/cypress.config.js delete mode 100644 system-tests/projects/no-specs-no-storybook/cypress/component/.gitkeep delete mode 100644 system-tests/projects/no-specs-no-storybook/cypress/e2e/.gitkeep delete mode 100644 system-tests/projects/no-specs-no-storybook/package.json delete mode 100644 system-tests/projects/no-specs-no-storybook/src/App.jsx delete mode 100644 system-tests/projects/no-specs-no-storybook/src/index.css delete mode 100644 system-tests/projects/no-specs-no-storybook/src/index.jsx delete mode 100644 system-tests/projects/no-specs-no-storybook/webpack.config.js delete mode 100644 system-tests/projects/no-specs/src/stories/Button.jsx delete mode 100644 system-tests/projects/no-specs/src/stories/Button.stories.jsx delete mode 100644 system-tests/projects/pristine-with-e2e-testing-and-storybook/.storybook/main.js delete mode 100644 system-tests/projects/pristine-with-e2e-testing-and-storybook/app.js delete mode 100644 system-tests/projects/pristine-with-e2e-testing-and-storybook/cypress.config.js delete mode 100644 system-tests/projects/pristine-with-e2e-testing-and-storybook/cypress/support/e2e.js delete mode 100644 system-tests/projects/pristine-with-e2e-testing-and-storybook/package.json delete mode 100644 system-tests/projects/react-code-gen/.storybook/main.js delete mode 100644 system-tests/projects/react-code-gen/.storybook/preview.js delete mode 100644 system-tests/projects/react-code-gen/cypress.config.js delete mode 100644 system-tests/projects/react-code-gen/cypress/component/support.js delete mode 100644 system-tests/projects/react-code-gen/package.json delete mode 100644 system-tests/projects/react-code-gen/src/App.css delete mode 100644 system-tests/projects/react-code-gen/src/App.cy.jsx delete mode 100644 system-tests/projects/react-code-gen/src/App.jsx delete mode 100644 system-tests/projects/react-code-gen/src/index.css delete mode 100644 system-tests/projects/react-code-gen/src/index.jsx delete mode 100644 system-tests/projects/react-code-gen/src/logo.svg delete mode 100644 system-tests/projects/react-code-gen/src/stories/Button.jsx delete mode 100644 system-tests/projects/react-code-gen/src/stories/Button.stories.jsx delete mode 100644 system-tests/projects/react-code-gen/src/stories/button.css diff --git a/packages/app/cypress/e2e/specs.cy.ts b/packages/app/cypress/e2e/specs.cy.ts index 17ab460b4b..815425b9b2 100644 --- a/packages/app/cypress/e2e/specs.cy.ts +++ b/packages/app/cypress/e2e/specs.cy.ts @@ -6,8 +6,8 @@ describe('App: Specs', () => { describe('Testing Type: E2E', () => { context('js project with default spec pattern', () => { beforeEach(() => { - cy.scaffoldProject('no-specs-no-storybook') - cy.openProject('no-specs-no-storybook') + cy.scaffoldProject('no-specs') + cy.openProject('no-specs') cy.startAppServer('e2e') cy.visitApp() @@ -193,14 +193,14 @@ describe('App: Specs', () => { context('ts project with default spec pattern', () => { beforeEach(() => { - cy.scaffoldProject('no-specs-no-storybook') - cy.openProject('no-specs-no-storybook') + cy.scaffoldProject('no-specs') + cy.openProject('no-specs') cy.withCtx(async (ctx) => { await ctx.actions.file.writeFileInProject('tsconfig.json', '{}') }) - cy.openProject('no-specs-no-storybook') + cy.openProject('no-specs') cy.startAppServer('e2e') cy.visitApp() @@ -469,110 +469,108 @@ describe('App: Specs', () => { viewportHeight: 768, viewportWidth: 1024, }, () => { - context('project without storybook', () => { + beforeEach(() => { + cy.scaffoldProject('no-specs') + cy.openProject('no-specs') + cy.startAppServer('component') + cy.visitApp() + + cy.findAllByTestId('card').eq(0).as('EmptyCard') + }) + + it('shows create new empty spec card', () => { + cy.get('@EmptyCard') + .within(() => { + cy.findByRole('button', { + name: 'Create new empty spec', + }).should('be.visible') + .and('not.be.disabled') + }) + }) + + context('create empty card', () => { beforeEach(() => { - cy.scaffoldProject('no-specs-no-storybook') - cy.openProject('no-specs-no-storybook') - cy.startAppServer('component') - cy.visitApp() + cy.get('@EmptyCard').click() - cy.findAllByTestId('card').eq(0).as('EmptyCard') + cy.findByRole('dialog', { + name: 'Enter the path for your new spec', + }).as('CreateEmptySpecDialog') + + cy.findByRole('button', { name: 'Close' }).as('DialogCloseButton') }) - it('shows create new empty spec card', () => { - cy.get('@EmptyCard') - .within(() => { - cy.findByRole('button', { - name: 'Create new empty spec', - }).should('be.visible') - .and('not.be.disabled') - }) + it('shows dialog that can be dismissed with Close (x) button press', () => { + cy.get('@DialogCloseButton').click() + cy.findByRole('dialog', { + name: 'Enter the path for your new spec', + }).should('not.exist') }) - context('create empty card', () => { - beforeEach(() => { - cy.get('@EmptyCard').click() + it('shows success modal when empty spec is created', () => { + cy.get('@CreateEmptySpecDialog').within(() => { + cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js') - cy.findByRole('dialog', { - name: 'Enter the path for your new spec', - }).as('CreateEmptySpecDialog') - - cy.findByRole('button', { name: 'Close' }).as('DialogCloseButton') + cy.findByRole('button', { name: 'Create Spec' }).click() }) - it('shows dialog that can be dismissed with Close (x) button press', () => { - cy.get('@DialogCloseButton').click() - cy.findByRole('dialog', { - name: 'Enter the path for your new spec', - }).should('not.exist') + cy.findByRole('dialog', { + name: defaultMessages.createSpec.successPage.header, + }).as('SuccessDialog').within(() => { + cy.contains(getPathForPlatform('cypress/my-empty-spec.cy.js')).should('be.visible') + cy.findByRole('button', { name: 'Close' }).should('be.visible') + + cy.findByRole('link', { name: 'Okay, run the spec' }) + .should('have.attr', 'href', `#/specs/runner?file=cypress/my-empty-spec.cy.js`) + + cy.findByRole('button', { name: 'Create another spec' }).click() }) - it('shows success modal when empty spec is created', () => { - cy.get('@CreateEmptySpecDialog').within(() => { - cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js') + // 'Create a new spec' dialog presents with options when user indicates they want to create + // another spec. + cy.findByRole('dialog', { name: 'Enter the path for your new spec' }).should('be.visible') + }) - cy.findByRole('button', { name: 'Create Spec' }).click() - }) + it('navigates to spec runner when selected', () => { + cy.get('@CreateEmptySpecDialog').within(() => { + cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js') - cy.findByRole('dialog', { - name: defaultMessages.createSpec.successPage.header, - }).as('SuccessDialog').within(() => { - cy.contains(getPathForPlatform('cypress/my-empty-spec.cy.js')).should('be.visible') - cy.findByRole('button', { name: 'Close' }).should('be.visible') - - cy.findByRole('link', { name: 'Okay, run the spec' }) - .should('have.attr', 'href', `#/specs/runner?file=cypress/my-empty-spec.cy.js`) - - cy.findByRole('button', { name: 'Create another spec' }).click() - }) - - // 'Create a new spec' dialog presents with options when user indicates they want to create - // another spec. - cy.findByRole('dialog', { name: 'Enter the path for your new spec' }).should('be.visible') + cy.findByRole('button', { name: 'Create Spec' }).click() }) - it('navigates to spec runner when selected', () => { - cy.get('@CreateEmptySpecDialog').within(() => { - cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js') - - cy.findByRole('button', { name: 'Create Spec' }).click() - }) - - cy.findByRole('dialog', { name: defaultMessages.createSpec.successPage.header }).within(() => { - cy.findByRole('link', { - name: 'Okay, run the spec', - }).should('have.attr', 'href', '#/specs/runner?file=cypress/my-empty-spec.cy.js').click() - }) - - cy.get('#main-pane').should('be.visible') - - cy.location().its('href').should('contain', '#/specs/runner?file=cypress/my-empty-spec.cy.js') + cy.findByRole('dialog', { name: defaultMessages.createSpec.successPage.header }).within(() => { + cy.findByRole('link', { + name: 'Okay, run the spec', + }).should('have.attr', 'href', '#/specs/runner?file=cypress/my-empty-spec.cy.js').click() }) - it('displays alert with docs link on new spec', () => { - cy.get('@CreateEmptySpecDialog').within(() => { - cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js') + cy.get('#main-pane').should('be.visible') - cy.findByRole('button', { name: 'Create Spec' }).click() - }) + cy.location().its('href').should('contain', '#/specs/runner?file=cypress/my-empty-spec.cy.js') + }) - cy.findByRole('dialog', { name: defaultMessages.createSpec.successPage.header }).within(() => { - cy.findByRole('link', { - name: 'Okay, run the spec', - }).should('have.attr', 'href', '#/specs/runner?file=cypress/my-empty-spec.cy.js').click() - }) + it('displays alert with docs link on new spec', () => { + cy.get('@CreateEmptySpecDialog').within(() => { + cy.findByLabelText('Enter a relative path...').clear().type('cypress/my-empty-spec.cy.js') - cy.contains('Review the docs') - .should('have.attr', 'href', 'https://on.cypress.io/mount') - - cy.log('should not contain the link if you navigate away and back') - cy.get('body').type('f') - cy.get('[data-testid=spec-file-item]').first().click() - cy.get('#spec-runner-header').should('not.contain', 'Review the docs') - - cy.get('[data-testid=spec-file-item]').last().click() - cy.get('#spec-runner-header').should('not.contain', 'Review the docs') + cy.findByRole('button', { name: 'Create Spec' }).click() }) + + cy.findByRole('dialog', { name: defaultMessages.createSpec.successPage.header }).within(() => { + cy.findByRole('link', { + name: 'Okay, run the spec', + }).should('have.attr', 'href', '#/specs/runner?file=cypress/my-empty-spec.cy.js').click() + }) + + cy.contains('Review the docs') + .should('have.attr', 'href', 'https://on.cypress.io/mount') + + cy.log('should not contain the link if you navigate away and back') + cy.get('body').type('f') + cy.get('[data-testid=spec-file-item]').first().click() + cy.get('#spec-runner-header').should('not.contain', 'Review the docs') + + cy.get('[data-testid=spec-file-item]').last().click() + cy.get('#spec-runner-header').should('not.contain', 'Review the docs') }) }) diff --git a/packages/data-context/src/DataContext.ts b/packages/data-context/src/DataContext.ts index b20d1ef851..1e79dc3e6b 100644 --- a/packages/data-context/src/DataContext.ts +++ b/packages/data-context/src/DataContext.ts @@ -20,7 +20,6 @@ import { ProjectDataSource, WizardDataSource, BrowserDataSource, - StorybookDataSource, CloudDataSource, EnvDataSource, HtmlDataSource, @@ -170,11 +169,6 @@ export class DataContext { return new WizardDataSource(this) } - @cached - get storybook () { - return new StorybookDataSource(this) - } - get wizardData () { return this.coreData.wizard } diff --git a/packages/data-context/src/sources/StorybookDataSource.ts b/packages/data-context/src/sources/StorybookDataSource.ts deleted file mode 100644 index b52588651c..0000000000 --- a/packages/data-context/src/sources/StorybookDataSource.ts +++ /dev/null @@ -1,59 +0,0 @@ -import type { StorybookInfo } from '@packages/types' -import assert from 'assert' -import * as path from 'path' -import type { DataContext } from '..' - -const STORYBOOK_FILES = [ - 'main.js', - 'preview.js', - 'preview-head.html', - 'preview-body.html', -] - -export class StorybookDataSource { - constructor (private ctx: DataContext) {} - - async loadStorybookInfo () { - assert(this.ctx.currentProject) - - return this.storybookInfoLoader.load(this.ctx.currentProject) - } - - private storybookInfoLoader = this.ctx.loader((projectRoots) => this.batchStorybookInfo(projectRoots)) - - private batchStorybookInfo (projectRoots: readonly string[]) { - return Promise.all(projectRoots.map((projectRoot) => this.detectStorybook(projectRoot))) - } - - private async detectStorybook (projectRoot: string): Promise { - const storybookRoot = path.join(projectRoot, '.storybook') - const storybookInfo: StorybookInfo = { - storybookRoot, - files: [], - } - - try { - await this.ctx.fs.access(storybookRoot, this.ctx.fs.constants.F_OK) - } catch { - return null - } - - for (const fileName of STORYBOOK_FILES) { - try { - const absolute = path.join(storybookRoot, fileName) - const file = { - name: fileName, - relative: path.relative(projectRoot, absolute), - absolute, - content: await this.ctx.fs.readFile(absolute, 'utf-8'), - } - - storybookInfo.files.push(file) - } catch (e) { - // eslint-disable-line no-empty - } - } - - return storybookInfo - } -} diff --git a/packages/data-context/src/sources/WizardDataSource.ts b/packages/data-context/src/sources/WizardDataSource.ts index 131068b00d..621631b973 100644 --- a/packages/data-context/src/sources/WizardDataSource.ts +++ b/packages/data-context/src/sources/WizardDataSource.ts @@ -26,13 +26,6 @@ export class WizardDataSource { }) } - // TODO: Storybook support. - // const storybookInfo = await this.ctx.storybook.loadStorybookInfo() - - // if (storybookInfo && this.chosenFramework.storybookDep) { - // packages.push(this.chosenFramework.storybookDep) - // } - return packages } diff --git a/packages/data-context/src/sources/index.ts b/packages/data-context/src/sources/index.ts index 08588d7e9c..ae1ad6e682 100644 --- a/packages/data-context/src/sources/index.ts +++ b/packages/data-context/src/sources/index.ts @@ -11,7 +11,6 @@ export * from './HtmlDataSource' export * from './MigrationDataSource' export * from './ProjectDataSource' export * from './SettingsDataSource' -export * from './StorybookDataSource' export * from './UtilDataSource' export * from './VersionsDataSource' export * from './WizardDataSource' diff --git a/packages/data-context/test/unit/codegen/files/react/Button.jsx b/packages/data-context/test/unit/codegen/files/react/Button.jsx index a4da86b12f..a7990e65bb 100644 --- a/packages/data-context/test/unit/codegen/files/react/Button.jsx +++ b/packages/data-context/test/unit/codegen/files/react/Button.jsx @@ -7,11 +7,11 @@ import './button.css'; * Primary UI component for user interaction */ export default Button = ({ primary, backgroundColor, size, label, ...props }) => { - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + const mode = primary ? 'button--primary' : 'button--secondary'; return ( - ); -}; - -Button.defaultProps = { - backgroundColor: null, - primary: false, - size: 'medium', - onClick: undefined, -}; diff --git a/system-tests/projects/no-specs/src/stories/Button.stories.jsx b/system-tests/projects/no-specs/src/stories/Button.stories.jsx deleted file mode 100644 index b9ab977b54..0000000000 --- a/system-tests/projects/no-specs/src/stories/Button.stories.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; - -import Button from './Button'; - -// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - component: Button, - // More on argTypes: https://storybook.js.org/docs/react/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const Template = (args) => - ); -}; - -Button.propTypes = { - /** - * Is this the principal call to action on the page? - */ - primary: PropTypes.bool, - /** - * What background color to use - */ - backgroundColor: PropTypes.string, - /** - * How large should the button be? - */ - size: PropTypes.oneOf(['small', 'medium', 'large']), - /** - * Button contents - */ - label: PropTypes.string.isRequired, - /** - * Optional click handler - */ - onClick: PropTypes.func, -}; - -Button.defaultProps = { - backgroundColor: null, - primary: false, - size: 'medium', - onClick: undefined, -}; diff --git a/system-tests/projects/react-code-gen/src/stories/Button.stories.jsx b/system-tests/projects/react-code-gen/src/stories/Button.stories.jsx deleted file mode 100644 index ec5641c221..0000000000 --- a/system-tests/projects/react-code-gen/src/stories/Button.stories.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; - -import Button from './Button'; - -// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -export default { - title: 'Example/Button', - component: Button, - // More on argTypes: https://storybook.js.org/docs/react/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - }, -}; - -// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const Template = (args) =>