init

tests/e2e/.eslintrc.js

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

tests/e2e/custom-assertions/elementCount.js

@@ -0,0 +1,34 @@
+/**
+ * A custom Nightwatch assertion. The assertion name is the filename.
+ *
+ * Example usage:
+ *   browser.assert.elementCount(selector, count)
+ *
+ * For more information on custom assertions see:
+ *   https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-assertions
+ *
+ *
+ * @param {string|object} selectorOrObject
+ * @param {number} count
+ */
+
+exports.assertion = function elementCount(selectorOrObject, count) {
+  let selector;
+
+  // when called from a page object element or section
+  if (typeof selectorOrObject === "object" && selectorOrObject.selector) {
+    // eslint-disable-next-line prefer-destructuring
+    selector = selectorOrObject.selector;
+  } else {
+    selector = selectorOrObject;
+  }
+
+  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;
+  }
+  this.command = cb => this.api.execute(evaluator, [selector], cb);
+};

tests/e2e/custom-commands/customExecute.js

@@ -0,0 +1,39 @@
+/**
+ * A very basic Nightwatch custom command. The command name is the filename and the
+ *  exported "command" function is the command.
+ *
+ * Example usage:
+ *   browser.customExecute(function() {
+ *     console.log('Hello from the browser window')
+ *   });
+ *
+ * For more information on writing custom commands see:
+ *   https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-commands
+ *
+ * @param {*} data
+ */
+exports.command = function command(data) {
+  // Other Nightwatch commands are available via "this"
+
+  // .execute() inject a snippet of JavaScript into the page for execution.
+  //  the executed script is assumed to be synchronous.
+  //
+  // See https://nightwatchjs.org/api/execute.html for more info.
+  //
+  this.execute(
+    // The function argument is converted to a string and sent to the browser
+    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 of what we have sent back from the browser window
+      console.log("custom execute result:", result.value);
+    }
+  );
+
+  return this;
+};

tests/e2e/custom-commands/openHomepage.js

@@ -0,0 +1,23 @@
+/**
+ * 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:
+ *   browser.openHomepage();
+ *
+ * For more information on writing custom commands see:
+ *   https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-commands
+ *
+ */
+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");
+
+    const result = await this.elements("css selector", "#app ul");
+    this.assert.strictEqual(result.value.length, 3);
+  }
+};

tests/e2e/custom-commands/openHomepageClass.js

@@ -0,0 +1,24 @@
+/**
+ * A class-based Nightwatch custom command which is a variation of the openHomepage.js command.
+ *  The command name is the filename and class needs to contain a "command" method.
+ *
+ * Example usage:
+ *   browser.openHomepageClass();
+ *
+ * For more information on writing custom commands see:
+ *   https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-commands
+ *
+ */
+
+const assert = require("assert");
+
+module.exports = class {
+  async command() {
+    // Other Nightwatch commands are available via "this.api"
+    this.api.init();
+    this.api.waitForElementVisible("#app");
+
+    const result = await this.api.elements("css selector", "#app ul");
+    assert.strictEqual(result.value.length, 3);
+  }
+};

tests/e2e/globals.js

