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

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

@@ -0,0 +1,54 @@
+import { renderHook } from '@testing-library/react';
+import { sendTrackEvent } from '../../../analytics';
+import useTrackColorSchemeChoice from './useTrackColorSchemeChoice';
+
+jest.mock('../../../analytics');
+
+const mockAddEventListener = jest.fn();
+const mockRemoveEventListener = jest.fn();
+let matchesMock;
+
+Object.defineProperty(window, 'matchMedia', {
+  value: jest.fn(() => ({
+    addEventListener: mockAddEventListener,
+    removeEventListener: mockRemoveEventListener,
+    matches: matchesMock,
+  })),
+});
+
+describe('useTrackColorSchemeChoice hook', () => {
+  afterEach(() => {
+    mockAddEventListener.mockClear();
+    mockRemoveEventListener.mockClear();
+    jest.mocked(sendTrackEvent).mockClear();
+  });
+
+  it('sends dark preferred color schema event if query matches', async () => {
+    matchesMock = true;
+    renderHook(() => useTrackColorSchemeChoice());
+
+    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+    expect(sendTrackEvent).toHaveBeenCalledWith(
+      'openedx.ui.frontend-base.prefers-color-scheme.selected',
+      { preferredColorScheme: 'dark' },
+    );
+  });
+
+  it('sends light preferred color schema event if query does not match', async () => {
+    matchesMock = false;
+    renderHook(() => useTrackColorSchemeChoice());
+
+    expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+    expect(sendTrackEvent).toHaveBeenCalledWith(
+      'openedx.ui.frontend-base.prefers-color-scheme.selected',
+      { preferredColorScheme: 'light' },
+    );
+  });
+
+  it('adds change event listener to matchMedia query', async () => {
+    renderHook(() => useTrackColorSchemeChoice());
+
+    expect(mockAddEventListener).toHaveBeenCalledTimes(1);
+    expect(mockAddEventListener).toHaveBeenCalledWith('change', expect.any(Function));
+  });
+});

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

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { sendTrackEvent } from '../../../analytics';
+
+/**
+ * A React hook that tracks user's preferred color scheme (light or dark) and sends respective
+ * event to the tracking service.
+ *
+ * @memberof module:React
+ */
+const useTrackColorSchemeChoice = () => {
+  useEffect(() => {
+    const trackColorSchemeChoice = ({ matches }) => {
+      const preferredColorScheme = matches ? 'dark' : 'light';
+      sendTrackEvent('openedx.ui.frontend-base.prefers-color-scheme.selected', { preferredColorScheme });
+    };
+    const colorSchemeQuery = window.matchMedia?.('(prefers-color-scheme: dark)');
+    if (colorSchemeQuery) {
+      // send user's initial choice
+      trackColorSchemeChoice(colorSchemeQuery);
+      colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);
+    }
+    return () => {
+      if (colorSchemeQuery) {
+        colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);
+      }
+    };
+  }, []);
+};
+
+export default useTrackColorSchemeChoice;

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

@@ -0,0 +1,11 @@
+/**
+ * Iterates through each given `<link>` element and removes it from the DOM.
+ * @param {HTMLLinkElement[]} existingLinks
+ */
+export const removeExistingLinks = (existingLinks) => {
+  existingLinks.forEach((link) => {
+    link.remove();
+  });
+};
+
+export const isEmptyObject = (obj) => !obj || Object.keys(obj).length === 0;

package/runtime/react/hooks/useActiveRoles.ts

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import { getActiveRoles } from '../../config';
+import { ACTIVE_ROLES_CHANGED } from '../../constants';
+import useSiteEvent from './useSiteEvent';
+
+const useActiveRoles = () => {
+  const [roles, setRoles] = useState<string[]>(getActiveRoles());
+  useSiteEvent(ACTIVE_ROLES_CHANGED, () => {
+    setRoles(getActiveRoles());
+  });
+
+  return roles;
+};
+
+export default useActiveRoles;

