From 5f0e6a35a34c2c9ccdc663a5b62ebe5d0c6203c6 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 10 Apr 2024 19:01:19 +0900 Subject: [PATCH 1/4] fix: fix error overlay stack --- packages/vite/src/client/overlay.ts | 5 +---- playground/html/__tests__/html.spec.ts | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts index f0e34cac19e68e..63f570be488efb 100644 --- a/packages/vite/src/client/overlay.ts +++ b/packages/vite/src/client/overlay.ts @@ -165,7 +165,6 @@ kbd { ` // Error Template -let template: HTMLElement const createTemplate = () => h( 'div', @@ -214,9 +213,7 @@ export class ErrorOverlay extends HTMLElement { constructor(err: ErrorPayload['err'], links = true) { super() this.root = this.attachShadow({ mode: 'open' }) - - template ??= createTemplate() - this.root.appendChild(template) + this.root.appendChild(createTemplate()) codeframeRE.lastIndex = 0 const hasFrame = err.frame && codeframeRE.test(err.frame) diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts index 1baab83cf6a792..2d4a5d1d2d54f6 100644 --- a/playground/html/__tests__/html.spec.ts +++ b/playground/html/__tests__/html.spec.ts @@ -282,6 +282,29 @@ describe.runIf(isServe)('invalid', () => { const content = await page.waitForSelector('text=Good HTML') expect(content).toBeTruthy() }) + + test('stack', async () => { + await page.goto(viteTestUrl + '/invalid.html') + + const errorOverlay = await page.waitForSelector('vite-error-overlay') + const hiddenPromise = errorOverlay.waitForElementState('hidden') + await page.keyboard.press('Escape') + await hiddenPromise + + viteServer.hot.send({ + type: 'error', + err: { + message: 'someError', + stack: [ + 'Error: someError', + ' at someMethod (/some/file.ts:1:2)', + ].join('\n'), + }, + }) + const newErrorOverlay = await page.waitForSelector('vite-error-overlay') + const stack = await newErrorOverlay.$$eval('.stack', (m) => m[0].innerHTML) + expect(stack).toMatch(/^Error: someError/) + }) }) describe('Valid HTML', () => { From 6cbf961c83bf6a05f3ba99963393527993305575 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 10 Apr 2024 19:24:31 +0900 Subject: [PATCH 2/4] test: bad before good --- playground/html/__tests__/html.spec.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts index 2d4a5d1d2d54f6..e8876535e2c3c9 100644 --- a/playground/html/__tests__/html.spec.ts +++ b/playground/html/__tests__/html.spec.ts @@ -240,7 +240,7 @@ describe('link with props', () => { }) }) -describe.runIf(isServe)('invalid', () => { +describe.runIf(isServe).only('invalid', () => { test('should be 500 with overlay', async () => { const response = await page.goto(viteTestUrl + '/invalid.html') expect(response.status()).toBe(500) @@ -274,15 +274,6 @@ describe.runIf(isServe)('invalid', () => { expect(isVisbleOverlay).toBeFalsy() }) - test('should reload when fixed', async () => { - await page.goto(viteTestUrl + '/invalid.html') - await editFile('invalid.html', (content) => { - return content.replace('
Good') - }) - const content = await page.waitForSelector('text=Good HTML') - expect(content).toBeTruthy() - }) - test('stack', async () => { await page.goto(viteTestUrl + '/invalid.html') @@ -305,6 +296,15 @@ describe.runIf(isServe)('invalid', () => { const stack = await newErrorOverlay.$$eval('.stack', (m) => m[0].innerHTML) expect(stack).toMatch(/^Error: someError/) }) + + test('should reload when fixed', async () => { + await page.goto(viteTestUrl + '/invalid.html') + await editFile('invalid.html', (content) => { + return content.replace('
Good') + }) + const content = await page.waitForSelector('text=Good HTML') + expect(content).toBeTruthy() + }) }) describe('Valid HTML', () => { From a144ed81a1336effdb8b3b49a650a97cf07a4891 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Wed, 10 Apr 2024 19:25:59 +0900 Subject: [PATCH 3/4] test: no only --- playground/html/__tests__/html.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts index e8876535e2c3c9..7105f36541ec5d 100644 --- a/playground/html/__tests__/html.spec.ts +++ b/playground/html/__tests__/html.spec.ts @@ -240,7 +240,7 @@ describe('link with props', () => { }) }) -describe.runIf(isServe).only('invalid', () => { +describe.runIf(isServe)('invalid', () => { test('should be 500 with overlay', async () => { const response = await page.goto(viteTestUrl + '/invalid.html') expect(response.status()).toBe(500) From 9d8424a960e218f091ed16b37932ae8c67be37f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=A0=20/=20green?= Date: Sat, 13 Apr 2024 23:42:42 +0900 Subject: [PATCH 4/4] chore: update test name --- playground/html/__tests__/html.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts index 7105f36541ec5d..ed06f730308a4d 100644 --- a/playground/html/__tests__/html.spec.ts +++ b/playground/html/__tests__/html.spec.ts @@ -274,7 +274,7 @@ describe.runIf(isServe)('invalid', () => { expect(isVisbleOverlay).toBeFalsy() }) - test('stack', async () => { + test('stack is updated', async () => { await page.goto(viteTestUrl + '/invalid.html') const errorOverlay = await page.waitForSelector('vite-error-overlay')