@openedx/frontend-base 1.0.0-alpha.0 → 1.0.0-alpha.10

package/runtime/react/AuthenticatedPageRoute.test.jsx

@@ -0,0 +1,135 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+import { render } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { sendPageEvent } from '../analytics';
+import { getAuthenticatedUser, getLoginRedirectUrl } from '../auth';
+import { getSiteConfig } from '../config';
+import SiteContext from './SiteContext';
+import AuthenticatedPageRoute from './AuthenticatedPageRoute';
+
+jest.mock('../subscriptions');
+jest.mock('../analytics');
+jest.mock('../auth');
+
+describe('AuthenticatedPageRoute', () => {
+  const { location } = global;
+
+  beforeEach(() => {
+    delete global.location;
+    global.location = {
+      assign: jest.fn(),
+    };
+    sendPageEvent.mockReset();
+    getLoginRedirectUrl.mockReset();
+    getAuthenticatedUser.mockReset();
+  });
+
+  afterEach(() => {
+    global.location = location;
+  });
+
+  it('should redirect to login if not authenticated', () => {
+    getAuthenticatedUser.mockReturnValue(null);
+    getLoginRedirectUrl.mockReturnValue('http://localhost/login?next=http%3A%2F%2Flocalhost%2Fauthenticated');
+    const component = (
+      <SiteContext.Provider
+        value={{
+          authenticatedUser: getAuthenticatedUser(),
+          siteConfig: getSiteConfig(),
+        }}
+      >
+        <MemoryRouter initialEntries={['/authenticated']}>
+          <Routes>
+            <Route path="/" element={() => <p>Anonymous</p>} />
+            <Route path="/authenticated" element={<AuthenticatedPageRoute><p>Authenticated</p></AuthenticatedPageRoute>} />
+          </Routes>
+        </MemoryRouter>
+      </SiteContext.Provider>
+    );
+    global.location.href = 'http://localhost/authenticated';
+    render(component);
+    expect(getLoginRedirectUrl).toHaveBeenCalledWith('http://localhost/authenticated');
+    expect(sendPageEvent).not.toHaveBeenCalled();
+    expect(global.location.assign).toHaveBeenCalledWith('http://localhost/login?next=http%3A%2F%2Flocalhost%2Fauthenticated');
+  });
+
+  it('should redirect to custom redirect URL if not authenticated', () => {
+    getAuthenticatedUser.mockReturnValue(null);
+    getLoginRedirectUrl.mockReturnValue('http://localhost/login?next=http%3A%2F%2Flocalhost%2Fauthenticated');
+    const authenticatedElement = (
+      <AuthenticatedPageRoute redirectUrl="http://localhost/elsewhere">
+        <p>Authenticated</p>
+      </AuthenticatedPageRoute>
+    );
+    const component = (
+      <SiteContext.Provider
+        value={{
+          authenticatedUser: getAuthenticatedUser(),
+          siteConfig: getSiteConfig(),
+        }}
+      >
+        <MemoryRouter initialEntries={['/authenticated']}>
+          <Routes>
+            <Route path="/" component={() => <p>Anonymous</p>} />
+            <Route path="/authenticated" element={authenticatedElement} />
+          </Routes>
+        </MemoryRouter>
+      </SiteContext.Provider>
+    );
+    render(component);
+    expect(getLoginRedirectUrl).not.toHaveBeenCalled();
+    expect(sendPageEvent).not.toHaveBeenCalled();
+    expect(global.location.assign).toHaveBeenCalledWith('http://localhost/elsewhere');
+  });
+
+  it('should not call login if not the current route', () => {
+    getAuthenticatedUser.mockReturnValue(null);
+    getLoginRedirectUrl.mockReturnValue('http://localhost/login?next=http%3A%2F%2Flocalhost%2Fauthenticated');
+    const component = (
+      <SiteContext.Provider
+        value={{
+          authenticatedUser: getAuthenticatedUser(),
+          siteConfig: getSiteConfig(),
+        }}
+      >
+        <MemoryRouter>
+          <Routes>
+            <Route path="/" element={<p>Anonymous</p>} />
+            <Route path="/authenticated" element={<AuthenticatedPageRoute><p>Authenticated</p></AuthenticatedPageRoute>} />
+          </Routes>
+        </MemoryRouter>
+      </SiteContext.Provider>
+    );
+    const wrapper = render(component);
+
+    expect(getLoginRedirectUrl).not.toHaveBeenCalled();
+    expect(global.location.assign).not.toHaveBeenCalled();
+    expect(sendPageEvent).not.toHaveBeenCalled();
+    const element = wrapper.container.querySelector('p');
+    expect(element.textContent).toEqual('Anonymous'); // This is just a sanity check on our setup.
+  });
+
+  it('should render authenticated route if authenticated', () => {
+    const component = (
+      <SiteContext.Provider
+        value={{
+          authenticatedUser: { userId: 12345, username: 'edx' },
+          siteConfig: getSiteConfig(),
+        }}
+      >
+        <MemoryRouter initialEntries={['/authenticated']}>
+          <Routes>
+            <Route path="/" element={<p>Anonymous</p>} />
+            <Route path="/authenticated" element={<AuthenticatedPageRoute><p>Authenticated</p></AuthenticatedPageRoute>} />
+          </Routes>
+        </MemoryRouter>
+      </SiteContext.Provider>
+    );
+    const wrapper = render(component);
+    expect(getLoginRedirectUrl).not.toHaveBeenCalled();
+    expect(global.location.assign).not.toHaveBeenCalled();
+    expect(sendPageEvent).toHaveBeenCalled();
+    const element = wrapper.container.querySelector('p');
+    expect(element.textContent).toEqual('Authenticated');
+  });
+});

