fix: fix nightwatch template's compatibility with eslint plugin (#4622)

Fixes #4619

* fix: fix nightwatch template's compatibility with eslint plugin

* test: should add eslint plugin **after** nightwatch plugin

* fix: add _eslintrc.js

Author: haoqunjiang

packages/@vue/cli-plugin-e2e-nightwatch/__tests__/nightwatchPlugin.spec.js

@@ -12,7 +12,11 @@ describe('nightwatch e2e plugin', () => {
     project = await create('e2e-nightwatch', {
       plugins: {
         '@vue/cli-plugin-babel': {},
-        '@vue/cli-plugin-e2e-nightwatch': {}
+        '@vue/cli-plugin-e2e-nightwatch': {},
+        '@vue/cli-plugin-eslint': {
+          config: 'airbnb',
+          lintOn: 'save'
+        }
       }
     })
 

packages/@vue/cli-plugin-e2e-nightwatch/generator/index.js

@@ -2,7 +2,8 @@ const { installedBrowsers } = require('@vue/cli-shared-utils')
 
 module.exports = api => {
   api.render('./template', {
-    hasTS: api.hasPlugin('typescript')
+    hasTS: api.hasPlugin('typescript'),
+    hasESLint: api.hasPlugin('eslint')
   })
 
   // Use devDependencies to store latest version number so as to automate update

packages/@vue/cli-plugin-e2e-nightwatch/generator/template/tests/e2e/_eslintrc.js

@@ -0,0 +1,7 @@
+<%_ if (hasESLint) { _%>
+module.exports = {
+  rules: {
+    'no-unused-expressions': 'off'
+  }
+}
+<%_ } _%>

packages/@vue/cli-plugin-e2e-nightwatch/generator/template/tests/e2e/custom-assertions/elementCount.js

@@ -13,10 +13,11 @@
  */
 
 exports.assertion = function elementCount (selectorOrObject, count) {
-  let selector;
+  let selector
 
   // when called from a page object element or section
-  if (typeof selectorOrObject == 'object' && selectorOrObject.selector) {
+  if (typeof selectorOrObject === 'object' && selectorOrObject.selector) {
+    // eslint-disable-next-line prefer-destructuring
     selector = selectorOrObject.selector
   } else {
     selector = selectorOrObject

packages/@vue/cli-plugin-e2e-nightwatch/generator/template/tests/e2e/custom-commands/customExecute.js

@@ -12,7 +12,7 @@
  *
  * @param {*} data
  */
-exports.command = function(data) {
+exports.command = function command (data) {
   // Other Nightwatch commands are available via "this"
 
   // .execute() inject a snippet of JavaScript into the page for execution.
@@ -22,16 +22,16 @@ exports.command = function(data) {
   //
   this.execute(
     // The function argument is converted to a string and sent to the browser
-    function(argData) {return argData;},
+    function (argData) { return argData },
 
     // The arguments for the function to be sent to the browser are specified in this array
     [data],
 
-    function(result) {
-      // The "result" object contains the result from the what we have sent back from the browser window
+    function (result) {
+      // The "result" object contains the result of what we have sent back from the browser window
       console.log('custom execute result:', result.value)
     }
-  );
+  )
 
-  return this;
-};
+  return this
+}

packages/@vue/cli-plugin-e2e-nightwatch/generator/template/tests/e2e/custom-commands/openHomepage.js

@@ -1,5 +1,6 @@
 /**
- * A basic Nightwatch custom command which demonstrates usage of ES6 async/await instead of using callbacks.
+ * A basic Nightwatch custom command
+ *  which demonstrates usage of ES6 async/await instead of using callbacks.
  *  The command name is the filename and the exported "command" function is the command.
  *
  * Example usage:
@@ -13,10 +14,10 @@ module.exports = {
   command: async function () {
     // Other Nightwatch commands are available via "this"
     // .init() simply calls .url() command with the value of the "launch_url" setting
-    this.init();
-    this.waitForElementVisible('#app');
+    this.init()
+    this.waitForElementVisible('#app')
 
-    const result = await this.elements('css selector', '#app ul');
-    this.assert.strictEqual(result.value.length, 3);
+    const result = await this.elements('css selector', '#app ul')
+    this.assert.strictEqual(result.value.length, 3)
   }
-};
+}

packages/@vue/cli-plugin-e2e-nightwatch/generator/template/tests/e2e/custom-commands/openHomepageClass.js

@@ -10,15 +10,15 @@
  *
  */
 
-const assert = require('assert');
+const assert = require('assert')
 
 module.exports = class {
   async command () {
     // Other Nightwatch commands are available via "this.api"
-    this.api.init();
-    this.api.waitForElementVisible('#app');
+    this.api.init()
+    this.api.waitForElementVisible('#app')
 
-    const result = await this.api.elements('css selector', '#app ul');
-    assert.strictEqual(result.value.length, 3);
+    const result = await this.api.elements('css selector', '#app ul')
+    assert.strictEqual(result.value.length, 3)
   }
-};
+}

packages/@vue/cli-plugin-e2e-nightwatch/generator/template/tests/e2e/globals.js

@@ -18,7 +18,7 @@ module.exports = {
 
   // default timeout value in milliseconds for waitFor commands and implicit waitFor value for
   // expect assertions
-  waitForConditionTimeout : 5000,
+  waitForConditionTimeout: 5000,
 
   'default': {
     /*
@@ -101,4 +101,4 @@ module.exports = {
     cb();
   }
    */
-};
+}

packages/@vue/cli-plugin-e2e-nightwatch/generator/template/tests/e2e/page-objects/homepage.js

@@ -49,4 +49,4 @@ module.exports = {
       }
     }
   }
-};
+}

packages/@vue/cli-plugin-e2e-nightwatch/generator/template/tests/e2e/specs/test-with-pageobjects.js

@@ -13,7 +13,7 @@ module.exports = {
     const homepage = browser.page.homepage()
     homepage.waitForElementVisible('@appContainer')
 
-    const app = homepage.section.app;
+    const app = homepage.section.app
     app.assert.elementCount('@logo', 1)
     app.expect.section('@welcome').to.be.visible
     app.expect.section('@headline').text.to.match(/^Welcome to Your Vue\.js (.*)App$/)