:Implement basic system for webpack unit-testing

This commit is contained in:
rad.swiat 2018-10-27 14:46:23 +01:00
parent a8769079be
commit 5f4b82bc42
21 changed files with 14505 additions and 798 deletions

View File

@ -4,7 +4,8 @@
"plugins": [
"jsdoc",
"import",
"filenames"
"filenames",
"babel"
],
"env": {
"browser": true,
@ -43,6 +44,7 @@
}
},
"rules": {
"babel/arrow-parens": 2,
"spaced-comment": "off",
"no-unused-expressions": "off",
"func-names": "off",

3
.gitignore vendored
View File

@ -1,4 +1,7 @@
.idea/
.vscode/
node_modules/
demo/node_modules/
demo/package-lock.json
demo/dist
npm-debug*

1
demo/README.md Normal file
View File

@ -0,0 +1 @@
# Webpack auto inject testing environment

103
demo/dist/js/main.js vendored
View File

@ -1,2 +1,101 @@
// [AIV_SHORT] Version: 0.14.0, Thursday, March 15th, 2018, 11:02:44 AM
!function(n){var t={};function e(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return n[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}e.m=n,e.c=t,e.i=function(n){return n},e.d=function(n,t,r){e.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:r})},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=2)}([function(n,t,e){e(1)},function(n,t){n.exports="<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Title</title></head><body><span>0.14.0</span> <span>11:02:44</span> <span>0.14.0_11:02:44</span> <span>V:0.14.0 Date:11:02:44</span> <span>Version 0.14.0 , 11:02:44</span></body></html>"},function(n,t,e){n.exports=e(0)}]);
// [AIV_SHORT] Build version: 0.14.0 - Saturday, October 27th, 2018, 2:45:47 PM
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
var html = __webpack_require__(1);
/**
* Sample code
* @type {number}
*/
var myVariable = 5;
var test = function(val) {
return val * val;
};
test(myVariable);
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = "<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Title</title></head><body><span>0.14.0</span> <span>_14:10:47_</span> <span>0.14.0__14:10:47_</span> <span>V:0.14.0 Date:_14:10:47_</span> <span>Version 0.14.0 , _14:10:47_</span> <span id=date>_14:10:47_</span></body></html>"
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(0);
/***/ })
/******/ ]);

Binary file not shown.

8483
demo/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -3,20 +3,29 @@
"version": "0.14.0",
"description": "This is an example how to use webpack-auto-inject-version plugin in webpack",
"scripts": {
"start": "webpack --config ./webpack.conf.js",
"start": "nodemon --watch ./webpack.conf.js --exec webpack -- --config ./webpack.conf.js",
"patch": "webpack --config ./webpack.conf.js --env.patch",
"minor": "webpack --config ./webpack.conf.js --env.minor",
"major": "webpack --config ./webpack.conf.js --env.major"
"major": "webpack --config ./webpack.conf.js --env.major",
"test": "./node_modules/.bin/jest --config tools/jest/config/jest-config.js --no-cache --runInBand"
},
"author": "Radoslaw Swiat",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-jest": "^23.6.0",
"chai": "^4.2.0",
"cheerio": "^1.0.0-rc.2",
"clean-webpack-plugin": "^0.1.19",
"compression-webpack-plugin": "^1.1.11",
"html-loader": "^0.4.5",
"html-minify-loader": "^1.1.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^23.6.0",
"nodemon": "^1.18.5",
"raw-loader": "^0.5.1",
"uglifyjs-webpack-plugin": "^1.2.3",
"webpack": "^2.3.3",
"webpack": "^2.7.0",
"webpack-auto-inject-version": "^0.5.10"
}
}

View File

@ -20,5 +20,6 @@
<span>
[AIV]Version {version} , {date}[/AIV]
</span>
<span id="date">[AIV]{date}[/AIV]</span>
</body>
</html>

View File

@ -0,0 +1,6 @@
const fs = require('fs');
const path = require('path');
export default function getDistFile(file) {
return fs.readFileSync(path.resolve(process.cwd(), 'dist', file), 'utf8');
}

View File

@ -0,0 +1,10 @@
const webpack = require('webpack');
export default function webpackCompile(webpackConfig, aivConfig) {
const compiler = webpack(webpackConfig(aivConfig));
return new Promise((resolve) => {
compiler.run(() => {
resolve();
});
});
}

55
demo/tests/test.spec.js Normal file
View File

