Migrate devtools/security/blocked-mixed-content.js to a unit test

Chromium의 blocked-mixed-content.js를 DevTools unit test로 옮겼습니다. 차단된 mixed content의 설명과 request 링크가 Security panel에 표시되는지 검증합니다.

문제 설명

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

해결 내용

• SecurityPanel.test.ts에 unit test 1개를 추가했습니다.
• 기존 테스트와 같은 security state 이벤트를 전달하고, mixed content로 차단된 Blockable request의 RequestFinished 이벤트를 전달했습니다.
• 설명이 하나이며 security-explanation-info class를 갖는지 확인했습니다.
• Blocked mixed content 제목, 차단 안내 문구, View 1 request in Network panel 링크 문구와 role="link"를 검증했습니다.

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

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

diff --git a/front_end/panels/security/SecurityPanel.test.ts b/front_end/panels/security/SecurityPanel.test.ts
index 50ab024..cbdfe4c 100644
--- a/front_end/panels/security/SecurityPanel.test.ts
+++ b/front_end/panels/security/SecurityPanel.test.ts
@@ -786,6 +786,43 @@
     assert.strictEqual(unknownOriginElement.textContent, 'https://does-not-resolve.test');
   });

+  it('shows an explanation for blocked mixed content', () => {
+    const securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});
+    renderElementIntoDOM(securityPanel);
+    const securityModel = target.model(Security.SecurityModel.SecurityModel);
+    assert.exists(securityModel);
+    const pageVisibleSecurityState = new Security.SecurityModel.PageVisibleSecurityState(
+        Protocol.Security.SecurityState.Neutral, null, null, ['scheme-is-not-cryptographic']);
+    securityModel.dispatchEventToListeners(Security.SecurityModel.Events.VisibleSecurityStateChanged,
+                                           pageVisibleSecurityState);
+
+    const request = createNetworkRequest({
+      url: 'http://foo.test',
+      documentURL: 'https://foo.test',
+      frameId: '0',
+      loaderId: '0',
+    });
+    request.setBlockedReason(Protocol.Network.BlockedReason.MixedContent);
+    request.mixedContentType = Protocol.Security.MixedContentType.Blockable;
+    const networkManager = securityModel.networkManager();
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.RequestFinished, request);
+
+    const explanations = securityPanel.mainView.contentElement.querySelectorAll<HTMLElement>('.security-explanation');
+    assert.lengthOf(explanations, 1);
+    const explanation = explanations[0];
+    assert.isTrue(explanation.classList.contains('security-explanation-info'));
+
+    const title = querySelectorErrorOnMissing(explanation, '.security-explanation-title');
+    assert.strictEqual(title.textContent, 'Blocked mixed content');
+
+    const explanationText = querySelectorErrorOnMissing(explanation, '.security-explanation-text');
+    assert.include(explanationText.textContent, 'Your page requested non-secure resources that were blocked.');
+
+    const requestsLink = querySelectorErrorOnMissing(explanation, 'button.security-mixed-content');
+    assert.strictEqual(requestsLink.textContent, 'View 1 request in Network panel');
+    assert.strictEqual(requestsLink.getAttribute('role'), 'link');
+  });
+
   it('shows origins with blockable and optionally blockable resources in the sidebar', async () => {
     const securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});

테스트 방법

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

배운 점

DOM 전체 출력 대신 설명의 수와 상태, 안내 문구, 링크의 역할을 직접 검증하면 UI의 의미를 확인하는 테스트를 작성할 수 있습니다.

참고 자료

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