Skip to content

Commit

Permalink
attempt to fix tests for webpack3
Browse files Browse the repository at this point in the history 
mini-css-extract-plugin does not work AT ALL with webpack3. The old
configuration for extract-text-plugin should work, but I'm missing
something, because the webpack build never completes, and just hangs.
I've tested in an actual webpack3 project and verified it works, so
there's something in my test setup, not the project code itself. Will
eventually fix, but I don't want to hold up an actual fix to fix a
test...
  • Loading branch information
@swimmadude66
swimmadude66 committed Oct 18, 2021
1 parent 1fe41c4 commit f73204b
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 72 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/build.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ jobs:
strategy:
matrix:
webpack: [4]
html-webpack: [4, 3]
html-webpack: [3, 4]
include:
- webpack: 5
html-webpack: 5
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "html-webpack-link-type-plugin",
"version": "1.1.0",
"version": "1.1.1",
"description": "a plugin for html-webpack-plugin to allow for mimetype tagging of injected links",
"main": "dist/plugin.js",
"scripts": {
Expand All @@ -23,10 +23,12 @@
"@types/node": "12.19.15",
"chai": "4.2.0",
"css-loader": "5.0.1",
"extract-text-webpack-plugin": "3.0.2",
"html-webpack-plugin": ">=3.2.0",
"mini-css-extract-plugin": "1.3.5",
"mocha": "8.2.1",
"rimraf": "3.0.2",
"style-loader": "3.3.0",
"ts-node": "9.1.1",
"typescript": "4.1.3",
"webpack": ">=3.0.0"
Expand Down
171 changes: 101 additions & 70 deletions spec/index.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,66 @@ import {expect} from 'chai';
import * as webpack from 'webpack';
import * as HtmlWebpackPlugin from 'html-webpack-plugin';
import * as rimraf from 'rimraf';
import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
import {HtmlWebpackLinkTypePlugin} from '../src/plugin';

const OUTPUT_DIR = join(__dirname, './test_dist');

const webpackPackageVersion = process.env.npm_package_devDependencies_webpack.replace(/[^0-9.]/g, '')
const htmlPluginPackageVersion = process.env.npm_package_devDependencies_html_webpack_plugin.replace(/[^0-9.]/g, '')

const webpackVersion = webpack.version ?? webpackPackageVersion
const htmlPluginVersion = HtmlWebpackPlugin.version ?? htmlPluginPackageVersion

console.log('\nWEBPACK VERSION', webpackVersion,'\n');
console.log('\nHTML-WEBPACK_PLUGIN VERSION', htmlPluginVersion,'\n');

let cssRule;
let cssPlugin;
let cssPluginOpts;
let addMode = true;

if (/^\s*[3]/.test(webpackVersion)) {
// use extractTextWebpackPlugin
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
cssRule = ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
});
cssPlugin = ExtractTextWebpackPlugin;
cssPluginOpts = '[name].css'
addMode = false;
} else {
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
cssRule = [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
];
cssPlugin = MiniCssExtractPlugin;
cssPluginOpts = {
filename: '[name].css'
};
}

const HtmlWebpackPluginOptions: HtmlWebpackPlugin.Options = {
filename: 'index.html',
hash: false,
inject: 'body',
inject: true,
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
useShortDoctype: true
},
showErrors: false,
showErrors: true,
template: join(__dirname, './test_data/index.html'),
};


const webpackDevOptions: webpack.Configuration = {
mode: 'development',
entry: {
app: join(__dirname, './test_data/entry.js'),
styles: join(__dirname, './test_data/entry.css'),
Expand All @@ -36,122 +75,114 @@ const webpackDevOptions: webpack.Configuration = {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
]
use: cssRule
}
]
},
};

const webpackProdOptions: webpack.Configuration = {
...webpackDevOptions,
mode: 'production',
...webpackDevOptions
};

if (addMode) {
webpackDevOptions.mode = 'development'
webpackProdOptions.mode = 'production'
}

function testAutoAssign(err) {
if (err) {
console.error(err)
}
expect(!!err).to.be.false;
const htmlFile = join(OUTPUT_DIR, './index.html');
const htmlContents = readFileSync(htmlFile).toString('utf8');
expect(!!htmlContents).to.be.true;
expect(/href="styles\.css"[^>]*?type="text\/css"/i.test(htmlContents)).to.be.true;
expect(/src="app\.js"/i.test(htmlContents)).to.be.true;
expect(!!htmlContents, 'Missing HTML contents').to.be.true;
expect(/href="styles\.css"[^>]*?type="text\/css"/i.test(htmlContents), 'Missing labeled styles output').to.be.true;
expect(/src="app\.js"/i.test(htmlContents), 'No app.js file appended to html').to.be.true;
}


