@openedx/frontend-base 1.0.0-alpha.9 → 1.0.0

package/runtime/react/ErrorBoundary.test.jsx

@@ -1,83 +0,0 @@
-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/ErrorPage.jsx

@@ -1,72 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button, Container, Row, Col,
-} from '@openedx/paragon';
-
-import { useSiteEvent } from './hooks';
-import {
-  FormattedMessage,
-  IntlProvider,
-  getMessages,
-  getLocale,
-  LOCALE_CHANGED,
-} from '../i18n';
-
-/**
- * An error page that displays a generic message for unexpected errors.  Also contains a "Try
- * Again" button to refresh the page.
- *
- * @memberof module:React
- * @extends {Component}
- */
-function ErrorPage({
-  message = null,
-}) {
-  const [locale, setLocale] = useState(getLocale());
-
-  useSiteEvent(LOCALE_CHANGED, () => {
-    setLocale(getLocale());
-  });
-
-  /* istanbul ignore next */
-  const reload = () => {
-    global.location.reload();
-  };
-
-  return (
-    <IntlProvider locale={locale} messages={getMessages()}>
-      <Container fluid className="py-5 justify-content-center align-items-start text-center" data-testid="error-page">
-        <Row>
-          <Col>
-            <p className="text-muted">
-              <FormattedMessage
-                id="unexpected.error.message.text"
-                defaultMessage="An unexpected error occurred. Please click the button below to refresh the page."
-                description="error message when an unexpected error occurs"
-              />
-            </p>
-            {message && (
-              <div role="alert" className="my-4">
-                <p>{message}</p>
-              </div>
-            )}
-            <Button onClick={reload}>
-              <FormattedMessage
-                id="unexpected.error.button.text"
-                defaultMessage="Try again"
-                description="text for button that tries to reload the app by refreshing the page"
-              />
-            </Button>
-          </Col>
-        </Row>
-      </Container>
-    </IntlProvider>
-  );
-}
-
-ErrorPage.propTypes = {
-  message: PropTypes.string,
-};
-
-export default ErrorPage;

package/runtime/react/LoginRedirect.jsx

@@ -1,16 +0,0 @@
-import { useEffect } from 'react';
-import { redirectToLogin } from '../auth';
-
-/**
- * A React component that, when rendered, redirects to the login page as a side effect.  Uses
- * `redirectToLogin` to perform the redirect.
- *
- * @see {@link module:frontend-base~redirectToLogin}
- * @memberof module:React
- */
-export default function LoginRedirect() {
-  useEffect(() => {
-    redirectToLogin(global.location.href);
-  }, []);
-  return null;
-}

package/runtime/react/PageWrap.jsx

@@ -1,24 +0,0 @@
-/* eslint-disable react/prop-types */
-// eslint-disable-next-line no-unused-vars
-import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-
-import { sendPageEvent } from '../analytics';
-
-/**
- * A Wrapper component that calls `sendPageEvent` when it becomes active.
- *
- * @see {@link module:frontend-base~sendPageEvent}
- * @memberof module:React
- * @param {Object} props
- */
-export default function PageWrap({ children }) {
-  const location = useLocation();
-
-  useEffect(() => {
-    sendPageEvent();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location.pathname]);
-
-  return children;
-}

package/runtime/react/SiteContext.tsx

@@ -1,32 +0,0 @@
-import { createContext } from 'react';
-import { SiteConfig, User } from '../../types';
-import { getSiteConfig } from '../config';
-
-/**
- * `SiteContext` provides data from `App` in a way that React components can readily consume, even
- * if it's mutable data. `SiteContext` contains the following data structure:
- *
- * ```
- * {
- *   authenticatedUser
- *   siteConfig
- *   locale
- * }
- * ```
- * If `authenticatedUser`, `siteConfig`, or `locale` data changes, `SiteContext` will be updated
- * accordingly and pass those changes onto React components using the context.
- *
- * `SiteContext` is used in a React application like any other `[React Context](https://reactjs.org/docs/context.html)
- * @memberof module:React
- */
-const SiteContext = createContext<{
-  authenticatedUser: User | null,
-  siteConfig: SiteConfig,
-  locale: string,
-}>({
-  authenticatedUser: null,
-  siteConfig: getSiteConfig(),
-  locale: 'en',
-});
-
-export default SiteContext;

package/runtime/react/SiteProvider.test.jsx

@@ -1,66 +0,0 @@
-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

@@ -1,101 +0,0 @@
-import { ReactNode, useMemo, useState } from 'react';
-
-import { AUTHENTICATED_USER_CHANGED, getAuthenticatedUser } from '../auth';
-import { getSiteConfig } from '../config';
-import { CONFIG_CHANGED } from '../constants';
-import {
-  getLocale,
-  getMessages,
-  IntlProvider,
-  LOCALE_CHANGED,
-} from '../i18n';
-
-import CombinedAppProvider from './CombinedAppProvider';
-import ErrorBoundary from './ErrorBoundary';
-import SiteContext from './SiteContext';
-import { SELECTED_THEME_VARIANT_KEY } from './constants';
-import {
-  useTheme,
-  useSiteEvent,
-  useTrackColorSchemeChoice
-} from './hooks';
-import { themeActions } from './reducers';
-
-interface SiteProviderProps {
-  children: ReactNode,
-}
-
-/**
- * A wrapper component for React-based micro-frontends to initialize a number of common data/
- * context providers.
- *
- * ```
- * subscribe(SITE_READY, () => {
- *   ReactDOM.render(
- *     <SiteProvider>
- *       <HelloWorld />
- *     </SiteProvider>
- *   )
- * });
- * ```
- *
- * This will provide the following to HelloWorld:
- * - 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
- */
-export default function SiteProvider({ children }: SiteProviderProps) {
-  const [siteConfig, setSiteConfig] = useState(getSiteConfig());
-  const [authenticatedUser, setAuthenticatedUser] = useState(getAuthenticatedUser());
-  const [locale, setLocale] = useState(getLocale());
-
-  useSiteEvent(AUTHENTICATED_USER_CHANGED, () => {
-    setAuthenticatedUser(getAuthenticatedUser());
-  });
-
-  useSiteEvent(CONFIG_CHANGED, () => {
-    setSiteConfig(getSiteConfig());
-  });
-
-  useSiteEvent(LOCALE_CHANGED, () => {
-    setLocale(getLocale());
-  });
-
-  useTrackColorSchemeChoice();
-  const [themeState, themeDispatch] = useTheme();
-
-  const siteContextValue = useMemo(() => ({
-    authenticatedUser,
-    siteConfig,
-    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()}>
-      <ErrorBoundary>
-        <SiteContext.Provider value={siteContextValue}>
-          <CombinedAppProvider>
-            {children}
-          </CombinedAppProvider>
-        </SiteContext.Provider>
-      </ErrorBoundary>
-    </IntlProvider>
-  );
-}

package/runtime/react/constants.ts

@@ -1,3 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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/useTheme.test.ts

@@ -1,221 +0,0 @@
-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();
-  });
-});