From 8e09b0197fe0b1d46e11f818b6aaa85fd2ba3732 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 11 Oct 2021 12:53:38 +0200 Subject: [PATCH] tests: update examples --- cypress.json | 3 + jest.config.js | 6 +- tests/e2e/.eslintrc.js | 11 +- tests/e2e/custom-assertions/elementCount.js | 34 ------ tests/e2e/custom-commands/customExecute.js | 39 ------- tests/e2e/custom-commands/openHomepage.js | 23 ---- .../e2e/custom-commands/openHomepageClass.js | 24 ---- tests/e2e/globals.js | 103 ------------------ tests/e2e/page-objects/homepage.js | 52 --------- tests/e2e/plugins/index.js | 25 +++++ tests/e2e/specs/test-with-pageobjects.js | 36 ------ tests/e2e/specs/test.js | 24 ++-- tests/e2e/support/commands.js | 25 +++++ tests/e2e/support/index.js | 20 ++++ tests/unit/example.spec.js | 18 +-- 15 files changed, 100 insertions(+), 343 deletions(-) create mode 100644 cypress.json delete mode 100644 tests/e2e/custom-assertions/elementCount.js delete mode 100644 tests/e2e/custom-commands/customExecute.js delete mode 100644 tests/e2e/custom-commands/openHomepage.js delete mode 100644 tests/e2e/custom-commands/openHomepageClass.js delete mode 100644 tests/e2e/globals.js delete mode 100644 tests/e2e/page-objects/homepage.js create mode 100644 tests/e2e/plugins/index.js delete mode 100644 tests/e2e/specs/test-with-pageobjects.js create mode 100644 tests/e2e/support/commands.js create mode 100644 tests/e2e/support/index.js diff --git a/cypress.json b/cypress.json new file mode 100644 index 00000000..470c7201 --- /dev/null +++ b/cypress.json @@ -0,0 +1,3 @@ +{ + "pluginsFile": "tests/e2e/plugins/index.js" +} diff --git a/jest.config.js b/jest.config.js index 552be694..9702ea33 100644 --- a/jest.config.js +++ b/jest.config.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', }, -}; +} diff --git a/tests/e2e/.eslintrc.js b/tests/e2e/.eslintrc.js index 252dc4d1..a3e436bc 100644 --- a/tests/e2e/.eslintrc.js +++ b/tests/e2e/.eslintrc.js @@ -1,5 +1,10 @@ module.exports = { - rules: { - "no-unused-expressions": "off", + plugins: ['cypress'], + env: { + mocha: true, + 'cypress/globals': true, }, -}; + rules: { + strict: 'off', + }, +} diff --git a/tests/e2e/custom-assertions/elementCount.js b/tests/e2e/custom-assertions/elementCount.js deleted file mode 100644 index 46fdf816..00000000 --- a/tests/e2e/custom-assertions/elementCount.js +++ /dev/null @@ -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); -}; diff --git a/tests/e2e/custom-commands/customExecute.js b/tests/e2e/custom-commands/customExecute.js deleted file mode 100644 index 2fa4bf06..00000000 --- a/tests/e2e/custom-commands/customExecute.js +++ /dev/null @@ -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; -}; diff --git a/tests/e2e/custom-commands/openHomepage.js b/tests/e2e/custom-commands/openHomepage.js deleted file mode 100644 index 7c27a27a..00000000 --- a/tests/e2e/custom-commands/openHomepage.js +++ /dev/null @@ -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); - }, -}; diff --git a/tests/e2e/custom-commands/openHomepageClass.js b/tests/e2e/custom-commands/openHomepageClass.js deleted file mode 100644 index f069cbe1..00000000 --- a/tests/e2e/custom-commands/openHomepageClass.js +++ /dev/null @@ -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); - } -}; diff --git a/tests/e2e/globals.js b/tests/e2e/globals.js deleted file mode 100644 index 886ee5bc..00000000 --- a/tests/e2e/globals.js +++ /dev/null @@ -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(); - } - */ -}; diff --git a/tests/e2e/page-objects/homepage.js b/tests/e2e/page-objects/homepage.js deleted file mode 100644 index 0b680a69..00000000 --- a/tests/e2e/page-objects/homepage.js +++ /dev/null @@ -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, - }, - }, - }, - }, - }, - }, -}; diff --git a/tests/e2e/plugins/index.js b/tests/e2e/plugins/index.js new file mode 100644 index 00000000..3cd3f22c --- /dev/null +++ b/tests/e2e/plugins/index.js @@ -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', + }) +} diff --git a/tests/e2e/specs/test-with-pageobjects.js b/tests/e2e/specs/test-with-pageobjects.js deleted file mode 100644 index 88dc8213..00000000 --- a/tests/e2e/specs/test-with-pageobjects.js +++ /dev/null @@ -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"); - }, -}; diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js index 633a0efa..41ad94a0 100644 --- a/tests/e2e/specs/test.js +++ b/tests/e2e/specs/test.js @@ -1,18 +1,8 @@ -// For authoring Nightwatch tests, see -// https://nightwatchjs.org/guide +// https://docs.cypress.io/api/introduction/api.html -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(); - }, -}; +describe('My First Test', () => { + it('Visits the app root url', () => { + cy.visit('/') + cy.contains('h1', 'Welcome to Your Vue.js App') + }) +}) diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js new file mode 100644 index 00000000..c1f5a772 --- /dev/null +++ b/tests/e2e/support/commands.js @@ -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) => { ... }) diff --git a/tests/e2e/support/index.js b/tests/e2e/support/index.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/tests/e2e/support/index.js @@ -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') diff --git a/tests/unit/example.spec.js b/tests/unit/example.spec.js index 0811d8a8..6eac19b1 100644 --- a/tests/unit/example.spec.js +++ b/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, { props: { msg }, - }); - expect(wrapper.text()).toMatch(msg); - }); -}); + }) + expect(wrapper.text()).toMatch(msg) + }) +})