@ -0,0 +1,55 @@
import webpackCompile from './helpers/webpack-compile';
import getDistFile from './helpers/get-dist-file';
import testWebpackConfigs from './webpack-configs';
import cheerio from 'cheerio';
describe('Inject by tag', () => {
// default inject by tag tests
describe('default', () => {
const config = {
SILENT: true,
componentsOptions: {
InjectByTag: {
dateFormat: '_HH:mm:ss_',
},
},
};
// container for webpack iterations
describe('Iterate webpack configs', async () => {
for (const [webpackConfName, webpackConfig] of testWebpackConfigs) {
describe(`webpack: ${webpackConfName}`, () => {
it('prepare', async () => {
await webpackCompile(webpackConfig, config);
});
it('Should not include any not parsed tags', async () => {
const distMainJS = getDistFile('js/main.js');
expect(distMainJS).to.not.include('[AIV]');
expect(distMainJS).to.not.include('[/AIV]');
});
it('Should properly parse date', () => {
const distMainJS = getDistFile('js/main.js');
const $ = cheerio.load(distMainJS);
const date = $('#date').text().trim();
expect(/^(_\d\d:\d\d:\d\d_)$/.test(date)).to.be.true;
});
if (webpackConfName === 'confHtml') {
it('HTML!?!?>!?', () => {
const distHtml = getDistFile('index.html');
expect(distHtml).to.not.include('[AIV]');
});
}
});
}
});
});
});

View File

@ -0,0 +1,58 @@
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// Require WebpackAutoInject from npm installed modules ( preferred )
// var WebpackAutoInject = require('webpack-auto-inject-version');
// Require WebpackAutoInject from dist - dev purpose only ( do not use the below line )
const WebpackAutoInject = require('../../../dist/WebpackAutoInjectVersion');
module.exports = (autoInjectConfig) => ({
watch: true,
entry: {
index: ['./src/main.js'],
},
resolve: {
extensions: ['.js', '.html'],
},
output: {
// filename: '[name]-bundle.js',
// path: path.resolve(process.cwd(), 'dist'),
// publicPath: '/', // Public path to 'dist' scope in production
filename: 'js/main.js?[chunkhash]',
path: path.resolve(process.cwd(), 'dist'),
chunkFilename: 'js/main.js?[chunkhash]',
},
module: {
loaders: [
{
test: /\.js$/,
include: [
path.resolve('src'),
],
},
{
test: /\.json$/,
loader: 'json-loader',
},
{
test: /\.txt$/,
loader: 'raw-loader',
},
{
test: /\.html$/,
loader: 'raw-loader!html-minify-loader',
},
],
},
plugins: [
new CleanWebpackPlugin(path.resolve(process.cwd(), 'dist')),
new WebpackAutoInject(autoInjectConfig),
// new CompressionPlugin({
// algorithm: 'gzip',
// }),
// new UglifyJsPlugin(),
],
});

View File

@ -0,0 +1,62 @@
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Require WebpackAutoInject from npm installed modules ( preferred )
// var WebpackAutoInject = require('webpack-auto-inject-version');
// Require WebpackAutoInject from dist - dev purpose only ( do not use the below line )
const WebpackAutoInject = require('../../../dist/WebpackAutoInjectVersion');
module.exports = (autoInjectConfig) => ({
watch: true,
entry: {
index: ['./src/main.js'],
},
resolve: {
extensions: ['.js', '.html'],
},
output: {
// filename: '[name]-bundle.js',
// path: path.resolve(process.cwd(), 'dist'),
// publicPath: '/', // Public path to 'dist' scope in production
filename: 'js/main.js?[chunkhash]',
path: path.resolve(process.cwd(), 'dist'),
chunkFilename: 'js/main.js?[chunkhash]',
},
module: {
loaders: [
{
test: /\.js$/,
include: [
path.resolve('src'),
],
},
{
test: /\.json$/,
loader: 'json-loader',
},
{
test: /\.txt$/,
loader: 'raw-loader',
},
{
test: /\.html$/,
loader: 'raw-loader!html-minify-loader',
},
],
},
plugins: [
new CleanWebpackPlugin(path.resolve(process.cwd(), 'dist')),
new WebpackAutoInject(autoInjectConfig),
// new CompressionPlugin({
// algorithm: 'gzip',
// }),
// new UglifyJsPlugin(),
new HtmlWebpackPlugin({
template: path.resolve('src', 'index.html'),
}),
],
});

View File

