@coorpacademy/app-review 0.1.15 → 0.1.17

package/lib/views/slides/test/index.test.js

@@ -0,0 +1,234 @@
+import test from 'ava';
+import identity from 'lodash/fp/identity';
+import omit from 'lodash/fp/omit';
+import { mapStateToSlidesProps } from '..';
+import { freeTextSlide } from './fixtures/free-text';
+test('should create initial props when fetched slide is still not received', function (t) {
+    var state = {
+        data: {
+            progression: {
+                _id: '62b1d1087aa12f00253f40ee',
+                content: {
+                    ref: '_skillref',
+                    type: 'skill'
+                },
+                engine: {
+                    ref: 'review'
+                },
+                state: {
+                    allAnswers: [],
+                    isCorrect: true,
+                    nextContent: {
+                        ref: 'sli_N1XACJobn',
+                        type: 'slide'
+                    },
+                    pendingSlides: [],
+                    slides: [],
+                    step: {
+                        current: 1
+                    },
+                    stars: 0
+                }
+            },
+            skills: [],
+            slides: {
+                sli_N1XACJobn: null
+            },
+            token: '1234'
+        },
+        ui: {
+            currentSlideRef: '',
+            navigation: ['loader', 'slides'],
+            answers: [],
+            slide: {
+                validateButton: false
+            }
+        }
+    };
+    var props = mapStateToSlidesProps(state, identity);
+    t.is(props.congratsProps, undefined);
+    t.deepEqual(omit(['onQuitClick'], props.header), {
+        'aria-label': 'aria-header-wrapper',
+        closeButtonAriaLabel: 'aria-close-button',
+        mode: '__revision_mode',
+        skillName: '__agility',
+        steps: [
+            {
+                current: true,
+                icon: 'no-answer',
+                value: '1'
+            },
+            {
+                current: false,
+                icon: 'no-answer',
+                value: '2'
+            },
+            {
+                current: false,
+                icon: 'no-answer',
+                value: '3'
+            },
+            {
+                current: false,
+                icon: 'no-answer',
+                value: '4'
+            },
+            {
+                current: false,
+                icon: 'no-answer',
+                value: '5'
+            }
+        ]
+    });
+    t.deepEqual(omit(['validateButton'], props.stack), {
+        correctionPopinProps: undefined,
+        endReview: false,
+        slides: {
+            '0': {
+                hidden: false,
+                position: 0,
+                loading: true
+            },
+            '1': {
+                hidden: false,
+                position: 1,
+                loading: true
+            },
+            '2': {
+                hidden: false,
+                position: 2,
+                loading: true
+            },
+            '3': {
+                hidden: false,
+                position: 3,
+                loading: true
+            },
+            '4': {
+                hidden: false,
+                position: 4,
+                loading: true
+            }
+        }
+    });
+});
+test('should create initial props when the slide is on the state', function (t) {
+    var state = {
+        data: {
+            progression: {
+                _id: '62b1d1087aa12f00253f40ee',
+                content: {
+                    ref: '_skillref',
+                    type: 'skill'
+                },
+                engine: {
+                    ref: 'review'
+                },
+                state: {
+                    allAnswers: [],
+                    isCorrect: true,
+                    nextContent: {
+                        ref: 'sli_N1XACJobn',
+                        type: 'slide'
+                    },
+                    pendingSlides: [],
+                    slides: [],
+                    step: {
+                        current: 1
+                    },
+                    stars: 0
+                }
+            },
+            skills: [],
+            slides: {
+                sli_N1XACJobn: freeTextSlide
+            },
+            token: '1234'
+        },
+        ui: {
+            currentSlideRef: 'sli_N1XACJobn',
+            navigation: ['loader', 'slides'],
+            answers: ['My value'],
+            slide: {
+                validateButton: true
+            }
+        }
+    };
+    var props = mapStateToSlidesProps(state, identity);
+    t.is(props.congratsProps, undefined);
+    t.deepEqual(omit(['onQuitClick'], props.header), {
+        'aria-label': 'aria-header-wrapper',
+        closeButtonAriaLabel: 'aria-close-button',
+        mode: '__revision_mode',
+        skillName: '__agility',
+        steps: [
+            {
+                current: true,
+                icon: 'no-answer',
+                value: '1'
+            },
+            {
+                current: false,
+                icon: 'no-answer',
+                value: '2'
+            },
+            {
+                current: false,
+                icon: 'no-answer',
+                value: '3'
+            },
+            {
+                current: false,
+                icon: 'no-answer',
+                value: '4'
+            },
+            {
+                current: false,
+                icon: 'no-answer',
+                value: '5'
+            }
+        ]
+    });
+    t.deepEqual(omit(['validateButton', 'slides'], props.stack), {
+        correctionPopinProps: undefined,
+        endReview: false
+    });
+    t.false(props.stack.validateButton.disabled);
+    t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+        hidden: false,
+        position: 0,
+        loading: false,
+        parentContentTitle: 'From "Developing the review app" course',
+        questionText: 'Which term is used to describe the act of asking what the usual salary is for the position you are applying for?'
+    });
+    t.deepEqual(omit('model.onChange', props.stack.slides['0'].answerUI), {
+        help: 'Type your answer.',
+        model: {
+            placeholder: 'Type here',
+            type: 'freeText',
+            value: 'My value'
+        }
+    });
+    t.deepEqual(omit(['0'], props.stack.slides), {
+        '1': {
+            hidden: false,
+            position: 1,
+            loading: true
+        },
+        '2': {
+            hidden: false,
+            position: 2,
+            loading: true
+        },
+        '3': {
+            hidden: false,
+            position: 3,
+            loading: true
+        },
+        '4': {
+            hidden: false,
+            position: 4,
+            loading: true
+        }
+    });
+});

