From 20de0ca2b5f427dbf4942a34579b5fbad1846c81 Mon Sep 17 00:00:00 2001 From: "Kevin J. Sung" Date: Fri, 5 Jul 2024 15:29:38 -0400 Subject: [PATCH] define toggleColorTheme (TODO still have to handle "header") --- tests/js/tests.js | 39 ++++++++++++++++++++------------------- tests/js/utils.js | 6 ++++++ 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/tests/js/tests.js b/tests/js/tests.js index 50bd0a05..c92a83fb 100644 --- a/tests/js/tests.js +++ b/tests/js/tests.js @@ -17,6 +17,7 @@ import { setMobile, setTablet, click, + toggleColorTheme, } from "./utils"; test.describe("top nav bar", () => { @@ -32,11 +33,11 @@ test.describe("top nav bar", () => { await page.goto("sphinx_guide/lists.html"); const pageToC = page.locator("div.content-icon-container"); await expect(pageToC).toHaveScreenshot(); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); await expect(pageToC).toHaveScreenshot(); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); await expect(pageToC).toHaveScreenshot(); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); await expect(pageToC).toHaveScreenshot(); }); @@ -71,7 +72,7 @@ test("right side bar is not broken by our page layout", async ({ page }) => { test("right side bar is not broken by our page layout dark mode", async ({ page }) => { // We intentionally use a short page to keep the screenshot shorter. await page.goto("sphinx_guide/notebook.html"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const tocDrawer = page.locator(".toc-drawer"); await expect(tocDrawer).toHaveScreenshot(); }); @@ -87,7 +88,7 @@ test.describe("left side bar", () => { test("renders correctly dark mode", async ({ page }) => { // Go to a top-level page so that we can see how the expanded side bar looks. await page.goto("apidoc/module.html"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const leftToC = page.locator(".sidebar-drawer"); await expect(leftToC).toHaveScreenshot(); }); @@ -101,7 +102,7 @@ test.describe("left side bar", () => { test("translations are expandable dark mode", async ({ page }) => { await page.goto(""); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); await click(page, "div.qiskit-translations-container i"); const translations = page.locator("div.qiskit-translations-container"); await expect(translations).toHaveScreenshot(); @@ -118,7 +119,7 @@ test.describe("left side bar", () => { test("previous releases are expandable dark mode", async ({ page }) => { await page.goto(""); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); await click(page, "div.qiskit-previous-releases-container i"); const previousReleases = page.locator( "div.qiskit-previous-releases-container", @@ -136,7 +137,7 @@ test.describe("api docs", () => { test("module page dark mode", async ({ page }) => { await page.goto("apidoc/module.html"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const content = page.locator("div.article-container"); await expect(content).toHaveScreenshot(); }); @@ -149,7 +150,7 @@ test.describe("api docs", () => { test("class page dark mode", async ({ page }) => { await page.goto("stubs/api_example.Electron.html"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const content = page.locator("div.article-container"); await expect(content).toHaveScreenshot(); }); @@ -162,7 +163,7 @@ test.describe("api docs", () => { test("function page dark mode", async ({ page }) => { await page.goto("stubs/api_example.my_function1.html"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const content = page.locator("div.article-container"); await expect(content).toHaveScreenshot(); }); @@ -175,7 +176,7 @@ test.describe("api docs", () => { test("inline classes dark mode", async ({ page }) => { await page.goto("apidoc/inline_classes.html"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const content = page.locator("div.article-container"); await expect(content).toHaveScreenshot(); }); @@ -189,7 +190,7 @@ test("tables align with qiskit", async ({ page }) => { test("tables align with qiskit dark mode", async ({ page }) => { await page.goto("sphinx_guide/tables.html"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const gridTablesSection = page.locator("section#grid-tables"); await expect(gridTablesSection).toHaveScreenshot(); }); @@ -202,7 +203,7 @@ test("tutorials do not have purple border", async ({ page }) => { test("tutorials do not have purple border dark mode", async ({ page }) => { await page.goto("sphinx_guide/notebook_gallery.html"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const tutorial = page.locator("div.nbsphinx-gallery"); await expect(tutorial).toHaveScreenshot(); }); @@ -215,7 +216,7 @@ test("admonitions use Carbon style", async ({ page }) => { test("admonitions use Carbon style dark mode", async ({ page }) => { await page.goto("sphinx_guide/paragraph.html#admonitions"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const admonitions = page.locator("section#admonitions"); await expect(admonitions).toHaveScreenshot(); }); @@ -228,7 +229,7 @@ test("deprecations look like warning", async ({ page }) => { test("deprecations look like warning dark mode", async ({ page }) => { await page.goto("sphinx_guide/paragraph.html#deprecation-note"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const deprecations = page.locator("section#deprecation-note"); await expect(deprecations).toHaveScreenshot(); }); @@ -242,7 +243,7 @@ test("Sphinx Design elements have no shadows", async ({ page }) => { test("Sphinx Design elements have no shadows dark mode", async ({ page }) => { await page.goto("sphinx_guide/panels.html"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); await page.locator(".sd-dropdown").first().click(); const pageContents = page.locator("section#panels"); await expect(pageContents).toHaveScreenshot(); @@ -258,7 +259,7 @@ test("Jupyter works with copybutton", async ({ page }) => { test("Jupyter works with copybutton dark mode", async ({ page }) => { // Regression test of https://github.com/Qiskit/qiskit_sphinx_theme/issues/306. await page.goto("sphinx_guide/jupyter.html"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const pageContents = page.locator("section#jupyter"); await expect(pageContents).toHaveScreenshot(); }); @@ -280,7 +281,7 @@ test("custom directives", async ({ page }) => { test("custom directives dark mode", async ({ page }) => { await page.goto("sphinx_guide/custom_directives.html"); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const cards = page.locator("section#qiskit-card"); await cards.hover(); @@ -302,7 +303,7 @@ test("inline table of contents have correct fonts", async ({ page }) => { test("inline table of contents have correct fonts dark mode", async ({ page }) => { await page.goto(""); - await click(page, "div.theme-toggle-content button"); + toggleColorTheme(page); const contents = page.locator("section#example-docs"); await expect(contents).toHaveScreenshot(); }); diff --git a/tests/js/utils.js b/tests/js/utils.js index 79980210..6e6d2178 100644 --- a/tests/js/utils.js +++ b/tests/js/utils.js @@ -29,9 +29,15 @@ const click = async (page, selector) => { await page.waitForTimeout(500); }; +const toggleColorTheme = async (page) => { + await click(page, "div.theme-toggle-content button"); + // TODO handle theme-toggle-header +}; + export { setDesktop, setMobile, setTablet, click, + toggleColorTheme, };