Component testing setup

src/config/main.ejs

@@ -31,6 +31,19 @@ module.exports = {
   <% } %>
   // See https://nightwatchjs.org/guide/concepts/test-globals.html
   globals_path: '',
+  <% if (answers.uiFramework === 'storybook') { %>
+  '@nightwatch/storybook': {
+    start_storybook: true,
+    storybook_config_dir: '.storybook',
+    hide_csf_errors: true,
+    show_browser_console: true,
+    storybook_url: '<%- answers.baseUrl %>'
+  },
+  <% } else if (answers.uiFramework === 'react' || answers.uiFramework === 'vue') { %>
+  vite_dev_server: {
+    start_vite: true,
+    port: 5173
+  }, <% } %>
 
   webdriver: {},
 

src/constants.ts

@@ -67,20 +67,44 @@ export const MOBILE_BROWSER_QUES: inquirer.QuestionCollection =
 export const QUESTIONAIRRE: inquirer.QuestionCollection = [
   // answers.rootDir is available to all the questions (passed in Inquirer.prompt()).
 
+  // TEST TYPE
+  {
+    type: 'checkbox',
+    name: 'testType',
+    message: 'Select testing type',
+    choices: [
+        {name: 'End-To-End Testing', value: 'e2e-test'},
+        {name: 'Component Testing', value: 'ct-test'},
+        // { name: 'mobile app testing', value: 'mobile-test' }
+    ],
+    default: ['e2e-test'],
+    validate: (value) => {
+      return !!value.length || 'Please select at least 1 testing type.';
+    },
+  },
+
   // JS OR TS
   {
     type: 'list',
     name: 'languageRunnerSetup',
     message: 'Select language + test runner variant',
-    choices: [
-      {name: 'JavaScript / default', value: 'js-nightwatch'},
-      {name: 'TypeScript / default', value: 'ts-nightwatch'},
-      {name: 'JavaScript / Mocha', value: 'js-mocha'},
-      {name: 'JavaScript / CucumberJS', value: 'js-cucumber'},
+    choices: (answers) => {
+      const languageRunners = [
+        {name: 'JavaScript / default', value: 'js-nightwatch'},
+        {name: 'TypeScript / default', value: 'ts-nightwatch'},
+        {name: 'JavaScript / Mocha', value: 'js-mocha'},
+        {name: 'JavaScript / CucumberJS', value: 'js-cucumber'},
+
+        // {name: 'TypeScript - Mocha Test Runner', value: 'ts-mocha'}
+        // {name: 'TypeScript - CucumberJS Test Runner', value: 'ts-cucumber'}
+      ]
 
-      // {name: 'TypeScript - Mocha Test Runner', value: 'ts-mocha'}
-      // {name: 'TypeScript - CucumberJS Test Runner', value: 'ts-cucumber'}
-    ],
+      if (answers.testType.length === 1 && answers.testType.includes('ct-test')) {
+        return languageRunners.filter((languageRunner) => !['js-mocha', 'js-cucumber'].includes(languageRunner.value))
+      }
+
+      return languageRunners;
+    },
     filter: (value, answers) => {
       const [language, runner] = value.split('-');
       answers.language = language;
@@ -90,7 +114,18 @@ export const QUESTIONAIRRE: inquirer.QuestionCollection = [
     }
   },
 
-
+  // UI Framework
+  {
+    type: 'list',
+    name: 'uiFramework',
+    message: 'Select UI framework',
+    choices: [
+        {name: 'React', value: 'react'},
+        {name: 'Vue.js', value: 'vue'},
+        {name: 'Storybook', value: 'storybook'}
+    ],
+    when: (answers) => answers.testType.includes('ct-test')
+  },
 
   // BROWSERS
   {
@@ -119,7 +154,13 @@ export const QUESTIONAIRRE: inquirer.QuestionCollection = [
     type: 'input',
     name: 'testsLocation',
     message: 'Enter source folder where test files are stored',
-    default: 'test'
+    default: (answers: {uiFramework: string}) => {
+      if (answers.uiFramework === 'storybook') {
+        return 'stories/*.stories.jsx';
+      }
+
+      return 'test';
+    }
   },
 
   {
@@ -135,7 +176,17 @@ export const QUESTIONAIRRE: inquirer.QuestionCollection = [
     type: 'input',
     name: 'baseUrl',
     message: 'Enter the base_url of the project',
-    default: 'http://localhost'
+    default: (answers: {uiFramework: string}) => {
+      if (['react', 'vue'].includes(answers.uiFramework)) {
+        return 'http://localhost:5173';
+      }
+
+      if (answers.uiFramework === 'storybook') {
+        return 'http://localhost:6006';
+      }
+
+      return 'http://localhost';
+    }
   },
 
   // TESTING BACKEND

src/defaults.json

@@ -11,5 +11,6 @@
   "testsLocation": "nightwatch-e2e",
   "baseUrl": "http://localhost",
   "allowAnonymousMetrics": false,
-  "mobile": false
+  "mobile": false,
+  "plugins": []
 }

src/init.ts

@@ -133,6 +133,25 @@ export class NightwatchInit {
         mobileResult.ios = await iosSetup.run();
       }
     }
+
+    // Setup component testing files 
+    if (answers.uiFramework === 'react' || answers.uiFramework === 'vue') {
+      const componentConfigPath = path.join(__dirname, '..', 'assets', 'component-config');
+      const nightwatchPath = path.join(this.rootDir, 'nightwatch');
+
+      try {
+        fs.mkdirSync(nightwatchPath);
+        // eslint-disable-next-line
+      } catch (err) {}
+
+      if ( answers.uiFramework === 'react') {
+        // Generate a new index.jsx file
+        const reactIndexSrcPath = path.join(componentConfigPath, 'index.jsx');
+        const reactIndexgDestPath = path.join(nightwatchPath, 'index.jsx');
+
+        fs.copyFileSync(reactIndexSrcPath, reactIndexgDestPath);
+      }
+    }
 
     if (!this.onlyConfig) {
       // Post instructions to run their first test
@@ -278,6 +297,20 @@ export class NightwatchInit {
         }
       }
     }
+
+    answers.plugins = [];
+
+    if(answers.uiFramework === 'react') {
+      answers.plugins.push('@nightwatch/react');
+    }
+
+    if(answers.uiFramework === 'storybook') {
+      answers.plugins.push('@nightwatch/storybook');
+    }
+
+    if(answers.uiFramework === 'vue') {
+      answers.plugins.push('@nightwatch/vue');
+    }
   }
 
   identifyPackagesToInstall(answers: ConfigGeneratorAnswers): string[] {
@@ -299,6 +332,10 @@ export class NightwatchInit {
       packages.push('@nightwatch/mobile-helper');
     }
 
+    if(answers.plugins) {
+      packages.push(...answers.plugins);
+    }
+
     // Identify packages already installed and don't install them again
     const packageJson = JSON.parse(fs.readFileSync(path.join(this.rootDir, 'package.json'), 'utf-8'));
 
@@ -461,7 +498,7 @@ export class NightwatchInit {
     const tplData = fs.readFileSync(templateFile).toString();
 
     let rendered = ejs.render(tplData, {
-      plugins: false,
+      plugins: JSON.stringify(answers.plugins).replace(/"/g, '\'').replace(/\\\\/g, '/'),
       src_folders: JSON.stringify(src_folders).replace(/"/g, '\'').replace(/\\\\/g, '/'),
       page_objects_path: JSON.stringify(page_objects_path).replace(/"/g, '\'').replace(/\\\\/g, '/'),
       custom_commands_path: JSON.stringify(custom_commands_path).replace(/"/g, '\'').replace(/\\\\/g, '/'),

src/interfaces.ts

@@ -26,7 +26,9 @@ export interface ConfigGeneratorAnswers {
   defaultBrowser?: string;
   remoteBrowsers?: string[];
   allowAnonymousMetrics?: boolean;
-  mobileRemote?: boolean
+  mobileRemote?: boolean;
+  uiFramework?: 'react' | 'vue' | 'storybook';
+  plugins?: string[];
 }
 
 export interface ConfigDestination {