"Create from Component" with special characters in component filename can scaffold incorrect spec name and non-working import/mount

[marktnoonan]

Current behavior

Currently if I choose the catchall route component named [...all].vue we scaffold the spec as normal, but with the name l.spec.ts, and our import statements are (pretty naturally) non-functional because the filename happens to include a [.

Later I noticed this also happens with filenames like new-component.vue where we generate import new-component from './components/new-component.vue' and cy.mount(new-component), which are invalid JavaScript. Hyphens in filenames seem very common so we should handle them gracefully.

Desired behavior

For the internal import name, Cypress should

• strip all characters from the file name that are not valid in JS variable names before generating import ${filename}, or
• name the import component or something predictable so that the filename will never be used as JS, and we don't have to think it about it.

This version of the spec is valid and runs:

import component from './pages/[...all].vue'

describe('<[...all] />', () => {
  it('renders', () => {
    // see: https://test-utils.vuejs.org/guide/
    cy.mount(component)
  })
})

For the filename, [...all].spec.ts is a valid spec name, and we should preserve the literal name of the component. Seems possible the extra periods are running afoul of some regex we use for the extensions maybe.

We have lots of tests around spec filenames displaying correctly in the Specs List with various characters and languages (e.g. d~e(f)g.spec.js), we could use some component files with those same non-English word names to test generating specs.

In general I think there are filename conventions using special characters beyond this specific case, so it would be good to handle them predictably, even if it's not possible to do it elegantly right away.

Test code to reproduce

In the app package, open Cypress component testing and choose "New Spec" then "Create from Component", and attempt to create a spec from [...all].vue.

Cypress Version

develop

Node version

16.14.2

Operating System

MacOS

Debug Logs

No response

Other

No response

[baus]

Hey team! Please add your planning poker estimate with Zenhub @amehta265 @astone123 @lmiller1990 @marktnoonan @mike-plummer @rockindahizzy @warrensplayer @ZachJW34

[cypress-bot]

The code for this is done in cypress-io/cypress#24864, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 12.0.0.

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