forked from vuejs/vue-test-utils
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
improvement(test/setup): reimplement Browser Unit Tests
After converting to Jest, browser tests were removed due to capatability issues. This reimplements the browser tests with similar techniques. All related webpack/loaders have been updated to use the latest stable releases Chrome/HeadlessChrome is now being used to run these tests over the deprecated PhantomJS Karma and Jasmine are being used as a test runner while leveraging Jest's expect/assertion and mock/stubbing libraries Highly inspired by https://github.com/tom-sherman/blog/blob/master/posts/02-running-jest-tests-in-a-browser.md. 1629
- Loading branch information
1 parent
cfd494f
commit df19c1b
Showing
23 changed files
with
1,743 additions
and
169 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| const webpackConfig = require('./webpack.test.config.js') | ||
|
|
||
| if (process.env.CI) { | ||
| // For CI runs, an installation of chrome/chromium is required | ||
| // see https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer for more details | ||
| process.env.CHROME_BIN = require('puppeteer').executablePath() | ||
| } | ||
|
|
||
| module.exports = config => { | ||
| config.set({ | ||
| browsers: [process.env.CI ? 'ChromeHeadlessNoSandbox' : 'Chrome'], | ||
| ...(process.env.CI | ||
| ? { | ||
| customLaunchers: { | ||
| ChromeHeadlessNoSandbox: { | ||
| base: 'ChromeHeadless', | ||
| flags: ['--no-sandbox'] | ||
| } | ||
| } | ||
| } | ||
| : {}), | ||
| singleRun: !!process.env.CI, | ||
| plugins: [ | ||
| 'karma-webpack', | ||
| 'karma-jasmine', | ||
| 'karma-chrome-launcher', | ||
| 'karma-spec-reporter' | ||
| ], | ||
| basePath: '../../', | ||
| reporters: ['spec'], | ||
| frameworks: ['jasmine'], | ||
| files: ['./test/setup/karma.setup.js', './test/setup/load-tests.js'], | ||
| preprocessors: { | ||
| './test/setup/karma.setup.js': ['webpack'], | ||
| './test/setup/load-tests.js': ['webpack'] | ||
| }, | ||
| webpack: webpackConfig, | ||
| webpackMiddleware: { | ||
| noInfo: true | ||
| } | ||
| }) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| /** | ||
| * Since running in the browser, polyfill missing functionality with core-js, | ||
| * as well as include teh regenerator runtime. | ||
| * Please see https://babeljs.io/docs/en/babel-polyfill and https://github.com/zloirock/core-js for more details | ||
| */ | ||
| import 'core-js' | ||
| import 'regenerator-runtime/runtime' | ||
|
|
||
| import jest from 'jest-mock' | ||
| import expect from 'expect' | ||
|
|
||
| // Add Jest API to the global scope / browser window | ||
| // Jasmine will be used as the test runner while leveraging Jest's expect/assertion and mock/stubbing libraries | ||
| window.test = window.it | ||
| window.test.each = inputs => (testName, test) => | ||
| inputs.forEach(args => window.it(testName, () => test(...args))) | ||
| window.test.todo = window.test.skip = () => { | ||
| return undefined | ||
| } | ||
|
|
||
| window.jest = jest | ||
| window.expect = expect |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** | ||
| * require.context is used in order to build one bundle with karma-webpack. | ||
| * If globstars are used, a bundle is created per glob match. | ||
| * This creates obvious memory issues and is not desired. | ||
| * | ||
| * Please see https://github.com/webpack-contrib/karma-webpack#alternative-usage for more details | ||
| */ | ||
| const testsContext = require.context('../specs', true, /\.spec\.(js|vue)$/) | ||
|
|
||
| testsContext.keys().forEach(testsContext) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| /* eslint-disable max-len */ | ||
|
|
||
| const nodeExternals = require('webpack-node-externals') | ||
| const webpack = require('webpack') | ||
| const VueLoaderPlugin = require('vue-loader/lib/plugin') | ||
|
|
||
| const browser = process.env.TARGET === 'browser' | ||
| const path = require('path') | ||
|
|
||
| const projectRoot = path.resolve(__dirname, '../../') | ||
|
|
||
| const rules = [].concat( | ||
| { | ||
| test: /\.vue$/, | ||
| use: 'vue-loader' | ||
| }, | ||
| { | ||
| test: /\.js$/, | ||
| use: 'babel-loader', | ||
| exclude: /node_modules/ | ||
| }, | ||
| { | ||
| test: /\.css$/, | ||
| use: [ | ||
| { | ||
| loader: 'vue-style-loader' | ||
| }, | ||
| { | ||
| loader: 'css-loader' | ||
| } | ||
| ] | ||
| } | ||
| ) | ||
| const externals = nodeExternals({ | ||
| // we need to allowlist both `create-instance` and files in `shared` package. Otherwise webpack won't bundle them in the test dev env | ||
| allowlist: [ | ||
| '@vue/test-utils', | ||
| '@vue/server-test-utils', | ||
| 'create-instance', | ||
| /^shared\/.*/ | ||
| ] | ||
| }) | ||
| // define the default aliases | ||
| let aliasedFiles = {} | ||
| if (process.env.TARGET === 'browser') { | ||
| // if we are in dev test mode, we want to alias all files to the src file, not dist | ||
| aliasedFiles = { | ||
| '@vue/server-test-utils': `@vue/server-test-utils/src/index.js`, | ||
| '@vue/test-utils': `@vue/test-utils/src/index.js` | ||
| } | ||
| } | ||
|
|
||
| module.exports = { | ||
| // since NODE_ENV is used heavily in the testing suite, using `production` mode in CI will cause side effects | ||
| mode: 'development', | ||
| module: { | ||
| rules | ||
| }, | ||
| externals: !browser ? [externals] : undefined, | ||
| resolve: { | ||
| alias: { | ||
| ...aliasedFiles, | ||
| '~resources': `${projectRoot}/test/resources`, | ||
| packages: path.resolve(projectRoot, 'packages') | ||
| } | ||
| }, | ||
| output: { | ||
| devtoolModuleFilenameTemplate: '[absolute-resource-path]', | ||
| devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]' | ||
| }, | ||
| devtool: '#inline-cheap-module-source-map', | ||
| node: { | ||
| fs: 'empty', | ||
| module: 'empty' | ||
| }, | ||
| plugins: [new webpack.EnvironmentPlugin(['TEST_ENV']), new VueLoaderPlugin()] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.