|
| 1 | +import { once } from 'node:events' |
| 2 | +import { createServer } from 'node:http' |
| 3 | +import path from 'node:path' |
| 4 | +import { beforeAll } from 'vitest' |
| 5 | +import serveHandler from 'serve-handler' |
| 6 | + |
| 7 | +import { E2E_TIMEOUT, setupPuppeteer } from './e2eUtils' |
| 8 | + |
| 9 | +// use the `vue` package root as the public directory |
| 10 | +// because we need to serve the Vue runtime for the tests |
| 11 | +const serverRoot = path.resolve(import.meta.dirname, '../../') |
| 12 | +const testPort = 9090 |
| 13 | +const basePath = path.relative( |
| 14 | + serverRoot, |
| 15 | + path.resolve(import.meta.dirname, './trusted-types.html'), |
| 16 | +) |
| 17 | +const baseUrl = `http://localhost:${testPort}/${basePath}` |
| 18 | + |
| 19 | +const { page, html } = setupPuppeteer() |
| 20 | + |
| 21 | +let server: ReturnType<typeof createServer> |
| 22 | +beforeAll(async () => { |
| 23 | + // sets up the static server |
| 24 | + server = createServer((req, res) => { |
| 25 | + return serveHandler(req, res, { |
| 26 | + public: serverRoot, |
| 27 | + cleanUrls: false, |
| 28 | + }) |
| 29 | + }) |
| 30 | + |
| 31 | + server.listen(testPort) |
| 32 | + await once(server, 'listening') |
| 33 | +}) |
| 34 | + |
| 35 | +afterAll(async () => { |
| 36 | + server.close() |
| 37 | + await once(server, 'close') |
| 38 | +}) |
| 39 | + |
| 40 | +describe('e2e: trusted types', () => { |
| 41 | + beforeEach(async () => { |
| 42 | + await page().goto(baseUrl) |
| 43 | + await page().waitForSelector('#app') |
| 44 | + }) |
| 45 | + |
| 46 | + test( |
| 47 | + 'should render the hello world app', |
| 48 | + async () => { |
| 49 | + await page().evaluate(() => { |
| 50 | + const { createApp, ref, h } = (window as any).Vue |
| 51 | + createApp({ |
| 52 | + setup() { |
| 53 | + const msg = ref('✅success: hello world') |
| 54 | + return function render() { |
| 55 | + return h('div', msg.value) |
| 56 | + } |
| 57 | + }, |
| 58 | + }).mount('#app') |
| 59 | + }) |
| 60 | + expect(await html('#app')).toContain('<div>✅success: hello world</div>') |
| 61 | + }, |
| 62 | + E2E_TIMEOUT, |
| 63 | + ) |
| 64 | + |
| 65 | + test( |
| 66 | + 'should render static vnode without error', |
| 67 | + async () => { |
| 68 | + await page().evaluate(() => { |
| 69 | + const { createApp, createStaticVNode } = (window as any).Vue |
| 70 | + createApp({ |
| 71 | + render() { |
| 72 | + return createStaticVNode('<div>✅success: static vnode</div>') |
| 73 | + }, |
| 74 | + }).mount('#app') |
| 75 | + }) |
| 76 | + expect(await html('#app')).toContain('<div>✅success: static vnode</div>') |
| 77 | + }, |
| 78 | + E2E_TIMEOUT, |
| 79 | + ) |
| 80 | + |
| 81 | + test( |
| 82 | + 'should accept v-html with custom policy', |
| 83 | + async () => { |
| 84 | + await page().evaluate(() => { |
| 85 | + const testPolicy = (window as any).trustedTypes.createPolicy('test', { |
| 86 | + createHTML: (input: string): string => input, |
| 87 | + }) |
| 88 | + |
| 89 | + const { createApp, ref, h } = (window as any).Vue |
| 90 | + createApp({ |
| 91 | + setup() { |
| 92 | + const msg = ref('✅success: v-html') |
| 93 | + return function render() { |
| 94 | + return h('div', { innerHTML: testPolicy.createHTML(msg.value) }) |
| 95 | + } |
| 96 | + }, |
| 97 | + }).mount('#app') |
| 98 | + }) |
| 99 | + expect(await html('#app')).toContain('<div>✅success: v-html</div>') |
| 100 | + }, |
| 101 | + E2E_TIMEOUT, |
| 102 | + ) |
| 103 | +}) |
0 commit comments