package/runtime/react/ErrorBoundary.test.jsx

@@ -0,0 +1,83 @@
+import { render } from '@testing-library/react';
+
+import ErrorBoundary from './ErrorBoundary';
+import { initializeMockApp } from '..';
+
+describe('ErrorBoundary', () => {
+  let logError = jest.fn();
+
+  beforeEach(async () => {
+    // This is a gross hack to suppress error logs in the invalid parentSelector test
+    jest.spyOn(console, 'error');
+    global.console.error.mockImplementation(() => { });
+
+    const { loggingService } = initializeMockApp();
+    logError = loggingService.logError;
+  });
+
+  afterEach(() => {
+    global.console.error.mockRestore();
+    jest.clearAllMocks();
+  });
+
+  it('should render children if no error', () => {
+    const component = (
+      <ErrorBoundary>
+        <div>Yay</div>
+      </ErrorBoundary>
+    );
+    const { container: wrapper } = render(component);
+
+    const element = wrapper.querySelector('div');
+    expect(element.textContent).toEqual('Yay');
+  });
+
+  it('should render ErrorPage if it has an error', () => {
+    const ExplodingComponent = () => {
+      throw new Error('booyah');
+    };
+
+    const component = (
+      <ErrorBoundary>
+        <ExplodingComponent />
+      </ErrorBoundary>
+    );
+
+    render(component);
+
+    expect(logError).toHaveBeenCalledTimes(1);
+    expect(logError).toHaveBeenCalledWith(
+      new Error('booyah'),
+      expect.objectContaining({
+        stack: expect.stringContaining('ExplodingComponent'),
+      }),
+    );
+  });
+  it('should render the fallback component when an error occurs', () => {
+    function FallbackComponent() {
+      return <div data-testid="fallback-component">Oops, something went wrong!</div>;
+    }
+    function ComponentError() {
+      throw new Error('An error occurred during the click event!');
+    }
+    const wrapper = render(
+      <ErrorBoundary fallbackComponent={<FallbackComponent />}>
+        <ComponentError />
+      </ErrorBoundary>,
+    );
+
+    expect(wrapper.queryByTestId('fallback-component')).toBeInTheDocument();
+  });
+
+  it('should render the ErrorPage fallbackComponent is null', () => {
+    function ComponentError() {
+      throw new Error('An error occurred during the click event!');
+    }
+    const wrapper = render(
+      <ErrorBoundary fallbackComponent={null}>
+        <ComponentError />
+      </ErrorBoundary>,
+    );
+    expect(wrapper.queryByTestId('error-page')).toBeInTheDocument();
+  });
+});

package/runtime/react/SiteProvider.test.jsx

