Skip to content

Commit

Permalink
test: add tests for load-scripts feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@forivall
forivall committed Jan 20, 2022
1 parent b5ec439 commit e83ca9e
Show file tree
Hide file tree
Showing 3 changed files with 324 additions and 0 deletions.
81 changes: 81 additions & 0 deletions test/load-scripts-html-webpack-plugin.test.js
View file
@@ -0,0 +1,81 @@
const path = require('path');
const fs = require('fs-extra');
const t = require('tap');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const DynamicCdnWebpackPlugin = require('..').default;

const runWebpack = require('./helpers/run-webpack.js');
const cleanDir = require('./helpers/clean-dir.js');

t.test('html-webpack-plugin-load-scripts', async t => {
await cleanDir(path.resolve(__dirname, './fixtures/output/html-webpack-plugin-load-scripts'));

await runWebpack({
context: path.resolve(__dirname, './fixtures/app'),

output: {
publicPath: '/',
path: path.resolve(__dirname, './fixtures/output/html-webpack-plugin-load-scripts'),
},

entry: {
app: './single.js',
},

plugins: [
// prettier-align
new HtmlWebpackPlugin(),
new DynamicCdnWebpackPlugin({ loadScripts: true }),
],
});

const indexFile = await fs.readFile(path.resolve(__dirname, './fixtures/output/html-webpack-plugin-load-scripts/index.html'), {
encoding: 'utf-8',
});

t.ok(indexFile.includes('src="/app.js"'));
t.ok(!indexFile.includes('src="https://unpkg.com/react@15.6.1/dist/react.js"'));

const output = await fs.readFile(path.resolve(__dirname, './fixtures/output/html-webpack-plugin-load-scripts/app.js'));

// NOTE: not inside t.notOk to prevent ava to display whole file in console
const doesIncludeReact = output.includes('PureComponent');
t.notOk(doesIncludeReact);
});

t.test('html-webpack-plugin-and-load-scripts', async t => {
await cleanDir(path.resolve(__dirname, './fixtures/output/html-webpack-plugin-and-load-scripts'));

await runWebpack({
context: path.resolve(__dirname, './fixtures/app'),

output: {
publicPath: '/',
path: path.resolve(__dirname, './fixtures/output/html-webpack-plugin-and-load-scripts'),
},

entry: {
app: './single.js',
},

plugins: [
// prettier-align
new HtmlWebpackPlugin(),
new DynamicCdnWebpackPlugin({ loadScripts: true, html: true }),
],
});

const indexFile = await fs.readFile(path.resolve(__dirname, './fixtures/output/html-webpack-plugin-and-load-scripts/index.html'), {
encoding: 'utf-8',
});

t.ok(indexFile.includes('src="/app.js"'));
t.ok(indexFile.includes('src="https://unpkg.com/react@15.6.1/dist/react.js"'));

const output = await fs.readFile(path.resolve(__dirname, './fixtures/output/html-webpack-plugin-and-load-scripts/app.js'));

// NOTE: not inside t.notOk to prevent ava to display whole file in console
const doesIncludeReact = output.includes('PureComponent');
t.notOk(doesIncludeReact);
});
207 changes: 207 additions & 0 deletions test/load-scripts.test.js
View file
@@ -0,0 +1,207 @@
const path = require('path');
const fs = require('fs-extra');
const t = require('tap');

const DynamicCdnWebpackPlugin = require('../lib').default;

const runWebpack = require('./helpers/run-webpack.js');
const cleanDir = require('./helpers/clean-dir.js');

function getChunkFiles(stats) {
return Array.from(stats.compilation.chunks).reduce((files, x) => files.concat(Array.from(x.files)), []);
}

t.test('loadScripts', async t => {
await cleanDir(path.resolve(__dirname, './fixtures/output/loadScripts'));

const stats = await runWebpack({
context: path.resolve(__dirname, './fixtures/app'),

output: {
publicPath: '',
path: path.resolve(__dirname, './fixtures/output/loadScripts'),
},

entry: {
app: './single.js',
},

plugins: [new DynamicCdnWebpackPlugin({ loadScripts: true })],
});

const files = getChunkFiles(stats);
t.equal(files.length, 2);
t.ok(files.includes('app.js'));
t.ok(files.includes('https://unpkg.com/react@15.6.1/dist/react.js'));

const output = await fs.readFile(path.resolve(__dirname, './fixtures/output/loadScripts/app.js'));

// NOTE: not inside t.notOk to prevent ava to display whole file in console
const doesIncludeReact = output.includes('THIS IS REACT!');
t.notOk(doesIncludeReact);

const doesRequireReactCheck = output.includes('if(typeof React !== "undefined") return resolve()');
t.ok(doesRequireReactCheck);
const doesRequireReactLoad = output.includes('__webpack_require__.l("https://unpkg.com/react@15.6.1/dist/react.js"');
t.ok(doesRequireReactLoad);
const doesRequireReactResolve = output.includes('}).then(() => (React))');
t.ok(doesRequireReactResolve);
});

t.test('loadScripts using production version', async t => {
await cleanDir(path.resolve(__dirname, './fixtures/output/loadScripts-env-prod'));

const stats = await runWebpack({
context: path.resolve(__dirname, './fixtures/app'),

output: {
publicPath: '',
path: path.resolve(__dirname, './fixtures/output/loadScripts-env-prod'),
},

entry: {
app: './single.js',
},

plugins: [
new DynamicCdnWebpackPlugin({
env: 'production',
loadScripts: true,
}),
],
});

const files = getChunkFiles(stats);
t.equal(files.length, 2);
t.ok(files.includes('app.js'));
t.ok(files.includes('https://unpkg.com/react@15.6.1/dist/react.min.js'));

const output = await fs.readFile(path.resolve(__dirname, './fixtures/output/loadScripts-node-env-prod/app.js'));

// NOTE: not inside t.notOk to prevent ava to display whole file in console
const doesIncludeReact = output.includes('THIS IS REACT!');
t.notOk(doesIncludeReact);
});