package/lib/views/slides/test/map-api-slide-to-ui.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/{helpers → views/slides}/test/map-api-slide-to-ui.test.js

@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import test from 'ava';
+import identity from 'lodash/fp/identity';
 import { mapApiSlideToUi } from '../map-api-slide-to-ui';
 import { qcmUISlide, qcmSlide } from './fixtures/qcm';
 import { qcmDragUISlide, qcmDragSlide } from './fixtures/qcm-drag';
@@ -18,26 +19,35 @@ import { qcmGraphicUISlide, qcmGraphicSlide } from './fixtures/qcm-graphic';
 import { textTemplateSlide, textTemplateUISlide } from './fixtures/text-template';
 import { selectTemplateSlide, selectTemplateUISlide } from './fixtures/select-template';
 import { sliderSlide, sliderUISlide } from './fixtures/slider';
-var _mapApiSlideToUi = mapApiSlideToUi({ translate: function (text) { return text; } });
+var _mapApiSlideToUi = mapApiSlideToUi(identity);
 var macro = test.macro({
     title: function (providedTitle) {
         return "should handle ".concat(providedTitle, " conversion").trim();
     },
     exec: function (t, arg) {
-        t.deepEqual(JSON.parse(JSON.stringify(_mapApiSlideToUi(arg.slide))), JSON.parse(JSON.stringify(arg.expectedUiSlide)));
+        t.deepEqual(JSON.parse(JSON.stringify(_mapApiSlideToUi(arg.slide, arg.answers))), JSON.parse(JSON.stringify(arg.expectedUiSlide)));
     }
 });
-test('qcm', macro, { slide: qcmSlide, expectedUiSlide: qcmUISlide });
-test('qcm drag', macro, { slide: qcmDragSlide, expectedUiSlide: qcmDragUISlide });
-test('qcm graphic', macro, { slide: qcmGraphicSlide, expectedUiSlide: qcmGraphicUISlide });
-test('text template', macro, { slide: textTemplateSlide, expectedUiSlide: textTemplateUISlide });
+test('qcm', macro, { slide: qcmSlide, answers: [], expectedUiSlide: qcmUISlide });
+test('qcm drag', macro, { slide: qcmDragSlide, answers: [], expectedUiSlide: qcmDragUISlide });
+test('qcm graphic', macro, {
+    slide: qcmGraphicSlide,
+    answers: [],
+    expectedUiSlide: qcmGraphicUISlide
+});
+test('text template', macro, {
+    slide: textTemplateSlide,
+    answers: [],
+    expectedUiSlide: textTemplateUISlide
+});
 test('select template', macro, {
     slide: selectTemplateSlide,
+    answers: [],
     expectedUiSlide: selectTemplateUISlide
 });
