feat: add codegen utility #18708

ZachJW34 · 2021-10-29T19:00:11Z

Closes UNIFY-446

Details

This PR adds the ability to generate files from ejs templates as well as normal text/binary files. Given a directory, the codeGenerator function will recursively grab all files within the specified directory and move them to the specified destination whilst preserving the folder structure. Any values passed will be interpolated into the files if the file is using standard ejs templating syntax. Files also support the use of front-matter to specify custom filenames that aren't static. An example use case for the Cypress config case would look like:

---
fileName: cypress.config.<%=lang%>
---

export default defineConfig(...)

This PR also replaces the current solution for generating specs from component/story/integration. The data-model for handling the generated files via graphql can be improved but I thought I'd keep the current model for now since there is active work ongoing with the current graphql endpoints involving spec generation.

The video below shows the result of running yarn workspace @packages/data-context test-unit. The given templateDir is template-test and target is tmp/test-code-gen/test.

Screen.Recording.2021-10-29.at.1.46.35.PM.mov

Testing

The packages/data-context/test/unit/code-generator.spec.ts test checks the output of the code-generator and also parses the story, component, integration templates to verify that we are producing valid javascript given valid arguments. The packages/app/cypress/e2e/integration/new-spec.spec.ts e2e test also generates from these templates given a real world app. This flow can also be tested by running yarn dev and navigating to __vite__/#/newspec in the runner.

How has the user experience changed?

PR Tasks

Have tests been added/updated?
Has the original issue or this PR been tagged with a release in ZenHub?
Has a PR for user-facing changes been opened in cypress-documentation?
Have API changes been updated in the type definitions?
Have new configuration options been added to the cypress.schema.json?

cypress-bot · 2021-10-29T19:00:13Z

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.

cypress · 2021-10-29T19:22:24Z

Test summary

18569 • 0 • 216 • 7 • 2

Run details


Project	cypress
Status	Passed
Commit	`979960a`
Started	Nov 1, 2021 4:49 PM
Ended	Nov 1, 2021 5:07 PM
Duration	17:46 💡
OS	Linux Debian - 10.9
Browser	Multiple

View run in Cypress Dashboard ➡️

Flakiness

	cypress/integration/commands/net_stubbing_spec.ts		2
1	network stubbing > waiting and aliasing > can timeout waiting on a single request using "alias.request"
2	network stubbing > waiting and aliasing > can timeout waiting on a single request using "alias.request"

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

lmiller1990

Left a few questions.

The actual infrastructure, which is the point of this PR, seems to work fine - I tried it out.

The actual codegen snippets need work - guessing that is outside the scope of this PR? For example I generated this for the launchpad project:

import { mount } from "@cypress/vue"
import App from "./App.vue"

describe('<App />', () => {
  it('renders', () => {
    // see: https://reactjs.org/docs/test-utils.html
    mount(App, { props: {} })
  })
})

Several weird things:

empty props object doesn't seem very useful
has link to react docs for my Vue component?

Might be good to make an issue to go over the snippets. Having snapshots for these would help greatly, since we wouldn't need to generate them manually to test them.

Do you plan to add snapshot tests as well (either here or later?)

lmiller1990 · 2021-11-01T01:33:22Z

