Add 'create from Vue component' workflow

[astone123]

What would you like?

Add the workflow to allow users to create a new component test scaffold for an existing component in their Vue project. The workflow should be accessible by clicking on the "New Spec" button at the top of the spec list.

This already exists in our Git history and was implemented at one point, but was removed before the version 10 release. Steps to walk through the existing version of this workflow:

1. git checkout 0e48012660
2. yarn
3. yarn cypress:open
4. Select a Vue project that has at least one component file in it
5. Select component testing and open a browser
6. Click the "+ New Spec" button at the top of the specs list
7. Click "Create from component"
8. Choose a Vue component file to create a scaffold test for

Ensure that the following cases are covered:

• Works for both Vue 2 and Vue 3
• Empty state for when the project has no Vue components to choose from

Why is this needed?

This feature will greatly improve the onboarding process for new CT users. It will create a new file that mounts the given Vue component in Cypress and users can click to open the file in their IDE, never having to manually write the mount command or test blocks.

Other

Make sure to get feedback from design teams before releasing the feature.

[lmiller1990]

As we implement this, we should write the code in a way users can choose their own default template. The way I've solved this in my project is a gulp script:

https://github.com/lmiller1990/rhythm/blob/main/scripts/gulpfile.ts#L235-L260

If I could have some way to do this from the UI, I wouldn't need to change to my terminal. My script makes a component and a test, so my ideal end game for this feature is more like a "generate boilerplate" where I can configure what I want. Eg we might have a directory under cypress like templates, which might have

- cypress/templates/vue-component
  - Foo.cy.js

Users could make lots of different ones. We'd grab them all and render it each one as an option in the UI.

A template could be:

describe('{{ component }}', () => {
  it("renders", () => {
    cy.mount({{ component }})
  })
})

Now, I can choose what I want the template to have, preferred code style, etc. I believe we've got something like this already in the branch for this feature.

We do not need this for v1, but we should expect this will be requested - generating something I don't want isn't very useful, but we can definitely start small and work our way up.

[cypress-bot]

Released in 10.5.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.5.0, please open a new issue.