test: add unit test ensuring correct exports

Esnure #55 stays addressed
JonasKruckenberg · Apr 11, 2021 · 3801ac0 · 3801ac0
1 parent 0112eef
commit 3801ac0
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -11,8 +11,10 @@
   "devDependencies": {
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-conventional": "^12.0.1",
+    "@types/picomatch": "^2.2.1",
     "cross-env": "^7.0.3",
-    "lerna": "^4.0.0"
+    "lerna": "^4.0.0",
+    "picomatch": "^2.2.3"
   },
   "commitlint": {
     "extends": [

diff --git a/packages/rollup/package.json b/packages/rollup/package.json
@@ -41,6 +41,7 @@
     "babel-jest": "^26.6.3",
     "jest": "^26.6.3",
     "jest-image-snapshot": "^4.4.1",
+    "jsdom": "^16.5.2",
     "rollup": "^2.44.0",
     "rollup-plugin-typescript2": "^0.30.0",
     "typescript": "^4.2.3"

diff --git a/packages/rollup/src/__tests__/main.test.ts b/packages/rollup/src/__tests__/main.test.ts
@@ -1,8 +1,9 @@
-import { rollup } from 'rollup'
+import { OutputAsset, OutputChunk, rollup } from 'rollup'
 import { imagetools } from '../index'
 import { join } from 'path'
-import { testEntry, getSource } from './util'
+import { testEntry, getFiles } from './util'
 import { toMatchImageSnapshot } from 'jest-image-snapshot'
+import { JSDOM } from 'jsdom'
 
 expect.extend({ toMatchImageSnapshot })
 process.chdir(join(__dirname, 'fixtures'))
@@ -169,8 +170,8 @@ describe('rollup-plugin-imagetools', () => {
             ]
         })
 
-        const source = await getSource(bundle)        
-        expect(source).toMatchImageSnapshot()
+        const files = await getFiles(bundle, '**.png') as OutputAsset[]
+        expect(files[0].source).toMatchImageSnapshot()
     })
 
     test('absolute path', async () => {
@@ -186,8 +187,8 @@ describe('rollup-plugin-imagetools', () => {
             ]
         })
 
-        const source = await getSource(bundle)
-        expect(source).toMatchImageSnapshot()
+        const files = await getFiles(bundle, '**.png') as OutputAsset[]
+        expect(files[0].source).toMatchImageSnapshot()
     })
 
     test('non existent file', async () => {
@@ -211,4 +212,52 @@ describe('rollup-plugin-imagetools', () => {
 
         await expect(p).rejects.toBeDefined()
     })
+
+    test('metadata import', async () => {
+        const bundle = await rollup({
+            plugins: [
+                testEntry(`
+                    import Image from "./pexels-allec-gomes-5195763.png?metadata"
+                    window.__IMAGE__ = Image
+                `),
+                imagetools()
+            ]
+        })
+
+        const files = await getFiles(bundle, '**.js') as OutputChunk[]        
+        const { window } = new JSDOM(``, { runScripts: "outside-only" });
+        window.eval(files[0].code)
+
+        expect(window.__IMAGE__).toHaveProperty('width')
+        expect(window.__IMAGE__).toHaveProperty('height')
+        expect(window.__IMAGE__).toHaveProperty('format')
+        expect(window.__IMAGE__).toHaveProperty('src')
+        expect(window.__IMAGE__).toHaveProperty('space')
+        expect(window.__IMAGE__).toHaveProperty('channels')
+        expect(window.__IMAGE__).toHaveProperty('depth')
+        expect(window.__IMAGE__).toHaveProperty('density')
+        expect(window.__IMAGE__).toHaveProperty('isProgressive')
+        expect(window.__IMAGE__).toHaveProperty('hasProfile')
+        expect(window.__IMAGE__).toHaveProperty('hasAlpha')
+    })
+
+    test('destructured metadata import', async () => {
+        const bundle = await rollup({
+            plugins: [
+                testEntry(`
+                    import { width, height, format } from "./pexels-allec-gomes-5195763.png?metadata"
+                    window.__IMAGE__ = { width, height, format }
+                `),
+                imagetools()
+            ]
+        })
+
+        const files = await getFiles(bundle, '**.js') as OutputChunk[]
+        const { window } = new JSDOM(``, { runScripts: "outside-only" });
+        window.eval(files[0].code)
+
+        expect(window.__IMAGE__).toHaveProperty('width')
+        expect(window.__IMAGE__).toHaveProperty('height')
+        expect(window.__IMAGE__).toHaveProperty('format')
+    })
 })
diff --git a/packages/rollup/src/__tests__/util.ts b/packages/rollup/src/__tests__/util.ts
@@ -1,4 +1,5 @@
 import { OutputAsset, Plugin, RollupBuild } from "rollup";
