tests: update examples

2021-10-11 12:53:38 +02:00
parent 3ce05a7713
commit 8e09b0197f
15 changed files with 100 additions and 343 deletions
@@ -0,0 +1,3 @@
 {
  "pluginsFile": "tests/e2e/plugins/index.js"
 }
@@ -1,6 +1,6 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest",
+  preset: '@vue/cli-plugin-unit-jest',
  transform: {
-    "^.+\\.vue$": "vue-jest",
+    '^.+\\.vue$': 'vue-jest',
  },
-};
+}
@@ -1,5 +1,10 @@
 module.exports = {
-  rules: {
+  plugins: ['cypress'],
-    "no-unused-expressions": "off",
+  env: {
    mocha: true,
    'cypress/globals': true,
  },
-};
+  rules: {
    strict: 'off',
  },
 }
@@ -1,34 +0,0 @@
 /**
 * 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);
 };
@@ -1,39 +0,0 @@
 /**
 * 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;
 };
@@ -1,23 +0,0 @@
 /**
 * 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);
  },
 };
@@ -1,24 +0,0 @@
 /**
 * 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);
  }
 };
@@ -1,103 +0,0 @@
 ///////////////////////////////////////////////////////////////////////////////////
 // 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();
  }
   */
 };
@@ -1,52 +0,0 @@
 /**
 * 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,
            },
          },
        },
      },
    },
  },
 };
@@ -0,0 +1,25 @@
 /* eslint-disable arrow-body-style */
 // https://docs.cypress.io/guides/guides/plugins-guide.html
 // if you need a custom webpack configuration you can uncomment the following import
 // and then use the `file:preprocessor` event
 // as explained in the cypress docs
 // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
 // /* eslint-disable import/no-extraneous-dependencies, global-require */
 // const webpack = require('@cypress/webpack-preprocessor')
 module.exports = (on, config) => {
  // on('file:preprocessor', webpack({
  //  webpackOptions: require('@vue/cli-service/webpack.config'),
  //  watchOptions: {}
  // }))
  return Object.assign({}, config, {
    fixturesFolder: 'tests/e2e/fixtures',
    integrationFolder: 'tests/e2e/specs',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',
    supportFile: 'tests/e2e/support/index.js',
  })
 }
@@ -1,36 +0,0 @@
 ////////////////////////////////////////////////////////////////
 // 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");
  },
 };
@@ -1,18 +1,8 @@
-// For authoring Nightwatch tests, see
+// https://docs.cypress.io/api/introduction/api.html
 // https://nightwatchjs.org/guide
-module.exports = {
+describe('My First Test', () => {
-  "default e2e tests": (browser) => {
+  it('Visits the app root url', () => {
-    browser
+    cy.visit('/')
-      .init()
+    cy.contains('h1', 'Welcome to Your Vue.js App')
-      .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();
  },
 };
@@ -0,0 +1,25 @@
 // ***********************************************
 // This example commands.js shows you how to
 // create various custom commands and overwrite
 // existing commands.
 //
 // For more comprehensive examples of custom
 // commands please read more here:
 // https://on.cypress.io/custom-commands
 // ***********************************************
 //
 //
 // -- This is a parent command --
 // Cypress.Commands.add("login", (email, password) => { ... })
 //
 //
 // -- This is a child command --
 // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
 //
 //
 // -- This is a dual command --
 // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
 //
 //
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
@@ -0,0 +1,20 @@
 // ***********************************************************
 // This example support/index.js is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
 // behavior that modifies Cypress.
 //
 // You can change the location of this file or turn off
 // automatically serving support files with the
 // 'supportFile' configuration option.
 //
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
 // Import commands.js using ES2015 syntax:
 import './commands'
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
@@ -1,12 +1,12 @@
-import { shallowMount } from "@vue/test-utils";
+import { shallowMount } from '@vue/test-utils'
-import HelloWorld from "@/components/HelloWorld.vue";
+import HelloWorld from '@/components/HelloWorld.vue'
-describe("HelloWorld.vue", () => {
+describe('HelloWorld.vue', () => {
-  it("renders props.msg when passed", () => {
+  it('renders props.msg when passed', () => {
-    const msg = "new message";
+    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      props: { msg },
-    });
+    })
-    expect(wrapper.text()).toMatch(msg);
+    expect(wrapper.text()).toMatch(msg)
-  });
+  })
-});
+})