package/runtime/react/hooks/useActiveRouteRoleWatcher.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect } from 'react';
+import { useMatches } from 'react-router';
+import { setActiveRouteRoles } from '../../config';
+import { isRoleRouteObject } from '../../routing';
+
+const useActiveRouteRoleWatcher = () => {
+  const matches = useMatches();
+
+  // We create this callback so we can use it right away to populate the default state value.
+  const findActiveRouteRoles = useCallback(() => {
+    // Starts with the widget roles and adds the others in.
+    const roles: string[] = [];
+
+    // Route roles
+    for (const match of matches) {
+      if (isRoleRouteObject(match)) {
+        if (!roles.includes(match.handle.role)) {
+          roles.push(match.handle.role);
+        }
+      }
+    }
+
+    return roles;
+  }, [matches]);
+
+  useEffect(() => {
+    setActiveRouteRoles(findActiveRouteRoles());
+  }, [matches, findActiveRouteRoles]);
+};
+
+export default useActiveRouteRoleWatcher;

package/runtime/react/hooks/useAppConfig.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import CurrentAppContext from '../CurrentAppContext';
+
+const useAppConfig = () => {
+  const { appConfig } = useContext(CurrentAppContext);
+  return appConfig;
+};
+
+export default useAppConfig;

package/runtime/react/hooks/useAuthenticatedUser.test.tsx

@@ -0,0 +1,41 @@
+import { act, renderHook } from '@testing-library/react';
+import { setAuthenticatedUser } from '../../auth';
+import { initializeMockApp } from '../../testing';
+import SiteProvider from '../SiteProvider';
+import useAuthenticatedUser from './useAuthenticatedUser';
+
+describe('useAuthenticatedUser', () => {
+  it('returns null when the user is anonymous', () => {
+    const { result } = renderHook(() => useAuthenticatedUser());
+    expect(result.current).toBeNull();
+  });
+
+  describe('with a user', () => {
+    const user = {
+      administrator: true,
+      email: 'admin@example.com',
+      name: 'Admin',
+      roles: ['admin'],
+      userId: 1,
+      username: 'admin-user',
+      avatar: 'http://localhost/admin.png',
+    };
+
+    beforeEach(() => {
+      initializeMockApp({
+        authenticatedUser: user,
+      });
+    });
+
+    afterEach(() => {
+      act(() => {
+        setAuthenticatedUser(null);
+      });
+    });
+
+    it('returns a User when the user exists', () => {
+      const { result } = renderHook(() => useAuthenticatedUser(), { wrapper: SiteProvider });
+      expect(result.current).toBe(user);
+    });
+  });
+});

package/runtime/react/hooks/useAuthenticatedUser.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import SiteContext from '../SiteContext';
+
+const useAuthenticatedUser = () => {
+  const { authenticatedUser } = useContext(SiteContext);
+  return authenticatedUser;
+};
+
+export default useAuthenticatedUser;

package/runtime/react/hooks/useSiteConfig.test.tsx

@@ -0,0 +1,13 @@
+import { renderHook } from '@testing-library/react';
+import siteConfig from 'site.config';
+import { EnvironmentTypes } from '../../../types';
+import useSiteConfig from './useSiteConfig';
+
+describe('useSiteConfig', () => {
+  it('returns the site config', () => {
+    const { result } = renderHook(() => useSiteConfig());
+    expect(result.current).toHaveProperty('apps', siteConfig.apps);
+    expect(result.current).toHaveProperty('environment', EnvironmentTypes.TEST);
+    expect(result.current).toHaveProperty('baseUrl', 'http://localhost:8080');
+  });
+});

package/runtime/react/hooks/useSiteConfig.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import SiteContext from '../SiteContext';
+
+const useSiteConfig = () => {
+  const { siteConfig } = useContext(SiteContext);
+  return siteConfig;
+};
+
+export default useSiteConfig;

package/runtime/react/hooks/useSiteEvent.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { subscribe, unsubscribe } from '../../subscriptions';
+
+/**
+ * A React hook that allows functional components to subscribe to application events.  This should
+ * be used sparingly - for the most part, Context should be used higher-up in the application to
+ * provide necessary data to a given component, rather than utilizing a non-React-like Pub/Sub
+ * mechanism.
+ *
+ * @memberof module:React
+ * @param {string} type
+ * @param {function} callback
+ */
+const useSiteEvent = (type, callback) => {
+  useEffect(() => {
+    subscribe(type, callback);
+
+    return () => {
+      unsubscribe(type, callback);
+    };
+  }, [callback, type]);
+};
+
+export default useSiteEvent;

package/runtime/react/reducers.ts

