add more tests

also fix font issues
subhoghoshX · Aug 9, 2024 · a4846ff · a4846ff
1 parent c4858fc
commit a4846ff
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 4 deletions.
diff --git a/src/components/FocusMode.tsx b/src/components/FocusMode.tsx
@@ -75,7 +75,7 @@ export default function FocusModeCard() {
   }
 
   return (
-    <Card className="lg:w-96 flex flex-col lg:h-1/2 h-80">
+    <Card className="lg:w-96 flex flex-col lg:h-1/2 h-80" id="focusmode">
       <CardHeader>
         <CardTitle className="text-lg flex items-center gap-3">
           <HoverCard>

diff --git a/src/newtab/App.tsx b/src/newtab/App.tsx
@@ -61,7 +61,7 @@ export default function App() {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   return (
-    <main className="flex justify-center lg:items-center h-screen overflow-auto py-10 dark:bg-zinc-950 font-sans">
+    <main className="flex justify-center lg:items-center h-screen overflow-auto py-10 dark:bg-zinc-950">
       <section className="flex gap-5 flex-col lg:flex-row h-fit">
         <Card>
           <CardHeader>

diff --git a/src/newtab/index.html b/src/newtab/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="../css/tailwind.css" />
     <script type="text/javascript" src="./index.js"></script>
   </head>
-  <body>
+  <body class="font-sans">
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/redirect/index.html b/src/redirect/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="../css/tailwind.css" />
     <script type="text/javascript" src="./index.js"></script>
   </head>
-  <body>
+  <body class="font-sans">
     <div id="root"></div>
   </body>
 </html>
diff --git a/tests/example.spec.ts b/tests/example.spec.ts
@@ -45,3 +45,32 @@ test("Extension in New Tab page", async ({ page }) => {
     ],
   });
 });
+
+test("Focus mode", async ({ page }) => {
+  await page.goto("chrome://newtab");
+  const fm = page.locator("#focusmode");
+  await expect(fm).toHaveScreenshot("focusmode.png");
+
+  await fm.locator("input").fill("www.youtube.com");
+  await page.keyboard.press("Enter");
+  await expect(fm).toHaveScreenshot("focusmode-blocklist-input-focused.png");
+
+  await fm.locator("li button").click();
+  await expect(fm).toHaveScreenshot("focusmode.png");
+
+  await fm.locator("input").fill("www.youtube.com");
+  await fm.getByText("Add").click();
+  await expect(fm).toHaveScreenshot("focusmode-blocklist-input-blurred.png");
+
+  await fm.getByRole("switch").click();
+  await page.goto("https://www.youtube.com");
+  await expect(page).toHaveScreenshot("redirect-page.png");
+});
+
+test("Drawer", async ({ page }) => {
+  await page.goto("https://example.com/");
+  await page.waitForTimeout(1000);
+  await page.goto("chrome://newtab");
+  page.getByRole("list").getByText("example.com").click();
+  await expect(page).toHaveScreenshot("drawer.png");
+});
diff --git a/tests/example.spec.ts-snapshots/drawer-chromium-linux.png b/tests/example.spec.ts-snapshots/drawer-chromium-linux.png
diff --git a/.../example.spec.ts-snapshots/focusmode-blocklist-input-blurred-chromium-linux.png b/.../example.spec.ts-snapshots/focusmode-blocklist-input-blurred-chromium-linux.png
diff --git a/.../example.spec.ts-snapshots/focusmode-blocklist-input-focused-chromium-linux.png b/.../example.spec.ts-snapshots/focusmode-blocklist-input-focused-chromium-linux.png
diff --git a/tests/example.spec.ts-snapshots/focusmode-chromium-linux.png b/tests/example.spec.ts-snapshots/focusmode-chromium-linux.png
diff --git a/tests/example.spec.ts-snapshots/redirect-page-chromium-linux.png b/tests/example.spec.ts-snapshots/redirect-page-chromium-linux.png