Component testing setup

[beatfactor]

We need to add an onboarding process for setting up the various component testing plugins. I would suggest also to add 3 different options at the start (before the test runner selection), with multi-select.

• end-to-end testing
• component testing
• mobile testing

This will affect many of the rest of the questions/prompts.

Component testing

- Select UI framework (single-choice):
   - React
   - Vue.js
   - Storybook

• the plugins array is populated with the selected plugin
• React/Vue
  • vite.config.js / vite.config.ts config file is created which loads the vite-plugin-nightwatch
  • the nightwatch config file contains a vite_dev_server settings block which looks like:

    • start_vite: true,
      port: 5173
      

  • the default base_url is localhost:5173
• React only
  • the output nightwatch folder needs to contain an index.jsx file -- https://nightwatchjs.org/guide/component-testing/write-jsx-react-tests.html#loading-static-assets
• Storybook
  • default base_url is http://localhost:6006
  • default source folder is 'stories/*.stories.jsx'
  • the nightwatch config file needs to contain the following

  •  '@nightwatch/storybook': {
        start_storybook: true,
        storybook_config_dir: '.storybook',
        hide_csf_errors: true,
        show_browser_console: true,
        storybook_url: 'http://localhost:6006/'
     } 
    

[vishalshah133]

I propose this alternate solution instead of adding a new question

Modify the following yes/no question "Would you like to run your e2e tests on Mobile devices as
well?"

to this multi-select question

"Would you like to set up Nightwatch for additional functionalities?"

1. Component testing
2. Mobile testing

This way we have 1 less question and it also can become more scalable in the future as we can add more options such as VRT, A11y or Unit testing.

Thoughts @beatfactor?

[beatfactor]

That question wouldn't be necessary anymore, so it would be replaced by first setup prompt. Also we should move away from the questions style into the more active tone style, which is done in this PR.

The benefit of having the multi-select choices upfront is that it also makes it very clear to users that Nightwatch is a complete testing solution which can do end2end/mobile/component testing rather than an end2end solution which happens to have some additional functionality that users may or may not need.

[swrdfish]

I like what @beatfactor is suggesting, only one doubt remains, what happens if the used selects only mobile testing?
I guess e2e will be available by default. In that case what's the point of adding e2e as a option there?

[swrdfish]

On a second thought, we should have the end to end question so that users don't get confused. There is no way someone is going to skip the question. So keep it as a default value. I think @beatfactor is right, have the initial multi-select, and remove the last mobile question. Once mobile app is available, that can be added to the first list.