@@ -0,0 +1,66 @@
+import { render } from '@testing-library/react';
+import { initialize } from '../initialize';
+import SiteProvider from './SiteProvider';
+
+jest.mock('../auth', () => ({
+  configureAuth: () => { },
+  getAuthenticatedUser: () => null,
+  fetchAuthenticatedUser: () => null,
+  getAuthenticatedHttpClient: () => ({}),
+  AUTHENTICATED_USER_CHANGED: 'user_changed',
+}));
+
+jest.mock('../analytics', () => ({
+  configureAnalytics: () => { },
+  identifyAnonymousUser: jest.fn(),
+  identifyAuthenticatedUser: jest.fn(),
+}));
+
+jest.mock('./hooks', () => ({
+  ...jest.requireActual('./hooks'),
+  useTrackColorSchemeChoice: jest.fn(),
+}));
+
+describe('SiteProvider', () => {
+  beforeEach(async () => {
+    await initialize({
+      loggingService: jest.fn(() => ({
+        logError: jest.fn(),
+        logInfo: jest.fn(),
+      })),
+      messages: {
+        ar: {},
+        'es-419': {},
+        fr: {},
+        'zh-cn': {},
+        ca: {},
+        he: {},
+        id: {},
+        'ko-kr': {},
+        pl: {},
+        'pt-br': {},
+        ru: {},
+        th: {},
+        uk: {},
+        'fa-ir': {},
+        fa: {},
+      },
+    });
+  });
+
+  it('should render its children with a router', () => {
+    const component = (
+      <SiteProvider>
+        <div className="child">Child One</div>
+        <div className="child">Child Two</div>
+      </SiteProvider>
+    );
+
+    const wrapper = render(component);
+    const list = wrapper.container.querySelectorAll('div.child');
+
+    expect(list.length).toEqual(2);
+    expect(list[0].textContent).toEqual('Child One');
+    expect(list[1].textContent).toEqual('Child Two');
+  });
+});

package/runtime/react/SiteProvider.tsx

