feat: index.html configurability and storybook support #18242

ZachJW34 · 2021-09-25T02:04:09Z

This PR enables three things:

Allow user provided index.html for both webpack-dev-server and vite-dev-server
Generate custom Cypress config and index.html based on if user has Storybook configured
Generate a runnable spec from a Storybook story

The addition of the indexHtml option for both dev-servers developed as a result of needing to allow users to add global scripts/fonts/styles to their component. Storybook allows the customization of the template in which their stories are rendered and we wanted to detect and inject those styles if they existed. Allowing the user to customize their own index.html (with the support of live-reloading) made sense and gave us the option to inject the users preview-head.html and preview-body.html if detected. Win-Win.

Cypress config changes can be made depending on whether Storybook is detected. For example, the .storybook directory needs to be flagged for transpilation when using react-scripts and the vue runtime compiler can be added to the webpack config. Since their are a lot of dev-server changes along with the cypress config, the changes made to the Generate Config are more for show (and only for a CRA app for now).

For code gen, I'm piggybacking off of some great Storybook packages. csf-tools allows you to parse a story file, and @storybook/testing allows you to import and render stories.

How to Test

For the complete flow, the cypress.config.js and dev-server changes need to be finalized but you can test this with a few manual steps

React

In a separate terminal (cypress root):

cd npm/react/examples/react-scripts-typescript
npx sb init && yarn add -D @storybook/testing-react

Edit cypress/plugins/index.js to add indexHtml

devServer(on, config, { indexHtml: 'cypress/component/support/index.html' })

Add a .storybook/preview-head.html and put some styles in there
```
<style>
  body {
    background-color: red;
  }
</style>
```

In a separate terminal (cypress root):

yarn dev --project npm/react/examples/react-scripts-typescript
Choose Component Testing -> Frontent Framework Choose Create React App -> Install Dev Dependencies -> Cypress.config (notice indexHtml and storybook specific option since storybook was detected) -> Initialize Config This will probably fail, just delete the cypress.json hit back and regen config -> Choose a Browser Chrome and Launch
In browser, navigate to http://localhost:8080/__vite__/#/newspec
Choose a spec from the list of detected specs (Button, Header, or Page)
Click on newly generated spec (if it doesn't load try refreshing the browser, sometimes the runner doesn't pick it up)
Play around with the new spec. You can modify npm/react/examples/react-scripts-typescript/cypress/component/support/index.html and see the live-reloads. You'll notice that the preview-head.html was injected into this generated template.

Video
https://user-images.githubusercontent.com/25158820/136292610-6d4068a3-9499-4089-9b1e-0980efd90abc.mov

Vue

This same flow can be tested with a vue-cli (npm/vue/examples/vue-cli) app with a few caveats:
In a separate terminal:

cd npm/vue/examples/vue-cli
npx sb init && yarn add -D @storybook/testing-vue3

