feat: create-cypress-tests installation wizard #9563
Conversation
…/cypress into feature/cross-platform-wizard
|
Windows build is passing: https://ci.appveyor.com/project/cypress-io/cypress/builds/38019772/job/pi4c9gqryysokmfq |
|
@dmtrKovalenko Is this meant to close this issue? #619 Will this also close this PR? #6249 |
|
@jennifer-shehane It's not inside cypress npm package. It's more like create-react-app, but the idea is same - simplify installation process especially for component testing. |
There was a problem hiding this comment.
I see why this PR is so massive now - all the different templates to consider, and their tests and snapshots. I was not expecting you to use babel to hook into the compilation, but this seems like a clean way to inject code! I suppose this is normally how it's done? Never seen the source code for a wizard before.
The tests looks solid so as long as you are confident it works, I think it's fine. My main concern will be around cypress.json, since we may also support cypress.js soon too, so we cannot assume JSON. That said, I think we can just do require('./cypress.js').experimentalComponentTesting to see if they are using CT, so the idea should be the same.
I will drop a ✔️ for now - I did not give this a test by hand yet, though, but I can do that if you think it's necessary.
| "plugins": [ | ||
| "cypress", | ||
| "@cypress/dev" | ||
| ], |
There was a problem hiding this comment.
eslint has an extends feature, I wonder if we can use that to save the boilerplate
| } | ||
|
|
||
| async function injectAndShowCypressJsonConfig ( | ||
| cypressJsonPath: string, |
There was a problem hiding this comment.
This might get a whole lot more complex with this PR: #15280
Since we cannot assume JSON. 🤔
There was a problem hiding this comment.
Yeah, that may be a pain in the ass. But I think we can resolve this later, but we already using babel so injecting a new key should be pretty easy
|
Hi, I cannot try it :( |
| type: 'list', | ||
| name: 'framework', | ||
| choices: Object.keys(frameworks), | ||
| message: `Which framework do you use?`, |
There was a problem hiding this comment.
| message: `Which framework do you use?`, | |
| message: `Choose a framework to install`, |
| import { version } from '../package.json' | ||
|
|
||
| program | ||
| .option('--ignore-examples', 'Ignore generating example tests and fixtures by creating one ready-to-fill spec file') |
There was a problem hiding this comment.
It is not lcear what this option do. I think we could find a better name for it
Does it create an example?
Does it make an empty spec instead?
| @@ -10,16 +10,16 @@ | |||
| // | |||
| // | |||
| // -- This is a parent command -- | |||
| // Cypress.Commands.add("login", (email, password) => { ... }) | |||
| // Cypress.Commands.add('login', (email, password) => { ... }) | |||
There was a problem hiding this comment.
I still got this error (using the latest version - I pulled this branch and built it):
This project is using react. Let's install the right adapter:
✔ Installing @cypress/react (yarn add @cypress/react --dev)
? We were not able to automatically determine which framework or bundling tool you are using.
Please choose one from the list: default (webpack options)
? Which folder would you like to use for your component tests? src
Installing required dependencies
✔ Installing @cypress/webpack-dev-server (yarn add @cypress/webpack-dev-server --dev)
Let's setup everything for component testing with default (webpack options):
✅ cypress.json was updated with the following config:
{
"experimentalComponentTesting": true,
"componentFolder": "src",
"testFiles": "**/*.spec.{js,ts,jsx,tsx}"
}
✅ cypress/support/index.js was updated with the following config:
import '@cypress/react/support'
Error: ENOENT: no such file or directory, open '/Users/lachlan/code/dump/cy-draw/dist/src/component-testing/templates/react/webpack-options-module-exports.template.js'
at Object.openSync (fs.js:462:3)
at Object.readFileSync (fs.js:364:35)
at Object.getPluginsCodeAst (/Users/lachlan/code/dump/cy-draw/dist/src/component-testing/templates/react/webpack-options.js:42:64)
at injectAndShowPluginConfig (/Users/lachlan/code/dump/cy-draw/dist/src/component-testing/init-component-testing.js:73:26)
at Object.initComponentTesting (/Users/lachlan/code/dump/cy-draw/dist/src/component-testing/init-component-testing.js:127:11)
at async Object.main (/Users/lachlan/code/dump/cy-draw/dist/src/main.js:72:9) {
errno: -2,
syscall: 'open',
code: 'ENOENT',
path: '/Users/lachlan/code/dump/cy-draw/dist/src/component-testing/templates/react/webpack-options-module-exports.template.js'
}
Happy to approve for now so we can this HUGE PR merged, we can make little improvements as we go. Thoughts @dmtrKovalenko? webpack-options-module-exports.template.js seems to be not included in the build.
Can pair later with you if you want to test more.
|
@lmiller1990 I did fix the error here ab9707d |
This PR adds a new project that can be run as
yarn create cypress-testsornpx create-cypress-teststo install cypress and all required dependencies including component tests.Features of this approach:
yarn cypress opentsconfig.json--ignore-examplesoption, which will create a dummy spec file from scratch so if the user will open cypress initially it won't create examples.Things to do
Test it right now:
Run
yarn create cypress-tests-betaornpx create-cypress-tests-betato check how it works.Quick demo:
This PR adds a new project that can be run as
yarn create cypress-testsornpx create-cypress-teststo install cypress and all required dependencies including component tests.Features of this approach:
yarn cypress opentsconfig.json--ignore-examplesoption, which will create a dummy spec file from scratch so if the user will open cypress initially it won't create examples.Things to do