t.test('loadScripts with mode=production', async t => {
await cleanDir(path.resolve(__dirname, './fixtures/output/loadScripts-node-env-prod'));

const stats = await runWebpack({
mode: 'production',

context: path.resolve(__dirname, './fixtures/app'),

output: {
publicPath: '',
path: path.resolve(__dirname, './fixtures/output/loadScripts-node-env-prod'),
},

entry: {
app: './single.js',
},

plugins: [new DynamicCdnWebpackPlugin({ loadScripts: true })],
});

const files = getChunkFiles(stats);
t.equal(files.length, 2);
t.ok(files.includes('app.js'));
t.ok(files.includes('https://unpkg.com/react@15.6.1/dist/react.min.js'));

const output = await fs.readFile(path.resolve(__dirname, './fixtures/output/loadScripts-node-env-prod/app.js'));

// NOTE: not inside t.notOk to prevent ava to display whole file in console
const doesIncludeReact = output.includes('THIS IS REACT!');
t.notOk(doesIncludeReact);
});

t.test('loadScripts with mode=none', async t => {
await cleanDir(path.resolve(__dirname, './fixtures/output/loadScripts-mode-none'));

const stats = await runWebpack({
mode: 'none',

context: path.resolve(__dirname, './fixtures/app'),

output: {
publicPath: '',
path: path.resolve(__dirname, './fixtures/output/loadScripts-mode-none'),
},

entry: {
app: './single.js',
},

plugins: [new DynamicCdnWebpackPlugin({ loadScripts: true })],
});

const files = getChunkFiles(stats);
t.equal(files.length, 2);
t.ok(files.includes('app.js'));
t.ok(files.includes('https://unpkg.com/react@15.6.1/dist/react.js'));

const output = await fs.readFile(path.resolve(__dirname, './fixtures/output/loadScripts-mode-none/app.js'));

// NOTE: not inside t.notOk to prevent ava to display whole file in console
const doesIncludeReact = output.includes('THIS IS REACT!');
t.notOk(doesIncludeReact);
});

t.test('loadScripts load module without export', async t => {
await cleanDir(path.resolve(__dirname, './fixtures/output/loadScripts-no-export'));

const stats = await runWebpack({
context: path.resolve(__dirname, './fixtures/app'),

output: {
publicPath: '',
path: path.resolve(__dirname, './fixtures/output/loadScripts-no-export'),
},

entry: {
app: './no-export.js',
},

plugins: [new DynamicCdnWebpackPlugin({ loadScripts: true })],
});

const files = getChunkFiles(stats);
t.equal(files.length, 2);
t.ok(files.includes('app.js'));
t.ok(files.includes('https://unpkg.com/babel-polyfill@6.23.0/dist/polyfill.js'));
});

t.test('loadScripts async loading', async t => {
await cleanDir(path.resolve(__dirname, './fixtures/output/loadScripts-async'));

const stats = await runWebpack({
context: path.resolve(__dirname, './fixtures/app'),

output: {
publicPath: '',
path: path.resolve(__dirname, './fixtures/output/loadScripts-async'),
},

entry: {
app: './async.js',
},

plugins: [new DynamicCdnWebpackPlugin({ loadScripts: true })],
});

const files = getChunkFiles(stats);
t.ok(files.includes('app.js'));
t.ok(files.includes('https://unpkg.com/react@15.6.1/dist/react.js'));

const outputs = await Promise.all(
files
.filter(x => !x.startsWith('https://unpkg.com'))
.map(async file => {
return fs.readFile(path.resolve(__dirname, `./fixtures/output/loadScripts-async/${file}`));
})
);

// NOTE: not inside t.notOk to prevent ava to display whole file in console
const doesIncludeReact = outputs.some(output => output.includes('THIS IS REACT!'));
t.notOk(doesIncludeReact);
});
36 changes: 36 additions & 0 deletions test/no-html-webpack-plugin.test.js
View file
Expand Up @@ -43,3 +43,39 @@ t.test('no-html-webpack-plugin', async t => {
const doesIncludeReact = output.includes('PureComponent');
t.notOk(doesIncludeReact);
});

t.test('no-html-webpack-plugin-options', async t => {
await cleanDir(path.resolve(__dirname, './fixtures/output/no-html-webpack-plugin-options'));

await runWebpack({
context: path.resolve(__dirname, './fixtures/app'),

output: {
publicPath: '/',
path: path.resolve(__dirname, './fixtures/output/no-html-webpack-plugin-options'),
},

entry: {
app: './single.js',
},

plugins: [
// prettier-align
new HtmlWebpackPlugin(),
new DynamicCdnWebpackPlugin({ html: false }),
],
});

const indexFile = await fs.readFile(path.resolve(__dirname, './fixtures/output/no-html-webpack-plugin-options/index.html'), {
encoding: 'utf-8',
});

t.ok(indexFile.includes('src="/app.js"'));
t.ok(!indexFile.includes('src="https://unpkg.com/react@15.6.1/dist/react.js"'));

const output = await fs.readFile(path.resolve(__dirname, './fixtures/output/no-html-webpack-plugin-options/app.js'));

// NOTE: not inside t.notOk to prevent ava to display whole file in console
const doesIncludeReact = output.includes('PureComponent');
t.notOk(doesIncludeReact);
});

0 comments on commit e83ca9e

Please sign in to comment.