-test('free text', macro, { slide: freeTextSlide, expectedUiSlide: freeTextUISlide });
-test('slider', macro, { slide: sliderSlide, expectedUiSlide: sliderUISlide });
+test('free text', macro, { slide: freeTextSlide, answers: [], expectedUiSlide: freeTextUISlide });
+test('slider', macro, { slide: sliderSlide, answers: [], expectedUiSlide: sliderUISlide });
 test('should throw an error if the question type can not be handled', function (t) {
     var faultySlide = __assign(__assign({}, qcmSlide), { question: { type: 'lol' } });
-    t.throws(function () { return _mapApiSlideToUi(faultySlide); });
+    t.throws(function () { return _mapApiSlideToUi(faultySlide, []); });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -18,7 +18,8 @@
     "clean:es": "rm -rf es",
     "clean": "concurrently \"npm run clean:commonjs\" \"npm run clean:es\"",
     "typecheck": "tsc --noEmit",
-    "test:unit": "ava",
+    "ava": "ava",
+    "test:unit": "nyc npm run ava",
     "lint": "eslint '**/*' --cache --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json",
     "lint:fix": "npm run lint -- --fix",
     "test": "npm run lint && npm run typecheck && npm run test:unit"
@@ -40,7 +41,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.22.9",
+    "@coorpacademy/components": "10.22.11",
     "@coorpacademy/redux-task": "^1.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
@@ -74,8 +75,8 @@
     "nock": "^13.2.9",
     "postcss-modules-values-replace": "^3.4.0",
     "react-dom": "^17.0.2",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.9.1",
     "typescript": "^4.7.4"
   },
-  "gitHead": "0f66b53a129b22c69cb3db1f3ae3993903cd8df3"
+  "gitHead": "7191ac405f4eebce61c459722595014ea973818c"
 }

package/src/actions/api/fetch-skills.ts

@@ -1,24 +1,31 @@
 import buildTask from '@coorpacademy/redux-task';
-import type {ThunkAction, ThunkDispatch} from 'redux-thunk';
-import {AnyAction} from 'redux';
+import get from 'lodash/fp/get';
+import type {Dispatch} from 'redux';
 import type {StoreState} from '../../reducers';
-import {Options, Skill} from '../../types/common';
+import type {Options, Skill} from '../../types/common';
 
 export const SKILLS_FETCH_REQUEST = '@@skills/FETCH_REQUEST' as const;
 export const SKILLS_FETCH_SUCCESS = '@@skills/FETCH_SUCCESS' as const;
 export const SKILLS_FETCH_FAILURE = '@@skills/FETCH_FAILURE' as const;
 
-export interface ReceivedSkills extends AnyAction {
+export type ReceivedSkills = {
   type: '@@skills/FETCH_SUCCESS';
   payload: Skill[];
-}
+};
 