@@ -0,0 +1,40 @@
+import {
+  SET_THEME_VARIANT,
+  SET_IS_THEME_LOADED,
+} from './constants';
+
+export function themeReducer(state, action) {
+  switch (action.type) {
+    case SET_THEME_VARIANT: {
+      const requestedThemeVariant = action.payload;
+      return {
+        ...state,
+        themeVariant: requestedThemeVariant,
+      };
+    }
+    case SET_IS_THEME_LOADED: {
+      const requestedIsThemeLoaded = action.payload;
+      return {
+        ...state,
+        isThemeLoaded: requestedIsThemeLoaded,
+      };
+    }
+    default:
+      return state;
+  }
+}
+
+const setThemeVariant = (payload) => ({
+  type: SET_THEME_VARIANT,
+  payload,
+});
+
+const setThemeLoaded = (payload) => ({
+  type: SET_IS_THEME_LOADED,
+  payload,
+});
+
+export const themeActions = {
+  setThemeVariant,
+  setThemeLoaded,
+};

package/runtime/routing/utils.test.ts

@@ -0,0 +1,7 @@
+import { getUrlByRouteRole } from './utils';
+
+describe('getUrlByRouteRole', () => {
+  it('returns the default path for an internal module', () => {
+    expect(getUrlByRouteRole('test-app-1')).toBe('/app1');
+  });
+});

package/runtime/scripts/GoogleAnalyticsLoader.test.ts