@@ -13,7 +13,13 @@ import {
 import CombinedAppProvider from './CombinedAppProvider';
 import ErrorBoundary from './ErrorBoundary';
 import SiteContext from './SiteContext';
-import { useSiteEvent } from './hooks';
+import { SELECTED_THEME_VARIANT_KEY } from './constants';
+import {
+  useTheme,
+  useSiteEvent,
+  useTrackColorSchemeChoice
+} from './hooks';
+import { themeActions } from './reducers';
 
 interface SiteProviderProps {
   children: ReactNode,
@@ -37,6 +43,7 @@ interface SiteProviderProps {
  * - An error boundary as described above.
  * - An `SiteContext` provider for React context data.
  * - IntlProvider for @edx/frontend-i18n internationalization
+ * - A theme manager for Paragon.
  *
  * @param {Object} props
  * @memberof module:React
@@ -58,11 +65,27 @@ export default function SiteProvider({ children }: SiteProviderProps) {
     setLocale(getLocale());
   });
 
+  useTrackColorSchemeChoice();
+  const [themeState, themeDispatch] = useTheme();
+
   const siteContextValue = useMemo(() => ({
     authenticatedUser,
     siteConfig,
-    locale
-  }), [authenticatedUser, siteConfig, locale]);
+    locale,
+    theme: {
+      state: themeState,
+      setThemeVariant: (themeVariant: string) => {
+        themeDispatch(themeActions.setThemeVariant(themeVariant));
+
+        // Persist selected theme variant to localStorage.
+        window.localStorage.setItem(SELECTED_THEME_VARIANT_KEY, themeVariant);
+      },
+    },
+  }), [authenticatedUser, siteConfig, locale, themeState, themeDispatch]);
+
+  if (!themeState?.isThemeLoaded) {
+    return null;
+  }
 
   return (
     <IntlProvider locale={locale} messages={getMessages()}>

package/runtime/react/constants.ts

@@ -0,0 +1,3 @@
+export const SET_THEME_VARIANT = 'SET_THEME_VARIANT';
+export const SET_IS_THEME_LOADED = 'SET_IS_THEME_LOADED';
+export const SELECTED_THEME_VARIANT_KEY = 'selected-theme-variant';

package/runtime/react/hooks/index.ts

@@ -0,0 +1,8 @@
+export { default as useAppConfig } from './useAppConfig';
+export { default as useAuthenticatedUser } from './useAuthenticatedUser';
+export { default as useActiveRouteRoleWatcher } from './useActiveRouteRoleWatcher';
+export { default as useActiveRoles } from './useActiveRoles';
+export { default as useSiteConfig } from './useSiteConfig';
+export { default as useSiteEvent } from './useSiteEvent';
+
+export * from './theme';

package/runtime/react/hooks/theme/index.ts

@@ -0,0 +1,2 @@
+export { default as useTrackColorSchemeChoice } from './useTrackColorSchemeChoice';
+export { default as useTheme } from './useTheme';

package/runtime/react/hooks/theme/useTheme.test.ts

@@ -0,0 +1,221 @@
+import { act, fireEvent, renderHook } from '@testing-library/react';
+
+import useTheme from './useTheme';
+import * as config from '../../../config';
+import { logError } from '../../../logging';
+
+jest.mock('../../../logging');
+
+const baseSiteConfig = config.getSiteConfig();
+
+const theme = {
+  core: {
+    url: 'https://cdn.jsdelivr.net/npm/@openedx/brand@1.0.0/dist/core.min.css',
+  },
+  defaults: {
+    light: 'light',
+    dark: 'dark',
+  },
+  variants: {
+    light: {
+      url: 'https://cdn.jsdelivr.net/npm/@openedx/brand@1.0.0/dist/light.min.css',
+    },
+    dark: {
+      url: 'https://cdn.jsdelivr.net/npm/@openedx/brand@1.0.0/dist/dark.min.css',
+    },
+  },
+};
+
+let mockMediaQueryListEvent;
+const mockAddEventListener = jest.fn((_, fn) => fn(mockMediaQueryListEvent));
+const mockRemoveEventListener = jest.fn();
+
+Object.defineProperty(window, 'matchMedia', {
+  value: jest.fn(() => ({
+    addEventListener: mockAddEventListener,
+    removeEventListener: mockRemoveEventListener,
+    matches: mockMediaQueryListEvent.matches,
+  })),
+});
+
+Object.defineProperty(window, 'localStorage', {
+  value: {
+    getItem: jest.fn(),
+  },
+});
+
+describe('useTheme', () => {
+  beforeEach(() => {
+    document.head.innerHTML = '';
+    mockMediaQueryListEvent = { matches: true };
+    mockAddEventListener.mockClear();
+    mockRemoveEventListener.mockClear();
+    jest.mocked(window.localStorage.getItem).mockClear();
+  });
+
+  afterEach(() => {
+    jest.spyOn(config, 'getSiteConfig').mockRestore();
+  });
+
+  it.each([
+    ['dark', 'stylesheet', 'alternate stylesheet', true], // preference is dark
+    ['light', 'alternate stylesheet', 'stylesheet', false], // preference is light
+  ])(
+    'should configure theme variant for system preference %s and handle theme change events',
+    (initialPreference, expectedDarkRel, expectedLightRel, isDarkMediaMatch) => {
+      jest.spyOn(config, 'getSiteConfig').mockReturnValue({
+        ...baseSiteConfig,
+        theme
+      });
+      // Mock the matchMedia behavior to simulate system preference
+      mockMediaQueryListEvent = { matches: isDarkMediaMatch };
+      // Set up the hook and initial theme configuration
+      const { result, unmount } = renderHook(() => useTheme());
+      const themeLinks = document.head.querySelectorAll('link');
+
+      const checkThemeLinks = () => {
+        const darkLink: HTMLAnchorElement | null = document.head.querySelector('link[data-theme-variant="dark"]');
+        const lightLink: HTMLAnchorElement | null = document.head.querySelector('link[data-theme-variant="light"]');
+        expect(darkLink?.rel).toBe(expectedDarkRel);
+        expect(lightLink?.rel).toBe(expectedLightRel);
+      };
+
+      // Simulate initial theme configuration based on system preference
+      act(() => {
+        themeLinks.forEach((link) => fireEvent.load(link));
+      });
+
+      // Ensure matchMedia was called with the correct system preference
+      expect(window.matchMedia).toHaveBeenCalledWith('(prefers-color-scheme: dark)');
+      expect(mockAddEventListener).toHaveBeenCalled();
+
+      // Check initial theme setup
+      checkThemeLinks();
+      expect(result.current[0]).toEqual({
+        isThemeLoaded: true,
+        themeVariant: initialPreference,
+      });
+
+      unmount();
+      expect(mockRemoveEventListener).toHaveBeenCalled();
+    },
+  );
+
+  it('should configure theme variants according with user preference if is defined (localStorage)', () => {
+    jest.spyOn(config, 'getSiteConfig').mockReturnValue({
+      ...baseSiteConfig,
+      theme
+    });
+    jest.mocked(window.localStorage.getItem).mockReturnValue('light');
+    const { result, unmount } = renderHook(() => useTheme());
+    const themeLinks = document.head.querySelectorAll('link');
+    const darkLink: HTMLAnchorElement | null = document.head.querySelector('link[data-theme-variant="dark"]');
+    const lightLink: HTMLAnchorElement | null = document.head.querySelector('link[data-theme-variant="light"]');
+
+    act(() => {
+      themeLinks.forEach((link) => fireEvent.load(link));
+    });
+
+    expect(window.matchMedia).toHaveBeenCalledWith('(prefers-color-scheme: dark)');
+    expect(mockAddEventListener).toHaveBeenCalled();
+
+    expect(darkLink?.rel).toBe('alternate stylesheet');
+    expect(lightLink?.rel).toBe('stylesheet');
+    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: 'light' });
+
+    unmount();
+    expect(mockRemoveEventListener).toHaveBeenCalled();
+  });
+
+  it('should define the theme variant as default if only 1 is configured', () => {
+    jest.spyOn(config, 'getSiteConfig').mockReturnValue({
+      ...baseSiteConfig,
+      theme: { ...theme, variants: { light: theme.variants.light } }
+    });
+    jest.mocked(window.localStorage.getItem).mockReturnValue('light');
+    const { result, unmount } = renderHook(() => useTheme());
+    const themeLinks = document.head.querySelectorAll('link');
+    const themeVariantLinks: NodeListOf<HTMLAnchorElement> | null = document.head.querySelectorAll('link[data-theme-variant]');
+
+    act(() => {
+      themeLinks.forEach((link) => fireEvent.load(link));
+    });
+
+    expect(themeVariantLinks.length).toBe(1);
+    expect((themeVariantLinks[0]).rel).toBe('stylesheet');
+    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: 'light' });
+
+    unmount();
+    expect(mockRemoveEventListener).toHaveBeenCalled();
+  });
+
+  it('should not configure any theme if theme is undefined', () => {
+    const { result, unmount } = renderHook(() => useTheme());
+    const themeLinks = document.head.querySelectorAll('link');
+
+    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: undefined });
+    expect(themeLinks.length).toBe(0);
+    unmount();
+  });
+
+  it('should return themeVariant undefined if a default variant cannot be configured', () => {
+    jest.spyOn(config, 'getSiteConfig').mockReturnValue({
+      ...baseSiteConfig,
+      theme: {
+        ...theme,
+        defaults: {
+          light: 'red'
+        },
+        variants: {
+          light: theme.variants.light,
+          green: { url: 'green-url' }
+        }
+      }
+    });
+    jest.mocked(window.localStorage.getItem).mockReturnValue(null);
+
+    const { result, unmount } = renderHook(() => useTheme());
+    const themeLinks = document.head.querySelectorAll('link');
+    const themeVariantLinks = document.head.querySelectorAll('link[data-theme-variant]');
+    act(() => {
+      themeLinks.forEach((link) => fireEvent.load(link));
+    });
+
+    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: undefined });
+    expect(themeLinks.length).toBe(3);
+    themeVariantLinks.forEach((link: HTMLAnchorElement) => expect(link.rel).toBe('alternate stylesheet'));
+    unmount();
+  });
+
+  it('should log an error if the preferred theme variant cannot be set', async () => {
+    jest.spyOn(config, 'getSiteConfig').mockReturnValue({
+      ...baseSiteConfig,
+      theme: {
+        ...theme,
+        defaults: {
+          light: 'light',
+          dark: 'dark'
+        },
+        variants: {
+          light: theme.variants.light,
+          green: { url: 'green-url' }
+        }
+      }
+    });
+    jest.mocked(window.localStorage.getItem).mockReturnValue(null);
+
+    const { result, unmount } = renderHook(() => useTheme());
+    const themeLinks = document.head.querySelectorAll('link');
+    const themeVariantLinks = document.head.querySelectorAll('link[data-theme-variant]');
+
+    act(() => {
+      themeLinks.forEach((link) => fireEvent.load(link));
+    });
+
+    expect(result.current[0]).toEqual({ isThemeLoaded: true, themeVariant: 'dark' });
+    expect(logError).toHaveBeenCalled();
+    expect(themeVariantLinks.length).toBe(2);
+    themeVariantLinks.forEach((link: HTMLAnchorElement) => expect(link.rel).toBe('alternate stylesheet'));
+    unmount();
+  });
+});