function testTypeOverride(err) {
if (err) {
console.error(err)
}
expect(!!err).to.be.false;
const htmlFile = join(OUTPUT_DIR, './index.html');
const htmlContents = readFileSync(htmlFile).toString();
expect(!!htmlContents).to.be.true;
expect(/href="styles\.css"[^>]*?type="testtype"/i.test(htmlContents)).to.be.true;
expect(/src="app\.js"/i.test(htmlContents)).to.be.true;
expect(!!htmlContents, 'Missing HTML contents!').to.be.true;
expect(/href="styles\.css"[^>]*?type="testtype"/i.test(htmlContents), 'Incorrect type applied or type not found').to.be.true;
expect(/src="app\.js"/i.test(htmlContents), 'No app.js file appended to html').to.be.true;
}

console.log('\nWEBPACK VERSION', webpack.version,'\n');
console.log('\nHTML-WEBPACK_PLUGIN VERSION', HtmlWebpackPlugin.version,'\n');

describe('HtmlWebpackLinkTypePlugin Development Mode', () => {

afterEach((done) => {
rimraf(OUTPUT_DIR, done);
});

it('should auto assign types to css and js', function (done) {
it('should auto assign types to css and js', (done) => {
webpack({ ...webpackDevOptions,
plugins: [
new cssPlugin(cssPluginOpts),
new HtmlWebpackPlugin(HtmlWebpackPluginOptions),
new HtmlWebpackLinkTypePlugin(),
new MiniCssExtractPlugin ({
filename: '[name].css'
}),
]
}, (err) => {
testAutoAssign( err );
done();
done(err);
});
});
})

it('should allow type overrides', function (done) {
it('should allow type overrides', (done) => {
webpack({
...webpackDevOptions,
plugins: [
new HtmlWebpackPlugin(HtmlWebpackPluginOptions),
new HtmlWebpackLinkTypePlugin({
'*.css': 'testtype'
}),
new MiniCssExtractPlugin ({
filename: '[name].css'
}),
new cssPlugin(cssPluginOpts),
]
}, (err) => {
testTypeOverride(err);
done();
done(err);
});
});
});


describe('HtmlWebpackLinkTypePlugin Production Mode', () => {

afterEach((done) => {
rimraf(OUTPUT_DIR, done);
});

it('should auto assign types to css and js', function (done) {
webpack({ ...webpackProdOptions,
plugins: [
new HtmlWebpackPlugin(HtmlWebpackPluginOptions),
new HtmlWebpackLinkTypePlugin(),
new MiniCssExtractPlugin ({
filename: '[name].css'
}),
]
}, (err) => {
testAutoAssign(err);
done();
if (addMode) {
describe('HtmlWebpackLinkTypePlugin Production Mode', () => {
afterEach((done) => {
rimraf(OUTPUT_DIR, done);
});
});

it('should allow type overrides', function (done) {
webpack({ ...webpackProdOptions,
plugins: [
new HtmlWebpackPlugin(HtmlWebpackPluginOptions),
new HtmlWebpackLinkTypePlugin({
'*.css': 'testtype'
}),
new MiniCssExtractPlugin ({
filename: '[name].css'
}),
]
}, (err) => {
testTypeOverride(err);
done();

it('should auto assign types to css and js', (done) => {
webpack({ ...webpackProdOptions,
plugins: [
new HtmlWebpackPlugin(HtmlWebpackPluginOptions),
new HtmlWebpackLinkTypePlugin(),
new cssPlugin(cssPluginOpts),
]
}, (err) => {
testAutoAssign(err);
done(err);
});
});

it('should allow type overrides', (done) => {
webpack({ ...webpackProdOptions,
plugins: [
new HtmlWebpackPlugin(HtmlWebpackPluginOptions),
new HtmlWebpackLinkTypePlugin({
'*.css': 'testtype'
}),
new cssPlugin(cssPluginOpts),
]
}, (err) => {
testTypeOverride(err);
done(err);
});
});
});
});
}

0 comments on commit f73204b

Please sign in to comment.