Prettify codebase

.eslintrc.js

@@ -3,23 +3,23 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
   parserOptions: {
-    parser: "babel-eslint"
+    parser: 'babel-eslint'
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
   },
   overrides: [
     {
       files: [
-        "**/__tests__/*.{j,t}s?(x)",
-        "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
       ],
       env: {
         jest: true
       }
     }
   ]
-};
+}

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "arrowParens": "always",
+  "singleQuote": true,
+  "trailingComma": none
+}

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
-};
+  presets: ['@vue/cli-plugin-babel/preset']
+}

jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest"
-};
+  preset: '@vue/cli-plugin-unit-jest'
+}

src/App.vue

@@ -6,14 +6,14 @@
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
+import HelloWorld from './components/HelloWorld.vue'
 
 export default {
-  name: "App",
+  name: 'App',
   components: {
     HelloWorld
   }
-};
+}
 </script>
 
 <style lang="scss">

src/components/HelloWorld.vue

@@ -104,11 +104,11 @@
 
 <script>
 export default {
-  name: "HelloWorld",
+  name: 'HelloWorld',
   props: {
     msg: String
   }
-};
+}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

src/main.js

@@ -1,8 +1,8 @@
-import Vue from "vue";
-import App from "./App.vue";
+import Vue from 'vue'
+import App from './App.vue'
 
-Vue.config.productionTip = false;
+Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App)
-}).$mount("#app");
+  render: (h) => h(App)
+}).$mount('#app')

tests/e2e/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
   rules: {
-    "no-unused-expressions": "off"
+    'no-unused-expressions': 'off'
   }
-};
+}

tests/e2e/custom-assertions/elementCount.js

@@ -13,22 +13,22 @@
  */
 
 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;
+    selector = selectorOrObject.selector
   } else {
-    selector = selectorOrObject;
+    selector = selectorOrObject
   }
 
-  this.message = `Testing if element <${selector}> has count: ${count}`;
-  this.expected = count;
-  this.pass = val => val === count;
-  this.value = res => res.value;
+  this.message = `Testing if element <${selector}> has count: ${count}`
+  this.expected = count
+  this.pass = (val) => val === count
+  this.value = (res) => res.value
   function evaluator(_selector) {
-    return document.querySelectorAll(_selector).length;
+    return document.querySelectorAll(_selector).length
   }
-  this.command = cb => this.api.execute(evaluator, [selector], cb);
-};
+  this.command = (cb) => this.api.execute(evaluator, [selector], cb)
+}

tests/e2e/custom-commands/customExecute.js

@@ -23,7 +23,7 @@ exports.command = function command(data) {
   this.execute(
     // The function argument is converted to a string and sent to the browser
     function(argData) {
-      return argData;
+      return argData
     },
 
     // The arguments for the function to be sent to the browser are specified in this array
@@ -31,9 +31,9 @@ exports.command = function command(data) {
 
     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);
+      console.log('custom execute result:', result.value)
     }
-  );
+  )
 
-  return this;
-};
+  return this
+}

tests/e2e/custom-commands/openHomepage.js

@@ -14,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)
   }
-};
+}

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)
   }
-};
+}

tests/e2e/globals.js

@@ -100,4 +100,4 @@ module.exports = {
     cb();
   }
    */
-};
+}

tests/e2e/page-objects/homepage.js

@@ -10,38 +10,38 @@
  */
 
 module.exports = {
-  url: "/",
+  url: '/',
   commands: [],
 
   // A page object can have elements
   elements: {
-    appContainer: "#app"
+    appContainer: '#app'
   },
 
   // Or a page objects can also have sections
   sections: {
     app: {
-      selector: "#app",
+      selector: '#app',
 
       elements: {
-        logo: "img"
+        logo: 'img'
       },
 
       // - a page object section can also have sub-sections
       // - elements or sub-sections located here are retrieved using the "app" section as the base
       sections: {
         headline: {
-          selector: "h1"
+          selector: 'h1'
         },
 
         welcome: {
           // the equivalent css selector for the "welcome" sub-section would be:
           //  '#app div.hello'
-          selector: "div.hello",
+          selector: 'div.hello',
 
           elements: {
             cliPluginLinks: {
-              selector: "ul",
+              selector: 'ul',
               index: 0
             }
           }
@@ -49,4 +49,4 @@ module.exports = {
       }
     }
   }
-};
+}

tests/e2e/specs/test-with-pageobjects.js

@@ -7,28 +7,30 @@
 ////////////////////////////////////////////////////////////////
 
 module.exports = {
-  beforeEach: browser => browser.init(),
+  beforeEach: (browser) => browser.init(),
 
-  "e2e tests using page objects": browser => {
-    const homepage = browser.page.homepage();
-    homepage.waitForElementVisible("@appContainer");
+  'e2e tests using page objects': (browser) => {
+    const homepage = browser.page.homepage()
+    homepage.waitForElementVisible('@appContainer')
 
-    const app = homepage.section.app;
-    app.assert.elementCount("@logo", 1);
-    app.expect.section("@welcome").to.be.visible;
+    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$/);
+      .section('@headline')
+      .text.to.match(/^Welcome to Your Vue\.js (.*)App$/)
 
-    browser.end();
+    browser.end()
   },
 
-  'verify if string "e2e-nightwatch" is within the cli plugin links': browser => {
-    const homepage = browser.page.homepage();
-    const welcomeSection = homepage.section.app.section.welcome;
+  'verify if string "e2e-nightwatch" is within the cli plugin links': (
+    browser
+  ) => {
+    const homepage = browser.page.homepage()
+    const welcomeSection = homepage.section.app.section.welcome
 
     welcomeSection.expect
-      .element("@cliPluginLinks")
-      .text.to.contain("e2e-nightwatch");
+      .element('@cliPluginLinks')
+      .text.to.contain('e2e-nightwatch')
   }
-};
+}

tests/e2e/specs/test.js

@@ -2,20 +2,20 @@
 // https://nightwatchjs.org/guide
 
 module.exports = {
-  "default e2e tests": browser => {
+  'default e2e tests': (browser) => {
     browser
       .init()
-      .waitForElementVisible("#app")
-      .assert.elementPresent(".hello")
-      .assert.containsText("h1", "Welcome to Your Vue.js App")
-      .assert.elementCount("img", 1)
-      .end();
+      .waitForElementVisible('#app')
+      .assert.elementPresent('.hello')
+      .assert.containsText('h1', 'Welcome to Your Vue.js App')
+      .assert.elementCount('img', 1)
+      .end()
   },
 
-  "example e2e test using a custom command": browser => {
+  'example e2e test using a custom command': (browser) => {
     browser
       .openHomepage()
-      .assert.elementPresent(".hello")
-      .end();
+      .assert.elementPresent('.hello')
+      .end()
   }
-};
+}

tests/unit/example.spec.js

@@ -1,12 +1,12 @@
-import { shallowMount } from "@vue/test-utils";
-import HelloWorld from "@/components/HelloWorld.vue";
+import { shallowMount } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld.vue'
 
-describe("HelloWorld.vue", () => {
-  it("renders props.msg when passed", () => {
-    const msg = "new message";
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message'
     const wrapper = shallowMount(HelloWorld, {
       propsData: { msg }
-    });
-    expect(wrapper.text()).toMatch(msg);
-  });
-});
+    })
+    expect(wrapper.text()).toMatch(msg)
+  })
+})