@@ -0,0 +1,103 @@
+///////////////////////////////////////////////////////////////////////////////////
+// Refer to the entire list of global config settings here:
+// https://github.com/nightwatchjs/nightwatch/blob/master/lib/settings/defaults.js#L16
+//
+// More info on test globals:
+//   https://nightwatchjs.org/gettingstarted/configuration/#test-globals
+//
+///////////////////////////////////////////////////////////////////////////////////
+
+module.exports = {
+  // this controls whether to abort the test execution when an assertion failed and skip the rest
+  // it's being used in waitFor commands and expect assertions
+  abortOnAssertionFailure: true,
+
+  // this will overwrite the default polling interval (currently 500ms) for waitFor commands
+  // and expect assertions that use retry
+  waitForConditionPollInterval: 500,
+
+  // default timeout value in milliseconds for waitFor commands and implicit waitFor value for
+  // expect assertions
+  waitForConditionTimeout: 5000,
+
+  default: {
+    /*
+    The globals defined here are available everywhere in any test env
+    */
+    /*
+    myGlobal: function() {
+      return 'I\'m a method';
+    }
+    */
+  },
+
+  firefox: {
+    /*
+    The globals defined here are available only when the chrome testing env is being used
+       i.e. when running with --env firefox
+    */
+    /*
+     * myGlobal: function() {
+     *   return 'Firefox specific global';
+     * }
+     */
+  }
+
+  /////////////////////////////////////////////////////////////////
+  // Global hooks
+  // - simple functions which are executed as part of the test run
+  // - take a callback argument which can be called when an async
+  //    async operation is finished
+  /////////////////////////////////////////////////////////////////
+  /**
+   * executed before the test run has started, so before a session is created
+   */
+  /*
+  before(cb) {
+    //console.log('global before')
+    cb();
+  },
+  */
+
+  /**
+   * executed before every test suite has started
+   */
+  /*
+  beforeEach(browser, cb) {
+    //console.log('global beforeEach')
+    cb();
+  },
+  */
+
+  /**
+   * executed after every test suite has ended
+   */
+  /*
+  afterEach(browser, cb) {
+    browser.perform(function() {
+      //console.log('global afterEach')
+      cb();
+    });
+  },
+  */
+
+  /**
+   * executed after the test run has finished
+   */
+  /*
+  after(cb) {
+    //console.log('global after')
+    cb();
+  },
+  */
+
+  /////////////////////////////////////////////////////////////////
+  // Global reporter
+  //  - define your own custom reporter
+  /////////////////////////////////////////////////////////////////
+  /*
+  reporter(results, cb) {
+    cb();
+  }
+   */
+};

tests/e2e/page-objects/homepage.js

@@ -0,0 +1,52 @@
+/**
+ * A Nightwatch page object. The page object name is the filename.
+ *
+ * Example usage:
+ *   browser.page.homepage.navigate()
+ *
+ * For more information on working with page objects see:
+ *   https://nightwatchjs.org/guide/working-with-page-objects/
+ *
+ */
+
+module.exports = {
+  url: "/",
+  commands: [],
+
+  // A page object can have elements
+  elements: {
+    appContainer: "#app"
+  },
+
+  // Or a page objects can also have sections
+  sections: {
+    app: {
+      selector: "#app",
+
+      elements: {
+        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"
+        },
+
+        welcome: {
+          // the equivalent css selector for the "welcome" sub-section would be:
+          //  '#app div.hello'
+          selector: "div.hello",
+
+          elements: {
+            cliPluginLinks: {
+              selector: "ul",
+              index: 0
+            }
+          }
+        }
+      }
+    }
+  }
+};

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

@@ -0,0 +1,34 @@
+////////////////////////////////////////////////////////////////
+// For authoring Nightwatch tests, see
+// https://nightwatchjs.org/guide
+//
+// For more information on working with page objects see:
+//   https://nightwatchjs.org/guide/working-with-page-objects/
+////////////////////////////////////////////////////////////////
+
+module.exports = {
+  beforeEach: browser => browser.init(),
+
+  "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;
+    app.expect
+      .section("@headline")
+      .text.to.match(/^Welcome to Your Vue\.js (.*)App$/);
+
+    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;
+
+    welcomeSection.expect
+      .element("@cliPluginLinks")
+      .text.to.contain("e2e-nightwatch");
+  }
+};

tests/e2e/specs/test.js

@@ -0,0 +1,21 @@
+// For authoring Nightwatch tests, see
+// https://nightwatchjs.org/guide
+
+module.exports = {
+  "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();
+  },
+
+  "example e2e test using a custom command": browser => {
+    browser
+      .openHomepage()
+      .assert.elementPresent(".hello")
+      .end();
+  }
+};

tests/unit/example.spec.js

@@ -0,0 +1,12 @@
+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";
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg }
+    });
+    expect(wrapper.text()).toMatch(msg);
+  });
+});