woocommerce/tests/e2e/env
Christopher Allford a77a1cc77c Refreshed all lock files and removed "woocommerce" dependency from "e2e-environment" 2020-09-14 10:00:32 -07:00
..
bin restore looking up tags from git, add npm install to travis e2e script 2020-09-10 14:54:35 -03:00
config move trash posts/products from sequencer to local config 2020-08-04 19:55:13 -03:00
docker/wp-cli use better test for creating ready page 2020-09-10 13:23:18 -03:00
src/setup keep browser reset at end of setup 2020-08-05 15:01:43 -03:00
utils restore non-dev puppeteer config, move test config to sequencer 2020-07-29 18:57:59 -03:00
.env add port configuration support 2020-07-24 10:12:07 -03:00
.eslintrc.js update folder structure, use WordPress 5.4 2020-04-28 19:09:39 -03:00
.npmrc update folder structure, use WordPress 5.4 2020-04-28 19:09:39 -03:00
CHANGELOG.md update folder structure, use WordPress 5.4 2020-04-28 19:09:39 -03:00
README.md update e2e readmes 2020-08-05 16:58:38 -03:00
babel.config.js update folder structure, use WordPress 5.4 2020-04-28 19:09:39 -03:00
builtin.md remove duplicate readme text 2020-08-07 13:04:36 -03:00
docker-compose.yaml use consistent MySQL configuration values 2020-08-04 16:17:00 -03:00
external.md update e2e readmes 2020-08-05 16:58:38 -03:00
index.js expose getAppRoot, getTestConfig in package 2020-07-29 20:03:29 -03:00
package-lock.json Refreshed all lock files and removed "woocommerce" dependency from "e2e-environment" 2020-09-14 10:00:32 -07:00
package.json Refreshed all lock files and removed "woocommerce" dependency from "e2e-environment" 2020-09-14 10:00:32 -07:00
webpack-alias.js update folder structure, use WordPress 5.4 2020-04-28 19:09:39 -03:00

README.md

End to End Testing Environment

A reusable and extendable E2E testing environment for WooCommerce extensions.

Installation

npm install @woocommerce/e2e-environment --save
npm install jest --global

Configuration

The @woocommerce/e2e-environment package exports configuration objects that can be consumed in JavaScript config files in your project. Additionally, it includes a hosting container for running tests and includes instructions for creating your Travis CI setup.

Babel Config

Make sure you npm install @babel/preset-env --save if you have not already done so. Afterwards, extend your project's babel.config.js to contain the expected presets for E2E testing.

const { babelConfig: e2eBabelConfig } = require( '@woocommerce/e2e-environment' );

module.exports = function( api ) {
	api.cache( true );

	return {
		...e2eBabelConfig,
		presets: [
			...e2eBabelConfig.presets,
			'@wordpress/babel-preset-default',
		],
		....
	};
};

ES Lint Config

The E2E environment uses Puppeteer for headless browser testing, which uses certain globals variables. Avoid ES Lint errors by extending the config.

const { esLintConfig: baseConfig } = require( '@woocommerce/e2e-environment' );

module.exports = {
	...baseConfig,
	root: true,
	parser: 'babel-eslint',
	extends: [
		...baseConfig.extends,
		'wpcalypso/react',
		'plugin:jsx-a11y/recommended',
	],
	plugins: [
		...baseConfig.plugins,
		'jsx-a11y',
	],
	env: {
		...baseConfig.env,
		browser: true,
		node: true,
	},
	globals: {
		...baseConfig.globals,
		wp: true,
		wpApiSettings: true,
		wcSettings: true,
	},
	....
};

Jest Config

The E2E environment uses Jest as a test runner. Extending the base config is needed in order for Jest to run your project's test files.

const path = require( 'path' );
const { useE2EJestConfig } = require( '@woocommerce/e2e-environment' );

const jestConfig = useE2EJestConfig( {
	roots: [ path.resolve( __dirname, '../specs' ) ],
} );

module.exports = jestConfig;

NOTE: Your project's Jest config file is expected to be: tests/e2e/config/jest.config.js.

Jest Puppeteer Config

The test sequencer uses the following default Puppeteer configuration:

// headless
	puppeteerConfig = {
		launch: {
			// Required for the logged out and logged in tests so they don't share app state/token.
			browserContext: 'incognito',
		},
	};
// dev mode
	puppeteerConfig = {
		launch: {
			...jestPuppeteerConfig.launch, // @automattic/puppeteer-utils
			ignoreHTTPSErrors: true,
			args: [ '--window-size=1920,1080', '--user-agent=chrome' ],
			devtools: true,
			defaultViewport: {
				width: 1280,
				height: 800,
			},
		},
	};

You can customize the configuration in tests/e2e/config/jest-puppeteer.config.js

const { useE2EJestPuppeteerConfig } = require( '@woocommerce/e2e-environment' );

const puppeteerConfig = useE2EJestPuppeteerConfig( {
	launch: {
		headless: false,
	}
} );

module.exports = puppeteerConfig;

Jest Setup

Jest provides setup and teardown functions similar to PHPUnit. The default setup and teardown is in tests/e2e/env/src/setup/jest.setup.js. Additional setup and teardown functions can be added to tests/e2e/config/jest.setup.js

Webpack Config

The E2E environment provides a @woocommerce/e2e-utils alias for easy use of the WooCommerce E2E test helpers.

const { webpackAlias: coreE2EAlias } = require( '@woocommerce/e2e-environment' );

module.exports = {
	....
	resolve: {
		alias: {
			...coreE2EAlias,
			....
		},
	},
};

Container Setup

Depending on the project and testing scenario, the built in testing environment container might not be the best solution for testing. This could be local testing where there is already a testing container, a repository that isn't a plugin or theme and there are multiple folders mapped into the container, or similar. The e2e-environment container supports using either the built in container or an external container. See the the appropriate readme for details:

Additional information

Refer to tests/e2e/specs for some test examples, and tests/e2e for general information on e2e tests.