@@ -0,0 +1,77 @@
+import { GoogleAnalyticsLoader } from './index';
+
+const googleAnalyticsId = 'test-key';
+
+describe('GoogleAnalytics', () => {
+  let body;
+  let gaScriptSrc;
+  let gaScriptGtag;
+  let data;
+
+  beforeEach(() => {
+    // @ts-expect-error We're adding it, this is fine.
+    window.googleAnalytics = [];
+  });
+
+  function loadGoogleAnalytics(scriptData) {
+    const script = new GoogleAnalyticsLoader(scriptData);
+    script.loadScript();
+  }
+
+  describe('with valid GOOGLE_ANALYTICS_4_ID', () => {
+    beforeEach(() => {
+      document.body.innerHTML = '<script id="stub" />';
+      data = {
+        config: {
+          GOOGLE_ANALYTICS_4_ID: googleAnalyticsId,
+        },
+      };
+      loadGoogleAnalytics(data);
+      expect(global.googleAnalytics.invoked).toBe(true);
+      body = document.body.innerHTML;
+      gaScriptSrc = `https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`;
+      gaScriptGtag = `gtag('config', '${googleAnalyticsId}');`;
+    });
+
+    it('should initialize google analytics', () => {
+      expect(body).toMatch(gaScriptSrc);
+      expect(body).toMatch(gaScriptGtag);
+    });
+
+    it('should not invoke snippet twice', () => {
+      loadGoogleAnalytics(data);
+
+      expect(global.googleAnalytics.invoked).toBe(true);
+
+      expect(body).toMatch(gaScriptSrc);
+      expect(body).toMatch(gaScriptGtag);
+
+      let count = (body.match(new RegExp(gaScriptSrc.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')) || []).length;
+      expect(count).toBe(1);
+
+      count = (body.match(new RegExp(gaScriptGtag.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')) || []).length;
+      expect(count).toBe(1);
+    });
+  });
+
+  describe('with invalid GOOGLE_ANALYTICS_ID', () => {
+    beforeEach(() => {
+      document.body.innerHTML = '<script id="stub" />';
+      data = {
+        config: {
+          GOOGLE_ANALYTICS_4_ID: '',
+        },
+      };
+      loadGoogleAnalytics(data);
+      body = document.body.innerHTML;
+      gaScriptSrc = 'https://www.googletagmanager.com/gtag/js?id=';
+      gaScriptGtag = "gtag('config', '');";
+      expect(global.googleAnalytics.invoked).toBeFalsy();
+    });
+
+    it('should not initialize google analytics', () => {
+      expect(body).not.toMatch(gaScriptSrc);
+      expect(body).not.toMatch(gaScriptGtag);
+    });
+  });
+});

package/runtime/setupTest.js

@@ -12,38 +12,3 @@ jest.mock('universal-cookie', () => {
 });
 
 mergeSiteConfig(siteConfig);
-
-global.PARAGON_THEME = {
-  paragon: {
-    version: '1.0.0',
-    themeUrls: {
-      core: {
-        fileName: 'core.min.css',
-      },
-      defaults: {
-        light: 'light',
-      },
-      variants: {
-        light: {
-          fileName: 'light.min.css',
-        },
-      },
-    },
-  },
-  brand: {
-    version: '1.0.0',
-    themeUrls: {
-      core: {
-        fileName: 'core.min.css',
-      },
-      defaults: {
-        light: 'light',
-      },
-      variants: {
-        light: {
-          fileName: 'light.min.css',
-        },
-      },
-    },
-  },
-};

package/runtime/site.config.test.tsx

@@ -0,0 +1,33 @@
+import { EnvironmentTypes, SiteConfig } from '../types';
+
+const siteConfig: SiteConfig = {
+  siteId: 'runtime',
+  siteName: 'edX',
+  baseUrl: 'http://localhost:8080',
+  lmsBaseUrl: 'http://localhost:18000',
+  loginUrl: 'http://localhost:18000/login',
+  logoutUrl: 'http://localhost:18000/logout',
+
+  environment: EnvironmentTypes.TEST,
+  apps: [{
+    appId: 'test-app',
+    routes: [{
+      path: '/app1',
+      element: (
+        <div>Test App 1</div>
+      ),
+      handle: {
+        role: 'test-app-1'
+      }
+    }]
+  }],
+  accessTokenCookieName: 'edx-jwt-cookie-header-payload',
+  csrfTokenApiPath: '/csrf/api/v1/token',
+  languagePreferenceCookieName: 'openedx-language-preference',
+  refreshAccessTokenApiPath: '/login_refresh',
+  userInfoCookieName: 'edx-user-info',
+  ignoredErrorRegex: null,
+  segmentKey: 'segment_whoa',
+};
+
+export default siteConfig;

package/runtime/slots/Slot.test.tsx

@@ -0,0 +1,40 @@
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { useContext } from 'react';
+import { useLayoutForSlotId } from './layout/hooks';
+import Slot from './Slot';
+import SlotContext from './SlotContext';
+
+jest.mock('./layout/hooks');
+
+describe('Slot component', () => {
+  it('renders with default layout', () => {
+    (useLayoutForSlotId as jest.Mock).mockReturnValue(null);
+    const { container } = render(<MemoryRouter><Slot id="test-slot.ui" /></MemoryRouter>);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('successfully passes the slot ID through a SlotContext', () => {
+    function IdPrintingLayout() {
+      const { id } = useContext(SlotContext);
+      return <div>Slot ID: {id}</div>;
+    }
+    (useLayoutForSlotId as jest.Mock).mockReturnValue(IdPrintingLayout);
+    const { getByText } = render(<Slot id="test-slot.ui" />);
+    expect(getByText('Slot ID: test-slot.ui')).toBeInTheDocument();
+  });
+
+  it('renders with a component override layout', () => {
+    const CustomLayoutComponent = () => <div>Custom Layout Component</div>;
+    (useLayoutForSlotId as jest.Mock).mockReturnValue(CustomLayoutComponent);
+    const { getByText } = render(<Slot id="test-slot.ui" />);
+    expect(getByText('Custom Layout Component')).toBeInTheDocument();
+  });
+
+  it('renders with an element override layout', () => {
+    const CustomLayoutElement = <div>Custom Layout Element</div>;
+    (useLayoutForSlotId as jest.Mock).mockReturnValue(null);
+    const { getByText } = render(<Slot id="test-slot.ui" layout={CustomLayoutElement} />);
+    expect(getByText('Custom Layout Element')).toBeInTheDocument();
+  });
+});

package/runtime/slots/layout/DefaultSlotLayout.test.tsx

@@ -0,0 +1,31 @@
+import { render } from '@testing-library/react';
+import { useWidgets } from '../widget/hooks';
+import DefaultSlotLayout from './DefaultSlotLayout';
+
+// Mock the useWidgets hook
+jest.mock('../widget/hooks', () => ({
+  useWidgets: jest.fn(),
+}));
+
+describe('DefaultSlotLayout', () => {
+  it('renders widgets returned by useWidgets hook', () => {
+    const mockWidgets = [
+      <div key="widget1">Widget One</div>,
+      <div key="widget2">Widget Two</div>,
+    ];
+    (useWidgets as jest.Mock).mockReturnValue(mockWidgets);
+
+    const { getByText } = render(<DefaultSlotLayout />);
+
+    expect(getByText('Widget One')).toBeInTheDocument();
+    expect(getByText('Widget Two')).toBeInTheDocument();
+  });
+
+  it('renders empty when no widgets are returned', () => {
+    (useWidgets as jest.Mock).mockReturnValue([]);
+
+    const { container } = render(<DefaultSlotLayout />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});