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

package/runtime/slots/types.ts

@@ -9,6 +9,7 @@ import { WidgetOperation } from './widget/types';
 
 export interface SlotOperationCondition {
   active?: string[],
+  inactive?: string[],
   authenticated?: boolean,
   callback?: () => boolean,
 }

package/runtime/slots/utils.test.ts

@@ -0,0 +1,64 @@
+import { getSiteConfig } from '../config';
+import { SlotOperation } from './types';
+import { getSlotOperations } from './utils';
+import { WidgetOperationTypes } from '.';
+
+jest.mock('../config');
+
+describe('getSlotOperations', () => {
+  it('should return an empty array if no apps are configured', () => {
+    (getSiteConfig as jest.Mock).mockReturnValue({ apps: [] });
+    const result = getSlotOperations('test-slot.ui');
+    expect(result).toEqual([]);
+  });
+
+  it('should return an empty array if no slots are present in apps', () => {
+    (getSiteConfig as jest.Mock).mockReturnValue({ apps: [{ slots: [] }] });
+    const result = getSlotOperations('test-slot.ui');
+    expect(result).toEqual([]);
+  });
+
+  it('should return an empty array if no matching slotId is found', () => {
+    const mockSlots: SlotOperation[] = [{ slotId: 'other-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget1', element: '' }];
+    (getSiteConfig as jest.Mock).mockReturnValue({ apps: [{ slots: mockSlots }] });
+    const result = getSlotOperations('test-slot.ui');
+    expect(result).toEqual([]);
+  });
+
+  it('should return the correct slot operations for a given slotId', () => {
+    const mockSlots: SlotOperation[] = [
+      { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget1', element: '' },
+      { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget2', element: '' },
+      { slotId: 'other-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget3', element: '' },
+    ];
+    (getSiteConfig as jest.Mock).mockReturnValue({ apps: [{ slots: mockSlots }] });
+    const result = getSlotOperations('test-slot.ui');
+    expect(result).toEqual([
+      { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget1', element: '' },
+      { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget2', element: '' },
+    ]);
+  });
+
+  it('should handle multiple apps with slots correctly', () => {
+    (getSiteConfig as jest.Mock).mockReturnValue({
+      apps: [
+        {
+          slots: [
+            { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget1', element: '' },
+          ]
+        },
+        {
+          slots: [
+            { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget2', element: '' },
+            { slotId: 'other-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget3', element: '' },
+          ]
+        }
+      ]
+    });
+    const result = getSlotOperations('test-slot.ui');
+    expect(result).toEqual([
+      { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget1', element: '' },
+      { slotId: 'test-slot.ui', op: WidgetOperationTypes.APPEND, id: 'widget2', element: '' },
+    ]);
+  });
+});

package/runtime/slots/utils.ts

@@ -35,18 +35,37 @@ export function isSlotOperationConditionSatisfied(operation: SlotOperation) {
     }
   }
 
-  if (condition?.active !== undefined) {
-    let activeConditionRoleFound = false;
+  if (condition?.active !== undefined || condition?.inactive !== undefined) {
     const activeRoles: string[] = getActiveRoles();
-    for (const conditionRole of condition.active) {
-      if (activeRoles.includes(conditionRole)) {
-        activeConditionRoleFound = true;
-        break;
+
+    if (condition?.active !== undefined) {
+      let activeConditionRoleFound = false;
+      for (const conditionRole of condition.active) {
+        if (activeRoles.includes(conditionRole)) {
+          activeConditionRoleFound = true;
+          break;
+        }
+      }
+
+      // If we couldn't find an active role in our list, then we've failed this condition.
+      if (!activeConditionRoleFound) {
+        return false;
       }
     }
-    // If we couldn't find an active role in our list, then we've failed this condition.
-    if (!activeConditionRoleFound) {
-      return false;
+
+    if (condition?.inactive !== undefined) {
+      let inactiveConditionRoleFound = false;
+      for (const conditionRole of condition.inactive) {
+        if (activeRoles.includes(conditionRole)) {
+          inactiveConditionRoleFound = true;
+          break;
+        }
+      }
+
+      // If we find an active role from our inactive list, then we've failed this condition.
+      if (inactiveConditionRoleFound) {
+        return false;
+      }
     }
   }
 

package/runtime/testing/initializeMockApp.test.ts

@@ -0,0 +1,66 @@
+import {
+  getAnalyticsService,
+  MockAnalyticsService,
+  sendTrackEvent,
+} from '../analytics';
+import {
+  ensureAuthenticatedUser,
+  getAuthService,
+  getLoginRedirectUrl,
+  MockAuthService,
+  setAuthenticatedUser,
+} from '../auth';
+import {
+  getLoggingService,
+  logInfo,
+  MockLoggingService,
+} from '../logging';
+import initializeMockApp from './initializeMockApp';
+
+describe('initializeMockApp', () => {
+  it('should create mock analytics, auth, and logging services, and a real i18n service', () => {
+    const {
+      analyticsService,
+      authService,
+      loggingService,
+    } = initializeMockApp();
+
+    expect(getAnalyticsService()).toBeInstanceOf(MockAnalyticsService);
+    expect(getAuthService()).toBeInstanceOf(MockAuthService);
+    expect(getLoggingService()).toBeInstanceOf(MockLoggingService);
+
+    const customAttributes = { custom: 'attribute' };
+
+    // Next, test a representative sample of functionality to prove mocking is working the way we hope.
+
+    // Analytics
+    sendTrackEvent('testEvent', customAttributes);
+    expect(analyticsService.sendTrackEvent).toHaveBeenCalledWith('testEvent', customAttributes);
+    // The mock analytics service calls checkIdentifyCalled when sendTrackEvent is called.  Prove
+    // the jest.fn() works.
+    expect(analyticsService.checkIdentifyCalled).toHaveBeenCalledTimes(1);
+
+    // Auth
+    getLoginRedirectUrl('http://localhost/redirect/url');
+    setAuthenticatedUser({
+      userId: 'abc123',
+      username: 'Mock User',
+      roles: [],
+      administrator: false,
+      name: 'mock tester',
+    });
+    ensureAuthenticatedUser();
+
+    expect(authService.getLoginRedirectUrl).toHaveBeenCalledWith('http://localhost/redirect/url');
+    expect(authService.ensureAuthenticatedUser).toHaveBeenCalled();
+    // ensureAuthenticatedUser calls a few other things under the covers.  Prove our mocking is
+    // working as expected across multiple levels.
+    expect(authService.fetchAuthenticatedUser).toHaveBeenCalled();
+    expect(authService.getAuthenticatedUser).toHaveBeenCalled();
+    expect(authService.redirectToLogin).not.toHaveBeenCalled();
+
+    // Logging
+    logInfo('logging info', customAttributes);
+    expect(loggingService.logInfo).toHaveBeenCalledWith('logging info', customAttributes);
+  });
+});

package/runtime/utils.test.js

@@ -0,0 +1,116 @@
+import { waitFor } from '@testing-library/react';
+import {
+  camelCaseObject,
+  convertKeyNames,
+  getQueryParameters,
+  modifyObjectKeys,
+  snakeCaseObject,
+} from '.';
+
+describe('modifyObjectKeys', () => {
+  it('should use the provided modify function to change all keys in and object and its children', () => {
+    function meowKeys(key) {
+      return `${key}Meow`;
+    }
+
+    const result = modifyObjectKeys(
+      {
+        one: undefined,
+        two: null,
+        three: '',
+        four: 0,
+        five: NaN,
+        six: [1, 2, { seven: 'woof' }],
+        eight: { nine: { ten: 'bark' }, eleven: true },
+      },
+      meowKeys,
+    );
+
+    expect(result).toEqual({
+      oneMeow: undefined,
+      twoMeow: null,
+      threeMeow: '',
+      fourMeow: 0,
+      fiveMeow: NaN,
+      sixMeow: [1, 2, { sevenMeow: 'woof' }],
+      eightMeow: { nineMeow: { tenMeow: 'bark' }, elevenMeow: true },
+    });
+  });
+});
+
+describe('camelCaseObject', () => {
+  it('should make everything camelCase', () => {
+    const result = camelCaseObject({
+      what_now: 'brown cow',
+      but_who: { says_you_people: 'okay then', but_how: { will_we_even_know: 'the song is over' } },
+      'dot.dot.dot': 123,
+    });
+
+    expect(result).toEqual({
+      whatNow: 'brown cow',
+      butWho: { saysYouPeople: 'okay then', butHow: { willWeEvenKnow: 'the song is over' } },
+      dotDotDot: 123,
+    });
+  });
+});
+
+describe('snakeCaseObject', () => {
+  it('should make everything snake_case', () => {
+    const result = snakeCaseObject({
+      whatNow: 'brown cow',
+      butWho: { saysYouPeople: 'okay then', butHow: { willWeEvenKnow: 'the song is over' } },
+      'dot.dot.dot': 123,
+    });
+
+    expect(result).toEqual({
+      what_now: 'brown cow',
+      but_who: { says_you_people: 'okay then', but_how: { will_we_even_know: 'the song is over' } },
+      dot_dot_dot: 123,
+    });
+  });
+});
+
+describe('convertKeyNames', () => {
+  it('should replace the specified keynames', () => {
+    const result = convertKeyNames(
+      {
+        one: { two: { three: 'four' } },
+        five: 'six',
+      },
+      {
+        two: 'blue',
+        five: 'alive',
+        seven: 'heaven',
+      },
+    );
+
+    expect(result).toEqual({
+      one: { blue: { three: 'four' } },
+      alive: 'six',
+    });
+  });
+});
+
+describe('getQueryParameters', () => {
+  it('should use window location by default', () => {
+    expect(global.location.search).toEqual('');
+    expect(getQueryParameters()).toEqual({});
+  });
+
+  it('should make an empty object with no query string', () => {
+    expect(getQueryParameters('')).toEqual({});
+  });
+
+  it('should make an object with one key value pair', () => {
+    expect(getQueryParameters('?foo=bar')).toEqual({
+      foo: 'bar',
+    });
+  });
+
+  it('should make an object with one key value pair', () => {
+    expect(getQueryParameters('?foo=bar&baz=1')).toEqual({
+      foo: 'bar',
+      baz: '1',
+    });
+  });
+});

package/shell/Logo.test.tsx

@@ -0,0 +1,32 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import Logo from './Logo';
+
+describe('Logo component', () => {
+  it('renders the image with default URL when no props are provided', async () => {
+    const { getByRole, queryByRole } = render(<Logo />);
+    const image = getByRole('img');
+    expect(image).toHaveAttribute('src', 'https://edx-cdn.org/v3/default/logo.svg');
+    const link = queryByRole('link');
+    expect(link).toBeNull();
+  });
+
+  it('renders the image with provided imageUrl', () => {
+    const testUrl = 'https://example.com/test-logo.svg';
+    const { getByRole, queryByRole } = render(<Logo imageUrl={testUrl} />);
+    const image = getByRole('img');
+    expect(image).toHaveAttribute('src', testUrl);
+    const link = queryByRole('link');
+    expect(link).toBeNull();
+  });
+
+  it('renders the image wrapped in a Hyperlink when destinationUrl is provided', () => {
+    const testDestinationUrl = 'https://example.com';
+    const { getByRole } = render(<Logo destinationUrl={testDestinationUrl} />);
+    const link = getByRole('link');
+    expect(link).toHaveAttribute('href', testDestinationUrl);
+    const image = getByRole('img');
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', 'https://edx-cdn.org/v3/default/logo.svg');
+  });
+});

package/shell/__mocks__/file.js

@@ -0,0 +1 @@
+export default 'FileMock';

package/shell/__mocks__/svg.js

@@ -0,0 +1 @@
+export default 'SvgURL';

package/shell/__mocks__/universal-cookie.js

@@ -0,0 +1,6 @@
+const mockCookiesImplementation = {
+  get: jest.fn(),
+  remove: jest.fn(),
+};
+
+module.exports = () => mockCookiesImplementation;

package/shell/app.ts

@@ -3,6 +3,14 @@ import { App } from '../types';
 import { Footer } from './footer';
 import { Header } from './header';
 
+const inactive = [
+  'org.openedx.frontend.role.login',
+  'org.openedx.frontend.role.register',
+  'org.openedx.frontend.role.resetPassword',
+  'org.openedx.frontend.role.confirmPassword',
+  'org.openedx.frontend.role.welcome'
+];
+
 const app: App = {
   appId: 'org.openedx.frontend.app.shell',
   slots: [
@@ -11,12 +19,18 @@ const app: App = {
       id: 'org.openedx.frontend.widget.header.main.v1',
       op: WidgetOperationTypes.APPEND,
       component: Header,
+      condition: {
+        inactive,
+      }
     },
     {
       slotId: 'org.openedx.frontend.slot.footer.main.v1',
       id: 'org.openedx.frontend.widget.footer.main.v1',
       op: WidgetOperationTypes.APPEND,
       component: Footer,
+      condition: {
+        inactive,
+      }
     },
   ]
 };

package/shell/dev/devHome/app.ts

@@ -6,10 +6,10 @@ const app: App = {
   appId: 'org.openedx.frontend.app.dev.home',
   routes: [{
     path: '/',
-    id: 'dev.home',
+    id: 'org.openedx.frontend.route.dev.home',
     Component: HomePage,
     handle: {
-      role: 'home'
+      role: 'org.openedx.frontend.role.devHome'
     }
   }],
   messages,

package/shell/dev/slotShowcase/app.tsx

@@ -43,13 +43,13 @@ function TakesPropsViaContext() {
 }
 
 const app: App = {
-  appId: 'org.openedx.frontend.app.dev.slotShowcase',
+  appId: 'org.openedx.frontend.app.slotShowcase',
   routes: [{
-    id: 'org.openedx.frontend.route.dev.slotShowcase',
+    id: 'org.openedx.frontend.route.slotShowcase',
     path: '/slots',
     Component: SlotShowcasePage,
     handle: {
-      role: 'slotShowcase',
+      role: 'org.openedx.frontend.role.slotShowcase',
     }
   }],
   slots: [
@@ -314,7 +314,7 @@ const app: App = {
         title: 'Courses (modified)',
       },
       condition: {
-        active: ['slotShowcase'],
+        active: ['org.openedx.frontend.role.slotShowcase'],
       }
     },
     {
@@ -324,7 +324,7 @@ const app: App = {
       relatedId: 'org.openedx.frontend.widget.slotShowcase.headerLink3',
       element: (<LinkMenuItem label="Link After 3" url="#" variant="navLink" />),
       condition: {
-        active: ['slotShowcase'],
+        active: ['org.openedx.frontend.role.slotShowcase'],
       }
     },
     {
@@ -335,7 +335,7 @@ const app: App = {
         <NavDropdownMenuSlot id="org.openedx.frontend.slot.header.primaryLinksDropdown.v1" label="Resources" />
       ),
       condition: {
-        active: ['slotShowcase']
+        active: ['org.openedx.frontend.role.slotShowcase']
       }
     },
     {
@@ -346,7 +346,7 @@ const app: App = {
         <LinkMenuItem label="Resource 1" url="#" variant="dropdownItem" />
       ),
       condition: {
-        active: ['slotShowcase'],
+        active: ['org.openedx.frontend.role.slotShowcase'],
       }
     },
     {
@@ -355,7 +355,7 @@ const app: App = {
       op: WidgetOperationTypes.APPEND,
       element: (<LinkMenuItem label="Link 3" url="#" variant="navLink" />),
       condition: {
-        active: ['slotShowcase'],
+        active: ['org.openedx.frontend.role.slotShowcase'],
       }
     },
     {
@@ -364,7 +364,7 @@ const app: App = {
       op: WidgetOperationTypes.APPEND,
       element: (<LinkMenuItem label="Link 4" url="#" variant="navLink" />),
       condition: {
-        active: ['slotShowcase'],
+        active: ['org.openedx.frontend.role.slotShowcase'],
       }
     },
   ]

package/shell/header/app.tsx

@@ -66,7 +66,7 @@ const config: App = {
       element: (
         <ProfileLinkMenuItem
           label={messages['header.user.menu.profile']}
-          role="profile"
+          role="org.openedx.frontend.role.profile"
           variant="dropdownItem"
         />
       )
@@ -78,7 +78,7 @@ const config: App = {
       element: (
         <LinkMenuItem
           label={messages['header.user.menu.account']}
-          role="account"
+          role="org.openedx.frontend.role.account"
           variant="dropdownItem"
         />
       )
@@ -90,7 +90,7 @@ const config: App = {
       element: (
         <LinkMenuItem
           label={messages['header.user.menu.logout']}
-          role="logout"
+          role="org.openedx.frontend.role.logout"
           variant="dropdownItem"
         />
       )

package/shell/router/createRouter.test.tsx

@@ -0,0 +1,50 @@
+import { createBrowserRouter } from 'react-router-dom';
+import { getBasename } from '../../runtime/initialize';
+import Shell from '../Shell';
+import createRouter from './createRouter';
+import getAppRoutes from './getAppRoutes';
+
+jest.mock('react-router-dom', () => ({
+  createBrowserRouter: jest.fn(),
+}));
+
+jest.mock('../../runtime/initialize', () => ({
+  getBasename: jest.fn(),
+}));
+
+jest.mock('../Shell', () => jest.fn());
+jest.mock('./getAppRoutes', () => jest.fn());
+
+describe('createRouter', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should create a router with the correct configuration', () => {
+    const mockRoutes = [{ path: '/', element: <div>Home</div> }];
+    const mockBasename = '/base';
+
+    (getAppRoutes as jest.Mock).mockReturnValue(mockRoutes);
+    (getBasename as jest.Mock).mockReturnValue(mockBasename);
+    (createBrowserRouter as jest.Mock).mockReturnValue('fake router value');
+
+    const result = createRouter();
+
+    expect(getAppRoutes).toHaveBeenCalled();
+    expect(getBasename).toHaveBeenCalled();
+    expect(createBrowserRouter).toHaveBeenCalledWith(
+      [
+        {
+          Component: Shell,
+          children: mockRoutes,
+        },
+      ],
+      {
+        basename: mockBasename,
+      }
+    );
+
+    // Just proving we actually return the router from createBrowserRouter.
+    expect(result).toEqual('fake router value');
+  });
+});

package/shell/router/getAppRoutes.test.tsx

@@ -0,0 +1,59 @@
+import { RouteObject } from 'react-router';
+import { getSiteConfig } from '../../runtime';
+import getAppRoutes from './getAppRoutes';
+
+jest.mock('../../runtime', () => ({
+  getSiteConfig: jest.fn(),
+}));
+
+describe('getAppRoutes', () => {
+  it('should return an empty array when no apps are configured', () => {
+    (getSiteConfig as jest.Mock).mockReturnValue({ apps: [] });
+
+    const routes = getAppRoutes();
+
+    expect(routes).toEqual([]);
+  });
+
+  it('should flatten and return routes from configured apps', () => {
+    const mockApps = [
+      {
+        routes: [
+          { path: '/page1', element: <div>Page 1</div> },
+          { path: '/page2', element: <div>Page 2</div> }
+        ]
+      },
+      {
+        routes: [
+          { path: '/page3', element: <div>Page 3</div> }
+        ]
+      },
+    ];
+
+    (getSiteConfig as jest.Mock).mockReturnValue({ apps: mockApps });
+
+    const routes = getAppRoutes();
+
+    expect(routes).toEqual([
+      { path: '/page1', element: <div>Page 1</div> },
+      { path: '/page2', element: <div>Page 2</div> },
+      { path: '/page3', element: <div>Page 3</div> }
+    ]);
+  });
+
+  it('should ignore apps without routes', () => {
+    const mockRoutes: RouteObject[] = [
+      { path: '/page1', element: <div>Page 1</div> },
+    ];
+    const mockApps = [
+      { routes: mockRoutes },
+      { slots: [] },
+    ];
+
+    (getSiteConfig as jest.Mock).mockReturnValue({ apps: mockApps });
+
+    const routes = getAppRoutes();
+
+    expect(routes).toEqual(mockRoutes);
+  });
+});

package/shell/site.config.dev.tsx

@@ -18,15 +18,15 @@ const siteConfig: SiteConfig = {
 
   externalRoutes: [
     {
-      role: 'profile',
+      role: 'org.openedx.frontend.role.profile',
       url: 'http://apps.local.openedx.io:1995/profile/'
     },
     {
-      role: 'account',
+      role: 'org.openedx.frontend.role.account',
       url: 'http://apps.local.openedx.io:1997/account/'
     },
     {
-      role: 'logout',
+      role: 'org.openedx.frontend.role.logout',
       url: 'http://local.openedx.io:8000/logout'
     },
   ],

package/shell/site.config.test.tsx

@@ -0,0 +1,16 @@
+import { EnvironmentTypes, SiteConfig } from '../types';
+
+const siteConfig: SiteConfig = {
+  siteId: 'test',
+  siteName: 'Open edX',
+  baseUrl: 'http://localhost:8080',
+  lmsBaseUrl: 'http://localhost:18000',
+  loginUrl: 'http://localhost:18000/login',
+  logoutUrl: 'http://localhost:18000/logout',
+
+  environment: EnvironmentTypes.TEST,
+  apps: [],
+  segmentKey: 'segment_whoa',
+};
+
+export default siteConfig;