chore: tests for ts api hooks

Author: muselesscreator

jest.config.js

@@ -1,6 +1,6 @@
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('jest', {
+const config = createConfig('jest', {
   // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  
   // If you want to add config BEFORE jest loads, use setupFiles instead.  
   setupFilesAfterEnv: [
@@ -11,3 +11,8 @@ module.exports = createConfig('jest', {
     'src/i18n',
   ],
 });
+
+config.moduleDirectories = ['node_modules', 'src'];
+// config.moduleNameMapper['@/(.*)'] = '<rootDir>/src/$1';
+
+module.exports = config;

package-lock.json

@@ -51,6 +51,7 @@
     "classnames": "^2.3.2",
     "core-js": "3.31.1",
     "filesize": "^8.0.6",
+    "jest-when": "^3.6.0",
     "prop-types": "15.8.1",
     "query-string": "^8.1.0",
     "react": "16.14.0",

package.json

@@ -8,7 +8,7 @@ export const feedbackRequirement = StrictDict({
 
 export const queryKeys = StrictDict({
   oraConfig: 'oraConfig',
-  submissionData: 'submissionData',
+  pageData: 'pageData',
 });
 
 export default { feedbackRequirement, queryKeys };

src/data/services/lms/constants.js

@@ -0,0 +1,126 @@
+import { useQuery } from '@tanstack/react-query';
+import { useRouteMatch } from 'react-router-dom';
+import { snakeCaseObject, camelCaseObject } from '@edx/frontend-platform';
+import { when } from 'jest-when';
+
+import routes from 'routes';
+import * as types from '../types';
+import { queryKeys } from '../constants';
+import fakeData from '../fakeData';
+
+import { useORAConfig, usePageData } from './api';
+
+jest.mock('@tanstack/react-query', () => ({ useQuery: jest.fn() }));
+
+jest.mock('react-router-dom', () => ({ useRouteMatch: jest.fn() }));
+
+interface QueryFn { (): string }
+interface QueryArgs { queryKey: string, queryFn: QueryFn }
+
+interface MockORAQuery extends QueryArgs { data: types.ORAConfig }
+interface MockUseORAQuery { (QueryArgs): MockORAQuery }
+interface MockORAUseConfigHook { (): MockORAQuery }
+
+interface MockPageDataQuery extends QueryArgs { data: types.PageData }
+interface MockUsePageDataQuery { (QueryArgs): MockPageDataQuery }
+interface MockPageDataUseConfigHook { (): MockPageDataQuery }
+
+let out;
+describe('lms api hooks', () => {
+  describe('useORAConfig', () => {
+    const mockUseQuery = (hasData: boolean): MockUseORAQuery => ({ queryKey, queryFn }) => ({
+      data: hasData ? camelCaseObject(fakeData.oraConfig.assessmentText) : undefined,
+      queryKey,
+      queryFn,
+    });
+
+    const mockUseQueryForORA = (hasData) => {
+      when(useQuery)
+        .calledWith(expect.objectContaining({ queryKey: [queryKeys.oraConfig] }))
+        .mockImplementationOnce(mockUseQuery(hasData));
+    };
+
+    const testUseORAConfig = useORAConfig as unknown as MockORAUseConfigHook;
+
+    beforeEach(() => {
+      mockUseQueryForORA(true);
+      out = testUseORAConfig();
+    });
+    it('initializes query with oraConfig queryKey', () => {
+      expect(out.queryKey).toEqual([queryKeys.oraConfig]);
+    });
+    it('initializes query with promise pointing to assessment text', async () => {
+      const response = await out.queryFn();
+      expect(response).toEqual(fakeData.oraConfig.assessmentText);
+    });
+    it('returns camelCase object from data if data has been returned', () => {
+      expect(out.data).toEqual(camelCaseObject(fakeData.oraConfig.assessmentText));
+    });
+    it('returns empty object from data if data has not been returned', () => {
+      mockUseQueryForORA(false);
+      out = testUseORAConfig();
+      expect(out.data).toEqual({});
+    });
+  });
+  describe('usePageData', () => {
+    const mockUseQuery = (data?: types.PageData): MockUsePageDataQuery => ({ queryKey, queryFn }) => ({
+      data: data ? camelCaseObject(data) : undefined,
+      queryKey,
+      queryFn,
+    });
+
+    const mockUseQueryForPageData = (data, isAssessment) => {
+      when(useQuery)
+        .calledWith(expect.objectContaining({ queryKey: [queryKeys.pageData, isAssessment] }))
+        .mockImplementationOnce(mockUseQuery(data));
+    };
+
+    const mockUseRouteMatch = (path) => {
+      when(useRouteMatch)
+        .calledWith()
+        .mockReturnValueOnce({ path });
+    };
+
+    const testUsePageData = usePageData as unknown as MockPageDataUseConfigHook;
+    describe('submission', () => {
+      beforeEach(() => {
+        mockUseRouteMatch(routes.submission);
+        mockUseQueryForPageData(fakeData.pageData.shapes.emptySubmission, false);
+        out = testUsePageData();
+      });
+      it('initializes query with pageData queryKey and isAssessment: false', () => {
+        expect(out.queryKey).toEqual([queryKeys.pageData, false]);
+      });
+      it('initializes query with promise pointing to empty submission page data', async () => {
+        const response = await out.queryFn();
+        expect(response).toEqual(fakeData.pageData.shapes.emptySubmission);
+      });
+      it('returns camelCase object from data if data has been returned', () => {
+        expect(out.data).toEqual(camelCaseObject(fakeData.pageData.shapes.emptySubmission));
+      });
+    });
+    describe('assessment', () => {
+      beforeEach(() => {
+        mockUseRouteMatch(routes.assessment);
+        mockUseQueryForPageData(fakeData.pageData.shapes.peerAssessment, true);
+        out = testUsePageData();
+      });
+      it('initializes query with pageData queryKey and isAssessment: true', () => {
+        expect(out.queryKey).toEqual([queryKeys.pageData, true]);
+      });
+      it('initializes query with promise pointing to peer assessment page data', async () => {
+        const response = await out.queryFn();
+        expect(response).toEqual(fakeData.pageData.shapes.peerAssessment);
+      });
+      it('returns camelCase object from data if data has been returned', () => {
+        expect(out.data).toEqual(camelCaseObject(fakeData.pageData.shapes.peerAssessment));
+      });
+    });
+    it('returns empty object from data if data has not been returned', () => {
+      mockUseRouteMatch(routes.submission);
+      mockUseQueryForPageData(undefined, false);
+      out = testUsePageData();
+      expect(out.data).toEqual({});
+    });
+  });
+});

src/data/services/lms/hooks/api.test.ts

@@ -26,8 +26,9 @@ export const usePageData = (): types.QueryData<types.PageData> => {
   const returnData = isAssessment
     ? fakeData.pageData.shapes.peerAssessment
     : fakeData.pageData.shapes.emptySubmission;
+
   const { data, ...status } = useQuery({
-    queryKey: [queryKeys.submissionData, isAssessment],
+    queryKey: [queryKeys.pageData, isAssessment],
     // queryFn: () => getAuthenticatedClient().get(...),
     queryFn: () => Promise.resolve(returnData),
   });