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
Current behavior
Currently if I choose the catchall route component named
[...all].vuewe scaffold the spec as normal, but with the namel.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.vuewhere we generateimport new-component from './components/new-component.vue'andcy.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
import ${filename}, orcomponentor 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:
For the filename,
[...all].spec.tsis 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