Migrate devtools/security/security-explanation-ordering.js to a unit test Verify that informational security explanations are shown after regular explanations. Bug: 351056469 Change-Id: I77e900f1cbcf0e5f5d36f1c332fc2736d487fb47 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/8603988 Reviewed-by: Mathias Bynens <mathias@chromium.org> Commit-Queue: Hojeong Park <parkhj062@gmail.com> Reviewed-by: Danil Somsikov <dsv@chromium.org>

diff --git a/front_end/panels/security/SecurityPanel.test.ts b/front_end/panels/security/SecurityPanel.test.ts
index 7f7eb89..111b113 100644
--- a/front_end/panels/security/SecurityPanel.test.ts
+++ b/front_end/panels/security/SecurityPanel.test.ts

@@ -960,6 +960,24 @@
     assert.strictEqual(unknownOriginElement.textContent, 'https://does-not-resolve.test');
   });
 
+  it('shows informational explanations after regular explanations', () => {
+    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.Secure, null, null, ['pkp-bypassed']);
+    securityModel.dispatchEventToListeners(Security.SecurityModel.Events.VisibleSecurityStateChanged,
+                                           pageVisibleSecurityState);
+
+    const titles = securityPanel.mainView.contentElement.querySelectorAll('.security-explanation-title');
+    assert.deepEqual(Array.from(titles, title => title.textContent), [
+      'Resources - all served securely',
+      'Certificate - Public-Key-Pinning bypassed',
+    ]);
+  });
+
   it('shows an explanation for blocked mixed content and clears it on navigation', () => {
     const securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});
     renderElementIntoDOM(securityPanel);