added tests

shakyShane · shakyShane · commit 94e17030b89b · 2025-02-02T11:19:27.000Z
diff --git a/special-pages/pages/new-tab/app/activity/BurnProvider.js b/special-pages/pages/new-tab/app/activity/BurnProvider.js
@@ -3,6 +3,7 @@ import { useContext, useEffect } from 'preact/hooks';
 import { ActivityApiContext, ActivityServiceContext } from './ActivityProvider';
 import { ACTION_BURN } from './constants.js';
 import { batch, signal, useSignal } from '@preact/signals';
+import { useEnv } from '../../../../shared/components/EnvironmentProvider.js';
 
 export const ActivityBurningSignalContext = createContext({
     /** @type {import("@preact/signals").Signal<string[]>} */
@@ -20,6 +21,7 @@ export function BurnProvider({ children }) {
     const exiting = useSignal(/** @type {string[]} */ ([]));
     const { didClick: originalDidClick } = useContext(ActivityApiContext);
     const service = useContext(ActivityServiceContext);
+    const { isReducedMotion } = useEnv();
 
     async function didClick(e) {
         const button = /** @type {HTMLButtonElement|null} */ (e.target?.closest(`button[value][data-action="${ACTION_BURN}"]`));
@@ -41,8 +43,8 @@ export function BurnProvider({ children }) {
         // mark this item as burning - this will prevent further events until we're done
         burning.value = burning.value.concat(value);
 
-        // wait for either the animation to be finished, or the document visibility changed
-        const feSignals = any(animationExit(), didChangeDocumentVisibility());
+        // wait for a signal from the FE that we can continue
+        const feSignals = any(reducedMotion(isReducedMotion), animationExit(), didChangeDocumentVisibility());
 
         // the signal from native that burning was complete
         const nativeSignal = didCompleteNatively(service);
@@ -102,11 +104,21 @@ function toPromise(fn) {
     });
 }
 
+function reducedMotion(isReducedMotion) {
+    console.log('+[reducedMotion] setup');
+    return (subject) => {
+        if (isReducedMotion) {
+            console.log('  .next() [reducedMotion] setup');
+            subject.next();
+        }
+    };
+}
+
 function animationExit() {
     return (subject) => {
         console.log('+[didExit] setup');
         const handler = () => {
-            console.log('  -> [didExit] resolve .next()');
+            console.log('  .next() -> [didExit]');
             subject.next();
         };
         window.addEventListener('done-exiting', handler, { once: true });
@@ -121,7 +133,7 @@ function timer(ms) {
     return (subject) => {
         console.log('+[timer] setup');
         const int = setTimeout(() => {
-            console.log(' -> [timer] .next()');
+            console.log('  .next() -> [timer]');
             return subject.next();
         }, ms);
         return () => {
@@ -135,7 +147,7 @@ function didCompleteNatively(service) {
     return (subject) => {
         console.log('+[didCompleteNatively] setup');
         const unsub = service?.onBurnComplete(() => {
-            console.log('  -> [didCompleteNatively] .next()');
+            console.log('  .next() -> [didCompleteNatively] ');
             subject.next();
         });
         return () => {
@@ -147,72 +159,72 @@ function didCompleteNatively(service) {
 
 function didChangeDocumentVisibility() {
     return (subject) => {
-        console.log('+[didChangeVisibilty] setup');
+        console.log('+[didChangeVisibility] setup');
         const handler = () => {
-            console.log('  -> [didChangeVisibilty] resolve .next()');
+            console.log('  .next() -> [didChangeVisibility] resolve ');
             return subject.next(document.visibilityState);
         };
         document.addEventListener('visibilitychange', handler, { once: true });
         return () => {
-            console.log('-[didChangeVisibilty] teardown');
+            console.log('-[didChangeVisibility] teardown');
             window.removeEventListener('visibilitychange', handler);
         };
     };
 }
 
 function any(...fns) {
     return (subject) => {
-        const work = fns.map((factory) => {
+        const jobs = fns.map((factory) => {
             const subject = {
                 /** @type {any} */
                 next: undefined,
             };
             const promise = new Promise((resolve) => (subject.next = resolve));
             const cleanup = factory(subject);
             return {
-                promise: promise,
-                cleanup: cleanup,
+                promise,
+                cleanup,
             };
         });
 
-        Promise.any(work.map((x) => x.promise))
+        Promise.any(jobs.map((x) => x.promise))
             // eslint-disable-next-line promise/prefer-await-to-then
             .then((d) => subject.next(d))
             // eslint-disable-next-line promise/prefer-await-to-then
             .catch(console.error);
 
         return () => {
-            for (const workItem of work) {
-                workItem.cleanup();
+            for (const job of jobs) {
+                job.cleanup?.();
             }
         };
     };
 }
 
 function all(...fns) {
     return (subject) => {
-        const work = fns.map((factory) => {
+        const jobs = fns.map((factory) => {
             const subject = {
                 /** @type {any} */
                 next: undefined,
             };
             const promise = new Promise((resolve) => (subject.next = resolve));
             const cleanup = factory(subject);
             return {
-                promise: promise,
-                cleanup: cleanup,
+                promise,
+                cleanup,
             };
         });
 
-        Promise.all(work.map((x) => x.promise))
+        Promise.all(jobs.map((x) => x.promise))
             // eslint-disable-next-line promise/prefer-await-to-then
             .then((d) => subject.next(d))
             // eslint-disable-next-line promise/prefer-await-to-then
             .catch(console.error);
 
         return () => {
-            for (const workItem of work) {
-                workItem.cleanup();
+            for (const job of jobs) {
+                job.cleanup?.();
             }
         };
     };
diff --git a/special-pages/pages/new-tab/app/activity/integration-tests/activity.page.js b/special-pages/pages/new-tab/app/activity/integration-tests/activity.page.js
@@ -1,6 +1,15 @@
 import { activityMocks } from '../mocks/activity.mocks.js';
 import { expect } from '@playwright/test';
 
+/**
+ * @typedef {import('../../../types/new-tab.js').NewTabMessages['subscriptions']['subscriptionEvent']} SubscriptionEventNames
+ */
+
+/**
+ * @param {SubscriptionEventNames} n
+ */
+const sub = (n) => n;
+
 export class ActivityPage {
     /**
      * @param {import("@playwright/test").Page} page
@@ -120,7 +129,13 @@ export class ActivityPage {
             };
         }, response);
 
+        // control: ensure we have 5 first
+        await expect(this.context().getByTestId('ActivityItem')).toHaveCount(5);
+
+        // burn 1 item in the list
         await this.context().getByRole('button', { name: 'Clear browsing history and data for example.com' }).click();
+
+        // assert the confirm was sent
         const result = await this.ntp.mocks.waitForCallCount({ method: 'activity_confirmBurn', count: 1 });
         expect(result[0].payload).toMatchObject({
             context: 'specialPages',
@@ -130,12 +145,17 @@ export class ActivityPage {
                 url: 'https://example.com',
             },
         });
-        const animResult = await this.ntp.mocks.waitForCallCount({ method: 'activity_burnAnimationComplete', count: 1 });
-        expect(animResult[0].payload).toMatchObject({
-            context: 'specialPages',
-            featureName: 'newTabPage',
-            method: 'activity_burnAnimationComplete',
-        });
+
+        // simulate a small delay from native
+        await page.waitForTimeout(50);
+
+        // deliver both updates from native
+        const nextData = activityMocks.few.activity.filter((x) => x.url !== 'https://example.com');
+        await this.ntp.mocks.simulateSubscriptionMessage(sub('activity_onDataUpdate'), { activity: nextData });
+        await this.ntp.mocks.simulateSubscriptionMessage(sub('activity_onBurnComplete'), {});
+
+        // now assert only 4 items are there
+        await expect(this.context().getByTestId('ActivityItem')).toHaveCount(4);
     }
 
     async removesItem() {
diff --git a/special-pages/pages/new-tab/app/activity/mocks/activity.mock-transport.js b/special-pages/pages/new-tab/app/activity/mocks/activity.mock-transport.js
@@ -104,17 +104,18 @@ export function activityMockTransport() {
                         }
                     }
 
-                    if (response.action === 'burn') {
+                    if (response.action === 'burn' && !window.__playwright_01) {
                         setTimeout(() => {
                             const cb = subs.get('activity_onDataUpdate');
-                            console.log('wills send new data for', url);
+                            console.log('will send updated data after 500ms', url);
                             const next = activityMocks.few.activity.filter((x) => x.url !== url);
                             cb?.({ activity: next });
                         }, 500);
                         setTimeout(() => {
                             const cb = subs.get('activity_onBurnComplete');
+                            console.log('will send updated data after 600ms', url);
                             cb?.();
-                        }, 550);
+                        }, 600);
                     }
 
                     return Promise.resolve(response);
