Migrate devtools/security/blank-origin-not-shown.js to a unit test

Chromium의 blank origin 웹 테스트를 DevTools의 unit test로 옮겼습니다. Security sidebar에 blank origin이 표시되지 않는지 검증합니다.

문제 설명

기존 blank-origins-not-shown.js는 Security sidebar의 DOM 출력을 기대 결과와 비교해, DOM 구조 변경에도 기대 결과 갱신이 필요했습니다. 이를 DevTools unit test로 옮겨 표시할 group과 origin을 직접 검증하도록 했습니다.

해결 내용

• SecurityPanel.test.ts에 unit test 1개를 추가했습니다.
• 기존 테스트와 같은 HTTPS 이미지 URL과 data: URL로 request를 만들고, 두 request의 documentURL을 https://foo.test로 유지했습니다.
• NetworkManager에 두 RequestFinished 이벤트를 전달한 뒤 doubleRaf()로 렌더링을 기다렸습니다.
• 보이는 sidebar group이 Main origin, Unknown / canceled인지 확인하고, 전체 origin 항목이 하나뿐이며 Unknown / canceled group의 값이 https://foo.test인지 검증했습니다.

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

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

diff --git a/front_end/panels/security/SecurityPanel.test.ts b/front_end/panels/security/SecurityPanel.test.ts
index feb00e8..df9f092 100644
--- a/front_end/panels/security/SecurityPanel.test.ts
+++ b/front_end/panels/security/SecurityPanel.test.ts
@@ -696,6 +696,47 @@
         '.security-main-view-reload-message'));
   });

+  it('does not show blank origins 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',
+    });
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.RequestFinished, request1);
+
+    const request2 = createNetworkRequest({
+      url:
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAYAAABmBXS+AAAAPElEQVR42mNgQAMZGRn/GfABkIIdO3b8x6kQpgAEsCpEVgADKAqxKcBQCCLwARRFIBodYygiyiSCighhAO4e2jskhrm3AAAAAElFTkSuQmCC',
+      documentURL: 'https://foo.test',
+      frameId: '0',
+      loaderId: '0',
+    });
+    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', 'Unknown / canceled']);
+
+    const allOriginElements = sidebarRoot.querySelectorAll<HTMLLIElement>('.security-sidebar-tree-item');
+    assert.lengthOf(allOriginElements, 1);
+
+    const unknownOriginGroup = sidebarRoot.querySelector('[aria-label="Unknown / canceled"]');
+    assert.exists(unknownOriginGroup);
+    const originElements = unknownOriginGroup.querySelectorAll<HTMLLIElement>('.security-sidebar-tree-item');
+    assert.lengthOf(originElements, 1);
+    const originElement = querySelectorErrorOnMissing(originElements[0], '.highlighted-url');
+    assert.strictEqual(originElement.textContent, 'https://foo.test');
+  });
+
   it('shows origins with blockable and optionally blockable resources in the sidebar', async () => {
     const securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});

테스트 방법

추가한 unit test는 does not show blank origins in the sidebar입니다. HTTPS origin은 유지되고 data: URL에 대한 blank origin 항목은 추가되지 않는지, sidebar 전체의 group과 origin 항목 수를 함께 확인합니다.

최종 patchset의 CQ 실행이 통과했으며, 2026년 9월 23일(한국 시간) DevTools main에 병합되었습니다.

배운 점

• 테스트를 옮길 때는 request URL뿐 아니라 documentURL 같은 입력도 유지해야 기존 시나리오를 재현할 수 있습니다.
• 특정 group만 검사하면 다른 group에 잘못 추가된 origin을 놓칠 수 있으므로, sidebar 전체의 항목 수와 대상 group의 내용을 함께 검증해야 합니다.

참고 자료

• 작업 이슈 #535
• Gerrit CL 8450050
• 기존 Chromium 테스트 제거 CL 8450591