Migrate devtools/security/failed-request.js to a unit test

Chromium의 failed-request.js를 DevTools unit test로 옮겼습니다. 실패한 request의 origin이 Security sidebar에 올바르게 표시되는지 검증합니다.

문제 설명

기존 테스트는 Security sidebar의 DOM 출력을 기대 결과와 비교해, DOM 구조 변경에도 기대 결과 갱신이 필요했습니다. 이를 unit test로 옮겨 group과 origin을 직접 검증하도록 했습니다.

해결 내용

• SecurityPanel.test.ts에 unit test 1개를 추가했습니다.
• 기존 테스트와 같은 URL과 documentURL로 request 2개를 만들고, 하나는 Secure, 다른 하나는 security state를 unknown으로 유지했습니다.
• RequestFinished 이벤트를 전달하고 doubleRaf()로 렌더링을 기다렸습니다.
• 보이는 group이 Main origin, Secure origins, Unknown / canceled이며, 전체 origin 항목이 2개인지 확인했습니다.
• Secure origins에는 https://foo.test, Unknown / canceled에는 https://does-not-resolve.test가 각각 하나씩 표시되는지 검증했습니다.

기존 Chromium 테스트와 기대 결과 파일의 제거는 후속 CL 8460722에서 진행했습니다.

전체 코드 diff는 다음과 같습니다.

diff --git a/front_end/panels/security/SecurityPanel.test.ts b/front_end/panels/security/SecurityPanel.test.ts
index df9f092..50ab024 100644
--- a/front_end/panels/security/SecurityPanel.test.ts
+++ b/front_end/panels/security/SecurityPanel.test.ts
@@ -737,6 +737,55 @@
     assert.strictEqual(originElement.textContent, 'https://foo.test');
   });

+  it('shows origins with failed requests in the sidebar', async () => {
+    const securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});
+    renderElementIntoDOM(securityPanel);
+    const networkManager = target.model(SDK.NetworkManager.NetworkManager);
+    assert.exists(networkManager);
+
+    const request1 = createNetworkRequest({
+      url: 'https://foo.test/foo.jpg',
+      documentURL: 'https://foo.test',
+      frameId: '0',
+      loaderId: '0',
+    });
+    request1.setSecurityState(Protocol.Security.SecurityState.Secure);
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.RequestFinished, request1);
+
+    const request2 = createNetworkRequest({
+      url: 'https://does-not-resolve.test',
+      documentURL: 'https://does-not-resolve.test',
+      frameId: '0',
+      loaderId: '0',
+    });
+    // Leave the security state unknown.
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.RequestFinished, request2);
+    await doubleRaf();
+
+    const sidebarRoot = securityPanel.sidebar.contentElement.querySelector('devtools-tree')!.shadowRoot!;
+    const groupTitles = Array.from(sidebarRoot.querySelectorAll('.security-sidebar-origins-title'))
+                            .filter(element => element.checkVisibility())
+                            .map(element => element.textContent);
+    assert.deepEqual(groupTitles, ['Main origin', 'Secure origins', 'Unknown / canceled']);
+
+    const allOriginElements = sidebarRoot.querySelectorAll<HTMLLIElement>('.security-sidebar-tree-item');
+    assert.lengthOf(allOriginElements, 2);
+
+    const secureOriginGroup = sidebarRoot.querySelector('[aria-label="Secure origins"]');
+    assert.exists(secureOriginGroup);
+    const secureOriginElements = secureOriginGroup.querySelectorAll<HTMLLIElement>('.security-sidebar-tree-item');
+    assert.lengthOf(secureOriginElements, 1);
+    const secureOriginElement = querySelectorErrorOnMissing(secureOriginElements[0], '.highlighted-url');
+    assert.strictEqual(secureOriginElement.textContent, 'https://foo.test');
+
+    const unknownOriginGroup = sidebarRoot.querySelector('[aria-label="Unknown / canceled"]');
+    assert.exists(unknownOriginGroup);
+    const unknownOriginElements = unknownOriginGroup.querySelectorAll<HTMLLIElement>('.security-sidebar-tree-item');
+    assert.lengthOf(unknownOriginElements, 1);
+    const unknownOriginElement = querySelectorErrorOnMissing(unknownOriginElements[0], '.highlighted-url');
+    assert.strictEqual(unknownOriginElement.textContent, 'https://does-not-resolve.test');
+  });
+
   it('shows origins with blockable and optionally blockable resources in the sidebar', async () => {
     const securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});

테스트 방법

CQ를 통해 2026년 9월 24일(한국 시간) DevTools main에 병합되었습니다.

배운 점

origin의 표시 여부뿐 아니라 group 분류와 전체 항목 수를 함께 검증해야 누락되거나 잘못 분류된 origin도 확인할 수 있습니다.

참고 자료

• 작업 이슈 #535
• Gerrit CL 8449733
• 기존 테스트 제거 CL 8460722