packages/data-context/src/codegen/spec-options.ts

      },
      vue: {
        imports: [
          'import { mount } from "@cypress/vue"',
          'import { composeStories } from "@storybook/testing-vue3"',
          `import * as stories from "./${this.parsedPath.name}"`,
        ],
-        mount: (StoryName: string) => `mount(${StoryName}())`,
+        stories: csf.stories.map((story) => {


Will the above imports eventually move to a codegen file as well? (as opposed to inlined here?)

They could be. Right now we're not looping within ejs.

I was mostly wiring it up to the old way of generating specs. I agree, a lot of the options could and should be moved into the template files. We could even have a vue-component and a react-component template if we didn't want to muddy the templates with too much logic. I'll create an issue for cleaning up the templates.

lmiller1990 · 2021-11-01T01:35:09Z

packages/data-context/src/codegen/code-generator.ts

+    const isBinary = await isBinaryFile(file)
+    const parsedFile = path.parse(file)
+
+    const processBinaryFile = async () => {


What is the use case for this? Are we ever generated a binary file? What kind of file?

I took a lot of inspiration from node-plop and nx. They both had special handling for binary files and it wasn't too difficult to include it so I included it! Might be useful in the future.

ZachJW34 · 2021-11-01T15:42:08Z

@lmiller1990 Fixed the vue docs link. Snapshot testing and cleaner templates will be nice so I'll create an issue for it.

ZachJW34 · 2021-11-01T16:14:55Z

Looks like #18714 will fix the failing create-build-artifacts step.

…ve-activeProject * unified-desktop-gui: (57 commits) chore: Add e2e tests for global mode (#18719) chore: add percy to app and launchpad package (#18781) chore: update test refactor: move settings in app (#18729) feat: setup launchpad lifecycle (#18734) feat(app): decouple event manager from driver (#18695) chore: Force single resolution for core modules, infinite loop guard (#18764) fix(driver): Sticky elements within a fixed container will not prevent an element from being scrolled to (#18441) chore: cleaning up the runner container pattern (#18741) feat: Use .config files (#18578) chore(app): basic style and example to stop scrollIntoView bug (#18736) chore: make `create` function on server.ts obsolete (#18615) feat: add codegen utility (#18708) docs: Add instructions to squash commits to develop in Contributing (#18728) fix(@cypress/react): throw if using Next.js swc-loader without nodeVersion=system (#18686) refactor: remove Ramda (#18723) fix: support using create-cypress-tests as part of build process (#18714) chore: Increase paralleled machines for desktop-gui tests (#18725) fix(app): do not cache graphql (#18716) chore: Update Chrome (stable) to 95.0.4638.69 (#18696) ...

ZachJW34 requested a review from elevatebart October 29, 2021 19:00

ZachJW34 requested a review from a team as a code owner October 29, 2021 19:30

ZachJW34 requested review from jennifer-shehane and removed request for a team October 29, 2021 19:30

jennifer-shehane removed their request for review October 29, 2021 19:52

lmiller1990 reviewed Nov 1, 2021

View reviewed changes

ZachJW34 force-pushed the codegen-infra branch from 380c277 to e28a986 Compare November 1, 2021 15:33

ZachJW34 added 2 commits November 1, 2021 11:25

add codegen infra

2bbd49d

fix vue docsLink

979960a

ZachJW34 force-pushed the codegen-infra branch from 4c60d41 to 979960a Compare November 1, 2021 16:39

JessicaSachs merged commit a5a232d into unified-desktop-gui Nov 1, 2021

JessicaSachs deleted the codegen-infra branch November 1, 2021 18:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add codegen utility #18708

feat: add codegen utility #18708

ZachJW34 commented Oct 29, 2021

cypress-bot bot commented Oct 29, 2021

cypress bot commented Oct 29, 2021 •

edited

Loading

lmiller1990 left a comment

lmiller1990 Nov 1, 2021

JessicaSachs Nov 1, 2021

ZachJW34 Nov 1, 2021

lmiller1990 Nov 1, 2021

JessicaSachs Nov 1, 2021

ZachJW34 Nov 1, 2021

ZachJW34 commented Nov 1, 2021

ZachJW34 commented Nov 1, 2021

feat: add codegen utility #18708

feat: add codegen utility #18708

Conversation

ZachJW34 commented Oct 29, 2021

Details

Testing

How has the user experience changed?

PR Tasks

cypress-bot bot commented Oct 29, 2021

cypress bot commented Oct 29, 2021 • edited Loading

Test summary

Run details

Flakiness

lmiller1990 left a comment

Choose a reason for hiding this comment

lmiller1990 Nov 1, 2021

Choose a reason for hiding this comment

JessicaSachs Nov 1, 2021

Choose a reason for hiding this comment

ZachJW34 Nov 1, 2021

Choose a reason for hiding this comment

lmiller1990 Nov 1, 2021

Choose a reason for hiding this comment

JessicaSachs Nov 1, 2021

Choose a reason for hiding this comment

ZachJW34 Nov 1, 2021

Choose a reason for hiding this comment

ZachJW34 commented Nov 1, 2021

ZachJW34 commented Nov 1, 2021

cypress bot commented Oct 29, 2021 •

edited

Loading