@ -0,0 +1,58 @@
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// Require WebpackAutoInject from npm installed modules ( preferred )
// var WebpackAutoInject = require('webpack-auto-inject-version');
// Require WebpackAutoInject from dist - dev purpose only ( do not use the below line )
const WebpackAutoInject = require('../../../dist/WebpackAutoInjectVersion');
module.exports = (autoInjectConfig) => ({
watch: true,
entry: {
index: ['./src/main.js'],
},
resolve: {
extensions: ['.js', '.html'],
},
output: {
// filename: '[name]-bundle.js',
// path: path.resolve(process.cwd(), 'dist'),
// publicPath: '/', // Public path to 'dist' scope in production
filename: 'js/main.js?[chunkhash]',
path: path.resolve(process.cwd(), 'dist'),
chunkFilename: 'js/main.js?[chunkhash]',
},
module: {
loaders: [
{
test: /\.js$/,
include: [
path.resolve('src'),
],
},
{
test: /\.json$/,
loader: 'json-loader',
},
{
test: /\.txt$/,
loader: 'raw-loader',
},
{
test: /\.html$/,
loader: 'raw-loader!html-minify-loader',
},
],
},
plugins: [
new CleanWebpackPlugin(path.resolve(process.cwd(), 'dist')),
new WebpackAutoInject(autoInjectConfig),
new CompressionPlugin({
algorithm: 'gzip',
}),
new UglifyJsPlugin(),
],
});

View File

@ -0,0 +1,9 @@
import confDefault from './conf-default';
import confUglify from './conf-uglify';
import confHtml from './conf-html';
export default [
// ['confUglify', confUglify],
// ['confDefault', confDefault],
['confHtml', confHtml],
];

View File

@ -0,0 +1,7 @@
const path = require('path')
module.exports = {
process (src, filename) {
return `module.exports = ${JSON.stringify(path.basename(filename))};`
}
}

View File

@ -0,0 +1,5 @@
const chai = require('chai');
global.expect = chai.expect;
global.jestExpect = global.expect;

View File

@ -0,0 +1,34 @@
module.exports = {
// root dir
// this is from all paths will be calculated,
// it also specify location of your .spec files!!
// @default '../src/'
rootDir: '../../../',
// should stop after error ?
// keep it off, or you won't see any console.logs!!
// @default: false
bail: false,
// verbose output
// @default: true
verbose: true,
// collect coverage
// @default: true
collectCoverage: false,
// ignored paths
modulePathIgnorePatterns: [
// '<rootDir>/something/',
],
// jest reporters
// define reports format
// @default: 'default' & 'json'
reporters: [
'default',
],
// testEnvironment: 'jsdom',
setupTestFrameworkScriptFile: '<rootDir>tools/jest/config/framework-config.js',
transform: {
'^.+.(js|jsx)$': 'babel-jest',
// '^.+.(css|scss)': '<rootDir>tools/unit-tests/jest/compilers/css-transform.js',
// '^(?!.*.(js|jsx|css|scss|json)$)': '<rootDir>tools/unit-tests/jest/compilers/file-transform.js'
},
};

View File

@ -2,6 +2,7 @@ const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
// Require WebpackAutoInject from npm installed modules ( preferred )
// var WebpackAutoInject = require('webpack-auto-inject-version');
@ -48,28 +49,37 @@ module.exports = {
],
},
plugins: [
new CleanWebpackPlugin(path.resolve(process.cwd(), 'dist')),
new WebpackAutoInject({
components: {
AutoIncreaseVersion: true,
InjectAsComment: true,
InjectByTag: true,
InjectAsComment: false,
},
componentsOptions: {
AutoIncreaseVersion: {
runInWatchMode: false, // it will increase version with every single build!
},
InjectAsComment: {
tag: 'Version: {version}, {date}',
},
InjectByTag: {
fileRegex: /\.+/,
dateFormat: 'h:MM:ss',
},
},
// components: {
// AutoIncreaseVersion: true,
// InjectAsComment: true,
// InjectByTag: true,
// },
// componentsOptions: {
// AutoIncreaseVersion: {
// runInWatchMode: false, // it will increase version with every single build!
// },
// InjectAsComment: {
// tag: 'Version: {version}, {date}',
// },
// InjectByTag: {
// fileRegex: /\.+/,
// dateFormat: 'h:MM:ss',
// },
// },
}),
new CompressionPlugin({
algorithm: 'gzip',
}),
new UglifyJsPlugin(),
// new CompressionPlugin({
// algorithm: 'gzip',
// }),
// new UglifyJsPlugin(),
],
};

6349
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -27,7 +27,7 @@
"eslint": "^2.7.0",
"eslint-config-airbnb": "^6.2.0",
"eslint-loader": "^1.5.0",
"eslint-plugin-babel": "^3.2.0",
"eslint-plugin-babel": "^3.3.0",
"eslint-plugin-filenames": "^1.2.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsdoc": "^3.5.0",