Reimplment flaky http/tests/devtools/coverage/coverage-view-unused.js as a e2e test.
Bug: 1300772
Change-Id: Ieb98b0517797b84e3499250e525d1fe76f76a674
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3735065
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Auto-Submit: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Danil Somsikov <dsv@chromium.org>
diff --git a/test/e2e/coverage/coverage_test.ts b/test/e2e/coverage/coverage_test.ts
index 3a1ee6a..565a7e8 100644
--- a/test/e2e/coverage/coverage_test.ts
+++ b/test/e2e/coverage/coverage_test.ts
@@ -2,9 +2,18 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
+import {assert} from 'chai';
+
+import {
+ getBrowserAndPages,
+ getTestServerPort,
+ goToResource,
+ waitForElementWithTextContent,
+} from '../../shared/helper.js';
import {describe, it} from '../../shared/mocha-extensions.js';
import {
clearCoverageContent,
+ getCoverageData,
navigateToCoverageTestSite,
startInstrumentingCoverage,
stopInstrumentingCoverage,
@@ -23,4 +32,57 @@
await stopInstrumentingCoverage();
await clearCoverageContent();
});
+
+ it('Shows completly uncovered css files', async () => {
+ const {target} = getBrowserAndPages();
+
+ await goToResource('coverage/unused-css-coverage.html');
+ await waitForTheCoveragePanelToLoad();
+ await startInstrumentingCoverage();
+ const URL_PREFIX = `https://localhost:${getTestServerPort()}/test/e2e/resources/coverage`;
+ assert.deepEqual(await getCoverageData(5), [
+ {
+ 'total': '283',
+ 'unused': '276',
+ 'url': `${URL_PREFIX}/unused-css-coverage.html`,
+ },
+ {
+ 'total': '198',
+ 'unused': '198',
+ 'url': `${URL_PREFIX}/not-initially-used.css`,
+ },
+ {
+ 'total': '196',
+ 'unused': '196',
+ 'url': `${URL_PREFIX}/unused.css`,
+ },
+ {
+ 'total': '198',
+ 'unused': '174',
+ 'url': `${URL_PREFIX}/used.css`,
+ },
+ {
+ 'total': '0',
+ 'unused': '0',
+ 'url': `${URL_PREFIX}/empty.css`,
+ },
+ ]);
+
+ await target.evaluate('appendStylesheet()');
+
+ assert.deepInclude(await getCoverageData(6), {
+ 'total': '0',
+ 'unused': '0',
+ 'url': `${URL_PREFIX}/lazily-loaded.css`,
+ });
+
+ await target.evaluate('appendElement()');
+
+ await waitForElementWithTextContent(`${URL_PREFIX}/not-initially-used.cssCSS198198100%`);
+ assert.deepInclude(await getCoverageData(6), {
+ 'total': '198',
+ 'unused': '198',
+ 'url': `${URL_PREFIX}/not-initially-used.css`,
+ });
+ });
});
diff --git a/test/e2e/helpers/coverage-helpers.ts b/test/e2e/helpers/coverage-helpers.ts
index cbc343e..5694198 100644
--- a/test/e2e/helpers/coverage-helpers.ts
+++ b/test/e2e/helpers/coverage-helpers.ts
@@ -2,7 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-import {click, goToResource, waitFor, waitForNone} from '../../shared/helper.js';
+import {click, goToResource, waitFor, waitForMany, waitForNone} from '../../shared/helper.js';
import {openPanelViaMoreTools} from './settings-helpers.js';
@@ -40,3 +40,12 @@
const messageElement = await waitFor('.coverage-results .landing-page .message');
return messageElement.evaluate(node => (node as HTMLElement).innerText);
}
+
+export async function getCoverageData(expectedCount: number) {
+ const rows = await waitForMany('.data-grid-data-grid-node', expectedCount, await waitFor('.coverage-results'));
+ return Promise.all(rows.map(r => r.evaluate((r: Element) => ({
+ url: r.querySelector('.url-column')?.textContent,
+ total: r.querySelector('.size-column')?.textContent,
+ unused: r.querySelector('.unusedSize-column span')?.textContent,
+ }))));
+}
diff --git a/test/e2e/resources/coverage/BUILD.gn b/test/e2e/resources/coverage/BUILD.gn
index 5e16856..75b27d3 100644
--- a/test/e2e/resources/coverage/BUILD.gn
+++ b/test/e2e/resources/coverage/BUILD.gn
@@ -7,6 +7,12 @@
copy_to_gen("coverage") {
sources = [
"default.html",
+ "empty.css",
+ "lazily-loaded.css",
+ "not-initially-used.css",
"script.js",
+ "unused-css-coverage.html",
+ "unused.css",
+ "used.css",
]
}
diff --git a/test/e2e/resources/coverage/empty.css b/test/e2e/resources/coverage/empty.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/test/e2e/resources/coverage/empty.css
diff --git a/test/e2e/resources/coverage/lazily-loaded.css b/test/e2e/resources/coverage/lazily-loaded.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/test/e2e/resources/coverage/lazily-loaded.css
diff --git a/test/e2e/resources/coverage/not-initially-used.css b/test/e2e/resources/coverage/not-initially-used.css
new file mode 100644
index 0000000..5c31bc8
--- /dev/null
+++ b/test/e2e/resources/coverage/not-initially-used.css
@@ -0,0 +1,9 @@
+/*
+ * Copyright 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+h2 {
+ color: green;
+}
diff --git a/test/e2e/resources/coverage/unused-css-coverage.html b/test/e2e/resources/coverage/unused-css-coverage.html
new file mode 100644
index 0000000..99a3467
--- /dev/null
+++ b/test/e2e/resources/coverage/unused-css-coverage.html
@@ -0,0 +1,19 @@
+<html>
+<link rel="stylesheet" href="used.css" />
+<link rel="stylesheet" href="not-initially-used.css" />
+<link rel="stylesheet" href="unused.css" />
+<link rel="stylesheet" href="empty.css" />
+<script>
+ function appendStylesheet() {
+ document.body.insertAdjacentHTML('afterend', '<link rel="stylesheet" href="lazily-loaded.css" />');
+ }
+ function appendElement() {
+ const e = document.createElement('h2');
+ e.innerText = 'This is a test';
+ document.body.append(e);
+ }
+</script>
+<body>
+ <h1>Hello World</h1>
+</body>
+</html>
diff --git a/test/e2e/resources/coverage/unused.css b/test/e2e/resources/coverage/unused.css
new file mode 100644
index 0000000..5139ec3
--- /dev/null
+++ b/test/e2e/resources/coverage/unused.css
@@ -0,0 +1,9 @@
+/*
+ * Copyright 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+h3{
+ color: blue;
+}
diff --git a/test/e2e/resources/coverage/used.css b/test/e2e/resources/coverage/used.css
new file mode 100644
index 0000000..dc38688
--- /dev/null
+++ b/test/e2e/resources/coverage/used.css
@@ -0,0 +1,9 @@
+/*
+ * Copyright 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+body {
+ color: red;
+}