-export type FetchSkillsAction = ThunkAction<Promise<void>, StoreState, Options, AnyAction>;
-type Dispatch = ThunkDispatch<StoreState, Options, AnyAction>;
-
-export const fetchSkills = (token: string): FetchSkillsAction =>
-  buildTask({
+export const fetchSkills = async (
+  dispatch: Dispatch,
+  getState: () => StoreState,
+  {services}: Options
+): Promise<void> => {
+  const action = buildTask({
     types: [SKILLS_FETCH_REQUEST, SKILLS_FETCH_SUCCESS, SKILLS_FETCH_FAILURE],
-    task: (dispatch: Dispatch, getState: () => StoreState, {services}: Options) =>
-      services.fetchSkills(token)
+    task: () => {
+      const state = getState();
+      const token = get('data.token', state);
+      return services.fetchSkills(token);
+    }
   });
+
+  await dispatch(action);
+};

package/src/actions/api/fetch-slide.ts

@@ -1,45 +1,51 @@
-import type {AnyAction} from 'redux';
-import type {ThunkAction, ThunkDispatch} from 'redux-thunk';
+import type {Dispatch} from 'redux';
 import buildTask from '@coorpacademy/redux-task';
 import get from 'lodash/fp/get';
 import has from 'lodash/fp/has';
 import isEmpty from 'lodash/fp/isEmpty';
 import type {StoreState} from '../../reducers';
-import type {Options, ProgressionFromAPI, SlideFromAPI} from '../../types/common';
+import type {Options, SlideFromAPI} from '../../types/common';
 import {setCurrentSlide} from '../ui/slides';
 
 export const SLIDE_FETCH_REQUEST = '@@slides/FETCH_REQUEST' as const;
 export const SLIDE_FETCH_SUCCESS = '@@slides/FETCH_SUCCESS' as const;
 export const SLIDE_FETCH_FAILURE = '@@slides/FETCH_FAILURE' as const;
 
-export interface ReceivedSlide extends AnyAction {
+export type FetchSlide = {
+  type: typeof SLIDE_FETCH_REQUEST;
+  meta: {slideRef: string};
+};
+
+export type ReceivedSlide = {
   type: typeof SLIDE_FETCH_SUCCESS;
   payload: SlideFromAPI;
-}
-
-export type FetchSlideAction = ThunkAction<Promise<SlideFromAPI>, StoreState, Options, AnyAction>;
-type Dispatch = ThunkDispatch<StoreState, Options, AnyAction>;
+  meta: {slideRef: string};
+};
 
-export const fetchSlide = (
-  progressionFromAPI: ProgressionFromAPI,
-  token: string
-): FetchSlideAction =>
-  buildTask({
-    types: [SLIDE_FETCH_REQUEST, SLIDE_FETCH_SUCCESS, SLIDE_FETCH_FAILURE],
-    bailout: (state: StoreState): boolean => {
-      const {ref: slideRef} = get('state.nextContent', progressionFromAPI);
-      return has(`data.slide.${slideRef}`, state);
-    },
-    task: (dispatch: Dispatch, getState: () => StoreState, {services}: Options) => {
-      const {ref: slideRef} = get('state.nextContent', progressionFromAPI);
-      return services.fetchSlide(slideRef, token).then((slideFromAPI: SlideFromAPI | void) => {
-        if (!slideFromAPI) throw new Error('Slide not found');
+export const fetchSlide =
+  (slideRef: string) =>
+  async (dispatch: Dispatch, getState: () => StoreState, {services}: Options): Promise<void> => {
+    const action = buildTask({
+      types: [SLIDE_FETCH_REQUEST, SLIDE_FETCH_SUCCESS, SLIDE_FETCH_FAILURE],
+      bailout: (state: StoreState): boolean => {
+        return has(`data.slide.${slideRef}`, state);
+      },
+      task: () => {
         const state = getState();
-        const slides = get('data.progression.state.slides', state);
-        if (isEmpty(slides)) {
-          dispatch(setCurrentSlide(slideFromAPI));
-        }
-        return slideFromAPI;
-      });
+        const token = get('data.token', state);
+        return services.fetchSlide(slideRef, token);
+      },
+      meta: {slideRef}
+    });
+    const response = await dispatch(action);
+
+    if (response.type === SLIDE_FETCH_SUCCESS) {
+      const slideFromAPI = response.payload;
+      if (!slideFromAPI) throw new Error('Slide not found');
+      const state = getState();
+      const slides = get('data.progression.state.slides', state);
+      if (isEmpty(slides)) {
+        dispatch(setCurrentSlide(slideFromAPI));
+      }
     }
-  });
+  };

package/src/actions/api/post-answer.ts

@@ -0,0 +1,39 @@
+import type {Dispatch} from 'redux';
+import buildTask from '@coorpacademy/redux-task';
+import get from 'lodash/fp/get';
+import type {Options} from '../../types/common';
+import type {StoreState} from '../../reducers';
+import {fetchSlide} from './fetch-slide';
+
+export const POST_ANSWER_REQUEST = '@@answer/POST_REQUEST' as const;
+export const POST_ANSWER_SUCCESS = '@@answer/POST_SUCCESS' as const;
+export const POST_ANSWER_FAILURE = '@@answer/POST_FAILURE' as const;
+
+export type PostAnswerRequestAction = {
+  type: typeof POST_ANSWER_REQUEST;
+};
+
+export const postAnswer = async (
+  dispatch: Dispatch,
+  getState: () => StoreState,
+  {services}: Options
+): Promise<void> => {
+  const action = buildTask({
+    types: [POST_ANSWER_REQUEST, POST_ANSWER_SUCCESS, POST_ANSWER_FAILURE],
+    task: () => {
+      const state = getState();
+      const token = get('data.token', state);
+      const answer = get('ui.answers', state);
+      const progressionId = get('data.progression._id', state);
+      const skillRef = get('data.progression.content.ref', state);
+      return services.postAnswer(skillRef, token, progressionId, answer);
+    }
+  });
+  const response = await dispatch(action);
+
+  if (response.type === POST_ANSWER_SUCCESS) {
+    const progression = response.payload;
+    const slideRef = progression.state.nextContent.ref;
+    await dispatch(fetchSlide(slideRef));
+  }
+};

package/src/actions/api/post-progression.ts

@@ -1,7 +1,7 @@
-import type {AnyAction} from 'redux';
-import type {ThunkAction, ThunkDispatch} from 'redux-thunk';
+import type {Dispatch} from 'redux';
 import buildTask from '@coorpacademy/redux-task';
-import {Options, ProgressionFromAPI} from '../../types/common';
+import get from 'lodash/fp/get';
+import type {Options, ProgressionFromAPI} from '../../types/common';
 import type {StoreState} from '../../reducers';
 import {fetchSlide} from './fetch-slide';
 
@@ -9,27 +9,27 @@ export const POST_PROGRESSION_REQUEST = '@@progression/POST_REQUEST' as const;
 export const POST_PROGRESSION_SUCCESS = '@@progression/POST_SUCCESS' as const;
 export const POST_PROGRESSION_FAILURE = '@@progression/POST_FAILURE' as const;
 
-export interface ReceiveProgression extends AnyAction {
+export type ReceivedProgression = {
   type: typeof POST_PROGRESSION_SUCCESS;
   payload: ProgressionFromAPI;
-}
+};
 
-export type PostProgressionAction = ThunkAction<
-  Promise<ProgressionFromAPI>,
-  StoreState,
-  Options,
-  AnyAction
->;
+export const postProgression =
+  (skillRef: string) =>
+  async (dispatch: Dispatch, getState: () => StoreState, {services}: Options): Promise<void> => {
+    const state = getState();
+    const token = get('data.token', state);
+    const action = buildTask({
+      types: [POST_PROGRESSION_REQUEST, POST_PROGRESSION_SUCCESS, POST_PROGRESSION_FAILURE],
+      task: () => {
+        return services.postProgression(skillRef, token);
+      }
+    });
+    const response = await dispatch(action);
 
-type Dispatch = ThunkDispatch<StoreState, Options, AnyAction>;
-
-export const postProgression = (skillRef: string, token: string): PostProgressionAction =>
-  buildTask({
-    types: [POST_PROGRESSION_REQUEST, POST_PROGRESSION_SUCCESS, POST_PROGRESSION_FAILURE],
-    task: (dispatch: Dispatch, getState: () => StoreState, {services}: Options) => {
-      return services.postProgression(skillRef, token).then((progression: ProgressionFromAPI) => {
-        dispatch(fetchSlide(progression, token));
-        return progression;
-      });
+    if (response.type === POST_PROGRESSION_SUCCESS) {
+      const progression = response.payload;
+      const slideRef = progression.state.nextContent.ref;
+      await dispatch(fetchSlide(slideRef));
     }
-  });
+  };

package/src/actions/api/test/fetch-skills.test.ts

@@ -0,0 +1,73 @@
+import test from 'ava';
+import type {Services} from '../../../types/common';
+import type {StoreState} from '../../../reducers';
+import {
+  fetchSkills,
+  SKILLS_FETCH_FAILURE,
+  SKILLS_FETCH_REQUEST,
+  SKILLS_FETCH_SUCCESS
+} from '../fetch-skills';
+import {services as mockedServices} from '../../../test/util/services.mock';
+import {createTestStore} from '../../test/create-test-store';
+
+const initialState: StoreState = {
+  data: {
+    progression: null,
+    slides: {},
+    skills: [],
+    token: '1234'
+  },
+  ui: {
+    currentSlideRef: '',
+    navigation: [],
+    answers: [],
+    slide: {
+      validateButton: false
+    }
+  }
+};
+
+test('should dispatch SKILLS_FETCH_SUCCESS actions when fetchSkills return a list of skills', async t => {
+  const services: Services = {
+    ...mockedServices,
+    fetchSkills: token => {
+      t.is(token, '1234');
+      return Promise.resolve([]);
+    }
+  };
+
+  const expectedActions = [
+    {type: SKILLS_FETCH_REQUEST},
+    {
+      type: SKILLS_FETCH_SUCCESS,
+      payload: []
+    }
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+
+  await dispatch(fetchSkills);
+});
+
+test('should dispatch SKILLS_FETCH_FAILURE action when fetchSkills fails', async t => {
+  const services: Services = {
+    ...mockedServices,
+    fetchSkills: token => {
+      t.is(token, '1234');
+      return Promise.reject(new Error('unexpected'));
+    }
+  };
+
+  const expectedActions = [
+    {type: SKILLS_FETCH_REQUEST},
+    {
+      type: SKILLS_FETCH_FAILURE,
+      payload: new Error('unexpected'),
+      error: true
+    }
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+
+  await dispatch(fetchSkills);
+});