fix: use camel case response

Author: diana-villalvazo-wgu

jest.config.js

@@ -10,6 +10,8 @@ module.exports = createConfig('test', {
     'src/__mocks__',
   ],
   moduleNameMapper: {
+    // This alias is for any code in the src directory that wants to avoid '../../' style relative imports:
+    '^@src/(.*)$': '<rootDir>/src/$1',
     '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/file.js',
   },

package.json

@@ -18,7 +18,7 @@
     "*.scss"
   ],
   "scripts": {
-    "dev": "PORT=8081 PUBLIC_PATH=/instructor openedx dev",
+    "dev": "PORT=8080 PUBLIC_PATH=/instructor openedx dev",
     "i18n_extract": "openedx formatjs extract",
     "lint": "openedx lint .",
     "lint:fix": "openedx lint --fix .",

src/data/api.test.ts

@@ -1,5 +1,5 @@
 import { getCourseInfo } from './api';
-import { getAppConfig, getAuthenticatedHttpClient } from '@openedx/frontend-base';
+import { getAppConfig, getAuthenticatedHttpClient, camelCaseObject } from '@openedx/frontend-base';
 
 jest.mock('@openedx/frontend-base');
 
@@ -9,15 +9,18 @@ const mockHttpClient = {
 };
 
 const mockGetAppConfig = getAppConfig as jest.MockedFunction<typeof getAppConfig>;
+const mockCamelCaseObject = camelCaseObject as jest.MockedFunction<typeof camelCaseObject>;
 const mockGetAuthenticatedHttpClient = getAuthenticatedHttpClient as jest.MockedFunction<typeof getAuthenticatedHttpClient>;
 
 describe('getCourseInfo', () => {
   const mockCourseData = { course_name: 'Test Course', tabs: [{ tab_id: 'course_info', title: 'Course Information', url: 'https://test-lms.com/courses/test-course-123/info' }] };
+  const mockCamelCasedCourseData = { courseName: 'Test Course', tabs: [{ tabId: 'course_info', title: 'Course Information', url: 'https://test-lms.com/courses/test-course-123/info' }] };
 
   beforeEach(() => {
     jest.clearAllMocks();
     mockGetAppConfig.mockReturnValue({ LMS_BASE_URL: 'https://test-lms.com' });
     mockGetAuthenticatedHttpClient.mockReturnValue(mockHttpClient as any);
+    mockCamelCaseObject.mockReturnValue(mockCamelCasedCourseData);
     mockHttpClient.get.mockResolvedValue({ data: mockCourseData });
   });
 
@@ -27,7 +30,7 @@ describe('getCourseInfo', () => {
     expect(mockGetAppConfig).toHaveBeenCalledWith('org.openedx.frontend.app.instructor');
     expect(mockGetAuthenticatedHttpClient).toHaveBeenCalled();
     expect(mockHttpClient.get).toHaveBeenCalledWith('https://test-lms.com/api/instructor/v2/courses/test-course-123');
-    expect(result).toBe(mockCourseData);
+    expect(result).toBe(mockCamelCasedCourseData);
   });
 
   it('throws error when API call fails', async () => {

src/instructorTabs/InstructorTabs.tsx

@@ -5,15 +5,15 @@ import { SlotContext, useWidgetsForId } from '@openedx/frontend-base';
 import { useCourseInfo } from '../data/apiHook';
 
 export interface TabProps {
-  tab_id: string,
+  tabId: string,
   url: string,
   title: string,
 }
 
 const extractWidgetProps = (widget: React.ReactNode): TabProps | null => {
   if (widget && typeof widget === 'object' && 'props' in widget) {
     const props = widget.props.children.props as TabProps;
-    if (props?.tab_id && props?.url && props?.title) {
+    if (props?.tabId && props?.url && props?.title) {
       return props;
     }
   }
@@ -35,11 +35,13 @@ const InstructorTabs = () => {
   const apiTabs: TabProps[] = courseInfo?.tabs ?? [];
   const allTabs = [...apiTabs];
 
+  // Tabs added via slot take priority over (read: replace) tabs from the API
+  // All tabs added via slot are placed at the end of the tabs array
   widgetPropsArray.forEach(slotTab => {
-    if (!apiTabs.find(apiTab => apiTab.tab_id === slotTab.tab_id)) {
+    if (!apiTabs.find(apiTab => apiTab.tabId === slotTab.tabId)) {
       allTabs.push(slotTab);
     } else {
-      const indexToRemove = allTabs.findIndex(({ tab_id }) => tab_id === slotTab.tab_id);
+      const indexToRemove = allTabs.findIndex(({ tabId }) => tabId === slotTab.tabId);
       if (indexToRemove !== -1) {
         allTabs.splice(indexToRemove, 1);
       }
@@ -50,7 +52,7 @@ const InstructorTabs = () => {
   const activeKey = tabId ?? 'course_info';
   const handleSelect = (eventKey: string | null) => {
     if (eventKey && courseId) {
-      const selectedTab = allTabs.find(({ tab_id }) => tab_id === eventKey);
+      const selectedTab = allTabs.find(({ tabId }) => tabId === eventKey);
       if (selectedTab) {
         navigate(`/${courseId}/${eventKey}`);
       }
@@ -65,8 +67,8 @@ const InstructorTabs = () => {
 
   return (
     <Tabs id="instructor-tabs" activeKey={activeKey} onSelect={handleSelect}>
-      {allTabs.map(({ tab_id, title }) => (
-        <Tab key={tab_id} eventKey={tab_id} title={title} />
+      {allTabs.map(({ tabId, title }) => (
+        <Tab key={tabId} eventKey={tabId} title={title} />
       ))}
     </Tabs>
   );

src/slots/README.md

@@ -21,14 +21,14 @@ import { SlotOperation, WidgetOperationTypes } from '@openedx/frontend-base';
 import { InstructorTab } from 'src/slots/instructorTabsSlot/InstructorTabsSlot';
 
 // Tab configuration data
-const tabData = { tab_id: 'course_info', url: 'course_info', title: 'Course Info' };
+const tabData = { tabId: 'course_info', url: 'course_info', title: 'Course Info' };
 
 // Create slot operations
 export const tabSlots: SlotOperation[] = [{
   slotId: `org.openedx.frontend.slot.instructor.tabs.v1`,
-  id: `org.openedx.frontend.widget.instructor.tab.${tab_id}`,
+  id: `org.openedx.frontend.widget.instructor.tab.${tabId}`,
   op: WidgetOperationTypes.APPEND,
-  element: <InstructorTab tab_id={tabData.tab_id} title={tabData.title} url={tabData.url} />,
+  element: <InstructorTab tabId={tabData.tabId} title={tabData.title} url={tabData.url} />,
 }];
 ```
 
@@ -60,8 +60,8 @@ const InstructorTabs = () => {
   return (
     <Tabs>
       {widgets.map((widget, index) => {
-        const { tab_id, title } = widget.element.props;
-        return <Tab key={tab_id} eventKey={tab_id} title={title} />;
+        const { tabId, title } = widget.element.props;
+        return <Tab key={tabId} eventKey={tabId} title={title} />;
       })}
     </Tabs>
   );