Edit cypress/plugins/index.js to add indexHtml option (since cypress.config.js isn't supported yet) and runtime compiler

const modifiedWebpackConfig = {
    ...webpackConfig,
    plugins: (webpackConfig.plugins || []).filter((x) => {
      return x.constructor.name !== 'HtmlPwaPlugin'
    }),
    resolve: {
      ...webpackConfig.resolve,
      alias: {
        ...(webpackConfig.resolve || {}).alias,
        vue$: require.resolve('vue/dist/vue.esm-bundler.js'),
      }
    }
  }
return startDevServer({
  options,
  webpackConfig: modifiedWebpackConfig,
  indexHtml: 'cypress/component/support/index.html'
})

Add a .storybook/preview-head.html and put some styles in there
```
<style>
  body {
    background-color: red;
  }
</style>
```
Change cypress.json spec pattern to "testFiles": "**/*cy-spec.js",

The launchpad flow will be the same (you can choose Vue-CLI rather than Create-React-App)

A lot of these manual steps can be alleviated when the cypress.config.js changes are in and we can generate custom configs that will be picked up.

Improvements

@storybook/testing-react and @storybook/testing-vue3 have to be manually installed. This can be added to the Install Deps page or we bring the packages in house.

Storybook's preview.js isn't currently being injected into the component support file. This isn't hard to do but there isn't any groundwork for generating a component-specific support file so I left it out of this PR.

Better UI (will come shortly after once mocks are finished)

cypress-bot · 2021-09-25T02:04:12Z

Thanks for taking the time to open a PR!

Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

ImCesar · 2021-10-06T17:04:47Z

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

+    if (this.ctx.activeProject?.isFirstTimeCT) {
+      const indexHtmlPath = path.resolve(this.ctx.activeProject.projectRoot, 'cypress/component/support/index.html')
+
+      fs.outputFileSync(indexHtmlPath, template)


Currently we are doing some dependency injection with packages and they are being injected in the context. To use fs-extra it would be this.ctx.fs.outputFileSync()

ImCesar · 2021-10-06T17:59:08Z

packages/graphql/src/schemaTypes/objectTypes/gql-WizardStorybook.ts

@@ -0,0 +1,31 @@
+import { objectType } from 'nexus'
+
+export const WizardStorybook = objectType({


I don't know if we should prefix this with Wizard. When we query for this it will already be in the Wizard object so we'll know where it's at.

I was following the pattern that any nested types of Wizard were prefixed with Wizard (for example, WizardBundler, WizardFrontendFramework). I can change it to Storybook easily enough.

Edit: I renamed it to Storybook

packages/data-context/src/data/util/storybook.ts

tgriesser

See comment on data/util/storybook

lmiller1990

Nice job figuring out all the GQL stuff, left a few minor comments. I did not get to test it locally yet.

lmiller1990 · 2021-10-08T14:16:57Z

packages/app/src/pages/NewSpec.vue

+
+  // 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/${generatedSpec}`


Little weird, good to keep this in ind and see if we can find a more reliable fix than just setTimeout and hope for the best, but probably okay for now.

Yeah I knew this was bound to change when the official UI lands and the runner is split apart so I was ok with the hack for demo purposes

lmiller1990 · 2021-10-08T14:17:42Z

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

@@ -173,4 +173,18 @@ export class ProjectActions {
  async clearLatestProjectCache () {
    await this.api.clearLatestProjectsCache()
  }
+
+  async createComponentIndexHtml (template: string) {


Does not need to be async

lmiller1990 · 2021-10-08T14:18:52Z

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

+  private async generate (
+    storyPath: string,
+    projectRoot: string,
+  ): Promise<Cypress.Cypress['spec'] | null> {


I think we should slowly move away from the global type-defs, you could use one of the types in @packages/types/src/specs.ts for a Spec.

Also you can just do Cypress.Spec, but let's try to use the @packages/types where possible. Maybe you can grab this one interface and add it in here https://github.com/cypress-io/cypress/pull/18406/files#diff-62aad6616ccf4d3d61c8140542419a8575e08a9377a32c7c2d89624ba1a0ddf0R17

I used FoundSpec from @packages/types instead and added the extra data onto the file. Might be useful later on.

* unified-desktop-gui: (40 commits) feat: index.html configurability and storybook support (#18242) fix: remove .json check from require_async, prevent child_process spawn (#18416) percy snapshot the tooltip visually, prevent it from being hidden fix: failing tests from #18372 (#18414) fix: `everyNthFrame` should only be applied for Chrome 89+ (#18392) feat(app): render spec list, command log, iframe (#18372) fix: drag and drop to be correct directory (#18400) refactor: Add GitDataSource, FileDataSource, toast for errors (#18385) docs: General updates to contributing guide (#18283) Add shorter --ct alias for --component Add --e2e and --component CLI options chore: Update Chrome (beta) to 95.0.4638.40 (#18389) chore: use circleci timings split for e2e tests (#18367) fix: fixed title (#18370) chore(deps): update dependency electron to v14 🌟 (#18384) chore(server): share client route (#18215) fix: Prevent Cypress from crashing when argument parsing "spec: {}" (#18312) chore: update husky dev dependency to v7 (#18345) feat: add defineConfig function to help type config (#18302) chore: Update Chrome (stable) to 94.0.4606.71 (#18324) ...

ZachJW34 requested a review from JessicaSachs September 25, 2021 02:04

ZachJW34 force-pushed the storybook-project-support branch from ec7f813 to 6273075 Compare October 6, 2021 16:39

ImCesar reviewed Oct 6, 2021

View reviewed changes

ZachJW34 force-pushed the storybook-project-support branch 2 times, most recently from 44773ee to 9932935 Compare October 6, 2021 21:01

ZachJW34 marked this pull request as ready for review October 6, 2021 22:49

ImCesar reviewed Oct 7, 2021

View reviewed changes

packages/data-context/src/data/util/storybook.ts Outdated Show resolved Hide resolved

tgriesser requested changes Oct 7, 2021

View reviewed changes

ZachJW34 force-pushed the storybook-project-support branch 3 times, most recently from ab75ef2 to 8f70b2a Compare October 7, 2021 20:22

ZachJW34 requested a review from tgriesser October 7, 2021 20:27

tgriesser approved these changes Oct 7, 2021

View reviewed changes

ZachJW34 changed the title ~~Storybook project support~~ feat: index.html configurability and storybook support Oct 8, 2021

lmiller1990 reviewed Oct 8, 2021

View reviewed changes

ZachJW34 force-pushed the storybook-project-support branch from 8f70b2a to efd58a7 Compare October 8, 2021 14:23

ZachJW34 added 12 commits October 8, 2021 10:01

feat: allow user index.html for vite and webpack

afe41ad

detect storybook and codegen from detected stories

c5839a5

fix tests

06ad30f

enable vue 3

af32132

rebase and fix graphql types

6e9e957

generate vue code using storybook/testing-vue3

988e22c

remove added index.html and force manual install of @storybook/testing

c689d49

rebase, change generated config to work with cypress.config.js

cbc5464

update graphql to match new patterns

6701778

cleanup, remove @storybook/testing-react

714560d

rebase latest graphql changes

e46badf

address comments

51c4a7c

ZachJW34 force-pushed the storybook-project-support branch from efd58a7 to 51c4a7c Compare October 8, 2021 15:34

ZachJW34 merged commit 745b3ac into unified-desktop-gui Oct 8, 2021

ZachJW34 deleted the storybook-project-support branch October 8, 2021 18:16

ZachJW34 mentioned this pull request Oct 11, 2021

feat: create a copy when selecting a pre-existing story #18440

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: index.html configurability and storybook support #18242

feat: index.html configurability and storybook support #18242

ZachJW34 commented Sep 25, 2021 •

edited

cypress-bot bot commented Sep 25, 2021

ImCesar Oct 6, 2021

ImCesar Oct 6, 2021

ZachJW34 Oct 6, 2021 •

edited

tgriesser left a comment

lmiller1990 left a comment

lmiller1990 Oct 8, 2021

ZachJW34 Oct 8, 2021

lmiller1990 Oct 8, 2021

lmiller1990 Oct 8, 2021

ZachJW34 Oct 8, 2021

		@@ -0,0 +1,31 @@
		import { objectType } from 'nexus'

		export const WizardStorybook = objectType({

feat: index.html configurability and storybook support #18242

feat: index.html configurability and storybook support #18242

Conversation

ZachJW34 commented Sep 25, 2021 • edited

How to Test

React

Vue

Improvements

cypress-bot bot commented Sep 25, 2021

ImCesar Oct 6, 2021

Choose a reason for hiding this comment

ImCesar Oct 6, 2021

Choose a reason for hiding this comment

ZachJW34 Oct 6, 2021 • edited

Choose a reason for hiding this comment

tgriesser left a comment

Choose a reason for hiding this comment

lmiller1990 left a comment

Choose a reason for hiding this comment

lmiller1990 Oct 8, 2021

Choose a reason for hiding this comment

ZachJW34 Oct 8, 2021

Choose a reason for hiding this comment

lmiller1990 Oct 8, 2021

Choose a reason for hiding this comment

lmiller1990 Oct 8, 2021

Choose a reason for hiding this comment

ZachJW34 Oct 8, 2021

Choose a reason for hiding this comment

ZachJW34 commented Sep 25, 2021 •

edited

ZachJW34 Oct 6, 2021 •

edited