diff --git a/packages/rollup-plugin-html/package.json b/packages/rollup-plugin-html/package.json index a3a5807e5..a2de90a29 100644 --- a/packages/rollup-plugin-html/package.json +++ b/packages/rollup-plugin-html/package.json @@ -28,8 +28,8 @@ "demo:mpa": "rm -rf demo/dist && rollup -c demo/mpa/rollup.config.js --watch & npm run serve-demo", "demo:spa": "rm -rf demo/dist && rollup -c demo/spa/rollup.config.js --watch & npm run serve-demo", "serve-demo": "node ../dev-server/dist/bin.js --watch --root-dir demo/dist --app-index index.html --compatibility none --open", - "test:node": "mocha test/**/*.test.ts --require ts-node/register --reporter dot", - "test:watch": "mocha test/**/*.test.ts --require ts-node/register --watch --watch-files src,test" + "test:node": "node --experimental-strip-types --test --test-force-exit 'test/**/*.test.ts'", + "test:watch": "node --experimental-strip-types --test --test-force-exit --watch 'test/**/*.test.ts'" }, "files": [ "*.js", diff --git a/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts b/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts index b9f0aa45c..2c8f28a31 100644 --- a/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts +++ b/packages/rollup-plugin-html/test/rollup-plugin-html.test.ts @@ -1,7 +1,17 @@ -import { rollup, OutputChunk, OutputOptions, Plugin } from 'rollup'; -import { expect } from 'chai'; +import { rollup } from 'rollup'; +import type { OutputChunk, OutputOptions, Plugin } from 'rollup'; +import assert from 'node:assert/strict'; +import { describe, it, afterEach } from 'node:test'; + +function expectIncludes(actual: string, expected: string) { + if (!actual.includes(expected)) { + throw new Error( + `Expected substring not found.\n\nExpected:\n${expected}\n\nActual:\n${actual}`, + ); + } +} import path from 'path'; -import { rollupPluginHTML } from '../src/index.js'; +import { rollupPluginHTML } from '../dist/index.js'; import { html, css, @@ -66,21 +76,24 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(3); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 3); + assert.equal(Object.keys(assets).length, 1); - expect(chunks['entrypoint-a.js']).to.include(js`console.log('entrypoint-a.js');`); - expect(chunks['entrypoint-b.js']).to.include(js`console.log('entrypoint-b.js');`); + expectIncludes(chunks['entrypoint-a.js'], js`console.log('entrypoint-a.js');`); + expectIncludes(chunks['entrypoint-b.js'], js`console.log('entrypoint-b.js');`); - expect(assets['index.html']).to.equal(html` - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + `, + ); }); it('can build with html file as rollup input', async () => { @@ -123,21 +136,24 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(3); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 3); + assert.equal(Object.keys(assets).length, 1); - expect(chunks['entrypoint-a.js']).to.include(js`console.log('entrypoint-a.js');`); - expect(chunks['entrypoint-b.js']).to.include(js`console.log('entrypoint-b.js');`); + expectIncludes(chunks['entrypoint-a.js'], js`console.log('entrypoint-a.js');`); + expectIncludes(chunks['entrypoint-b.js'], js`console.log('entrypoint-b.js');`); - expect(assets['index.html']).to.equal(html` - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + `, + ); }); it('will retain attributes on script tags', async () => { @@ -180,21 +196,24 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(3); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 3); + assert.equal(Object.keys(assets).length, 1); - expect(chunks['entrypoint-a.js']).to.include(js`console.log('entrypoint-a.js');`); - expect(chunks['entrypoint-b.js']).to.include(js`console.log('entrypoint-b.js');`); + expectIncludes(chunks['entrypoint-a.js'], js`console.log('entrypoint-a.js');`); + expectIncludes(chunks['entrypoint-b.js'], js`console.log('entrypoint-b.js');`); - expect(assets['index.html']).to.equal(html` - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + `, + ); }); it('can build with pure html file as rollup input', async () => { @@ -217,17 +236,20 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); - expect(assets['index.html']).to.equal(html` - - - -

hello world

- - - `); + assert.equal( + assets['index.html'], + html` + + + +

hello world

+ + + `, + ); }); it('can build with multiple pure html inputs', async () => { @@ -262,26 +284,32 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(2); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 2); - expect(assets['index1.html']).to.equal(html` - - - -

hello world

- - - `); + assert.equal( + assets['index1.html'], + html` + + + +

hello world

+ + + `, + ); - expect(assets['index2.html']).to.equal(html` - - - -

hey there

- - - `); + assert.equal( + assets['index2.html'], + html` + + + +

hey there

+ + + `, + ); }); it('can build with html string as input', async () => { @@ -306,17 +334,20 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); }); it('resolves paths relative to virtual html filename', async () => { @@ -341,17 +372,20 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); - expect(assets['nested/index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['nested/index.html'], + html` + + + + + + + `, + ); }); it('can build with inline modules', async () => { @@ -376,21 +410,24 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); const hash = '16165cb387fc14ed1fe1749d05f19f7b'; - expect(chunks[`inline-module-${hash}.js`]).to.include(js`console.log('app.js');`); + expectIncludes(chunks[`inline-module-${hash}.js`], js`console.log('app.js');`); - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); }); it('resolves inline module imports relative to the HTML file', async () => { @@ -422,11 +459,11 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); const hash = 'b774aefb8bf002b291fd54d27694a34d'; - expect(chunks[`inline-module-${hash}.js`]).to.include(js`console.log('app.js');`); + expectIncludes(chunks[`inline-module-${hash}.js`], js`console.log('app.js');`); }); it('can build transforming final output', async () => { @@ -453,18 +490,21 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); - expect(assets['index.html']).to.equal(html` - - - -

Goodbye world

- - - - `); + assert.equal( + assets['index.html'], + html` + + + +

Goodbye world

+ + + + `, + ); }); it('can build with a public path', async () => { @@ -489,17 +529,20 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); }); it('can build with a public path with a file in a directory', async () => { @@ -525,17 +568,20 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); - expect(assets['nested/index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['nested/index.html'], + html` + + + + + + + `, + ); }); it('can build with multiple build outputs', async () => { @@ -579,28 +625,31 @@ describe('rollup-plugin-html', () => { const { chunks: chunksA, assets: assetsA } = await bundleA; const { chunks: chunksB, assets: assetsB } = await bundleB; - expect(Object.keys(chunksA)).to.have.lengthOf(1); - expect(Object.keys(assetsA)).to.have.lengthOf(0); - expect(Object.keys(chunksB)).to.have.lengthOf(1); - expect(Object.keys(assetsB)).to.have.lengthOf(1); + assert.equal(Object.keys(chunksA).length, 1); + assert.equal(Object.keys(assetsA).length, 0); + assert.equal(Object.keys(chunksB).length, 1); + assert.equal(Object.keys(assetsB).length, 1); - expect(chunksA['app.js']).to.include(js`console.log('app.js');`); - expect(chunksA['app.js']).to.include(js`console.log('module.js');`); - expect(chunksB['app.js']).to.include(js`console.log('app.js');`); - expect(chunksB['app.js']).to.include(js`console.log('module.js');`); + expectIncludes(chunksA['app.js'], js`console.log('app.js');`); + expectIncludes(chunksA['app.js'], js`console.log('module.js');`); + expectIncludes(chunksB['app.js'], js`console.log('app.js');`); + expectIncludes(chunksB['app.js'], js`console.log('module.js');`); - expect(assetsA['index.html']).to.not.exist; - expect(assetsB['index.html']).to.equal(html` - - - - - - - - `); + assert.equal(assetsA['index.html'], undefined); + assert.equal( + assetsB['index.html'], + html` + + + + + + + + `, + ); }); it('can build with index.html as input and an extra html file as output', async () => { @@ -631,28 +680,34 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(2); - expect(Object.keys(assets)).to.have.lengthOf(2); + assert.equal(Object.keys(chunks).length, 2); + assert.equal(Object.keys(assets).length, 2); - expect(chunks['app.js']).to.exist; + assert.ok(chunks['app.js']); - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); - expect(assets['foo.html']).to.equal(html` - - - -

foo.html

- - - `); + assert.equal( + assets['foo.html'], + html` + + + +

foo.html

+ + + `, + ); }); it('can build with multiple html inputs', async () => { @@ -711,42 +766,51 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(4); - expect(Object.keys(assets)).to.have.lengthOf(3); + assert.equal(Object.keys(chunks).length, 4); + assert.equal(Object.keys(assets).length, 3); - expect(chunks['entrypoint-a.js']).to.exist; - expect(chunks['entrypoint-b.js']).to.exist; - expect(chunks['entrypoint-c.js']).to.exist; + assert.ok(chunks['entrypoint-a.js']); + assert.ok(chunks['entrypoint-b.js']); + assert.ok(chunks['entrypoint-c.js']); - expect(assets['page-a.html']).to.equal(html` - - - -

Page A

- - - - `); + assert.equal( + assets['page-a.html'], + html` + + + +

Page A

+ + + + `, + ); - expect(assets['page-b.html']).to.equal(html` - - - -

Page B

- - - - `); + assert.equal( + assets['page-b.html'], + html` + + + +

Page B

+ + + + `, + ); - expect(assets['page-c.html']).to.equal(html` - - - -

Page C

- - - - `); + assert.equal( + assets['page-c.html'], + html` + + + +

Page C

+ + + + `, + ); }); it('can use a glob to build multiple pages', async () => { @@ -804,46 +868,55 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(4); - expect(Object.keys(assets)).to.have.lengthOf(3); + assert.equal(Object.keys(chunks).length, 4); + assert.equal(Object.keys(assets).length, 3); - expect(chunks['page-a.js']).to.exist; - expect(chunks['page-b.js']).to.exist; - expect(chunks['page-c.js']).to.exist; + assert.ok(chunks['page-a.js']); + assert.ok(chunks['page-b.js']); + assert.ok(chunks['page-c.js']); - expect(assets['page-a.html']).to.equal(html` - - - -

page-a.html

- - - - - `); + assert.equal( + assets['page-a.html'], + html` + + + +

page-a.html

+ + + + + `, + ); - expect(assets['page-b.html']).to.equal(html` - - - -

page-b.html

- - - - - `); + assert.equal( + assets['page-b.html'], + html` + + + +

page-b.html

+ + + + + `, + ); // TODO: investigate why shared.js is after page-c.js here but before in the others - expect(assets['page-c.html']).to.equal(html` - - - -

page-c.html

- - - - - `); + assert.equal( + assets['page-c.html'], + html` + + + +

page-c.html

+ + + + + `, + ); }); it('can exclude globs', async () => { @@ -865,10 +938,10 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); - expect(assets).to.have.keys(['index.html']); + assert.deepEqual(Object.keys(assets).sort(), ['index.html'].sort()); }); it('creates unique inline script names', async () => { @@ -898,42 +971,60 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(3); - expect(Object.keys(assets)).to.have.lengthOf(3); + assert.equal(Object.keys(chunks).length, 3); + assert.equal(Object.keys(assets).length, 3); - expect(chunks['inline-module-d463148d1d5869e52917a3b270db9e72.js']).to.exist; - expect(chunks['inline-module-b81da853430abdf130bcc7c4d0ade6d9.js']).to.exist; - expect(chunks['inline-module-170bb2146da66c440259138c7e0fea7e.js']).to.exist; + assert.ok(chunks['inline-module-d463148d1d5869e52917a3b270db9e72.js']); + assert.ok(chunks['inline-module-b81da853430abdf130bcc7c4d0ade6d9.js']); + assert.ok(chunks['inline-module-170bb2146da66c440259138c7e0fea7e.js']); - expect(assets['nestedA/indexA.html']).to.equal(html` - - - -

Page A

- - - - `); + assert.equal( + assets['nestedA/indexA.html'], + html` + + + +

Page A

+ + + + `, + ); - expect(assets['nestedB/indexB.html']).to.equal(html` - - - -

Page B

- - - - `); + assert.equal( + assets['nestedB/indexB.html'], + html` + + + +

Page B

+ + + + `, + ); - expect(assets['indexC.html']).to.equal(html` - - - -

Page C

- - - - `); + assert.equal( + assets['indexC.html'], + html` + + + +

Page C

+ + + + `, + ); }); it('deduplicates common modules', async () => { @@ -964,43 +1055,61 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(3); - - expect(chunks['inline-module-44281cf3dede62434e0dd368df08902f.js']).to.exist; + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 3); - expect(assets['a.html']).to.equal(html` - - - -

Page A

- - - - `); - - expect(assets['b.html']).to.equal(html` - - - -

Page B

- - - - `); + assert.ok(chunks['inline-module-44281cf3dede62434e0dd368df08902f.js']); - expect(assets['c.html']).to.equal(html` - - - -

Page C

- - - - `); - }); + assert.equal( + assets['a.html'], + html` + + + +

Page A

+ + + + `, + ); - it('outputs the hashed entrypoint name', async () => { + assert.equal( + assets['b.html'], + html` + + + +

Page B

+ + + + `, + ); + + assert.equal( + assets['c.html'], + html` + + + +

Page C

+ + + + `, + ); + }); + + it('outputs the hashed entrypoint name', async () => { const rootDir = createApp({ 'app.js': js` console.log('app.js'); @@ -1024,8 +1133,8 @@ describe('rollup-plugin-html', () => { entryFileNames: '[name]-[hash].js', }); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); const appChunk = output.find(f => // @ts-ignore @@ -1033,17 +1142,20 @@ describe('rollup-plugin-html', () => { ) as OutputChunk; // ensure it's actually hashed - expect(appChunk.fileName).to.not.equal('app.js'); + assert.notEqual(appChunk.fileName, 'app.js'); // get hashed name dynamically - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); }); it('outputs import path relative to the final output html', async () => { @@ -1068,17 +1180,20 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); - expect(assets['nested/index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['nested/index.html'], + html` + + + + + + + `, + ); }); it('can change HTML root directory', async () => { @@ -1103,17 +1218,20 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); - expect(assets['src/nested/index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['src/nested/index.html'], + html` + + + + + + + `, + ); }); it('can get the input with getInputs()', async () => { @@ -1145,9 +1263,9 @@ describe('rollup-plugin-html', () => { await rollup({ plugins: [pluginB] }); await rollup({ plugins: [pluginC] }); - expect(pluginA.api.getInputs()[0].name).to.equal('index.html'); - expect(pluginB.api.getInputs()[0].name).to.equal('my-page.html'); - expect(pluginC.api.getInputs()[0].name).to.equal('nested/my-other-page.html'); + assert.equal(pluginA.api.getInputs()[0].name, 'index.html'); + assert.equal(pluginB.api.getInputs()[0].name, 'my-page.html'); + assert.equal(pluginC.api.getInputs()[0].name, 'nested/my-other-page.html'); }); it('supports other plugins injecting a transform function', async () => { @@ -1209,22 +1327,25 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(3); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 3); + assert.equal(Object.keys(assets).length, 1); - expect(chunks['entrypoint-a.js']).to.include(js`console.log('entrypoint-a.js');`); - expect(chunks['entrypoint-b.js']).to.include(js`console.log('entrypoint-b.js');`); + expectIncludes(chunks['entrypoint-a.js'], js`console.log('entrypoint-a.js');`); + expectIncludes(chunks['entrypoint-b.js'], js`console.log('entrypoint-b.js');`); - expect(assets['index.html']).to.equal(html` - - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + `, + ); }); it('includes referenced assets in the bundle', async () => { @@ -1286,43 +1407,46 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(11); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 11); - expect(assets).to.have.keys([ + assert.deepEqual(Object.keys(assets).sort(), [ + 'assets/image-a-BCCvKrTe.svg', 'assets/image-a-XOCPHCrV.png', 'assets/image-b-BgQHKcRn.png', - 'assets/image-c-C4yLPiIL.png', - 'assets/image-a-BCCvKrTe.svg', 'assets/image-b-C4stzVZW.svg', + 'assets/image-c-C4yLPiIL.png', 'assets/image-c-DPeYetg3.svg', 'assets/styles-Bh7Pnjui.css', + 'assets/webmanifest-BkrOR1WG.json', 'assets/x-DDGg8O6h.css', 'assets/y-DJTrnPH3.css', - 'assets/webmanifest-BkrOR1WG.json', 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - - - - - - - -
- -
- - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + + + + + +
+ +
+ + + `, + ); }); it('[legacy] includes referenced assets in the bundle', async () => { @@ -1383,41 +1507,44 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(10); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 10); - expect(assets).to.have.keys([ + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/image-a.png', - 'assets/image-b.png', - 'assets/image-c-C4yLPiIL.png', 'assets/image-a.svg', 'assets/image-b-C4stzVZW.svg', + 'assets/image-b.png', + 'assets/image-c-C4yLPiIL.png', 'assets/styles-Bh7Pnjui.css', + 'assets/webmanifest.json', 'assets/x-DDGg8O6h.css', 'assets/y-DJTrnPH3.css', - 'assets/webmanifest.json', 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - - - - - - -
- -
- - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + + + + +
+ +
+ + + `, + ); }); it('does not deduplicate static assets with similar names', async () => { @@ -1447,24 +1574,27 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(3); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 3); - expect(assets).to.have.keys([ + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/foo-BCCvKrTe.svg', 'assets/foo-C4stzVZW.svg', 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + `, + ); }); it('[legacy] deduplicates static assets with similar names', async () => { @@ -1495,20 +1625,26 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(3); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 3); - expect(assets).to.have.keys(['assets/foo.svg', 'assets/foo1.svg', 'index.html']); + assert.deepEqual( + Object.keys(assets).sort(), + ['assets/foo.svg', 'assets/foo1.svg', 'index.html'].sort(), + ); - expect(assets['index.html']).to.equal(html` - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + `, + ); }); it('[legacy] static and hashed asset nodes can reference the same files', async () => { @@ -1538,21 +1674,27 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(3); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 3); - expect(assets).to.have.keys(['assets/foo.svg', 'assets/foo-BCCvKrTe.svg', 'index.html']); + assert.deepEqual( + Object.keys(assets).sort(), + ['assets/foo-BCCvKrTe.svg', 'assets/foo.svg', 'index.html'].sort(), + ); - expect(assets['index.html']).to.equal(html` - - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + `, + ); }); it('deduplicates common assets', async () => { @@ -1582,21 +1724,27 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(2); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 2); - expect(assets).to.have.keys(['assets/image-a-XOCPHCrV.png', 'index.html']); + assert.deepEqual( + Object.keys(assets).sort(), + ['assets/image-a-XOCPHCrV.png', 'index.html'].sort(), + ); - expect(assets['index.html']).to.equal(html` - - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + `, + ); }); it('deduplicates common assets across HTML files', async () => { @@ -1648,43 +1796,52 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(4); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 4); - expect(assets).to.have.keys([ + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/image-a-XOCPHCrV.png', 'page-a.html', 'page-b.html', 'page-c.html', ]); - expect(assets['page-a.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['page-a.html'], + html` + + + + + + + `, + ); - expect(assets['page-b.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['page-b.html'], + html` + + + + + + + `, + ); - expect(assets['page-c.html']).to.equal(html` - - - - - - - - `); + assert.equal( + assets['page-c.html'], + html` + + + + + + + + `, + ); }); it('can turn off extracting assets', async () => { @@ -1721,19 +1878,22 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 1); - expect(assets['index.html']).to.equal(html` - - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + `, + ); }); it('can inject a CSP meta tag for inline scripts', async () => { @@ -1774,32 +1934,35 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(2); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 2); + assert.equal(Object.keys(assets).length, 1); - expect(chunks['entrypoint-a.js']).to.include(js`console.log('entrypoint-a.js');`); - expect(chunks['entrypoint-b.js']).to.include(js`console.log('entrypoint-b.js');`); + expectIncludes(chunks['entrypoint-a.js'], js`console.log('entrypoint-a.js');`); + expectIncludes(chunks['entrypoint-b.js'], js`console.log('entrypoint-b.js');`); - expect(assets['index.html']).to.equal(html` - - - - - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + + + + `, + ); }); it('can add to an existing CSP meta tag for inline scripts', async () => { @@ -1845,32 +2008,35 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(2); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 2); + assert.equal(Object.keys(assets).length, 1); - expect(chunks['entrypoint-a.js']).to.include(js`console.log('entrypoint-a.js');`); - expect(chunks['entrypoint-b.js']).to.include(js`console.log('entrypoint-b.js');`); + expectIncludes(chunks['entrypoint-a.js'], js`console.log('entrypoint-a.js');`); + expectIncludes(chunks['entrypoint-b.js'], js`console.log('entrypoint-b.js');`); - expect(assets['index.html']).to.equal(html` - - - - - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + + + + `, + ); }); it('can add to an existing CSP meta tag for inline scripts even if script-src is already there', async () => { @@ -1916,32 +2082,35 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(2); - expect(Object.keys(assets)).to.have.lengthOf(1); + assert.equal(Object.keys(chunks).length, 2); + assert.equal(Object.keys(assets).length, 1); - expect(chunks['entrypoint-a.js']).to.include(js`console.log('entrypoint-a.js');`); - expect(chunks['entrypoint-b.js']).to.include(js`console.log('entrypoint-b.js');`); + expectIncludes(chunks['entrypoint-a.js'], js`console.log('entrypoint-a.js');`); + expectIncludes(chunks['entrypoint-b.js'], js`console.log('entrypoint-b.js');`); - expect(assets['index.html']).to.equal(html` - - - - - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + + + + `, + ); }); it('can inject a service worker registration script if injectServiceWorker and serviceWorkerPath are provided', async () => { @@ -1989,13 +2158,13 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(3); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 3); - expect(assets).to.have.keys([ + assert.deepEqual(Object.keys(assets).sort(), [ 'index.html', - 'sub-with-js/index.html', 'sub-pure-html/index.html', + 'sub-with-js/index.html', ]); function extractServiceWorkerPath(code: string) { @@ -2004,11 +2173,13 @@ describe('rollup-plugin-html', () => { return code.substring(registerOpen + 11, registerClose); } - expect(extractServiceWorkerPath(assets['index.html'] as string)).to.equal('service-worker.js'); - expect(extractServiceWorkerPath(assets['sub-with-js/index.html'] as string)).to.equal( + assert.equal(extractServiceWorkerPath(assets['index.html'] as string), 'service-worker.js'); + assert.equal( + extractServiceWorkerPath(assets['sub-with-js/index.html'] as string), '../service-worker.js', ); - expect(extractServiceWorkerPath(assets['sub-pure-html/index.html'] as string)).to.equal( + assert.equal( + extractServiceWorkerPath(assets['sub-pure-html/index.html'] as string), '../service-worker.js', ); }); @@ -2050,27 +2221,30 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(4); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 4); - expect(assets).to.have.keys([ - 'assets/styles-Bh7Pnjui.css', + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/foo-CxmWeBHm.svg', 'assets/image-b-C4stzVZW.svg', + 'assets/styles-Bh7Pnjui.css', 'x/index.html', ]); - expect(assets['x/index.html']).to.equal(html` - - - - - - - - - - `); + assert.equal( + assets['x/index.html'], + html` + + + + + + + + + + `, + ); }); it('handles fonts linked from css files', async () => { @@ -2117,42 +2291,48 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(4); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 4); - expect(assets).to.have.keys([ - 'assets/font-normal-Cht9ZB76.woff2', + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/font-bold-eQjSonqH.woff2', + 'assets/font-normal-Cht9ZB76.woff2', 'assets/styles-BRQfqhN6.css', 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); - expect(assets['assets/styles-BRQfqhN6.css']).to.equal(css` - @font-face { - font-family: Font; - src: url('font-normal-Cht9ZB76.woff2') format('woff2'); - font-weight: normal; - font-style: normal; - font-display: swap; - } + assert.equal( + assets['assets/styles-BRQfqhN6.css'], + css` + @font-face { + font-family: Font; + src: url('font-normal-Cht9ZB76.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; + } - @font-face { - font-family: Font; - src: url('font-bold-eQjSonqH.woff2') format('woff2'); - font-weight: bold; - font-style: normal; - font-display: swap; - } - `); + @font-face { + font-family: Font; + src: url('font-bold-eQjSonqH.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: swap; + } + `, + ); }); it('[legacy] handles fonts linked from css files', async () => { @@ -2200,42 +2380,48 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(4); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 4); - expect(assets).to.have.keys([ - 'assets/assets/font-normal-Cht9ZB76.woff2', + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/assets/font-bold-eQjSonqH.woff2', + 'assets/assets/font-normal-Cht9ZB76.woff2', 'assets/styles-BUBaODov.css', 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); - expect(assets['assets/styles-BUBaODov.css']).to.equal(css` - @font-face { - font-family: Font; - src: url('assets/font-normal-Cht9ZB76.woff2') format('woff2'); - font-weight: normal; - font-style: normal; - font-display: swap; - } + assert.equal( + assets['assets/styles-BUBaODov.css'], + css` + @font-face { + font-family: Font; + src: url('assets/font-normal-Cht9ZB76.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; + } - @font-face { - font-family: Font; - src: url('assets/font-bold-eQjSonqH.woff2') format('woff2'); - font-weight: bold; - font-style: normal; - font-display: swap; - } - `); + @font-face { + font-family: Font; + src: url('assets/font-bold-eQjSonqH.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: swap; + } + `, + ); }); it('handles fonts linked from css files in node_modules', async () => { @@ -2282,42 +2468,48 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(4); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 4); - expect(assets).to.have.keys([ - 'assets/font-normal-Cht9ZB76.woff2', + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/font-bold-eQjSonqH.woff2', + 'assets/font-normal-Cht9ZB76.woff2', 'assets/styles-BRQfqhN6.css', 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); - expect(assets['assets/styles-BRQfqhN6.css']).to.equal(css` - @font-face { - font-family: Font; - src: url('font-normal-Cht9ZB76.woff2') format('woff2'); - font-weight: normal; - font-style: normal; - font-display: swap; - } + assert.equal( + assets['assets/styles-BRQfqhN6.css'], + css` + @font-face { + font-family: Font; + src: url('font-normal-Cht9ZB76.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; + } - @font-face { - font-family: Font; - src: url('font-bold-eQjSonqH.woff2') format('woff2'); - font-weight: bold; - font-style: normal; - font-display: swap; - } - `); + @font-face { + font-family: Font; + src: url('font-bold-eQjSonqH.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: swap; + } + `, + ); }); it('[legacy] handles fonts linked from css files in node_modules', async () => { @@ -2365,42 +2557,48 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(4); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 4); - expect(assets).to.have.keys([ - 'assets/assets/font-normal-Cht9ZB76.woff2', + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/assets/font-bold-eQjSonqH.woff2', + 'assets/assets/font-normal-Cht9ZB76.woff2', 'assets/styles-BUBaODov.css', 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); - expect(assets['assets/styles-BUBaODov.css']).to.equal(css` - @font-face { - font-family: Font; - src: url('assets/font-normal-Cht9ZB76.woff2') format('woff2'); - font-weight: normal; - font-style: normal; - font-display: swap; - } + assert.equal( + assets['assets/styles-BUBaODov.css'], + css` + @font-face { + font-family: Font; + src: url('assets/font-normal-Cht9ZB76.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; + } - @font-face { - font-family: Font; - src: url('assets/font-bold-eQjSonqH.woff2') format('woff2'); - font-weight: bold; - font-style: normal; - font-display: swap; - } - `); + @font-face { + font-family: Font; + src: url('assets/font-bold-eQjSonqH.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: swap; + } + `, + ); }); it('handles duplicate fonts correctly', async () => { @@ -2448,45 +2646,54 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(4); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 4); - expect(assets).to.have.keys([ + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/font-normal-Cht9ZB76.woff2', 'assets/styles-a-CKKhzbId.css', 'assets/styles-b-DdUNHRx0.css', 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + `, + ); - expect(assets['assets/styles-a-CKKhzbId.css']).to.equal(css` - @font-face { - font-family: Font; - src: url('font-normal-Cht9ZB76.woff2') format('woff2'); - font-weight: normal; - font-style: normal; - font-display: swap; - } - `); + assert.equal( + assets['assets/styles-a-CKKhzbId.css'], + css` + @font-face { + font-family: Font; + src: url('font-normal-Cht9ZB76.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; + } + `, + ); - expect(assets['assets/styles-b-DdUNHRx0.css']).to.equal(css` - @font-face { - font-family: Font2; - src: url('font-normal-Cht9ZB76.woff2') format('woff2'); - font-weight: normal; - font-style: normal; - font-display: swap; - } - `); + assert.equal( + assets['assets/styles-b-DdUNHRx0.css'], + css` + @font-face { + font-family: Font2; + src: url('font-normal-Cht9ZB76.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; + } + `, + ); }); it('handles images referenced from css', async () => { @@ -2554,63 +2761,69 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(9); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 9); - expect(assets).to.have.keys([ - 'assets/star-D_LO5feX.avif', + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/star-BKg9qmmf.gif', 'assets/star-BZWqL7hS.jpeg', - 'assets/star-Df0JryvN.jpg', + 'assets/star-CKbh5mKn.webp', 'assets/star-CXig10q7.png', 'assets/star-CwhgM_z4.svg', - 'assets/star-CKbh5mKn.webp', + 'assets/star-D_LO5feX.avif', + 'assets/star-Df0JryvN.jpg', 'assets/styles-DgHxUupJ.css', 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); - expect(assets['assets/styles-DgHxUupJ.css']).to.equal(css` - #a { - background-image: url('star-D_LO5feX.avif'); - } + assert.equal( + assets['assets/styles-DgHxUupJ.css'], + css` + #a { + background-image: url('star-D_LO5feX.avif'); + } - #b { - background-image: url('star-BKg9qmmf.gif'); - } + #b { + background-image: url('star-BKg9qmmf.gif'); + } - #c { - background-image: url('star-BZWqL7hS.jpeg'); - } + #c { + background-image: url('star-BZWqL7hS.jpeg'); + } - #d { - background-image: url('star-Df0JryvN.jpg'); - } + #d { + background-image: url('star-Df0JryvN.jpg'); + } - #e { - background-image: url('star-CXig10q7.png'); - } + #e { + background-image: url('star-CXig10q7.png'); + } - #f { - background-image: url('star-CwhgM_z4.svg'); - } + #f { + background-image: url('star-CwhgM_z4.svg'); + } - #g { - background-image: url('star-CwhgM_z4.svg#foo'); - } + #g { + background-image: url('star-CwhgM_z4.svg#foo'); + } - #h { - background-image: url('star-CKbh5mKn.webp'); - } - `); + #h { + background-image: url('star-CKbh5mKn.webp'); + } + `, + ); }); it('[legacy] handles images referenced from css', async () => { @@ -2679,63 +2892,69 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(9); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 9); - expect(assets).to.have.keys([ - 'assets/assets/star-D_LO5feX.avif', + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/assets/star-BKg9qmmf.gif', 'assets/assets/star-BZWqL7hS.jpeg', - 'assets/assets/star-Df0JryvN.jpg', + 'assets/assets/star-CKbh5mKn.webp', 'assets/assets/star-CXig10q7.png', 'assets/assets/star-CwhgM_z4.svg', - 'assets/assets/star-CKbh5mKn.webp', + 'assets/assets/star-D_LO5feX.avif', + 'assets/assets/star-Df0JryvN.jpg', 'assets/styles-Cuqf3qRf.css', 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); - expect(assets['assets/styles-Cuqf3qRf.css']).to.equal(css` - #a { - background-image: url('assets/star-D_LO5feX.avif'); - } + assert.equal( + assets['assets/styles-Cuqf3qRf.css'], + css` + #a { + background-image: url('assets/star-D_LO5feX.avif'); + } - #b { - background-image: url('assets/star-BKg9qmmf.gif'); - } + #b { + background-image: url('assets/star-BKg9qmmf.gif'); + } - #c { - background-image: url('assets/star-BZWqL7hS.jpeg'); - } + #c { + background-image: url('assets/star-BZWqL7hS.jpeg'); + } - #d { - background-image: url('assets/star-Df0JryvN.jpg'); - } + #d { + background-image: url('assets/star-Df0JryvN.jpg'); + } - #e { - background-image: url('assets/star-CXig10q7.png'); - } + #e { + background-image: url('assets/star-CXig10q7.png'); + } - #f { - background-image: url('assets/star-CwhgM_z4.svg'); - } + #f { + background-image: url('assets/star-CwhgM_z4.svg'); + } - #g { - background-image: url('assets/star-CwhgM_z4.svg#foo'); - } + #g { + background-image: url('assets/star-CwhgM_z4.svg#foo'); + } - #h { - background-image: url('assets/star-CKbh5mKn.webp'); - } - `); + #h { + background-image: url('assets/star-CKbh5mKn.webp'); + } + `, + ); }); it('allows to exclude external assets usign a glob pattern', async () => { @@ -2808,10 +3027,10 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(5); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 5); - expect(assets).to.have.keys([ + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/image-a-XOCPHCrV.png', 'assets/image-b-BgQHKcRn.png', 'assets/styles-pLj9D-P3.css', @@ -2819,44 +3038,50 @@ describe('rollup-plugin-html', () => { 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - - - - - - - -
- -
- - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + + + + + +
+ +
+ + + `, + ); - expect(assets['assets/styles-pLj9D-P3.css']).to.equal(css` - #a1 { - background-image: url('image-a-XOCPHCrV.png'); - } + assert.equal( + assets['assets/styles-pLj9D-P3.css'], + css` + #a1 { + background-image: url('image-a-XOCPHCrV.png'); + } - #a2 { - background-image: url('image-a.svg'); - } + #a2 { + background-image: url('image-a.svg'); + } - #d1 { - background-image: url('image-b-BgQHKcRn.png'); - } + #d1 { + background-image: url('image-b-BgQHKcRn.png'); + } - #d2 { - background-image: url('./image-b.svg'); - } - `); + #d2 { + background-image: url('./image-b.svg'); + } + `, + ); }); it('[legacy] allows to exclude external assets usign a glob pattern', async () => { @@ -2930,10 +3155,10 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(7); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 7); - expect(assets).to.have.keys([ + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/assets/image-a-XOCPHCrV.png', 'assets/assets/image-b-BgQHKcRn.png', 'assets/image-a.png', @@ -2943,44 +3168,50 @@ describe('rollup-plugin-html', () => { 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - - - - - - - -
- -
- - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + + + + + +
+ +
+ + + `, + ); - expect(assets['assets/styles-DFIb0lB5.css']).to.equal(css` - #a1 { - background-image: url('assets/image-a-XOCPHCrV.png'); - } + assert.equal( + assets['assets/styles-DFIb0lB5.css'], + css` + #a1 { + background-image: url('assets/image-a-XOCPHCrV.png'); + } - #a2 { - background-image: url('image-a.svg'); - } + #a2 { + background-image: url('image-a.svg'); + } - #d1 { - background-image: url('assets/image-b-BgQHKcRn.png'); - } + #d1 { + background-image: url('assets/image-b-BgQHKcRn.png'); + } - #d2 { - background-image: url('./image-b.svg'); - } - `); + #d2 { + background-image: url('./image-b.svg'); + } + `, + ); }); it('rewrites paths according to assetFileNames', async () => { @@ -3039,50 +3270,59 @@ describe('rollup-plugin-html', () => { assetFileNames: 'static/[name].immutable.[hash][extname]', }); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(5); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 5); - expect(assets).to.have.keys([ + assert.deepEqual(Object.keys(assets).sort(), [ + 'index.html', 'static/font.immutable.C5MNjX-h.woff2', 'static/global.immutable.BRYeVgdd.css', 'static/image.immutable.7xJLr_7N.png', 'static/styles.immutable.exe7_Vpw.css', - 'index.html', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + + + `, + ); - expect(assets['static/global.immutable.BRYeVgdd.css']).to.equal(css` - @font-face { - font-family: Font; - src: url('font.immutable.C5MNjX-h.woff2') format('woff2'); - font-weight: normal; - font-style: normal; - font-display: swap; - } - `); + assert.equal( + assets['static/global.immutable.BRYeVgdd.css'], + css` + @font-face { + font-family: Font; + src: url('font.immutable.C5MNjX-h.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; + } + `, + ); - expect(assets['static/styles.immutable.exe7_Vpw.css']).to.equal(css` - #a { - background-image: url('image.immutable.7xJLr_7N.png'); - } - `); + assert.equal( + assets['static/styles.immutable.exe7_Vpw.css'], + css` + #a { + background-image: url('image.immutable.7xJLr_7N.png'); + } + `, + ); }); it('resolves paths by using publicPath when assetFileNames puts assets in different dirs', async () => { @@ -3152,50 +3392,59 @@ describe('rollup-plugin-html', () => { }, }); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(5); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 5); - expect(assets).to.have.keys([ + assert.deepEqual(Object.keys(assets).sort(), [ 'fonts/font.immutable.C5MNjX-h.woff2', - 'styles/global.immutable.CIo7MOhV.css', 'images/image.immutable.7xJLr_7N.png', - 'styles/styles.immutable.BxCpevuY.css', 'index.html', + 'styles/global.immutable.CIo7MOhV.css', + 'styles/styles.immutable.BxCpevuY.css', ]); - expect(assets['index.html']).to.equal(html` - - - - - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + + + + + `, + ); - expect(assets['styles/global.immutable.CIo7MOhV.css']).to.equal(css` - @font-face { - font-family: Font; - src: url('/static/fonts/font.immutable.C5MNjX-h.woff2') format('woff2'); - font-weight: normal; - font-style: normal; - font-display: swap; - } - `); + assert.equal( + assets['styles/global.immutable.CIo7MOhV.css'], + css` + @font-face { + font-family: Font; + src: url('/static/fonts/font.immutable.C5MNjX-h.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; + } + `, + ); - expect(assets['styles/styles.immutable.BxCpevuY.css']).to.equal(css` - #a { - background-image: url('/static/images/image.immutable.7xJLr_7N.png'); - } - `); + assert.equal( + assets['styles/styles.immutable.BxCpevuY.css'], + css` + #a { + background-image: url('/static/images/image.immutable.7xJLr_7N.png'); + } + `, + ); }); it('can minify extracted CSS', async () => { @@ -3229,21 +3478,27 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets, assetsUnformatted } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(2); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 2); - expect(assets).to.have.keys(['assets/styles-DPU2l-t7.css', 'index.html']); + assert.deepEqual( + Object.keys(assets).sort(), + ['assets/styles-DPU2l-t7.css', 'index.html'].sort(), + ); - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); - expect(assetsUnformatted['assets/styles-DPU2l-t7.css']).to.equal('p{font-weight:700}'); + assert.equal(assetsUnformatted['assets/styles-DPU2l-t7.css'], 'p{font-weight:700}'); }); it('can bundle extracted CSS', async () => { @@ -3288,31 +3543,40 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(2); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 2); - expect(assets).to.have.keys(['assets/styles-Dc1pq4Qu.css', 'index.html']); - - expect(assets['index.html']).to.equal(html` - - - - - - - `); + assert.deepEqual( + Object.keys(assets).sort(), + ['assets/styles-Dc1pq4Qu.css', 'index.html'].sort(), + ); - expect(assets['assets/styles-Dc1pq4Qu.css']).to.equal(css` - body { - background-color: #fff; - } + assert.equal( + assets['index.html'], + html` + + + + + + + `, + ); - @media (prefers-color-scheme: dark) { + assert.equal( + assets['assets/styles-Dc1pq4Qu.css'], + css` body { - background-color: #000; + background-color: #fff; } - } - `); + + @media (prefers-color-scheme: dark) { + body { + background-color: #000; + } + } + `, + ); }); it('can transform assets in CSS', async () => { @@ -3352,16 +3616,16 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(3); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 3); - expect(assets).to.have.keys([ + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/bg-image-B8JuQo5R.png', 'assets/styles-Brz3za0w.css', 'index.html', ]); - expect(assets['assets/bg-image-B8JuQo5R.png']).to.equal('bg-image-transformed.png'); + assert.equal(assets['assets/bg-image-B8JuQo5R.png'], 'bg-image-transformed.png'); }); it('transforms asset only once for the same file in same CSS and other CSS files', async () => { @@ -3414,17 +3678,17 @@ describe('rollup-plugin-html', () => { const build = await rollup(config); const { chunks, assets } = await generateTestBundle(build, outputConfig); - expect(Object.keys(chunks)).to.have.lengthOf(1); - expect(Object.keys(assets)).to.have.lengthOf(4); + assert.equal(Object.keys(chunks).length, 1); + assert.equal(Object.keys(assets).length, 4); - expect(assets).to.have.keys([ - 'assets/filters-BNeK3QVf.svg', + assert.deepEqual(Object.keys(assets).sort(), [ 'assets/design-system-DznFRd92.css', + 'assets/filters-BNeK3QVf.svg', 'assets/styles-CWG_g22Q.css', 'index.html', ]); - expect(countTransformAssetCalls).to.equal(1); + assert.equal(countTransformAssetCalls, 1); }); it('recalculates the hash of the CSS output filename when it references the file that changed the content', async () => { @@ -3493,7 +3757,7 @@ describe('rollup-plugin-html', () => { const output1StylesName = Object.keys(bundle1.assets).find(name => name.endsWith('.css'))!; const output2StylesName = Object.keys(bundle2.assets).find(name => name.endsWith('.css'))!; - expect(output1StylesName).to.not.equal(output2StylesName); + assert.notEqual(output1StylesName, output2StylesName); }); it('recalculates the hash of the CSS output filename when it references the same file which was transformed', async () => { @@ -3560,7 +3824,7 @@ describe('rollup-plugin-html', () => { const output1StylesName = Object.keys(bundle1.assets).find(name => name.endsWith('.css'))!; const output2StylesName = Object.keys(bundle2.assets).find(name => name.endsWith('.css'))!; - expect(output1StylesName).to.not.equal(output2StylesName); + assert.notEqual(output1StylesName, output2StylesName); }); it('recalculates the hash of the CSS output filename when it references the file that is moved in the output', async () => { @@ -3626,7 +3890,7 @@ describe('rollup-plugin-html', () => { const output1StylesName = Object.keys(bundle1.assets).find(name => name.endsWith('.css'))!; const output2StylesName = Object.keys(bundle2.assets).find(name => name.endsWith('.css'))!; - expect(output1StylesName).to.not.equal(output2StylesName); + assert.notEqual(output1StylesName, output2StylesName); }); describe('preserved output paths', () => { @@ -3677,22 +3941,28 @@ describe('rollup-plugin-html', () => { path.relative(rootDir, asset.originalFileNames[0]).split(path.sep).join('/'), }); - expect(assets['styles/main.css']).to.equal(css` - @font-face { - font-family: Font; - src: url('../fonts/font.woff2') format('woff2'); - } + assert.equal( + assets['styles/main.css'], + css` + @font-face { + font-family: Font; + src: url('../fonts/font.woff2') format('woff2'); + } - .arrow { - background: url('../assets/icons/arrow.svg'); - } - `); + .arrow { + background: url('../assets/icons/arrow.svg'); + } + `, + ); - expect(assets['styles/components/button.css']).to.equal(css` - .button { - background: url('../../assets/icons/arrow.svg'); - } - `); + assert.equal( + assets['styles/components/button.css'], + css` + .button { + background: url('../../assets/icons/arrow.svg'); + } + `, + ); }); it('handles CSS files with SVG fragments (#icon)', async () => { @@ -3730,11 +4000,14 @@ describe('rollup-plugin-html', () => { path.relative(rootDir, asset.originalFileNames[0]).split(path.sep).join('/'), }); - expect(assets['styles.css']).to.equal(css` - .icon { - background: url('assets/sprite.svg#icon'); - } - `); + assert.equal( + assets['styles.css'], + css` + .icon { + background: url('assets/sprite.svg#icon'); + } + `, + ); }); it('handles multiple CSS files referencing the same asset', async () => { @@ -3778,17 +4051,23 @@ describe('rollup-plugin-html', () => { path.relative(rootDir, asset.originalFileNames[0]).split(path.sep).join('/'), }); - expect(assets['styles/a.css']).to.equal(css` - .a { - background: url('../shared/image.png'); - } - `); + assert.equal( + assets['styles/a.css'], + css` + .a { + background: url('../shared/image.png'); + } + `, + ); - expect(assets['styles/nested/b.css']).to.equal(css` - .b { - background: url('../../shared/image.png'); - } - `); + assert.equal( + assets['styles/nested/b.css'], + css` + .b { + background: url('../../shared/image.png'); + } + `, + ); }); }); }); diff --git a/packages/rollup-plugin-html/test/src/input/InputData.test.ts b/packages/rollup-plugin-html/test/src/input/InputData.test.ts index 9810a5dfa..9c7cb92c4 100644 --- a/packages/rollup-plugin-html/test/src/input/InputData.test.ts +++ b/packages/rollup-plugin-html/test/src/input/InputData.test.ts @@ -1,9 +1,10 @@ -import { expect } from 'chai'; +import assert from 'node:assert/strict'; +import { describe, it, afterEach } from 'node:test'; import path from 'path'; import { cleanApp, createApp, html, js } from '../../../../../test-utils/rollup-test-utils.js'; -import { getInputData } from '../../../src/input/getInputData.js'; -import { InputData } from '../../../src/input/InputData.js'; +import { getInputData } from '../../../dist/input/getInputData.js'; +import type { InputData } from '../../../dist/input/InputData.js'; function cleanupHtml(str: string) { return str.replace(/(\r\n|\n|\r| )/gm, ''); @@ -37,7 +38,7 @@ describe('getInputData()', () => { `, }); const result = getInputData({ input: 'index.html', rootDir }); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: path.join(rootDir, 'index.html'), html: '

Helloworld

', @@ -64,7 +65,7 @@ describe('getInputData()', () => { `, }); const result = getInputData({ input: { path: 'index.html' }, rootDir }); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: path.join(rootDir, 'index.html'), html: '

Helloworld

', @@ -91,7 +92,7 @@ describe('getInputData()', () => { `, }); const result = getInputData({ input: { path: 'index.html', name: 'foo.html' }, rootDir }); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: path.join(rootDir, 'index.html'), html: '

Helloworld

', @@ -128,7 +129,7 @@ describe('getInputData()', () => { input: [{ path: 'index.html' }, { path: 'not-index.html' }], rootDir, }); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: path.join(rootDir, 'index.html'), html: '

Helloworld

', @@ -163,7 +164,7 @@ describe('getInputData()', () => { `, }); const result = getInputData({ input: 'src/index.html', rootDir }); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: path.join(rootDir, 'src/index.html'), html: '

Helloworld

', @@ -190,7 +191,7 @@ describe('getInputData()', () => { `, }); const result = getInputData({ rootDir }, 'index.html'); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: path.join(rootDir, 'index.html'), html: '

Helloworld

', @@ -217,7 +218,7 @@ describe('getInputData()', () => { `, }); const result = getInputData({ rootDir }, ['index.html']); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: path.join(rootDir, 'index.html'), html: '

Helloworld

', @@ -251,7 +252,7 @@ describe('getInputData()', () => { `, }); const result = getInputData({ rootDir }, ['index.html', 'not-index.html']); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: path.join(rootDir, 'index.html'), html: '

Helloworld

', @@ -296,7 +297,7 @@ describe('getInputData()', () => { { rootDir }, { 'a.html': 'index.html', 'b.html': 'not-index.html' }, ); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: path.join(rootDir, 'index.html'), html: '

Helloworld

', @@ -338,7 +339,7 @@ describe('getInputData()', () => { `, }); const result = getInputData({ input: 'index.html', rootDir }, 'not-index.html'); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: path.join(rootDir, 'index.html'), html: '

Helloworld

', @@ -369,7 +370,7 @@ describe('getInputData()', () => { }, rootDir, }); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: undefined, html: '

HTMLasstring

', @@ -413,7 +414,7 @@ describe('getInputData()', () => { }, ], }); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: undefined, html: '

HTML1

', @@ -476,7 +477,7 @@ describe('getInputData()', () => { `, }); const result = getInputData({ input: 'pages/**/*.html', rootDir }); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: path.join(rootDir, 'pages', 'page-c.html'), html: '

page-c.html

', @@ -556,7 +557,7 @@ describe('getInputData()', () => { `, }); const result = getInputData({ input: 'pages/**/*.html', flattenOutput: false, rootDir }); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: path.join(rootDir, 'pages', 'page-c.html'), html: '

page-c.html

', @@ -607,7 +608,7 @@ describe('getInputData()', () => { `, }, }); - expect(cleanupResult(result)).to.eql([ + assert.deepEqual(cleanupResult(result), [ { filePath: undefined, html: '

pureHTML

', @@ -621,6 +622,6 @@ describe('getInputData()', () => { it('throws when no files or html is given', () => { const rootDir = createApp({}); - expect(() => getInputData({ rootDir })).to.throw(); + assert.throws(() => getInputData({ rootDir })); }); }); diff --git a/packages/rollup-plugin-html/test/src/input/extract/extractAssets.test.ts b/packages/rollup-plugin-html/test/src/input/extract/extractAssets.test.ts index e4abcf640..1a573eef2 100644 --- a/packages/rollup-plugin-html/test/src/input/extract/extractAssets.test.ts +++ b/packages/rollup-plugin-html/test/src/input/extract/extractAssets.test.ts @@ -1,7 +1,8 @@ -import { expect } from 'chai'; +import assert from 'node:assert/strict'; +import { describe, it, afterEach } from 'node:test'; import { parse } from 'parse5'; import path from 'path'; -import { extractAssets } from '../../../../src/input/extract/extractAssets.js'; +import { extractAssets } from '../../../../dist/input/extract/extractAssets.js'; import { html, css, @@ -59,7 +60,7 @@ describe('extractAssets', () => { }); const assetsWithoutcontent = assets.map(a => ({ ...a, content: undefined })); - expect(assetsWithoutcontent).to.eql([ + assert.deepEqual(assetsWithoutcontent, [ { content: undefined, filePath: path.join(rootDir, 'image-a.png'), @@ -141,7 +142,7 @@ describe('extractAssets', () => { ...asset, content: asset.content.toString('utf-8').replace(/\s/g, ''), })); - expect(transformedAssets).to.eql([ + assert.deepEqual(transformedAssets, [ { content: '{"message":"helloworld"}', filePath: path.join(rootDir, 'webmanifest.json'), @@ -195,11 +196,11 @@ describe('extractAssets', () => { extractAssets: true, }); - expect(assets.length).to.equal(2); - expect(assets[0].filePath).to.equal(path.join(rootDir, 'foo', 'x.css')); - expect(assets[1].filePath).to.equal(path.join(rootDir, 'foo', 'bar', 'y.css')); - expect(assets[0].content.toString('utf-8').replace(/\s/g, '')).to.equal(':root{color:x;}'); - expect(assets[1].content.toString('utf-8').replace(/\s/g, '')).to.equal(':root{color:y;}'); + assert.equal(assets.length, 2); + assert.equal(assets[0].filePath, path.join(rootDir, 'foo', 'x.css')); + assert.equal(assets[1].filePath, path.join(rootDir, 'foo', 'bar', 'y.css')); + assert.equal(assets[0].content.toString('utf-8').replace(/\s/g, ''), ':root{color:x;}'); + assert.equal(assets[1].content.toString('utf-8').replace(/\s/g, ''), ':root{color:y;}'); }); it('resolves relative to HTML file location', () => { @@ -232,11 +233,11 @@ describe('extractAssets', () => { extractAssets: true, }); - expect(assets.length).to.equal(2); - expect(assets[0].filePath).to.equal(path.join(rootDir, 'foo', 'x.css')); - expect(assets[1].filePath).to.equal(path.join(rootDir, 'styles.css')); - expect(assets[0].content.toString('utf-8').replace(/\s/g, '')).to.equal(':root{color:x;}'); - expect(assets[1].content.toString('utf-8').replace(/\s/g, '')).to.equal(':root{color:blue;}'); + assert.equal(assets.length, 2); + assert.equal(assets[0].filePath, path.join(rootDir, 'foo', 'x.css')); + assert.equal(assets[1].filePath, path.join(rootDir, 'styles.css')); + assert.equal(assets[0].content.toString('utf-8').replace(/\s/g, ''), ':root{color:x;}'); + assert.equal(assets[1].content.toString('utf-8').replace(/\s/g, ''), ':root{color:blue;}'); }); it('resolves absolute paths relative to root dir', () => { @@ -269,11 +270,11 @@ describe('extractAssets', () => { extractAssets: true, }); - expect(assets.length).to.equal(2); - expect(assets[0].filePath).to.equal(path.join(rootDir, 'foo', 'x.css')); - expect(assets[1].filePath).to.equal(path.join(rootDir, 'styles.css')); - expect(assets[0].content.toString('utf-8').replace(/\s/g, '')).to.equal(':root{color:x;}'); - expect(assets[1].content.toString('utf-8').replace(/\s/g, '')).to.equal(':root{color:blue;}'); + assert.equal(assets.length, 2); + assert.equal(assets[0].filePath, path.join(rootDir, 'foo', 'x.css')); + assert.equal(assets[1].filePath, path.join(rootDir, 'styles.css')); + assert.equal(assets[0].content.toString('utf-8').replace(/\s/g, ''), ':root{color:x;}'); + assert.equal(assets[1].content.toString('utf-8').replace(/\s/g, ''), ':root{color:blue;}'); }); it('can deduplicate assets with same names', () => { @@ -297,9 +298,9 @@ describe('extractAssets', () => { extractAssets: true, }); - expect(assets.length).to.equal(1); + assert.equal(assets.length, 1); const assetsWithoutcontent = assets.map(a => ({ ...a, content: undefined })); - expect(assetsWithoutcontent).to.eql([ + assert.deepEqual(assetsWithoutcontent, [ { content: undefined, filePath: path.join(rootDir, 'image-a.png'), @@ -326,7 +327,7 @@ describe('extractAssets', () => { extractAssets: true, }); - expect(assets.length).to.equal(0); + assert.equal(assets.length, 0); }); it('does treat non module script tags as assets', () => { @@ -349,9 +350,9 @@ describe('extractAssets', () => { extractAssets: true, }); - expect(assets.length).to.equal(1); - expect(assets[0].filePath).to.equal(path.join(rootDir, 'no-module.js')); - expect(assets[0].content.toString('utf-8')).to.equal('/* no module script file */\n'); + assert.equal(assets.length, 1); + assert.equal(assets[0].filePath, path.join(rootDir, 'no-module.js')); + assert.equal(assets[0].content.toString('utf-8'), '/* no module script file */\n'); }); it('handles a picture tag using source tags with srcset', () => { @@ -398,10 +399,10 @@ describe('extractAssets', () => { }); // the src is not the same as the small jpeg image - expect(assets.length).to.equal(4); - expect(assets[0].filePath).to.equal(path.join(rootDir, 'images', 'eb26e6ca-30.avif')); - expect(assets[1].filePath).to.equal(path.join(rootDir, 'images', 'eb26e6ca-60.avif')); - expect(assets[2].filePath).to.equal(path.join(rootDir, 'images', 'eb26e6ca-30.jpeg')); - expect(assets[3].filePath).to.equal(path.join(rootDir, 'images', 'eb26e6ca-60.jpeg')); + assert.equal(assets.length, 4); + assert.equal(assets[0].filePath, path.join(rootDir, 'images', 'eb26e6ca-30.avif')); + assert.equal(assets[1].filePath, path.join(rootDir, 'images', 'eb26e6ca-60.avif')); + assert.equal(assets[2].filePath, path.join(rootDir, 'images', 'eb26e6ca-30.jpeg')); + assert.equal(assets[3].filePath, path.join(rootDir, 'images', 'eb26e6ca-60.jpeg')); }); }); diff --git a/packages/rollup-plugin-html/test/src/input/extract/extractModules.test.ts b/packages/rollup-plugin-html/test/src/input/extract/extractModules.test.ts index 1ce06c93e..2edb505cd 100644 --- a/packages/rollup-plugin-html/test/src/input/extract/extractModules.test.ts +++ b/packages/rollup-plugin-html/test/src/input/extract/extractModules.test.ts @@ -1,10 +1,11 @@ import path from 'path'; +import { describe, it } from 'node:test'; +import assert from 'node:assert/strict'; import { parse, serialize } from 'parse5'; -import { expect } from 'chai'; import { html, js } from '../../../../../../test-utils/rollup-test-utils.js'; -import { extractModules } from '../../../../src/input/extract/extractModules.js'; -import { ScriptModuleTag } from '../../../../src/RollupPluginHTMLOptions.js'; +import { extractModules } from '../../../../dist/input/extract/extractModules.js'; +import type { ScriptModuleTag } from '../../../../dist/RollupPluginHTMLOptions.js'; const { sep } = path; @@ -31,20 +32,23 @@ describe('extractModules()', () => { }); const htmlWithoutModules = serialize(document); - expect(inlineModules.length).to.equal(0); - expect(moduleImports).to.eql([ + assert.equal(inlineModules.length, 0); + assert.deepEqual(moduleImports, [ { importPath: `${sep}foo.js`, attributes: [] }, { importPath: `${sep}bar.js`, attributes: [] }, ]); - expect(html`${htmlWithoutModules}`).to.eql(html` - - - -
before
-
after
- - - `); + assert.deepEqual( + html`${htmlWithoutModules}`, + html` + + + +
before
+
after
+ + + `, + ); }); it('does not touch non module scripts', () => { @@ -62,19 +66,22 @@ describe('extractModules()', () => { }); const htmlWithoutModules = serialize(document); - expect(inlineModules.length).to.equal(0); - expect(moduleImports).to.eql([]); - expect(html`${htmlWithoutModules}`).to.eql(html` - - - -
before
- - -
after
- - - `); + assert.equal(inlineModules.length, 0); + assert.deepEqual(moduleImports, []); + assert.deepEqual( + html`${htmlWithoutModules}`, + html` + + + +
before
+ + +
after
+ + + `, + ); }); it('resolves imports relative to the root dir', () => { @@ -92,20 +99,23 @@ describe('extractModules()', () => { }); const htmlWithoutModules = serialize(document); - expect(inlineModules.length).to.equal(0); - expect(moduleImports).to.eql([ + assert.equal(inlineModules.length, 0); + assert.deepEqual(moduleImports, [ { importPath: `${sep}foo.js`, attributes: [] }, { importPath: `${sep}base${sep}bar.js`, attributes: [] }, ]); - expect(html`${htmlWithoutModules}`).to.eql(html` - - - -
before
-
after
- - - `); + assert.deepEqual( + html`${htmlWithoutModules}`, + html` + + + +
before
+
after
+ + + `, + ); }); it('resolves relative imports relative to the relative import base', () => { @@ -123,20 +133,23 @@ describe('extractModules()', () => { }); const htmlWithoutModules = serialize(document); - expect(inlineModules.length).to.equal(0); - expect(moduleImports).to.eql([ + assert.equal(inlineModules.length, 0); + assert.deepEqual(moduleImports, [ { importPath: `${sep}base-1${sep}base-2${sep}foo.js`, attributes: [] }, { importPath: `${sep}base-1${sep}bar.js`, attributes: [] }, ]); - expect(html`${htmlWithoutModules}`).to.eql(html` - - - -
before
-
after
- - - `); + assert.deepEqual( + html`${htmlWithoutModules}`, + html` + + + +
before
+
after
+ + + `, + ); }); it('extracts all inline modules from a html document', () => { @@ -158,7 +171,7 @@ describe('extractModules()', () => { }); const htmlWithoutModules = serialize(document); - expect(cleanupInlineModules(inlineModules)).to.eql([ + assert.deepEqual(cleanupInlineModules(inlineModules), [ { importPath: '/inline-module-80efb22c2d1ce27c40eae10611f7680f.js', code: js`/* my module 1 */`, @@ -170,16 +183,19 @@ describe('extractModules()', () => { attributes: [], }, ]); - expect(moduleImports).to.eql([]); - expect(html`${htmlWithoutModules}`).to.eql(html` - - - -
before
-
after
- - - `); + assert.deepEqual(moduleImports, []); + assert.deepEqual( + html`${htmlWithoutModules}`, + html` + + + +
before
+
after
+ + + `, + ); }); it('prefixes inline module with index.html directory', () => { @@ -201,7 +217,7 @@ describe('extractModules()', () => { }); const htmlWithoutModules = serialize(document); - expect(cleanupInlineModules(inlineModules)).to.eql([ + assert.deepEqual(cleanupInlineModules(inlineModules), [ { importPath: '/foo/bar/inline-module-80efb22c2d1ce27c40eae10611f7680f.js', code: js`/* my module 1 */`, @@ -213,16 +229,19 @@ describe('extractModules()', () => { attributes: [], }, ]); - expect(moduleImports).to.eql([]); - expect(html`${htmlWithoutModules}`).to.eql(html` - - - -
before
-
after
- - - `); + assert.deepEqual(moduleImports, []); + assert.deepEqual( + html`${htmlWithoutModules}`, + html` + + + +
before
+
after
+ + + `, + ); }); it('ignores absolute paths', () => { @@ -240,17 +259,20 @@ describe('extractModules()', () => { }); const htmlWithoutModules = serialize(document); - expect(inlineModules.length).to.equal(0); - expect(moduleImports).to.eql([{ importPath: `${sep}bar.js`, attributes: [] }]); - expect(html`${htmlWithoutModules}`).to.eql(html` - - - -
before
- -
after
- - - `); + assert.equal(inlineModules.length, 0); + assert.deepEqual(moduleImports, [{ importPath: `${sep}bar.js`, attributes: [] }]); + assert.deepEqual( + html`${htmlWithoutModules}`, + html` + + + +
before
+ +
after
+ + + `, + ); }); }); diff --git a/packages/rollup-plugin-html/test/src/output/css.test.ts b/packages/rollup-plugin-html/test/src/output/css.test.ts index bbdcbf3ba..58710828b 100644 --- a/packages/rollup-plugin-html/test/src/output/css.test.ts +++ b/packages/rollup-plugin-html/test/src/output/css.test.ts @@ -1,13 +1,22 @@ -import { expect } from 'chai'; +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; + +function expectIncludes(actual: string, expected: string) { + if (!actual.includes(expected)) { + throw new Error( + `Expected substring not found.\n\nExpected:\n${expected}\n\nActual:\n${actual}`, + ); + } +} import { createAssetPlaceholder, replacePlaceholders, calculateRelativePath, -} from '../../../src/output/css.js'; +} from '../../../dist/output/css.js'; describe('createAssetPlaceholder', () => { it('creates a placeholder with the given hash', () => { - expect(createAssetPlaceholder('abc123')).to.equal('__ROLLUP_ASSET_URL_abc123__'); + assert.equal(createAssetPlaceholder('abc123'), '__ROLLUP_ASSET_URL_abc123__'); }); }); @@ -16,28 +25,28 @@ describe('replacePlaceholders', () => { const css = `.foo { background: url('__ROLLUP_ASSET_URL_abc123__'); }`; const resolver = (hash: string) => (hash === 'abc123' ? '../assets/image.png' : undefined); const result = replacePlaceholders(css, resolver); - expect(result).to.equal(`.foo { background: url('../assets/image.png'); }`); + assert.equal(result, `.foo { background: url('../assets/image.png'); }`); }); it('preserves fragments after placeholder', () => { const css = `.foo { background: url('__ROLLUP_ASSET_URL_abc123__#icon'); }`; const resolver = () => '../assets/sprite.svg'; const result = replacePlaceholders(css, resolver); - expect(result).to.equal(`.foo { background: url('../assets/sprite.svg#icon'); }`); + assert.equal(result, `.foo { background: url('../assets/sprite.svg#icon'); }`); }); it('preserves query strings after placeholder', () => { const css = `.foo { src: url('__ROLLUP_ASSET_URL_abc123__?v=1.0'); }`; const resolver = () => '../fonts/font.woff2'; const result = replacePlaceholders(css, resolver); - expect(result).to.equal(`.foo { src: url('../fonts/font.woff2?v=1.0'); }`); + assert.equal(result, `.foo { src: url('../fonts/font.woff2?v=1.0'); }`); }); it('keeps placeholder when resolver returns undefined', () => { const css = `.foo { background: url('__ROLLUP_ASSET_URL_unknown__'); }`; const resolver = () => undefined; const result = replacePlaceholders(css, resolver); - expect(result).to.equal(css); + assert.equal(result, css); }); it('replaces multiple placeholders', () => { @@ -51,38 +60,41 @@ describe('replacePlaceholders', () => { return undefined; }; const result = replacePlaceholders(css, resolver); - expect(result).to.include("url('assets/image1.png')"); - expect(result).to.include("url('assets/image2.png')"); + expectIncludes(result, "url('assets/image1.png')"); + expectIncludes(result, "url('assets/image2.png')"); }); }); describe('calculateRelativePath', () => { it('calculates relative path for same directory', () => { - expect(calculateRelativePath('styles/main.css', 'styles/image.png')).to.equal('image.png'); + assert.equal(calculateRelativePath('styles/main.css', 'styles/image.png'), 'image.png'); }); it('calculates relative path for parent directory', () => { - expect(calculateRelativePath('styles/main.css', 'image.png')).to.equal('../image.png'); + assert.equal(calculateRelativePath('styles/main.css', 'image.png'), '../image.png'); }); it('calculates relative path for sibling directory', () => { - expect(calculateRelativePath('styles/main.css', 'assets/image.png')).to.equal( + assert.equal( + calculateRelativePath('styles/main.css', 'assets/image.png'), '../assets/image.png', ); }); it('calculates relative path for deeply nested CSS', () => { - expect( + assert.equal( calculateRelativePath('styles/components/button.css', 'assets/icons/arrow.svg'), - ).to.equal('../../assets/icons/arrow.svg'); + '../../assets/icons/arrow.svg', + ); }); it('calculates relative path when CSS is at root', () => { - expect(calculateRelativePath('main.css', 'assets/image.png')).to.equal('assets/image.png'); + assert.equal(calculateRelativePath('main.css', 'assets/image.png'), 'assets/image.png'); }); it('calculates relative path when both are deeply nested', () => { - expect(calculateRelativePath('a/b/c/style.css', 'x/y/z/image.png')).to.equal( + assert.equal( + calculateRelativePath('a/b/c/style.css', 'x/y/z/image.png'), '../../../x/y/z/image.png', ); }); diff --git a/packages/rollup-plugin-html/test/src/output/getEntrypointBundles.test.ts b/packages/rollup-plugin-html/test/src/output/getEntrypointBundles.test.ts index e7cf8d647..449780a74 100644 --- a/packages/rollup-plugin-html/test/src/output/getEntrypointBundles.test.ts +++ b/packages/rollup-plugin-html/test/src/output/getEntrypointBundles.test.ts @@ -1,46 +1,50 @@ -import { expect } from 'chai'; +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; import { getEntrypointBundles, createImportPath, -} from '../../../src/output/getEntrypointBundles.js'; -import { GeneratedBundle, ScriptModuleTag } from '../../../src/RollupPluginHTMLOptions.js'; +} from '../../../dist/output/getEntrypointBundles.js'; +import type { GeneratedBundle, ScriptModuleTag } from '../../../dist/RollupPluginHTMLOptions.js'; describe('createImportPath()', () => { it('creates a relative import path', () => { - expect( + assert.equal( createImportPath({ outputDir: 'dist', fileOutputDir: 'dist', htmlFileName: 'index.html', fileName: 'foo.js', }), - ).to.equal('./foo.js'); + './foo.js', + ); }); it('handles files output in a different directory', () => { - expect( + assert.equal( createImportPath({ outputDir: 'dist', fileOutputDir: 'dist/legacy', htmlFileName: 'index.html', fileName: 'foo.js', }), - ).to.equal('./legacy/foo.js'); + './legacy/foo.js', + ); }); it('handles directory in filename', () => { - expect( + assert.equal( createImportPath({ outputDir: 'dist', fileOutputDir: 'dist', htmlFileName: 'index.html', fileName: 'legacy/foo.js', }), - ).to.equal('./legacy/foo.js'); + './legacy/foo.js', + ); }); it('allows configuring a public path', () => { - expect( + assert.equal( createImportPath({ publicPath: 'static', outputDir: 'dist', @@ -48,11 +52,12 @@ describe('createImportPath()', () => { htmlFileName: 'index.html', fileName: 'foo.js', }), - ).to.equal('./static/foo.js'); + './static/foo.js', + ); }); it('allows configuring an absolute public path', () => { - expect( + assert.equal( createImportPath({ publicPath: '/static', outputDir: 'dist', @@ -60,11 +65,12 @@ describe('createImportPath()', () => { htmlFileName: 'index.html', fileName: 'foo.js', }), - ).to.equal('/static/foo.js'); + '/static/foo.js', + ); }); it('allows configuring an absolute public path with just a /', () => { - expect( + assert.equal( createImportPath({ publicPath: '/', outputDir: 'dist', @@ -72,11 +78,12 @@ describe('createImportPath()', () => { htmlFileName: 'index.html', fileName: 'foo.js', }), - ).to.equal('/foo.js'); + '/foo.js', + ); }); it('allows configuring an absolute public path with a trailing /', () => { - expect( + assert.equal( createImportPath({ publicPath: '/static/public/', outputDir: 'dist', @@ -84,11 +91,12 @@ describe('createImportPath()', () => { htmlFileName: 'index.html', fileName: 'foo.js', }), - ).to.equal('/static/public/foo.js'); + '/static/public/foo.js', + ); }); it('respects a different output dir when configuring a public path', () => { - expect( + assert.equal( createImportPath({ publicPath: '/static', outputDir: 'dist', @@ -96,22 +104,24 @@ describe('createImportPath()', () => { htmlFileName: 'index.html', fileName: 'foo.js', }), - ).to.equal('/static/legacy/foo.js'); + '/static/legacy/foo.js', + ); }); it('when html is output in a directory, creates a relative path from the html file to the js file', () => { - expect( + assert.equal( createImportPath({ outputDir: 'dist', fileOutputDir: 'dist', htmlFileName: 'pages/index.html', fileName: 'foo.js', }), - ).to.equal('../foo.js'); + '../foo.js', + ); }); it('when html is output in a directory and absolute path is set, creates a direct path from the root to the js file', () => { - expect( + assert.equal( createImportPath({ publicPath: '/static/', outputDir: 'dist', @@ -119,7 +129,8 @@ describe('createImportPath()', () => { htmlFileName: 'pages/index.html', fileName: 'foo.js', }), - ).to.equal('/static/foo.js'); + '/static/foo.js', + ); }); }); @@ -155,12 +166,15 @@ describe('getEntrypointBundles()', () => { it('generates entrypoints for a simple project', async () => { const output = await getEntrypointBundles(defaultOptions); - expect(Object.keys(output).length).to.equal(1); - expect(output.default.options).to.equal(defaultBundles[0].options); - expect(output.default.bundle).to.equal(defaultBundles[0].bundle); - expect(output.default.entrypoints.length).to.equal(1); - expect(output.default.entrypoints[0].chunk).to.equal(defaultBundles[0].bundle['app.js']); - expect(output.default.entrypoints.map(e => e.importPath)).to.eql(['./app.js']); + assert.equal(Object.keys(output).length, 1); + assert.equal(output.default.options, defaultBundles[0].options); + assert.equal(output.default.bundle, defaultBundles[0].bundle); + assert.equal(output.default.entrypoints.length, 1); + assert.equal(output.default.entrypoints[0].chunk, defaultBundles[0].bundle['app.js']); + assert.deepEqual( + output.default.entrypoints.map(e => e.importPath), + ['./app.js'], + ); }); it('does not output non-entrypoints', async () => { @@ -190,9 +204,12 @@ describe('getEntrypointBundles()', () => { ...defaultOptions, generatedBundles, }); - expect(Object.keys(output).length).to.equal(1); - expect(output.default.entrypoints.length).to.equal(1); - expect(output.default.entrypoints.map(e => e.importPath)).to.eql(['./app.js']); + assert.equal(Object.keys(output).length, 1); + assert.equal(output.default.entrypoints.length, 1); + assert.deepEqual( + output.default.entrypoints.map(e => e.importPath), + ['./app.js'], + ); }); it('does not output non-chunks', async () => { @@ -223,9 +240,12 @@ describe('getEntrypointBundles()', () => { ...defaultOptions, generatedBundles, }); - expect(Object.keys(output).length).to.equal(1); - expect(output.default.entrypoints.length).to.equal(1); - expect(output.default.entrypoints.map(e => e.importPath)).to.eql(['./app.js']); + assert.equal(Object.keys(output).length, 1); + assert.equal(output.default.entrypoints.length, 1); + assert.deepEqual( + output.default.entrypoints.map(e => e.importPath), + ['./app.js'], + ); }); it('matches on facadeModuleId', async () => { @@ -255,9 +275,12 @@ describe('getEntrypointBundles()', () => { ...defaultOptions, generatedBundles, }); - expect(Object.keys(output).length).to.equal(1); - expect(output.default.entrypoints.length).to.equal(1); - expect(output.default.entrypoints.map(e => e.importPath)).to.eql(['./app.js']); + assert.equal(Object.keys(output).length, 1); + assert.equal(output.default.entrypoints.length, 1); + assert.deepEqual( + output.default.entrypoints.map(e => e.importPath), + ['./app.js'], + ); }); it('returns all entrypoints when no input module ids are given', async () => { @@ -294,9 +317,12 @@ describe('getEntrypointBundles()', () => { inputModuleIds, generatedBundles, }); - expect(Object.keys(output).length).to.equal(1); - expect(output.default.entrypoints.length).to.equal(2); - expect(output.default.entrypoints.map(e => e.importPath)).to.eql(['./app.js', './not-app.js']); + assert.equal(Object.keys(output).length, 1); + assert.equal(output.default.entrypoints.length, 2); + assert.deepEqual( + output.default.entrypoints.map(e => e.importPath), + ['./app.js', './not-app.js'], + ); }); it('generates entrypoint for multiple bundles', async () => { @@ -334,17 +360,23 @@ describe('getEntrypointBundles()', () => { generatedBundles, }); - expect(Object.keys(output).length).to.equal(2); - expect(output.modern.options).to.equal(generatedBundles[0].options); - expect(output.legacy.options).to.equal(generatedBundles[1].options); - expect(output.modern.bundle).to.equal(generatedBundles[0].bundle); - expect(output.legacy.bundle).to.equal(generatedBundles[1].bundle); - expect(output.modern.entrypoints.length).to.equal(1); - expect(output.modern.entrypoints[0].chunk).to.equal(generatedBundles[0].bundle['app.js']); - expect(output.modern.entrypoints.map(e => e.importPath)).to.eql(['./app.js']); - expect(output.legacy.entrypoints.length).to.equal(1); - expect(output.legacy.entrypoints[0].chunk).to.equal(generatedBundles[1].bundle['app.js']); - expect(output.legacy.entrypoints.map(e => e.importPath)).to.eql(['./legacy/app.js']); + assert.equal(Object.keys(output).length, 2); + assert.equal(output.modern.options, generatedBundles[0].options); + assert.equal(output.legacy.options, generatedBundles[1].options); + assert.equal(output.modern.bundle, generatedBundles[0].bundle); + assert.equal(output.legacy.bundle, generatedBundles[1].bundle); + assert.equal(output.modern.entrypoints.length, 1); + assert.equal(output.modern.entrypoints[0].chunk, generatedBundles[0].bundle['app.js']); + assert.deepEqual( + output.modern.entrypoints.map(e => e.importPath), + ['./app.js'], + ); + assert.equal(output.legacy.entrypoints.length, 1); + assert.equal(output.legacy.entrypoints[0].chunk, generatedBundles[1].bundle['app.js']); + assert.deepEqual( + output.legacy.entrypoints.map(e => e.importPath), + ['./legacy/app.js'], + ); }); it('allows configuring a public path', async () => { @@ -353,8 +385,11 @@ describe('getEntrypointBundles()', () => { pluginOptions: { publicPath: '/static' }, }); - expect(Object.keys(output).length).to.equal(1); - expect(output.default.entrypoints.length).to.equal(1); - expect(output.default.entrypoints.map(e => e.importPath)).to.eql(['/static/app.js']); + assert.equal(Object.keys(output).length, 1); + assert.equal(output.default.entrypoints.length, 1); + assert.deepEqual( + output.default.entrypoints.map(e => e.importPath), + ['/static/app.js'], + ); }); }); diff --git a/packages/rollup-plugin-html/test/src/output/getOutputHTML.test.ts b/packages/rollup-plugin-html/test/src/output/getOutputHTML.test.ts index 17ad92448..27bc434b3 100644 --- a/packages/rollup-plugin-html/test/src/output/getOutputHTML.test.ts +++ b/packages/rollup-plugin-html/test/src/output/getOutputHTML.test.ts @@ -1,7 +1,9 @@ -import { expect } from 'chai'; +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; import path from 'path'; -import { getOutputHTML, GetOutputHTMLParams } from '../../../src/output/getOutputHTML.js'; -import { EntrypointBundle } from '../../../src/RollupPluginHTMLOptions.js'; +import { getOutputHTML } from '../../../dist/output/getOutputHTML.js'; +import type { GetOutputHTMLParams } from '../../../dist/output/getOutputHTML.js'; +import type { EntrypointBundle } from '../../../dist/RollupPluginHTMLOptions.js'; import { html } from '../../../../../test-utils/rollup-test-utils.js'; describe('getOutputHTML()', () => { @@ -34,16 +36,19 @@ describe('getOutputHTML()', () => { it('injects output into the input HTML', async () => { const output = await getOutputHTML(defaultOptions); - expect(html`${output}`).to.equal(html` - - - -

Input HTML

- - - - - `); + assert.equal( + html`${output}`, + html` + + + +

Input HTML

+ + + + + `, + ); }); it('generates a HTML file for multiple rollup bundles', async () => { @@ -63,22 +68,25 @@ describe('getOutputHTML()', () => { }; const output = await getOutputHTML({ ...defaultOptions, entrypointBundles }); - expect(html`${output}`).to.equal(html` - - - -

Input HTML

- - - - - - - `); + assert.equal( + html`${output}`, + html` + + + +

Input HTML

+ + + + + + + `, + ); }); it('can transform html output', async () => { @@ -90,16 +98,19 @@ describe('getOutputHTML()', () => { }, }); - expect(html`${output}`).to.equal(html` - - - -

Transformed Input HTML

- - - - - `); + assert.equal( + html`${output}`, + html` + + + +

Transformed Input HTML

+ + + + + `, + ); }); it('allows setting multiple html transform functions', async () => { @@ -114,16 +125,19 @@ describe('getOutputHTML()', () => { }, }); - expect(html`${output}`).to.equal(html` - - - -

Transformed Input HTML

- - - - - `); + assert.equal( + html`${output}`, + html` + + + +

Transformed Input HTML

+ + + + + `, + ); }); it('can combine external and regular transform functions', async () => { @@ -136,16 +150,19 @@ describe('getOutputHTML()', () => { externalTransformHtmlFns: [html => html.replace(/h1/g, 'h2')], }); - expect(html`${output}`).to.equal(html` - - - -

Transformed Input HTML

- - - - - `); + assert.equal( + html`${output}`, + html` + + + +

Transformed Input HTML

+ + + + + `, + ); }); it('can disable default injection', async () => { @@ -154,18 +171,21 @@ describe('getOutputHTML()', () => { defaultInjectDisabled: true, }); - expect(html`${output}`).to.equal(html` - - - -

Input HTML

- - - `); + assert.equal( + html`${output}`, + html` + + + +

Input HTML

+ + + `, + ); }); it('can converts absolute urls to full absolute urls', async () => { - const rootDir = path.resolve(__dirname, '..', '..', 'fixtures', 'assets'); + const rootDir = path.resolve(import.meta.dirname, '..', '..', 'fixtures', 'assets'); const hashed = new Map(); hashed.set(path.join(rootDir, 'image-social.png'), 'image-social-xxx.png'); @@ -195,18 +215,21 @@ describe('getOutputHTML()', () => { }, }); - expect(html`${output}`).to.equal(html` - - - - - - - - - - - `); + assert.equal( + html`${output}`, + html` + + + + + + + + + + + `, + ); }); it('can minify HTML', async () => { @@ -239,7 +262,8 @@ describe('getOutputHTML()', () => { }, }); - expect(output).to.equal( + assert.equal( + output, '', ); }); diff --git a/packages/rollup-plugin-html/test/src/output/injectBundles.test.ts b/packages/rollup-plugin-html/test/src/output/injectBundles.test.ts index 662515977..2ce078af2 100644 --- a/packages/rollup-plugin-html/test/src/output/injectBundles.test.ts +++ b/packages/rollup-plugin-html/test/src/output/injectBundles.test.ts @@ -1,17 +1,19 @@ +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; + import { getTextContent } from '@web/parse5-utils'; -import { expect } from 'chai'; import { parse, serialize } from 'parse5'; import { html } from '../../../../../test-utils/rollup-test-utils.js'; -import { injectBundles, createLoadScript } from '../../../src/output/injectBundles.js'; +import { injectBundles, createLoadScript } from '../../../dist/output/injectBundles.js'; describe('createLoadScript()', () => { it('creates a script for es modules', () => { // parse5 types are broken const scriptAst = createLoadScript('./app.js', 'es') as any; - expect(scriptAst.tagName).to.equal('script'); - expect(scriptAst.attrs).to.eql([ + assert.equal(scriptAst.tagName, 'script'); + assert.deepEqual(scriptAst.attrs, [ { name: 'type', value: 'module' }, { name: 'src', value: './app.js' }, ]); @@ -21,15 +23,15 @@ describe('createLoadScript()', () => { // parse5 types are broken const scriptAst = createLoadScript('./app.js', 'system') as any; - expect(scriptAst.tagName).to.equal('script'); - expect(getTextContent(scriptAst)).to.equal('System.import("./app.js");'); + assert.equal(scriptAst.tagName, 'script'); + assert.equal(getTextContent(scriptAst), 'System.import("./app.js");'); }); it('creates a script for other modules types', () => { const scriptAst = createLoadScript('./app.js', 'iife') as any; - expect(scriptAst.tagName).to.equal('script'); - expect(scriptAst.attrs).to.eql([ + assert.equal(scriptAst.tagName, 'script'); + assert.deepEqual(scriptAst.attrs, [ { name: 'src', value: './app.js' }, { name: 'defer', value: '' }, ]); @@ -62,15 +64,18 @@ describe('injectBundles()', () => { const htmlWithBundles = serialize(document); - expect(html`${htmlWithBundles}`).to.eql(html` - - - -

Hello world

- - - - `); + assert.deepEqual( + html`${htmlWithBundles}`, + html` + + + +

Hello world

+ + + + `, + ); }); it('can inject multiple bundles', () => { @@ -110,15 +115,18 @@ describe('injectBundles()', () => { const htmlWithBundles = serialize(document); - expect(html`${htmlWithBundles}`).to.eql(html` - - - -

Hello world

- - - - - `); + assert.deepEqual( + html`${htmlWithBundles}`, + html` + + + +

Hello world

+ + + + + `, + ); }); }); diff --git a/packages/rollup-plugin-html/test/src/output/injectedUpdatedAssetPaths.test.ts b/packages/rollup-plugin-html/test/src/output/injectedUpdatedAssetPaths.test.ts index 375527dde..8b53f17f7 100644 --- a/packages/rollup-plugin-html/test/src/output/injectedUpdatedAssetPaths.test.ts +++ b/packages/rollup-plugin-html/test/src/output/injectedUpdatedAssetPaths.test.ts @@ -1,10 +1,11 @@ -import { expect } from 'chai'; +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; import path from 'path'; import { parse, serialize } from 'parse5'; import { html } from '../../../../../test-utils/rollup-test-utils.js'; -import { InputData } from '../../../src/input/InputData.js'; +import type { InputData } from '../../../dist/input/InputData.js'; -import { injectedUpdatedAssetPaths } from '../../../src/output/injectedUpdatedAssetPaths.js'; +import { injectedUpdatedAssetPaths } from '../../../dist/output/injectedUpdatedAssetPaths.js'; describe('injectedUpdatedAssetPaths()', () => { it('injects updated asset paths', () => { @@ -45,18 +46,21 @@ describe('injectedUpdatedAssetPaths()', () => { const result = serialize(document); - expect(html`${result}`).to.eql(html` - - - - - - - - - - - `); + assert.deepEqual( + html`${result}`, + html` + + + + + + + + + + + `, + ); }); it('handles a picture tag using source tags with srcset', () => { @@ -112,34 +116,37 @@ describe('injectedUpdatedAssetPaths()', () => { const result = serialize(document); - expect(html`${result}`).to.eql(html` - - - - - - - My Image Alternative Text - - - - `); + assert.deepEqual( + html`${result}`, + html` + + + + + + + My Image Alternative Text + + + + `, + ); }); it('handles video tag using source tags with src', () => { @@ -177,16 +184,19 @@ describe('injectedUpdatedAssetPaths()', () => { const result = serialize(document); - expect(html`${result}`).to.eql(html` - - - - - - - `); + assert.deepEqual( + html`${result}`, + html` + + + + + + + `, + ); }); it('handles virtual files', () => { @@ -224,17 +234,20 @@ describe('injectedUpdatedAssetPaths()', () => { const result = serialize(document); - expect(html`${result}`).to.eql(html` - - - - - - - - - - `); + assert.deepEqual( + html`${result}`, + html` + + + + + + + + + + `, + ); }); it('handles HTML files in a sub directory', () => { @@ -273,17 +286,20 @@ describe('injectedUpdatedAssetPaths()', () => { const result = serialize(document); - expect(html`${result}`).to.eql(html` - - - - - - - - - - `); + assert.deepEqual( + html`${result}`, + html` + + + + + + + + + + `, + ); }); it('handles virtual HTML files in a sub directory', () => { @@ -321,17 +337,20 @@ describe('injectedUpdatedAssetPaths()', () => { const result = serialize(document); - expect(html`${result}`).to.eql(html` - - - - - - - - - - `); + assert.deepEqual( + html`${result}`, + html` + + + + + + + + + + `, + ); }); it('prefixes a publicpath', () => { @@ -371,16 +390,19 @@ describe('injectedUpdatedAssetPaths()', () => { const result = serialize(document); - expect(html`${result}`).to.eql(html` - - - - - - - - - - `); + assert.deepEqual( + html`${result}`, + html` + + + + + + + + + + `, + ); }); });