+import pm from 'picomatch'
 
 export function testEntry(value: string): Plugin {
     return {
@@ -18,10 +19,9 @@ export function testEntry(value: string): Plugin {
     }
 }
 
-export async function getSource(bundle: RollupBuild) {
+export async function getFiles(bundle: RollupBuild, pattern: string) {
+    const isMatch = pm(pattern)
     const { output } = await bundle.generate({ format: 'esm', dir: 'output' })
 
-    const files = output.filter((e): e is OutputAsset => e.type === 'asset')
-
-    return files[0].source
+    return output.filter(entry => isMatch(entry.fileName))
 }
diff --git a/packages/vite/package.json b/packages/vite/package.json
@@ -41,9 +41,11 @@
     "@babel/preset-env": "^7.13.10",
     "@babel/preset-typescript": "^7.13.0",
     "@types/jest": "^26.0.20",
+    "@types/jsdom": "^16.2.10",
     "babel-jest": "^26.6.3",
     "jest": "^26.6.3",
     "jest-image-snapshot": "^4.4.1",
+    "jsdom": "^16.5.2",
     "rollup": "^2.41.2",
     "rollup-plugin-typescript2": "^0.30.0",
     "ts-jest": "^26.5.3",

diff --git a/packages/vite/src/__tests__/main.test.ts b/packages/vite/src/__tests__/main.test.ts
@@ -1,8 +1,10 @@
 import { build } from 'vite'
 import { imagetools } from '../index'
 import { join } from 'path'
-import { getSource, testEntry } from './util'
+import { getFiles, testEntry } from './util'
 import { toMatchImageSnapshot } from 'jest-image-snapshot'
+import { OutputAsset, OutputChunk } from 'rollup'
+import { JSDOM } from 'jsdom'
 
 expect.extend({ toMatchImageSnapshot })
 process.chdir(join(__dirname, 'fixtures'))
@@ -220,8 +222,8 @@ describe('vite-imagetools', () => {
             ]
         })
 
-        const { source } = await getSource(bundle)
-        expect(source).toMatchImageSnapshot()
+        const files = getFiles(bundle, '**.png') as OutputAsset[]
+        expect(files[0].source).toMatchImageSnapshot()
     })
 
     test('absolute import', async () => {
@@ -239,8 +241,8 @@ describe('vite-imagetools', () => {
             ]
         })
 
-        const { source } = await getSource(bundle)
-        expect(source).toMatchImageSnapshot()
+        const files = getFiles(bundle, '**.png') as OutputAsset[]
+        expect(files[0].source).toMatchImageSnapshot()
     })
 
     test('non existent file', async () => {
@@ -274,4 +276,56 @@ describe('vite-imagetools', () => {
 
         await expect(p).resolves.toBeDefined()
     })
+
+    test('metadata import', async () => {
+        const bundle = await build({
+            logLevel: 'warn',
+            build: { write: false },
+            plugins: [
+                testEntry(`
+                    import Image from "./pexels-allec-gomes-5195763.png?metadata"
+                    window.__IMAGE__ = Image
+                `),
+                imagetools()
+            ]
+        })
+
+        const files = getFiles(bundle, '**.js') as OutputChunk[]
+        const { window } = new JSDOM(``, { runScripts: "outside-only" });
+        window.eval(files[0].code)
+
+        expect(window.__IMAGE__).toHaveProperty('width')
+        expect(window.__IMAGE__).toHaveProperty('height')
+        expect(window.__IMAGE__).toHaveProperty('format')
+        expect(window.__IMAGE__).toHaveProperty('src')
+        expect(window.__IMAGE__).toHaveProperty('space')
+        expect(window.__IMAGE__).toHaveProperty('channels')
+        expect(window.__IMAGE__).toHaveProperty('depth')
+        expect(window.__IMAGE__).toHaveProperty('density')
+        expect(window.__IMAGE__).toHaveProperty('isProgressive')
+        expect(window.__IMAGE__).toHaveProperty('hasProfile')
+        expect(window.__IMAGE__).toHaveProperty('hasAlpha')
+    })
+
+    test('destructured metadata import', async () => {
+        const bundle = await build({
+            logLevel: 'warn',
+            build: { write: false },
+            plugins: [
+                testEntry(`
+                    import { width, height, format } from "./pexels-allec-gomes-5195763.png?metadata"
+                    window.__IMAGE__ = { width, height, format }
+                `),
+                imagetools()
+            ]
+        })
+
+        const files = getFiles(bundle, '**.js') as OutputChunk[]
+        const { window } = new JSDOM(``, { runScripts: "outside-only" });
+        window.eval(files[0].code)
+
+        expect(window.__IMAGE__).toHaveProperty('width')
+        expect(window.__IMAGE__).toHaveProperty('height')
+        expect(window.__IMAGE__).toHaveProperty('format')
+    })
 })
diff --git a/packages/vite/src/__tests__/util.ts b/packages/vite/src/__tests__/util.ts
@@ -1,22 +1,23 @@
 import { Plugin } from "vite";
 import { RollupOutput, OutputAsset } from 'rollup'
