diff --git a/playground/assets-sanitize/__tests__/assets-sanitize.spec.ts b/playground/assets-sanitize/__tests__/assets-sanitize.spec.ts index e1d60ca90f0368..174cd2188fb3c9 100644 --- a/playground/assets-sanitize/__tests__/assets-sanitize.spec.ts +++ b/playground/assets-sanitize/__tests__/assets-sanitize.spec.ts @@ -1,20 +1,27 @@ import { expect, test } from 'vitest' -import { getBg, isBuild, listAssets, page } from '~utils' +import { getBg, isBuild, page, readManifest } from '~utils' if (!isBuild) { - test('importing asset with special char in filename works', async () => { - expect(await getBg('.circle-bg')).toContain('+circle.svg') - expect(await page.textContent('.circle-bg')).toMatch('+circle.svg') + test('importing asset with special char in filename works in dev', async () => { + expect(await getBg('.plus-circle')).toContain('+circle.svg') + expect(await page.textContent('.plus-circle')).toMatch('+circle.svg') + expect(await getBg('.underscore-circle')).toContain('_circle.svg') + expect(await page.textContent('.underscore-circle')).toMatch('_circle.svg') }) } else { - const expected_asset_name_RE = /_circle\.[\w]+\.svg/ - test('importing asset with special char in filename works', async () => { - expect(await getBg('.circle-bg')).toMatch(expected_asset_name_RE) - expect(await page.textContent('.circle-bg')).toMatch(expected_asset_name_RE) - }) - test('asset with special char in filename gets sanitized', async () => { - const svgs = listAssets().filter((a) => a.endsWith('.svg')) - expect(svgs[0]).toMatch(expected_asset_name_RE) - expect(svgs.length).toBe(1) + test('importing asset with special char in filename works in build', async () => { + const manifest = readManifest() + const plusCircleAsset = manifest['+circle.svg'].file + const underscoreCircleAsset = manifest['_circle.svg'].file + expect(await getBg('.plus-circle')).toMatch(plusCircleAsset) + expect(await page.textContent('.plus-circle')).toMatch(plusCircleAsset) + expect(await getBg('.underscore-circle')).toMatch(underscoreCircleAsset) + expect(await page.textContent('.underscore-circle')).toMatch( + underscoreCircleAsset + ) + expect(plusCircleAsset).toMatch('/_circle') + expect(underscoreCircleAsset).toMatch('/_circle') + expect(plusCircleAsset).not.toBe(underscoreCircleAsset) + expect(Object.keys(manifest).length).toBe(3) // 2 svg, 1 index.js }) } diff --git a/playground/assets-sanitize/_circle.svg b/playground/assets-sanitize/_circle.svg new file mode 100644 index 00000000000000..f8e310c6148d42 --- /dev/null +++ b/playground/assets-sanitize/_circle.svg @@ -0,0 +1,3 @@ + diff --git a/playground/assets-sanitize/index.html b/playground/assets-sanitize/index.html index b9e67642d0023f..e4b4913ca7142c 100644 --- a/playground/assets-sanitize/index.html +++ b/playground/assets-sanitize/index.html @@ -1,6 +1,11 @@ -