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

Chromium의 mixed-content-reload.js를 DevTools unit test로 옮겼습니다. request가 기록되면 mixed content의 reload 안내가 Network panel 링크로 바뀌는지 검증합니다.

문제 설명

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

해결 내용

SecurityPanel.test.ts에 unit test 1개를 추가했습니다.
displayed-mixed-content 상태를 전달한 뒤 reload 안내가 표시되는지 확인했습니다.
같은 security state 이벤트를 다시 전달하고, OptionallyBlockable request의 RequestFinished 이벤트를 전달했습니다.
안내가 View 1 request in Network panel 문구와 role="link"를 갖는 링크로 바뀌는지 검증했습니다.
request 기록 전후에 설명이 하나이며, 상태 class·제목·본문이 유지되는지도 확인했습니다.

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

diff --git a/front_end/panels/security/SecurityPanel.test.ts b/front_end/panels/security/SecurityPanel.test.ts
index 889b29a..d36fd58 100644
--- a/front_end/panels/security/SecurityPanel.test.ts
+++ b/front_end/panels/security/SecurityPanel.test.ts
@@ -901,6 +901,53 @@
     assert.strictEqual(requestsLink.getAttribute('role'), 'link');
   });

+  it('replaces the mixed content reload prompt with a request link when a request is recorded', () => {
+    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, ['displayed-mixed-content']);
+    securityModel.dispatchEventToListeners(Security.SecurityModel.Events.VisibleSecurityStateChanged,
+                                           pageVisibleSecurityState);
+
+    function assertMixedContentExplanation() {
+      const explanations = securityPanel.mainView.contentElement.querySelectorAll<HTMLElement>('.security-explanation');
+      assert.lengthOf(explanations, 1);
+      const explanation = explanations[0];
+      assert.isTrue(explanation.classList.contains('security-explanation-neutral'));
+
+      const title = querySelectorErrorOnMissing(explanation, '.security-explanation-title');
+      assert.strictEqual(title.textContent, 'Resources - mixed content');
+
+      const explanationText = querySelectorErrorOnMissing(explanation, '.security-explanation-text');
+      assert.include(explanationText.textContent, 'This page includes HTTP resources.');
+      return explanation;
+    }
+
+    const explanationBeforeReload = assertMixedContentExplanation();
+    const reloadPrompt = querySelectorErrorOnMissing(explanationBeforeReload, '.security-mixed-content');
+    assert.strictEqual(reloadPrompt.textContent, 'Reload the page to record requests for HTTP resources.');
+
+    // Now simulate a refresh.
+    securityModel.dispatchEventToListeners(Security.SecurityModel.Events.VisibleSecurityStateChanged,
+                                           pageVisibleSecurityState);
+    const request = createNetworkRequest({
+      url: 'http://foo.test',
+      documentURL: 'https://foo.test',
+      frameId: '0',
+      loaderId: '0',
+    });
+    request.mixedContentType = Protocol.Security.MixedContentType.OptionallyBlockable;
+    const networkManager = securityModel.networkManager();
+    networkManager.dispatchEventToListeners(SDK.NetworkManager.Events.RequestFinished, request);
+
+    const explanationAfterReload = assertMixedContentExplanation();
+    const requestsLink = querySelectorErrorOnMissing(explanationAfterReload, '.security-mixed-content');
+    assert.strictEqual(requestsLink.textContent, 'View 1 request in Network panel');
+    assert.strictEqual(requestsLink.getAttribute('role'), 'link');
+  });
+
   it('replaces active and passive mixed content reload prompts with request links when requests are recorded', () => {
     const securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});
     renderElementIntoDOM(securityPanel);

테스트 방법

Gerrit에서 patchset 3의 CQ 실행 통과를 확인했습니다. 현재 리뷰 중입니다.

배운 점

상태가 바뀌는 UI는 기존 이벤트 전달 순서를 유지하고, 변경 전후를 모두 검증해야 합니다.

문제 설명

해결 내용

테스트 방법

배운 점

참고 자료