Merge pull request #10 from openedx/bw/ts_new_api

Bw/ts new api

Author: Ben Warzeski

.eslintignore

@@ -1,4 +1,6 @@
 coverage/*
 dist/
 node_modules/
-jest.config.js
+jest.config.js
+webpack.*.js
+.eslintrc.js

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
       with:
         node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
-      run: npm ci
+      run: npm ci --legacy-peer-deps
     - name: Lint
       run: npm run lint
     - name: Test

.github/workflows/commitlint.yml

@@ -7,4 +7,14 @@ on:
 
 jobs:
   commitlint:
-    uses: openedx/.github/.github/workflows/commitlint.yml@master
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: remove tsconfig.json # see issue https://github.com/conventional-changelog/commitlint/issues/3256
+        run: |
+          rm tsconfig.json
+      - name: Check commits
+        uses: wagoid/commitlint-github-action@v5

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

@@ -40,6 +40,7 @@
     "@edx/paragon": "^20.20.0",
     "@edx/react-unit-test-utils": "1.5.3",
     "@edx/tinymce-language-selector": "1.1.0",
+    "@edx/typescript-config": "^1.0.1",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -50,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",
@@ -65,10 +67,11 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "12.9.4",
+    "@edx/frontend-build": "12.9.0-alpha.6",
     "@edx/reactifex": "^2.1.1",
     "glob": "7.2.3",
     "husky": "7.0.4",
-    "jest": "29.6.2"
+    "jest": "29.6.2",
+    "ts-jest": "^26.5.6"
   }
 }

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 { 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

@@ -4,10 +4,11 @@ import { useRouteMatch } from 'react-router-dom';
 import { camelCaseObject } from '@edx/frontend-platform';
 
 import routes from 'routes';
+import * as types from '../types';
 import { queryKeys } from '../constants';
 import fakeData from '../fakeData';
 
-export const useORAConfig = () => {
+export const useORAConfig = (): types.QueryData<types.ORAConfig> => {
   const { data, ...status } = useQuery({
     queryKey: [queryKeys.oraConfig],
     // queryFn: () => getAuthenticatedClient().get(...),
@@ -19,29 +20,17 @@ export const useORAConfig = () => {
   };
 };
 
-export const usePageData = () => {
+export const usePageData = (): types.QueryData<types.PageData> => {
   const route = useRouteMatch();
   const isAssessment = route.path === routes.assessment;
   const returnData = isAssessment
     ? fakeData.pageData.shapes.peerAssessment
     : fakeData.pageData.shapes.emptySubmission;
-  console.log({ returnData, isAssessment, route });
-  const { data, ...status } = useQuery({
-    queryKey: [queryKeys.submissionData, isAssessment],
-    // queryFn: () => getAuthenticatedClient().get(...),
-    queryFn: () => Promise.resolve(returnData),
-  });
-  return {
-    ...status,
-    data: data ? camelCaseObject(data) : {},
-  };
-};
 
-export const useAssessmentData = () => {
   const { data, ...status } = useQuery({
-    queryKey: [queryKeys.submissionData],
+    queryKey: [queryKeys.pageData, isAssessment],
     // queryFn: () => getAuthenticatedClient().get(...),
-    queryFn: () => Promise.resolve(fakeData.submission.teamAssessment),
+    queryFn: () => Promise.resolve(returnData),
   });
   return {
     ...status,