mocks

Author: shakyShane

special-pages/pages/new-tab/app/mock-transport.js

@@ -315,8 +315,8 @@ export function mockTransport() {
                         const int = setInterval(() => {
                             if (inc === max) return clearInterval(int);
                             const next = {
-                                ...privacyStatsMocks.willUpdate,
-                                trackerCompanies: privacyStatsMocks.willUpdate.trackerCompanies.map((x, index) => {
+                                ...privacyStatsMocks.few,
+                                trackerCompanies: privacyStatsMocks.few.trackerCompanies.map((x, index) => {
                                     return {
                                         ...x,
                                         count: x.count + inc * index,

special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.examples.js

@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { Fragment, h } from 'preact';
 import { PrivacyStatsMockProvider } from '../mocks/PrivacyStatsMockProvider.js';
 import { PrivacyStatsBody } from './PrivacyStats.js';
 import { privacyStatsMocks } from '../mocks/privacy-stats.mocks.js';
@@ -14,34 +14,6 @@ export const privacyStatsExamples = {
             </PrivacyStatsMockProvider>
         ),
     },
-    'stats.many': {
-        factory: () => (
-            <PrivacyStatsMockProvider ticker={true} data={privacyStatsMocks.many}>
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
-        ),
-    },
-    'stats.topAndOneOther': {
-        factory: () => (
-            <PrivacyStatsMockProvider ticker={true} data={privacyStatsMocks.topAndOneOther}>
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
-        ),
-    },
-    'stats.onlyTop': {
-        factory: () => (
-            <PrivacyStatsMockProvider ticker={true} data={privacyStatsMocks.onlyTop}>
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
-        ),
-    },
-    'stats.onlyOther': {
-        factory: () => (
-            <PrivacyStatsMockProvider ticker={true} data={privacyStatsMocks.onlyother}>
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
-        ),
-    },
     'stats.few.collapsed': {
         factory: () => (
             <PrivacyStatsMockProvider config={{ expansion: 'collapsed' }}>
@@ -78,30 +50,40 @@ export const privacyStatsExamples = {
 };
 
 export const otherPrivacyStatsExamples = {
-    'stats.without-animation': {
-        factory: () => (
-            <PrivacyStatsMockProvider
-                ticker={true}
-                config={{
-                    expansion: 'expanded',
-                    animation: { kind: 'none' },
-                }}
-            >
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
-        ),
+    'stats.all': {
+        factory: () => {
+            const names = Object.keys(privacyStatsMocks);
+            return (
+                <Fragment>
+                    {names.map((key) => {
+                        return (
+                            <Fragment key={key}>
+                                <h2>{key}</h2>
+                                <br />
+                                <PrivacyStatsMockProvider data={privacyStatsMocks[key]}>
+                                    <PrivacyStatsConsumer />
+                                </PrivacyStatsMockProvider>
+                            </Fragment>
+                        );
+                    })}
+                </Fragment>
+            );
+        },
     },
-    'stats.with-view-transitions': {
+    'stats.manyTopAndOther': {
         factory: () => (
-            <PrivacyStatsMockProvider
-                ticker={true}
-                config={{
-                    expansion: 'expanded',
-                    animation: { kind: 'view-transitions' },
-                }}
-            >
-                <PrivacyStatsConsumer />
-            </PrivacyStatsMockProvider>
+            <Fragment>
+                <h2>manyOnlyTop</h2>
+                <br />
+                <PrivacyStatsMockProvider data={privacyStatsMocks.manyTopAndOther}>
+                    <PrivacyStatsConsumer />
+                </PrivacyStatsMockProvider>
+                <h2>manyOnlyTop + body expanded</h2>
+                <br />
+                <PrivacyStatsMockProvider data={privacyStatsMocks.manyTopAndOther} bodyExpansion={'expanded'}>
+                    <PrivacyStatsConsumer />
+                </PrivacyStatsMockProvider>
+            </Fragment>
         ),
     },
 };

special-pages/pages/new-tab/app/privacy-stats/mocks/PrivacyStatsMockProvider.js

@@ -21,13 +21,15 @@ import { BodyExpansionContext, BodyExpansionApiContext } from '../components/Bod
  * @param {Object} props - The props object containing the data.
  * @param {import("preact").ComponentChild} [props.children] - The children elements to be rendered.
  * @param {StatsConfig} [props.config]
+ * @param {Expansion} [props.bodyExpansion]
  * @param {PrivacyStatsData} [props.data]
  * @param {boolean} [props.ticker] - if true, gradually increment the count of the first company, for testing
  *
  */
 export function PrivacyStatsMockProvider({
     data = privacyStatsMocks.few,
     config = { expansion: 'expanded', animation: { kind: 'auto-animate' } },
+    bodyExpansion = 'collapsed',
     ticker = false,
     children,
 }) {
@@ -67,7 +69,7 @@ export function PrivacyStatsMockProvider({
         }
     }, [state.config?.expansion]);
 
-    const [bodyExpansion, setBodyExpansion] = useState(/** @type {Expansion} */ ('collapsed'));
+    const [bodyExpansionState, setBodyExpansion] = useState(bodyExpansion);
     const showMore = useCallback(() => {
         setBodyExpansion('expanded');
     }, []);
@@ -78,7 +80,7 @@ export function PrivacyStatsMockProvider({
     return (
         <PrivacyStatsContext.Provider value={{ state, toggle }}>
             <PrivacyStatsDispatchContext.Provider value={send}>
-                <BodyExpansionContext.Provider value={bodyExpansion}>
+                <BodyExpansionContext.Provider value={bodyExpansionState}>
                     <BodyExpansionApiContext.Provider value={{ showMore, showLess }}>{children}</BodyExpansionApiContext.Provider>
                 </BodyExpansionContext.Provider>
             </PrivacyStatsDispatchContext.Provider>

special-pages/pages/new-tab/app/privacy-stats/mocks/privacy-stats.mocks.js

@@ -2,7 +2,18 @@ import { DDG_STATS_OTHER_COMPANY_IDENTIFIER } from '../constants.js';
 
 /**
  * @import { PrivacyStatsData } from "../../../types/new-tab";
- * @type {Record<string, PrivacyStatsData>}
+ * @type {{
+ *     few: PrivacyStatsData,
+ *     single: PrivacyStatsData,
+ *     norecent: PrivacyStatsData,
+ *     none: PrivacyStatsData,
+ *     onlyother: PrivacyStatsData,
+ *     manyOnlyTop: PrivacyStatsData,
+ *     fewOnlyTop: PrivacyStatsData,
+ *     topAndOneOther: PrivacyStatsData,
+ *     manyTopAndOther: PrivacyStatsData,
+ *     many: PrivacyStatsData,
+ * }}
  */
 export const privacyStatsMocks = {
     few: {
@@ -164,35 +175,6 @@ export const privacyStatsMocks = {
             },
         ],
     },
-    willUpdate: {
-        totalCount: 481_113,
-        trackerCompanies: [
-            {
-                displayName: 'Facebook',
-                count: 1,
-            },
-            {
-                displayName: 'Google',
-                count: 1,
-            },
-            {
-                displayName: DDG_STATS_OTHER_COMPANY_IDENTIFIER,
-                count: 1,
-            },
-            {
-                displayName: 'Amazon.com',
-                count: 1,
-            },
-            {
-                displayName: 'Google Ads',
-                count: 1,
-            },
-        ],
-    },
-    growing: {
-        totalCount: 0,
-        trackerCompanies: [],
-    },
     many: {
         totalCount: 890,
         trackerCompanies: [