From f557119293b56a204ad080c3b3fbcbc71d423082 Mon Sep 17 00:00:00 2001 From: moresoo Date: Mon, 1 Jul 2024 14:33:00 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20addEventListener=EB=A5=BC=20?= =?UTF-8?q?=EB=AA=A9=ED=82=B9=ED=95=98=EB=8A=94=20=EB=8C=80=EC=8B=A0,=20di?= =?UTF-8?q?spatchEvent=20=EB=A9=94=EC=86=8C=EB=93=9C=EB=A5=BC=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/sdk-loader/src/loadScript.test.ts | 31 +++++++++------------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/packages/sdk-loader/src/loadScript.test.ts b/packages/sdk-loader/src/loadScript.test.ts index 0eee3f3..381fc74 100644 --- a/packages/sdk-loader/src/loadScript.test.ts +++ b/packages/sdk-loader/src/loadScript.test.ts @@ -13,7 +13,6 @@ describe('loadScript', () => { delete window.TossPayments; document.head.innerHTML = ''; - document.head.appendChild = vi.fn(); // NOTE: 테스트 환경에서 script inject 방지 }); describe('기본 동작', () => { @@ -21,7 +20,7 @@ describe('loadScript', () => { // given const { loadScript } = await import('./loadScript'); - const { script, eventListeners } = mockScriptElement(); + const { script } = mockScriptElement(); vi.spyOn(document, 'createElement') .mockReturnValueOnce(script) @@ -29,7 +28,7 @@ describe('loadScript', () => { // when const promise = loadScript('http://example.com/example.js', 'TossPayments'); window.TossPayments = vi.fn(); // SDK는 주어진 namespace에 인스턴스를 생성함 - eventListeners.load(new Event('load')); // script 로드가 완료됨 + script.dispatchEvent(new Event('load')); // script 로드가 완료됨 // then expect(promise).resolves.toBe(window.TossPayments); @@ -37,14 +36,14 @@ describe('loadScript', () => { test('script 로드를 실패하면, cachedPromise가 null로 설정되고 에러를 throw 해야한다', async () => { // given const { loadScript } = await import('./loadScript'); - const { script, eventListeners } = mockScriptElement(); + const { script } = mockScriptElement(); vi.spyOn(document, 'createElement') .mockReturnValueOnce(script) // when const promise = loadScript('http://example.com/example.js', 'TossPayments'); - eventListeners.error(new Event('error')); // script 로드가 실패함 + script.dispatchEvent(new Event('error')); // script 로드가 실패함 // then await expect(promise).rejects.toThrowError('[TossPayments SDK] Failed to load script: [http://example.com/example.js]'); @@ -57,14 +56,14 @@ describe('loadScript', () => { test('script 로드를 성공했지만 namespace에 인스턴스가 존재하지 않으면, 에러를 throw 해야한다', async () => { // given const { loadScript } = await import('./loadScript'); - const { script, eventListeners } = mockScriptElement(); + const { script } = mockScriptElement(); vi.spyOn(document, 'createElement') .mockReturnValueOnce(script) // when const promise = loadScript('http://example.com/example.js', 'TossPayments'); - eventListeners.load(new Event('load')); // script 로드가 완료됨 + script.dispatchEvent(new Event('load')); // script 로드가 완료됨 // then expect(promise).rejects.toThrowError('[TossPayments SDK] TossPayments is not available'); @@ -72,7 +71,7 @@ describe('loadScript', () => { test('priority 옵션을 설정하면, script element의 fetchPriority 속성이 설정되어야 한다', async () => { // given const { loadScript } = await import('./loadScript'); - const { script, eventListeners } = mockScriptElement(); + const { script } = mockScriptElement(); vi.spyOn(document, 'createElement') .mockReturnValueOnce(script) @@ -81,7 +80,7 @@ describe('loadScript', () => { // when const promise = loadScript('http://example.com/example.js', 'TossPayments', { priority: 'high' }); window.TossPayments = vi.fn(); // SDK는 주어진 namespace에 인스턴스를 생성함 - eventListeners.load(new Event('load')); // script 로드가 완료됨 + script.dispatchEvent(new Event('load')); // script 로드가 완료됨 // then expect((script as any).fetchPriority).toBe('high'); @@ -94,7 +93,7 @@ describe('loadScript', () => { // given const { loadScript } = await import('./loadScript'); - const { script, eventListeners } = mockScriptElement(); + const { script } = mockScriptElement(); vi.spyOn(document, 'createElement') .mockReturnValueOnce(script) @@ -102,7 +101,7 @@ describe('loadScript', () => { // when const promise1 = loadScript('http://example.com/script.js', 'TossPayments'); window.TossPayments = vi.fn(); // SDK는 주어진 namespace에 인스턴스를 생성함 - eventListeners.load(new Event('load')); // script 로드가 완료됨 + script.dispatchEvent(new Event('load')); // script 로드가 완료됨 const promise2 = loadScript('http://example.com/script.js', 'TossPayments'); @@ -146,13 +145,9 @@ describe('loadScript', () => { }); function mockScriptElement() { - // NOTE: script의 load, error 이벤트를 임의로 발생시키기 위해 이벤트 리스너를 mocking 합니다 - const eventListeners = {} as { [key: string]: EventListener }; - const script = document.createElement('script'); + document.head.appendChild = vi.fn(); // NOTE: 테스트 환경에서 script inject 방지 - script.addEventListener = (event: string, listener: EventListener) => { - eventListeners[event] = listener; - }; + const script = document.createElement('script'); - return { script, eventListeners }; + return { script }; } From b357b7eb0bb0132d8c102262aaaaf032008ef139 Mon Sep 17 00:00:00 2001 From: moresoo Date: Mon, 1 Jul 2024 14:35:47 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20document.createElement=20mockin?= =?UTF-8?q?g=EC=9D=80=20=EC=9C=A0=ED=8B=B8=20=EB=82=B4=EC=97=90=EC=84=9C?= =?UTF-8?q?=20=EA=B3=B5=ED=86=B5=EC=9C=BC=EB=A1=9C=20=EC=B2=98=EB=A6=AC?= =?UTF-8?q?=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/sdk-loader/src/loadScript.test.ts | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/sdk-loader/src/loadScript.test.ts b/packages/sdk-loader/src/loadScript.test.ts index 381fc74..84b8255 100644 --- a/packages/sdk-loader/src/loadScript.test.ts +++ b/packages/sdk-loader/src/loadScript.test.ts @@ -22,9 +22,6 @@ describe('loadScript', () => { const { script } = mockScriptElement(); - vi.spyOn(document, 'createElement') - .mockReturnValueOnce(script) - // when const promise = loadScript('http://example.com/example.js', 'TossPayments'); window.TossPayments = vi.fn(); // SDK는 주어진 namespace에 인스턴스를 생성함 @@ -38,9 +35,6 @@ describe('loadScript', () => { const { loadScript } = await import('./loadScript'); const { script } = mockScriptElement(); - vi.spyOn(document, 'createElement') - .mockReturnValueOnce(script) - // when const promise = loadScript('http://example.com/example.js', 'TossPayments'); script.dispatchEvent(new Event('error')); // script 로드가 실패함 @@ -58,9 +52,6 @@ describe('loadScript', () => { const { loadScript } = await import('./loadScript'); const { script } = mockScriptElement(); - vi.spyOn(document, 'createElement') - .mockReturnValueOnce(script) - // when const promise = loadScript('http://example.com/example.js', 'TossPayments'); script.dispatchEvent(new Event('load')); // script 로드가 완료됨 @@ -95,9 +86,6 @@ describe('loadScript', () => { const { script } = mockScriptElement(); - vi.spyOn(document, 'createElement') - .mockReturnValueOnce(script) - // when const promise1 = loadScript('http://example.com/script.js', 'TossPayments'); window.TossPayments = vi.fn(); // SDK는 주어진 namespace에 인스턴스를 생성함 @@ -149,5 +137,8 @@ function mockScriptElement() { const script = document.createElement('script'); + vi.spyOn(document, 'createElement') + .mockReturnValueOnce(script) + return { script }; } From 6bf85b0197bfa67829f12803c3dbd3c7e7dd7701 Mon Sep 17 00:00:00 2001 From: moresoo Date: Mon, 1 Jul 2024 14:39:20 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=EB=88=84=EB=9D=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/sdk-loader/src/loadScript.test.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/sdk-loader/src/loadScript.test.ts b/packages/sdk-loader/src/loadScript.test.ts index 84b8255..7220738 100644 --- a/packages/sdk-loader/src/loadScript.test.ts +++ b/packages/sdk-loader/src/loadScript.test.ts @@ -64,10 +64,6 @@ describe('loadScript', () => { const { loadScript } = await import('./loadScript'); const { script } = mockScriptElement(); - vi.spyOn(document, 'createElement') - .mockReturnValueOnce(script) - - // when const promise = loadScript('http://example.com/example.js', 'TossPayments', { priority: 'high' }); window.TossPayments = vi.fn(); // SDK는 주어진 namespace에 인스턴스를 생성함 @@ -138,7 +134,7 @@ function mockScriptElement() { const script = document.createElement('script'); vi.spyOn(document, 'createElement') - .mockReturnValueOnce(script) + .mockReturnValueOnce(script); return { script }; }