Skip to content

Commit 777491e

Browse files
evilebottnawievilebottnawi
authored
test: cache on webpack@5 (webpack-contrib#35)
1 parent 0dd3fa7 commit 777491e

File tree

4 files changed

+232
-92
lines changed

4 files changed

+232
-92
lines changed

‎test/CssMinimizerPlugin.test.js

+100-33
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
readAssets,
1717
readAsset,
1818
removeCache,
19-
normalizedSourceMap,
2019
} from './helpers';
2120

2221
describe('CssMinimizerPlugin', () => {
@@ -370,9 +369,7 @@ describe('CssMinimizerPlugin', () => {
370369

371370
// eslint-disable-next-line no-continue
372371
if (!/\.css.map/.test(file)) continue;
373-
expect(
374-
normalizedSourceMap(readAsset(file, compiler, stats))
375-
).toMatchSnapshot(file);
372+
expect(readAsset(file, compiler, stats)).toMatchSnapshot(file);
376373
}
377374
});
378375
});
@@ -484,17 +481,22 @@ describe('CssMinimizerPlugin', () => {
484481
}
485482
});
486483

487-
it('should work in watch mode', async () => {
484+
it('should work and use cache by default', async () => {
488485
const compiler = getCompiler({
489486
entry: {
490487
foo: `${__dirname}/fixtures/simple.js`,
491488
},
492-
plugins: [],
489+
plugins: [
490+
new MiniCssExtractPlugin({
491+
filename: '[name].css',
492+
chunkFilename: '[id].[name].css',
493+
}),
494+
],
493495
module: {
494496
rules: [
495497
{
496498
test: /.s?css$/i,
497-
use: ['css-loader'],
499+
use: [MiniCssExtractPlugin.loader, 'css-loader'],
498500
},
499501
{
500502
test: /simple-emit.js$/i,
@@ -517,9 +519,9 @@ describe('CssMinimizerPlugin', () => {
517519
Object.keys(stats.compilation.assets).filter(
518520
(assetName) => stats.compilation.assets[assetName].emitted
519521
).length
520-
).toBe(4);
522+
).toBe(5);
521523
} else {
522-
expect(stats.compilation.emittedAssets.size).toBe(4);
524+
expect(stats.compilation.emittedAssets.size).toBe(5);
523525
}
524526

525527
expect(readAssets(compiler, stats, '.css')).toMatchSnapshot('assets');
@@ -534,7 +536,7 @@ describe('CssMinimizerPlugin', () => {
534536
Object.keys(newStats.compilation.assets).filter(
535537
(assetName) => newStats.compilation.assets[assetName].emitted
536538
).length
537-
).toBe(0);
539+
).toBe(2);
538540
} else {
539541
expect(newStats.compilation.emittedAssets.size).toBe(0);
540542
}
@@ -547,17 +549,22 @@ describe('CssMinimizerPlugin', () => {
547549
});
548550
});
549551

550-
it('should work in watch mode when "cache" is "false"', async () => {
552+
it('should work and use cache when the "cache" option is "false"', async () => {
551553
const compiler = getCompiler({
552554
entry: {
553555
foo: `${__dirname}/fixtures/simple.js`,
554556
},
555-
plugins: [],
557+
plugins: [
558+
new MiniCssExtractPlugin({
559+
filename: '[name].css',
560+
chunkFilename: '[id].[name].css',
561+
}),
562+
],
556563
module: {
557564
rules: [
558565
{
559566
test: /.s?css$/i,
560-
use: ['css-loader'],
567+
use: [MiniCssExtractPlugin.loader, 'css-loader'],
561568
},
562569
{
563570
test: /simple-emit.js$/i,
@@ -571,9 +578,75 @@ describe('CssMinimizerPlugin', () => {
571578
},
572579
});
573580

574-
new CssMinimizerPlugin({
575-
cache: false,
576-
}).apply(compiler);
581+
new CssMinimizerPlugin({ cache: true }).apply(compiler);
582+
583+
const stats = await compile(compiler);
584+
585+
if (getCompiler.isWebpack4()) {
586+
expect(
587+
Object.keys(stats.compilation.assets).filter(
588+
(assetName) => stats.compilation.assets[assetName].emitted
589+
).length
590+
).toBe(5);
591+
} else {
592+
expect(stats.compilation.emittedAssets.size).toBe(5);
593+
}
594+
595+
expect(readAssets(compiler, stats, '.css')).toMatchSnapshot('assets');
596+
expect(getWarnings(stats)).toMatchSnapshot('errors');
597+
expect(getErrors(stats)).toMatchSnapshot('warnings');
598+
599+
await new Promise(async (resolve) => {
600+
const newStats = await compile(compiler);
601+
602+
if (getCompiler.isWebpack4()) {
603+
expect(
604+
Object.keys(newStats.compilation.assets).filter(
605+
(assetName) => newStats.compilation.assets[assetName].emitted
606+
).length
607+
).toBe(2);
608+
} else {
609+
expect(newStats.compilation.emittedAssets.size).toBe(0);
610+
}
611+
612+
expect(readAssets(compiler, newStats, '.css')).toMatchSnapshot('assets');
613+
expect(getWarnings(newStats)).toMatchSnapshot('errors');
614+
expect(getErrors(newStats)).toMatchSnapshot('warnings');
615+
616+
resolve();
617+
});
618+
});
619+
620+
it('should work and use cache when the "cache" option is "true"', async () => {
621+
const compiler = getCompiler({
622+
entry: {
623+
foo: `${__dirname}/fixtures/simple.js`,
624+
},
625+
plugins: [
626+
new MiniCssExtractPlugin({
627+
filename: '[name].css',
628+
chunkFilename: '[id].[name].css',
629+
}),
630+
],
631+
module: {
632+
rules: [
633+
{
634+
test: /.s?css$/i,
635+
use: [MiniCssExtractPlugin.loader, 'css-loader'],
636+
},
637+
{
638+
test: /simple-emit.js$/i,
639+
loader: require.resolve('./helpers/emitAssetLoader.js'),
640+
},
641+
{
642+
test: /simple-emit-2.js$/i,
643+
loader: require.resolve('./helpers/emitAssetLoader2.js'),
644+
},
645+
],
646+
},
647+
});
648+
649+
new CssMinimizerPlugin({ cache: true }).apply(compiler);
577650

578651
const stats = await compile(compiler);
579652

@@ -582,9 +655,9 @@ describe('CssMinimizerPlugin', () => {
582655
Object.keys(stats.compilation.assets).filter(
583656
(assetName) => stats.compilation.assets[assetName].emitted
584657
).length
585-
).toBe(4);
658+
).toBe(5);
586659
} else {
587-
expect(stats.compilation.emittedAssets.size).toBe(4);
660+
expect(stats.compilation.emittedAssets.size).toBe(5);
588661
}
589662

590663
expect(readAssets(compiler, stats, '.css')).toMatchSnapshot('assets');
@@ -599,7 +672,7 @@ describe('CssMinimizerPlugin', () => {
599672
Object.keys(newStats.compilation.assets).filter(
600673
(assetName) => newStats.compilation.assets[assetName].emitted
601674
).length
602-
).toBe(0);
675+
).toBe(2);
603676
} else {
604677
expect(newStats.compilation.emittedAssets.size).toBe(0);
605678
}
@@ -612,7 +685,7 @@ describe('CssMinimizerPlugin', () => {
612685
});
613686
});
614687

615-
it('should work with custom csso minifier', async () => {
688+
it('should work with "csso" minifier', async () => {
616689
const compiler = getCompiler({
617690
devtool: 'source-map',
618691
entry: {
@@ -662,18 +735,15 @@ describe('CssMinimizerPlugin', () => {
662735

663736
const stats = await compile(compiler);
664737

665-
const maps = readAssets(compiler, stats, '.css.map');
666-
667-
Object.keys(maps).forEach((assetKey) => {
668-
expect(normalizedSourceMap(maps[assetKey])).toMatchSnapshot(assetKey);
669-
});
670-
671738
expect(readAssets(compiler, stats, '.css')).toMatchSnapshot('assets');
739+
expect(readAssets(compiler, stats, '.css.map')).toMatchSnapshot(
740+
'source maps'
741+
);
672742
expect(getErrors(stats)).toMatchSnapshot('error');
673743
expect(getWarnings(stats)).toMatchSnapshot('warning');
674744
});
675745

676-
it('should work with custom clean-css minifier', async () => {
746+
it('should work with "clean-css" minifier', async () => {
677747
const compiler = getCompiler({
678748
devtool: 'source-map',
679749
entry: {
@@ -704,13 +774,10 @@ describe('CssMinimizerPlugin', () => {
704774

705775
const stats = await compile(compiler);
706776

707-
const maps = readAssets(compiler, stats, '.css.map');
708-
709-
Object.keys(maps).forEach((assetKey) => {
710-
expect(normalizedSourceMap(maps[assetKey])).toMatchSnapshot(assetKey);
711-
});
712-
713777
expect(readAssets(compiler, stats, '.css')).toMatchSnapshot('assets');
778+
expect(readAssets(compiler, stats, '.css.map')).toMatchSnapshot(
779+
'source maps'
780+
);
714781
expect(getErrors(stats)).toMatchSnapshot('error');
715782
expect(getWarnings(stats)).toMatchSnapshot('warning');
716783
});

‎test/__snapshots__/CssMinimizerPlugin.test.js.snap.webpack4

+65-29
Original file line numberDiff line numberDiff line change
@@ -78,92 +78,128 @@ exports[`CssMinimizerPlugin should work and show minimized assets in stats: erro
7878

7979
exports[`CssMinimizerPlugin should work and show minimized assets in stats: warnings 1`] = `Array []`;
8080

81-
exports[`CssMinimizerPlugin should work in watch mode when "cache" is "false": assets 1`] = `
81+
exports[`CssMinimizerPlugin should work and use cache by default: assets 1`] = `
8282
Object {
83+
"foo.css": "body{color:red}a{color:#00f}",
8384
"style-2.css": "a{color:coral}",
8485
"style.css": "a{color:red}",
8586
}
8687
`;
8788

88-
exports[`CssMinimizerPlugin should work in watch mode when "cache" is "false": assets 2`] = `
89+
exports[`CssMinimizerPlugin should work and use cache by default: assets 2`] = `
8990
Object {
91+
"foo.css": "body{color:red}a{color:#00f}",
9092
"style-2.css": "a{color:coral}",
9193
"style.css": "a{color:red}",
9294
}
9395
`;
9496

95-
exports[`CssMinimizerPlugin should work in watch mode when "cache" is "false": errors 1`] = `Array []`;
97+
exports[`CssMinimizerPlugin should work and use cache by default: errors 1`] = `Array []`;
9698

97-
exports[`CssMinimizerPlugin should work in watch mode when "cache" is "false": errors 2`] = `Array []`;
99+
exports[`CssMinimizerPlugin should work and use cache by default: errors 2`] = `Array []`;
98100

99-
exports[`CssMinimizerPlugin should work in watch mode when "cache" is "false": warnings 1`] = `Array []`;
101+
exports[`CssMinimizerPlugin should work and use cache by default: warnings 1`] = `Array []`;
100102

101-
exports[`CssMinimizerPlugin should work in watch mode when "cache" is "false": warnings 2`] = `Array []`;
103+
exports[`CssMinimizerPlugin should work and use cache by default: warnings 2`] = `Array []`;
102104

103-
exports[`CssMinimizerPlugin should work in watch mode: assets 1`] = `
105+
exports[`CssMinimizerPlugin should work and use cache when the "cache" option is "false": assets 1`] = `
104106
Object {
107+
"foo.css": "body{color:red}a{color:#00f}",
105108
"style-2.css": "a{color:coral}",
106109
"style.css": "a{color:red}",
107110
}
108111
`;
109112

110-
exports[`CssMinimizerPlugin should work in watch mode: assets 2`] = `
113+
exports[`CssMinimizerPlugin should work and use cache when the "cache" option is "false": assets 2`] = `
111114
Object {
115+
"foo.css": "body{color:red}a{color:#00f}",
112116
"style-2.css": "a{color:coral}",
113117
"style.css": "a{color:red}",
114118
}
115119
`;
116120

117-
exports[`CssMinimizerPlugin should work in watch mode: errors 1`] = `Array []`;
118-
119-
exports[`CssMinimizerPlugin should work in watch mode: errors 2`] = `Array []`;
121+
exports[`CssMinimizerPlugin should work and use cache when the "cache" option is "false": errors 1`] = `Array []`;
120122

121-
exports[`CssMinimizerPlugin should work in watch mode: warnings 1`] = `Array []`;
123+
exports[`CssMinimizerPlugin should work and use cache when the "cache" option is "false": errors 2`] = `Array []`;
122124

123-
exports[`CssMinimizerPlugin should work in watch mode: warnings 2`] = `Array []`;
125+
exports[`CssMinimizerPlugin should work and use cache when the "cache" option is "false": warnings 1`] = `Array []`;
124126

125-
exports[`CssMinimizerPlugin should work with assets using querystring: entry.css.map?v=test 1`] = `"{\\"version\\":3,\\"sources\\": [replaced for tests], \\"names\\":[],\\"mappings\\":\\"AAAA,KACE,SACF,CACA,EACE,UACF\\",\\"file\\":\\"entry.css?v=test\\",\\"sourcesContent\\":[\\"body {\\\\n color: red;\\\\n}\\\\na {\\\\n color: blue;\\\\n}\\"],\\"sourceRoot\\":\\"\\"}"`;
127+
exports[`CssMinimizerPlugin should work and use cache when the "cache" option is "false": warnings 2`] = `Array []`;
126128

127-
exports[`CssMinimizerPlugin should work with assets using querystring: entry.css?v=test 1`] = `
128-
"body{color:red}a{color:#00f}
129-
/*# sourceMappingURL=entry.css.map?v=test*/"
129+
exports[`CssMinimizerPlugin should work and use cache when the "cache" option is "true": assets 1`] = `
130+
Object {
131+
"foo.css": "body{color:red}a{color:#00f}",
132+
"style-2.css": "a{color:coral}",
133+
"style.css": "a{color:red}",
134+
}
130135
`;
131136

132-
exports[`CssMinimizerPlugin should work with child compilation: assets 1`] = `
137+
exports[`CssMinimizerPlugin should work and use cache when the "cache" option is "true": assets 2`] = `
133138
Object {
134-
"entry.css": ".entry{text-align:center}",
139+
"foo.css": "body{color:red}a{color:#00f}",
140+
"style-2.css": "a{color:coral}",
141+
"style.css": "a{color:red}",
135142
}
136143
`;
137144

138-
exports[`CssMinimizerPlugin should work with child compilation: errors 1`] = `Array []`;
145+
exports[`CssMinimizerPlugin should work and use cache when the "cache" option is "true": errors 1`] = `Array []`;
139146

140-
exports[`CssMinimizerPlugin should work with child compilation: warnings 1`] = `Array []`;
147+
exports[`CssMinimizerPlugin should work and use cache when the "cache" option is "true": errors 2`] = `Array []`;
148+
149+
exports[`CssMinimizerPlugin should work and use cache when the "cache" option is "true": warnings 1`] = `Array []`;
150+
151+
exports[`CssMinimizerPlugin should work and use cache when the "cache" option is "true": warnings 2`] = `Array []`;
141152

142-
exports[`CssMinimizerPlugin should work with custom clean-css minifier: assets 1`] = `
153+
exports[`CssMinimizerPlugin should work with "clean-css" minifier: assets 1`] = `
143154
Object {
144155
"foo.css": "body{color:red}a{color:#00f}
145156
/*# sourceMappingURL=foo.css.map*/",
146157
}
147158
`;
148159

149-
exports[`CssMinimizerPlugin should work with custom clean-css minifier: error 1`] = `Array []`;
160+
exports[`CssMinimizerPlugin should work with "clean-css" minifier: error 1`] = `Array []`;
150161

151-
exports[`CssMinimizerPlugin should work with custom clean-css minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\": [replaced for tests], \\"names\\":[],\\"mappings\\":\\"AAAA,KACE,MAAO,IAET,EACE,MAAO\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n color: red;\\\\n}\\\\na {\\\\n color: blue;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}"`;
162+
exports[`CssMinimizerPlugin should work with "clean-css" minifier: source maps 1`] = `
163+
Object {
164+
"foo.css.map": "{\\"version\\":3,\\"sources\\":[\\"webpack:///foo.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,KACE,MAAO,IAET,EACE,MAAO\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n color: red;\\\\n}\\\\na {\\\\n color: blue;\\\\n}\\\\n\\"],\\"sourceRoot\\":\\"\\"}",
165+
}
166+
`;
152167

153-
exports[`CssMinimizerPlugin should work with custom clean-css minifier: warning 1`] = `Array []`;
168+
exports[`CssMinimizerPlugin should work with "clean-css" minifier: warning 1`] = `Array []`;
154169

155-
exports[`CssMinimizerPlugin should work with custom csso minifier: assets 1`] = `
170+
exports[`CssMinimizerPlugin should work with "csso" minifier: assets 1`] = `
156171
Object {
157172
"foo.css": "body{font-weight:700;color:red}body a{text-align:center}
158173
/*# sourceMappingURL=foo.css.map*/",
159174
}
160175
`;
161176

162-
exports[`CssMinimizerPlugin should work with custom csso minifier: error 1`] = `Array []`;
177+
exports[`CssMinimizerPlugin should work with "csso" minifier: error 1`] = `Array []`;
178+
179+
exports[`CssMinimizerPlugin should work with "csso" minifier: source maps 1`] = `
180+
Object {
181+
"foo.css.map": "{\\"version\\":3,\\"sources\\":[\\"webpack:///sourcemap/bar.scss\\",\\"webpack:///sourcemap/foo.scss\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,I,CACE,e,CCEA,S,CADF,M,CAGI,iB\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"sourceRoot\\":\\"\\"}",
182+
}
183+
`;
184+
185+
exports[`CssMinimizerPlugin should work with "csso" minifier: warning 1`] = `Array []`;
186+
187+
exports[`CssMinimizerPlugin should work with assets using querystring: entry.css.map?v=test 1`] = `"{\\"version\\":3,\\"sources\\":[\\"webpack:///foo.css\\"],\\"names\\":[],\\"mappings\\":\\"AAAA,KACE,SACF,CACA,EACE,UACF\\",\\"file\\":\\"entry.css?v=test\\",\\"sourcesContent\\":[\\"body {\\\\n color: red;\\\\n}\\\\na {\\\\n color: blue;\\\\n}\\"],\\"sourceRoot\\":\\"\\"}"`;
188+
189+
exports[`CssMinimizerPlugin should work with assets using querystring: entry.css?v=test 1`] = `
190+
"body{color:red}a{color:#00f}
191+
/*# sourceMappingURL=entry.css.map?v=test*/"
192+
`;
193+
194+
exports[`CssMinimizerPlugin should work with child compilation: assets 1`] = `
195+
Object {
196+
"entry.css": ".entry{text-align:center}",
197+
}
198+
`;
163199

164-
exports[`CssMinimizerPlugin should work with custom csso minifier: foo.css.map 1`] = `"{\\"version\\":3,\\"sources\\": [replaced for tests], \\"names\\":[],\\"mappings\\":\\"AAAA,I,CACE,e,CCEA,S,CADF,M,CAGI,iB\\",\\"file\\":\\"foo.css\\",\\"sourcesContent\\":[\\"body {\\\\n font-weight: bold;\\\\n}\\",\\"@import 'bar';\\\\n\\\\nbody {\\\\n color: red;\\\\n a {\\\\n text-align: center;\\\\n }\\\\n}\\"],\\"sourceRoot\\":\\"\\"}"`;
200+
exports[`CssMinimizerPlugin should work with child compilation: errors 1`] = `Array []`;
165201

166-
exports[`CssMinimizerPlugin should work with custom csso minifier: warning 1`] = `Array []`;
202+
exports[`CssMinimizerPlugin should work with child compilation: warnings 1`] = `Array []`;
167203

168204
exports[`CssMinimizerPlugin should write stdout and stderr of workers to stdout and stderr of main process in parallel mode: assets 1`] = `
169205
Object {

0 commit comments

Comments
 (0)