+import pm from 'picomatch'
 
 export function testEntry(source: string): Plugin {
     return {
         name: 'test-entry',
-        enforce:'pre',
+        enforce: 'pre',
         resolveId(source) {
-            if(source === 'index.js') return 'index.js'
+            if (source === 'index.js') return 'index.js'
         },
-        load(id) {            
-            if(id === 'index.js') return source
+        load(id) {
+            if (id === 'index.js') return source
         }
     }
 }
 
-export function getSource(bundle: RollupOutput | RollupOutput[]): OutputAsset {
-    const out = (Array.isArray(bundle) ? bundle[0] : bundle).output
-        .find((e): e is OutputAsset => e.type === 'asset' && Buffer.isBuffer(e.source))
-    if(!out) throw new Error('no source found')
-    return out
+export function getFiles(bundle: RollupOutput | RollupOutput[], pattern: string) {
+    const isMatch = pm(pattern)
+
+    return (Array.isArray(bundle) ? bundle[0] : bundle).output
+        .filter(entry => isMatch(entry.fileName))
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2378,6 +2378,15 @@
     jest-diff "^26.0.0"
     pretty-format "^26.0.0"
 
+"@types/jsdom@^16.2.10":
+  version "16.2.10"
+  resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-16.2.10.tgz#c05ea94682d035943ae2453b79d56178496b6653"
+  integrity sha512-q3aIjp3ehhVSXSbvNyuireAfvU2umRiZ2aLumyeZewCnoNaokrRDdTu5IvaeE9pzNtWHXrUnM9lb22Vl3W08EA==
+  dependencies:
+    "@types/node" "*"
+    "@types/parse5" "*"
+    "@types/tough-cookie" "*"
+
 "@types/minimatch@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -2403,6 +2412,16 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/parse5@*":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.0.tgz#38590dc2c3cf5717154064e3ee9b6947ee21b299"
+  integrity sha512-oPwPSj4a1wu9rsXTEGIJz91ISU725t0BmSnUhb57sI+M8XEmvUop84lzuiYdq0Y5M6xLY8DBPg0C2xEQKLyvBA==
+
+"@types/picomatch@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@types/picomatch/-/picomatch-2.2.1.tgz#f9e5a5e6ad03996832975ab7eadfa35791ca2a8f"
+  integrity sha512-26/tQcDmJXYHiaWAAIjnTVL5nwrT+IVaqFZIbBImAuKk/r/j1r/1hmZ7uaOzG6IknqP3QHcNNQ6QO8Vp28lUoA==
+
 "@types/pixelmatch@*":
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/@types/pixelmatch/-/pixelmatch-5.2.3.tgz#aefcbfa7fb2861727af0ab7c097be7383bd584dd"
@@ -2427,6 +2446,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
   integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
+"@types/tough-cookie@*":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.0.tgz#fef1904e4668b6e5ecee60c52cc6a078ffa6697d"
+  integrity sha512-I99sngh224D0M7XgW1s120zxCt3VYQ3IQsuw3P3jbq5GG4yc79+ZjyKznyOGIQrflfylLgcfekeZW/vk0yng6A==
+
 "@types/yargs-parser@*":
   version "20.2.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-20.2.0.tgz#dd3e6699ba3237f0348cd085e4698780204842f9"
@@ -2475,7 +2499,7 @@ acorn@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.0.5:
+acorn@^8.0.5, acorn@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.1.0.tgz#52311fd7037ae119cbb134309e901aa46295b3fe"
   integrity sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==
@@ -5487,6 +5511,38 @@ jsdom@^16.4.0:
     ws "^7.4.4"
     xml-name-validator "^3.0.0"
 
+jsdom@^16.5.2:
+  version "16.5.2"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.5.2.tgz#583fac89a0aea31dbf6237e7e4bedccd9beab472"
+  integrity sha512-JxNtPt9C1ut85boCbJmffaQ06NBnzkQY/MWO3YxPW8IWS38A26z+B1oBvA9LwKrytewdfymnhi4UNH3/RAgZrg==
+  dependencies:
+    abab "^2.0.5"
+    acorn "^8.1.0"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.3.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.1"
+    domexception "^2.0.1"
+    escodegen "^2.0.0"
+    html-encoding-sniffer "^2.0.1"
+    is-potential-custom-element-name "^1.0.0"
+    nwsapi "^2.2.0"
+    parse5 "6.0.1"
+    request "^2.88.2"
+    request-promise-native "^1.0.9"
+    saxes "^5.0.1"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.0.0"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.1.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.5.0"
+    ws "^7.4.4"
+    xml-name-validator "^3.0.0"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -5740,7 +5796,7 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
-lodash@4.x, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4:
+lodash@4.x, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6764,6 +6820,11 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
+picomatch@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
+  integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
+
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -8527,6 +8588,15 @@ whatwg-url@^8.0.0, whatwg-url@^8.4.0:
     tr46 "^2.0.2"
     webidl-conversions "^6.1.0"
 
+whatwg-url@^8.5.0:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.5.0.tgz#7752b8464fc0903fec89aa9846fc9efe07351fd3"
+  integrity sha512-fy+R77xWv0AiqfLl4nuGUlQ3/6b5uNfQ4WAbGQVMYshCTCCPK9psC1nWh3XHuxGVCtlcDDQPQW1csmmIQo+fwg==
+  dependencies:
+    lodash "^4.7.0"
+    tr46 "^2.0.2"
+    webidl-conversions "^6.1.0"
+
 which-boxed-primitive@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"