tests: update examples
This commit is contained in:
Łukasz Holeczek
@@ -1,5 +1,10 @@
|
||||
module.exports = {
|
||||
rules: {
|
||||
"no-unused-expressions": "off",
|
||||
plugins: ['cypress'],
|
||||
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");
|
||||
},
|
||||
};
|
||||
+7
-17
@@ -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')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -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 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)
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user