screenshots

Author: shakyShane

special-pages/pages/history/app/components/Item.js

@@ -54,7 +54,9 @@ export const Item = memo(
                     <a href={props.url} data-url={props.url} class={styles.entryLink}>
                         {title}
                     </a>
-                    <span class={styles.domain}>{props.domain}</span>
+                    <span class={styles.domain} data-testid="Item.domain">
+                        {props.domain}
+                    </span>
                     <span class={styles.time}>{dateTimeOfDay}</span>
                     <button class={styles.dots} data-action={BTN_ACTION_ENTRIES_MENU} data-index={index} value={props.id} tabindex={0}>
                         <Dots />

special-pages/pages/history/app/components/SearchForm.js

@@ -52,7 +52,6 @@ export function SearchForm({ term, domain }) {
                     autoComplete="off"
                     type="search"
                     spellcheck={false}
-                    autoFocus
                     placeholder={t('search')}
                     value={value}
                     onInput={input}

special-pages/pages/history/app/components/Sidebar.module.css

@@ -1,7 +1,9 @@
 .stack {
     display: flex;
     flex-direction: column;
-    > * { min-width: 0 }
+    > * {
+        min-width: 0
+    }
     gap: 24px;
 }
 .pageTitle {
@@ -37,7 +39,12 @@
     color: var(--history-text-normal);
     gap: 6px;
 }
-
+.active {
+    background: var(--color-black-at-12);
+    [data-theme="dark"] &  {
+        background: var(--color-white-at-9);
+    }
+}
 .delete {
     height: 40px;
     width: 40px;
@@ -60,6 +67,7 @@
         background: var(--color-black-at-9);
         opacity: 1;
     }
+
     &:active {
         background: var(--color-black-at-12);
     }
@@ -91,13 +99,6 @@
     cursor: default;
 }
 
-.active {
-    background: var(--color-black-at-6);
-    [data-theme="dark"] &  {
-        background: var(--color-white-at-6);
-    }
-}
-
 .icon {
     width: 16px;
     height: 16px;

special-pages/pages/history/app/global-state/QueryProvider.js

@@ -173,7 +173,6 @@ function useURLReflection(queryState, settings) {
         let count = 0;
         const unsubscribe = queryState.subscribe((nextValue) => {
             if (count === 0) return (count += 1);
-            console.log('ere?', nextValue);
             clearTimeout(timer);
             if (nextValue.term !== null) {
                 const term = nextValue.term;

special-pages/pages/history/integration-tests/history.page.js

@@ -100,6 +100,9 @@ export class HistoryTestPage {
     async darkMode() {
         await this.page.emulateMedia({ colorScheme: 'dark' });
     }
+    async lightMode() {
+        await this.page.emulateMedia({ colorScheme: 'light' });
+    }
 
     /**
      * @param {import('../types/history.ts').QueryKind} query
@@ -313,11 +316,27 @@ export class HistoryTestPage {
         const { page } = this;
         const rows = page.locator('main').locator('[aria-selected]');
         const selected = page.locator('main').locator('[aria-selected="true"]');
-        await rows.nth(nth).click();
+        await rows.nth(nth).getByTestId('Item.domain').click();
         await expect(rows.nth(nth)).toHaveAttribute('aria-selected', 'true');
         await expect(selected).toHaveCount(1);
     }
 
+    /**
+     * @param {number} nth
+     */
+    async hoversRowIndex(nth) {
+        const rows = this.page.locator('main').locator('[aria-selected]');
+        await rows.nth(nth).hover();
+        await rows.nth(nth).locator('[data-action="entries_menu"]').waitFor({ state: 'visible' });
+    }
+    /**
+     * @param {number} nth
+     */
+    async hoversRowIndexBtn(nth) {
+        const rows = this.page.locator('main').locator('[aria-selected]');
+        await rows.nth(nth).locator('[data-action="entries_menu"]').hover();
+    }
+
     /**
      * @param {number} nth
      */
@@ -342,15 +361,21 @@ export class HistoryTestPage {
     async selectsRowWithCtrl(nth) {
         const { page } = this;
         const rows = page.locator('main').locator('[aria-selected]');
-        await rows.nth(nth).click({ modifiers: ['Meta'] });
+        await rows
+            .nth(nth)
+            .getByTestId('Item.domain')
+            .click({ modifiers: ['Meta'] });
     }
     /**
      * @param {number} nth
      */
     async selectsRowIndexWithShift(nth) {
         const { page } = this;
         const rows = page.locator('main').locator('[aria-selected]');
-        await rows.nth(nth).click({ modifiers: ['Shift'] });
+        await rows
+            .nth(nth)
+            .getByTestId('Item.domain')
+            .click({ modifiers: ['Shift'] });
     }
 
     /**
@@ -452,4 +477,20 @@ export class HistoryTestPage {
         const rowCount = await rows.count();
         expect(rowCount).toBe(count);
     }
+
+    sidebar() {
+        return this.page.locator('aside');
+    }
+
+    main() {
+        return this.page.locator('main');
+    }
+
+    async hoversRange(range) {
+        await this.page.getByLabel(`Show history for ${range}`).hover();
+    }
+    async hoversRangeDelete(range) {
+        // await this.page.pause();
+        await this.page.getByRole('button', { name: `Delete history for ${range}` }).hover();
+    }
 }

special-pages/pages/history/integration-tests/history.screenshots.spec.js

@@ -0,0 +1,81 @@
+/* global process */
+import { expect, test } from '@playwright/test';
+import { HistoryTestPage } from './history.page.js';
+
+const maxDiffPixels = 20;
+
+test.describe('full history screenshots', { tag: ['@screenshots'] }, () => {
+    test.use({ viewport: { width: 1080, height: 500 } });
+    test.skip(process.env.CI === 'true');
+    test('empty state', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(0);
+        await hp.openPage();
+        await hp.didMakeInitialQueries({ term: '' });
+        await expect(page).toHaveScreenshot('full.empty.light.png', { maxDiffPixels });
+        await hp.darkMode();
+        await expect(page).toHaveScreenshot('full.empty.dark.png', { maxDiffPixels });
+    });
+    test('short list (3 items)', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(3);
+        await hp.openPage();
+        await expect(page).toHaveScreenshot('full.short.light.png', { maxDiffPixels });
+        await hp.darkMode();
+        await expect(page).toHaveScreenshot('full.short.dark.png', { maxDiffPixels });
+    });
+});
+
+test.describe('history sidebar screenshots', { tag: ['@screenshots'] }, () => {
+    test.use({ viewport: { width: 1080, height: 400 } });
+    test.skip(process.env.CI === 'true');
+    test('sidebar active/hover', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(3);
+        await hp.openPage();
+        await hp.selectsToday();
+        await hp.hoversRange('yesterday');
+        await expect(hp.sidebar()).toHaveScreenshot('sidebar.light.png', { maxDiffPixels });
+        await hp.darkMode();
+        await expect(hp.sidebar()).toHaveScreenshot('sidebar.dark.png', { maxDiffPixels });
+
+        await hp.lightMode();
+        await hp.hoversRangeDelete('yesterday');
+        await expect(hp.sidebar()).toHaveScreenshot('sidebar.delete.light.png', { maxDiffPixels });
+
+        await hp.darkMode();
+        await expect(hp.sidebar()).toHaveScreenshot('sidebar.delete.dark.png', { maxDiffPixels });
+    });
+});
+
+test.describe('history item selections', { tag: ['@screenshots'] }, () => {
+    test.use({ viewport: { width: 1080, height: 400 } });
+    test.skip(process.env.CI === 'true');
+    test('main selecting', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(12);
+        await hp.openPage();
+        await hp.didMakeNthQuery({ nth: 0, query: { term: '' } });
+        await hp.selectsRowIndex(1);
+        await hp.selectsRowIndexWithShift(3);
+        await hp.hoversRowIndex(1);
+        await expect(hp.main()).toHaveScreenshot('main.select.light.png', { maxDiffPixels });
+        await hp.darkMode();
+        await expect(hp.main()).toHaveScreenshot('main.select.dark.png', { maxDiffPixels });
+    });
+    test('main hover', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(12);
+        await hp.openPage();
+        await hp.didMakeNthQuery({ nth: 0, query: { term: '' } });
+        await hp.hoversRowIndex(0);
+        await expect(hp.main()).toHaveScreenshot('main.hover.light.png', { maxDiffPixels });
+        await hp.darkMode();
+        await expect(hp.main()).toHaveScreenshot('main.hover.dark.png', { maxDiffPixels });
+    });
+    test('main selection + hover', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(12);
+        await hp.openPage();
+        await hp.didMakeNthQuery({ nth: 0, query: { term: '' } });
+        await hp.selectsRowIndex(1);
+        await hp.hoversRowIndexBtn(1);
+        await expect(hp.main()).toHaveScreenshot('main.select+hover.light.png', { maxDiffPixels });
+        await hp.darkMode();
+        await expect(hp.main()).toHaveScreenshot('main.select+hover.dark.png', { maxDiffPixels });
+    });
+});

special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-empty-dark-integration-darwin.png

@@ -32,7 +32,8 @@ export default defineConfig({
                 'customizer.spec.js',
                 'activity.spec.js',
                 'history.spec.js',
-                'history-selections.spec.js'
+                'history-selections.spec.js',
+                'history.screenshots.spec.js',
             ],
             use: {
                 ...devices['Desktop Chrome'],