Fix failing test and fix other references.

packages/extension/src/utils/test-data/cookieMockData.ts

@@ -21,7 +21,7 @@ import { emptyAnalytics } from '@ps-analysis-tool/common';
 /**
  * Internal dependencies.
  */
-import type { CookieStoreContext } from '../../view/devtools/stateProviders/syncCookieStore';
+import { type CookieStoreContext } from '../../view/devtools/stateProviders/cookie';
 
 const emptyCookie = {
   name: '',

packages/extension/src/view/devtools/components/cookies/cookiesListing/useCookieListing/tests/useCookieListing.tsx

@@ -25,12 +25,15 @@ import { renderHook } from '@testing-library/react';
  */
 import useCookieListing from '..';
 import * as mock from '../../../../../../../utils/test-data/cookieMockData';
-import * as ChromeStorage from '../../../../../stateProviders/cookie';
+import { useCookie } from '../../../../../stateProviders/cookie';
+
+jest.mock('../../../../../stateProviders/cookie', () => ({
+  useCookie: jest.fn(),
+}));
+
+const mockUseCookieStore = useCookie as jest.Mock;
 
 describe('useCookieListing', () => {
-  const mockUseCookieStore = jest.fn();
-  jest.spyOn(ChromeStorage, 'useCookie').mockImplementation(mockUseCookieStore);
-  const allowedListDomains = new Set<string>();
   const mockUseEffect = jest.fn();
   jest.spyOn(React, 'useEffect').mockImplementation(mockUseEffect);
 
@@ -55,7 +58,7 @@ describe('useCookieListing', () => {
     });
 
     const { result, rerender } = renderHook(() =>
-      useCookieListing(allowedListDomains)
+      useCookieListing(new Set<string>())
     );
 
     expect(result.current.tableColumns[0].header).toBe('Name');

packages/extension/src/view/devtools/components/cookies/tests/cookiesLanding.tsx

@@ -0,0 +1,162 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import SinonChrome from 'sinon-chrome';
+import { CookiesLanding } from '@ps-analysis-tool/design-system';
+/**
+ * Internal dependencies.
+ */
+import AssembledCookiesLanding from '../cookieLanding';
+import { useCookie, useSettings } from '../../../stateProviders';
+import data from '../../../../../utils/test-data/cookieMockData';
+
+jest.mock('../../../stateProviders', () => ({
+  useCookie: jest.fn(),
+  useSettings: jest.fn(),
+}));
+const mockUseCookieStore = useCookie as jest.Mock;
+const mockUseSettingsStore = useSettings as jest.Mock;
+
+describe('CookiesLanding', () => {
+  beforeAll(() => {
+    globalThis.chrome = SinonChrome as unknown as typeof chrome;
+    globalThis.chrome = {
+      ...SinonChrome,
+      storage: {
+        //@ts-ignore
+        local: {
+          //@ts-ignore
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          get: (_, __) =>
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            new Promise<{ [key: string]: any }>((resolve) => {
+              resolve({
+                40245632: {
+                  cookies: data.tabCookies,
+                  selectedSidebarItem: 'privacySandbox#cookies',
+                  tablePersistentSettingsStore: {
+                    cookieListing: {
+                      sortBy: 'parsedCookie.name',
+                      sortOrder: 'asc',
+                    },
+                  },
+                },
+                tabToRead: '40245632',
+              });
+            }),
+          set: () => Promise.resolve(),
+          //@ts-ignore
+          onChanged: {
+            addListener: () => undefined,
+            removeListener: () => undefined,
+          },
+        },
+        sync: {
+          //@ts-ignore
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          get: (_, __) =>
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            new Promise<{ [key: string]: any }>((resolve) => {
+              resolve({
+                allowedNumberOfTabs: 'single',
+              });
+            }),
+          set: () => Promise.resolve(),
+          //@ts-ignore
+          onChanged: {
+            addListener: () => undefined,
+            removeListener: () => undefined,
+          },
+        },
+        session: {
+          //@ts-ignore
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          get: (_, __) => Promise.resolve(),
+          set: () => Promise.resolve(),
+          //@ts-ignore
+          onChanged: {
+            addListener: () => undefined,
+            removeListener: () => undefined,
+          },
+        },
+      },
+      devtools: {
+        //@ts-ignore
+        inspectedWindow: {
+          tabId: 40245632,
+          //@ts-ignore
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+          eval: (_, callback: any) => {
+            callback('https://edition.cnn.com');
+          },
+          //@ts-ignore
+          onResourceAdded: {
+            addListener: () => undefined,
+            removeListener: () => undefined,
+          },
+        },
+      },
+      tabs: {
+        //@ts-ignore
+        onUpdated: {
+          addListener: () => undefined,
+          removeListener: () => undefined,
+        },
+        //@ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        query: (_, __) => {
+          return [{ id: 40245632, url: 'https://edition.cnn.com' }];
+        },
+        connect: () => ({
+          //@ts-ignore
+          onMessage: {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            addListener: () => undefined,
+          },
+          //@ts-ignore
+          onDisconnect: {
+            addListener: () => undefined,
+          },
+        }),
+      },
+    };
+  });
+
+  it('renders CookiesLanding with data', () => {
+    mockUseCookieStore.mockReturnValue({
+      tabCookies: data.tabCookies,
+      tabFrames: data.tabFrames,
+      frameHasCookies: {
+        'https://edition.cnn.com/': true,
+      },
+    });
+    mockUseSettingsStore.mockReturnValue({ isUsingCDP: false });
+    const { getByTestId, getAllByTestId } = render(
+      <CookiesLanding>
+        <AssembledCookiesLanding />
+      </CookiesLanding>
+    );
+
+    expect(getByTestId('cookies-landing')).toBeInTheDocument();
+    expect(getAllByTestId('cookies-landing-header')[0]).toBeInTheDocument();
+    expect(getByTestId('cookies-matrix-Categories')).toBeInTheDocument();
+  });
+});

packages/extension/src/view/devtools/index.tsx

@@ -29,8 +29,7 @@ import { LibraryDetectionProvider } from '@ps-analysis-tool/library-detection';
  * Internal dependencies.
  */
 import App from './app';
-import { Provider as ExternalStoreProvider } from './stateProviders/syncCookieStore';
-import { Provider as SettingsStoreProvider } from './stateProviders/syncSettingsStore';
+import { CookieProvider, SettingsProvider } from './stateProviders';
 
 const isDarkMode = chrome.devtools.panels.themeName === 'dark';
 document.body.classList.add(isDarkMode ? 'dark' : 'light');
@@ -40,15 +39,15 @@ const root = document.getElementById('root');
 if (root) {
   createRoot(root).render(
     <ErrorBoundary fallbackRender={ErrorFallback}>
-      <SettingsStoreProvider>
-        <ExternalStoreProvider>
+      <SettingsProvider>
+        <CookieProvider>
           <TablePersistentSettingsProvider>
             <LibraryDetectionProvider>
               <App />
             </LibraryDetectionProvider>
           </TablePersistentSettingsProvider>
-        </ExternalStoreProvider>
-      </SettingsStoreProvider>
+        </CookieProvider>
+      </SettingsProvider>
     </ErrorBoundary>
   );
 }

packages/extension/src/view/devtools/stateProviders/cookie/index.ts

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 export { default as CookieProvider } from './cookieProvider';
-export { default as CookieContext } from './context';
+export { default as CookieContext, type CookieStoreContext } from './context';
 export { default as useCookie } from './useCookie';

packages/extension/src/view/devtools/tests/app.tsx

@@ -34,11 +34,8 @@ import { useCookie, useSettings } from '../stateProviders';
 import PSInfo from 'ps-analysis-tool/data/PSInfo.json';
 import data from '../../../utils/test-data/cookieMockData';
 
-jest.mock('../stateProviders/syncCookieStore', () => ({
+jest.mock('../stateProviders', () => ({
   useCookie: jest.fn(),
-}));
-
-jest.mock('../stateProviders/syncSettingsStore', () => ({
   useSettings: jest.fn(),
 }));
 

packages/extension/src/view/popup/tests/app.tsx

@@ -31,8 +31,8 @@ import { useCookie } from '../stateProviders';
 // eslint-disable-next-line import/no-unresolved
 import PSInfo from 'ps-analysis-tool/data/PSInfo.json';
 
-jest.mock('../stateProviders/syncCookieStore', () => ({
-  useCookieStore: jest.fn(),
+jest.mock('../stateProviders/cookie', () => ({
+  useCookie: jest.fn(),
 }));
 
 const mockUseCookieStore = useCookie as jest.Mock;