@coorpacademy/app-review 0.2.4 → 0.2.5

package/lib/views/slides/test/slide.qcm.on-click.test.js

@@ -0,0 +1,73 @@
+var _a;
+import test from 'ava';
+import omit from 'lodash/fp/omit';
+import get from 'lodash/fp/get';
+import { mapStateToSlidesProps } from '..';
+import { services } from '../../../test/util/services.mock';
+import { createTestStore } from '../../../actions/test/create-test-store';
+import { EDIT_QCM } from '../../../actions/ui/answers';
+import { qcmSlide } from './fixtures/qcm';
+var progression = {
+    _id: '123456789123',
+    content: { type: 'skill', ref: '_skill-ref' },
+    engine: {
+        ref: 'review'
+    },
+    state: {
+        allAnswers: [],
+        isCorrect: true,
+        nextContent: {
+            ref: qcmSlide._id,
+            type: 'slide'
+        },
+        pendingSlides: [],
+        slides: [],
+        step: {
+            current: 1
+        },
+        stars: 0
+    }
+};
+var initialState = {
+    data: {
+        progression: progression,
+        slides: (_a = {},
+            _a[qcmSlide._id] = qcmSlide,
+            _a),
+        skills: [],
+        token: '1234',
+        corrections: {}
+    },
+    ui: {
+        currentSlideRef: qcmSlide._id,
+        navigation: ['skills', 'slides'],
+        answers: [],
+        slide: {
+            validateButton: false
+        }
+    }
+};
+test('should dispatch EDIT_QCM action via the property onClick of a QCM slide', function (t) {
+    var _a;
+    t.plan(2);
+    var expectedActions = [
+        {
+            type: EDIT_QCM,
+            payload: [
+                "Pour chaque transaction il existe un pourcentage fixe déterminé par le droit d'auteur du pays où se tient la vente"
+            ]
+        }
+    ];
+    var _b = createTestStore(t, initialState, services, expectedActions), dispatch = _b.dispatch, getState = _b.getState;
+    var props = mapStateToSlidesProps(getState(), dispatch);
+    t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+        hidden: false,
+        position: 0,
+        loading: false,
+        parentContentTitle: 'From "Developing the review app" course',
+        questionText: "Après la vente d'un NFT, son créateur peut-il toucher de l'argent ?"
+    });
+    var SlideProps = (_a = props.stack.slides['0'].answerUI) === null || _a === void 0 ? void 0 : _a.model;
+    var onClick = get(['1', 'onClick'], SlideProps.answers);
+    onClick();
+});

package/lib/views/slides/test/slide.slider.on-change.test.d.ts

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

package/lib/views/slides/test/slide.slider.on-change.test.js

@@ -0,0 +1,72 @@
+var _a;
+import test from 'ava';
+import omit from 'lodash/fp/omit';
+import get from 'lodash/fp/get';
+import { mapStateToSlidesProps } from '..';
+import { services } from '../../../test/util/services.mock';
+import { createTestStore } from '../../../actions/test/create-test-store';
+import { EDIT_SLIDER } from '../../../actions/ui/answers';
+import { sliderSlide } from './fixtures/slider';
+var progression = {
+    _id: '123456789123',
+    content: { type: 'skill', ref: '_skill-ref' },
+    engine: {
+        ref: 'review'
+    },
+    state: {
+        allAnswers: [],
+        isCorrect: true,
+        nextContent: {
+            ref: sliderSlide._id,
+            type: 'slide'
+        },
+        pendingSlides: [],
+        slides: [],
+        step: {
+            current: 1
+        },
+        stars: 0
+    }
+};
+var initialState = {
+    data: {
+        progression: progression,
+        slides: (_a = {},
+            _a[sliderSlide._id] = sliderSlide,
+            _a),
+        skills: [],
+        token: '1234',
+        corrections: {}
+    },
+    ui: {
+        currentSlideRef: sliderSlide._id,
+        navigation: ['skills', 'slides'],
+        answers: [],
+        slide: {
+            validateButton: false
+        }
+    }
+};
+test('should dispatch EDIT_SLIDER action via the property onChange of a Slider slide', function (t) {
+    var _a;
+    t.plan(2);
+    var expectedActions = [
+        {
+            type: EDIT_SLIDER,
+            payload: ['5']
+        }
+    ];
+    var _b = createTestStore(t, initialState, services, expectedActions), dispatch = _b.dispatch, getState = _b.getState;
+    var props = mapStateToSlidesProps(getState(), dispatch);
+    t.deepEqual(omit('answerUI', props.stack.slides['0']), {
+        hidden: false,
+        position: 0,
+        loading: false,
+        parentContentTitle: 'From "Developing the review app" course',
+        questionText: 'En combien d’années la communauté de communes du Thouarsais est-elle passée de zéro à un tiers d’énergies renouvelables ?'
+    });
+    var SlideProps = (_a = props.stack.slides['0'].answerUI) === null || _a === void 0 ? void 0 : _a.model;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    var onChange = get('onChange', SlideProps);
+    onChange(0.29339261968085106);
+});

package/lib/views/slides/test/slide.template.on-change.test.js

@@ -35,7 +35,8 @@ var initialState = {
             _a[templateSlide._id] = templateSlide,
             _a),
         skills: [],
-        token: '1234'
+        token: '1234',
+        corrections: {}
     },
     ui: {
         currentSlideRef: templateSlide._id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -41,7 +41,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@coorpacademy/components": "10.22.19",
+    "@coorpacademy/components": "10.22.20",
     "@coorpacademy/redux-task": "^1.1.5",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
@@ -78,5 +78,5 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4"
   },
-  "gitHead": "0a46b77df8a358538d52121666f2dc3a8f1e22c5"
+  "gitHead": "4b6111dabb768f900ef6d35f16d40844e74336dd"
 }

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

@@ -3,6 +3,7 @@ import buildTask from '@coorpacademy/redux-task';
 import get from 'lodash/fp/get';
 import type {Options, ProgressionFromAPI} from '../../types/common';
 import type {StoreState} from '../../reducers';
+import {fetchCorrection} from './fetch-correction';
 import {fetchSlide} from './fetch-slide';
 
 export const POST_ANSWER_REQUEST = '@@answer/POST_REQUEST' as const;
@@ -26,8 +27,8 @@ export const postAnswer = async (
   const state = getState();
   const token = get(['data', 'token'], state);
   const answer = get(['ui', 'answers'], state);
-  const progression = state.data.progression;
-  if (!progression) throw new Error('cannot answer question of inexisting progression');
+  const progression = get(['data', 'progression'], state);
+  if (!progression) throw new Error('Cannot answer a question of an inexistent progression');
 
   const action = buildTask({
     types: [POST_ANSWER_REQUEST, POST_ANSWER_SUCCESS, POST_ANSWER_FAILURE],
@@ -38,5 +39,6 @@ export const postAnswer = async (
     const updatedProgression = response.payload;
     const slideRef = updatedProgression.state.nextContent.ref;
     await dispatch(fetchSlide(slideRef));
+    await dispatch(fetchCorrection);
   }
 };

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

@@ -28,7 +28,8 @@ const initialState: StoreState = {
       [qcmSlide.universalRef]: qcmSlide
     },
     skills: [{skillRef, custom: false, name: skillRef, slidesToReview: 5}],
-    token: '1234'
+    token: '1234',
+    corrections: {}
   },
   ui: {
     currentSlideRef: freeTextSlide._id,

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

@@ -15,7 +15,8 @@ const initialState: StoreState = {
     progression: null,
     slides: {},
     skills: [],
-    token: '1234'
+    token: '1234',
+    corrections: {}
   },
   ui: {
     currentSlideRef: '',

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

@@ -17,7 +17,8 @@ const initialState: StoreState = {
     progression: null,
     slides: {},
     skills: [],
-    token: '1234'
+    token: '1234',
+    corrections: {}
   },
   ui: {
     currentSlideRef: '',

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

@@ -1,6 +1,11 @@
 import test from 'ava';
+import {AnyAction} from 'redux';
 import {createTestStore} from '../../test/create-test-store';
-import {postAnswerResponses, services} from '../../../test/util/services.mock';
+import {
+  getChoicesCorrection,
+  postAnswerResponses,
+  services
+} from '../../../test/util/services.mock';
 import {
   postAnswer,
   POST_ANSWER_FAILURE,
@@ -8,10 +13,10 @@ import {
   POST_ANSWER_SUCCESS
 } from '../post-answer';
 import type {StoreState} from '../../../reducers';
+import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
+import {CORRECTION_FETCH_REQUEST, CORRECTION_FETCH_SUCCESS} from '../fetch-correction';
 import {SLIDE_FETCH_REQUEST, SLIDE_FETCH_SUCCESS} from '../fetch-slide';
 import {qcmGraphicSlide} from '../../../views/slides/test/fixtures/qcm-graphic';
-import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
-import {SET_CURRENT_SLIDE} from '../../ui/slides';
 
 const progressionId = '123456789123';
 const skillRef = '_skill-ref';
@@ -44,7 +49,8 @@ const initialState: StoreState = {
       [freeTextSlide._id]: freeTextSlide
     },
     skills: [{skillRef, custom: false, name: skillRef, slidesToReview: 5}],
-    token: '1234'
+    token: '1234',
+    corrections: {}
   },
   ui: {
     currentSlideRef: freeTextSlide._id,
@@ -56,26 +62,43 @@ const initialState: StoreState = {
   }
 };
 
-test('should dispatch POST_ANSWER_REQUEST, then POST_ANSWER_SUCCESS when the updated progression is returned', async t => {
-  t.plan(4);
+test('should dispatch post-answer, fetch-slide and fetch-correction actions when the answer is submitted', async t => {
+  t.plan(8);
   const expectedActions = [
     {type: POST_ANSWER_REQUEST},
     {
       type: POST_ANSWER_SUCCESS,
       payload: postAnswerResponses[freeTextSlide._id]
     },
-    {type: SLIDE_FETCH_REQUEST, meta: {slideRef: qcmGraphicSlide._id}},
+    {
+      type: SLIDE_FETCH_REQUEST,
+      meta: {
+        slideRef: qcmGraphicSlide._id
+      }
+    },
     {
       type: SLIDE_FETCH_SUCCESS,
-      meta: {slideRef: qcmGraphicSlide._id},
+      meta: {
+        slideRef: qcmGraphicSlide._id
+      },
       payload: qcmGraphicSlide
     },
-    {type: SET_CURRENT_SLIDE, payload: qcmGraphicSlide}
+    {type: CORRECTION_FETCH_REQUEST, meta: {slideRef: freeTextSlide._id}},
+    {
+      type: CORRECTION_FETCH_SUCCESS,
+      meta: {slideRef: freeTextSlide._id},
+      payload: getChoicesCorrection(freeTextSlide._id)
+    }
   ];
 
-  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+  const {dispatch, getState} = createTestStore(t, initialState, services, expectedActions);
 
   await dispatch(postAnswer);
+
+  const state = getState();
+
+  t.false(state.ui.slide.validateButton);
+  t.true(state.ui.slide.animateCorrectionPopin);
 });
 
 test('should dispatch POST_ANSWER_REQUEST, then POST_ANSWER_FAILURE on error', async t => {
@@ -104,3 +127,21 @@ test('should dispatch POST_ANSWER_REQUEST, then POST_ANSWER_FAILURE on error', a
 
   await dispatch(postAnswer);
 });
+
+test('should not dispatch any action && throw an error if progression does not exist', async t => {
+  t.plan(1);
+  const expectedActions: AnyAction[] = [];
+
+  const {dispatch} = createTestStore(
+    t,
+    {...initialState, data: {...initialState.data, progression: null}},
+    services,
+    expectedActions
+  );
+
+  await t.throwsAsync(
+    () => dispatch(postAnswer),
+    undefined,
+    'Cannot answer a question of an inexistent progression'
+  );
+});

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

@@ -18,7 +18,8 @@ const initialState: StoreState = {
     progression: null,
     slides: {},
     skills: [],
-    token: '1234'
+    token: '1234',
+    corrections: {}
   },
   ui: {
     currentSlideRef: '',

package/src/actions/data/test/token.test.ts

@@ -9,7 +9,8 @@ const initialState: StoreState = {
     progression: null,
     slides: {},
     skills: [],
-    token: '1234'
+    token: '1234',
+    corrections: {}
   },
   ui: {
     currentSlideRef: '',

package/src/actions/test/create-test-store.ts

@@ -18,7 +18,7 @@ export const createTestStore = (
   initialState: StoreState,
   services: Services,
   actions: AnyAction[]
-): Store => {
+): Store<StoreState, AnyAction> => {
   const thunkMiddleware = thunk.withExtraArgument({services});
   const enhancer = compose(applyMiddleware(thunkMiddleware, assertActionsMiddleware(t, actions)));
   return createStore(rootReducer, initialState, enhancer);

package/src/actions/ui/answers.ts

@@ -1,5 +1,8 @@
+import flatten from 'lodash/fp/flatten';
+import get from 'lodash/fp/get';
+import includes from 'lodash/fp/includes';
+import pull from 'lodash/fp/pull';
 import {Dispatch} from 'redux';
-import {flatten, get, includes, pull} from 'lodash/fp';
 import type {StoreState} from '../../reducers';
 
 export const EDIT_QCM = '@@answer/EDIT_QCM' as const;
@@ -43,7 +46,7 @@ const buildAnswer = (userAnswers: string[], questionType: string, newValue: stri
     case 'slider':
     case 'template':
       return newValue;
-    default:
+    /* istanbul ignore next */ default:
       return [];
   }
 };
@@ -52,12 +55,18 @@ export const editAnswer =
   (answer: string[]) =>
   (dispatch: Dispatch, getState: () => StoreState): EditAnswerAction => {
     const state = getState();
-    const currentSlideRef = get(['ui', 'currentSlideRef'])(state);
-    const userAnswers = get(['ui', 'answers'])(state);
-    const slide = get(['data', 'slides', currentSlideRef])(state);
-    const questionType = get(['question', 'type'])(slide);
+    const currentSlideRef = get(['ui', 'currentSlideRef'], state);
+    const userAnswers = get(['ui', 'answers'], state);
+    const slide = get(['data', 'slides', currentSlideRef], state);
+
+    if (!slide) throw new Error('No slide was found');
+
+    const questionType = get(['question', 'type'], slide);
+
     const type = get(questionType, ANSWER_EDIT);
 
+    if (!type) throw new Error(`Question type ${questionType} is not supported`);
+
     return dispatch({
       type,
       payload: buildAnswer(userAnswers, questionType, answer)

package/src/actions/ui/test/answers.test.ts

@@ -1,7 +1,8 @@
 import test from 'ava';
 import pipe from 'lodash/fp/pipe';
 import set from 'lodash/fp/set';
-import {SlideFromAPI} from '../../../types/common';
+import omit from 'lodash/fp/omit';
+import {Question, SlideFromAPI} from '../../../types/common';
 import {createTestStore} from '../../test/create-test-store';
 import {services} from '../../../test/util/services.mock';
 import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
@@ -42,7 +43,8 @@ const initialState: StoreState = {
     },
     slides: {},
     skills: [],
-    token: '1234'
+    token: '1234',
+    corrections: {}
   },
   ui: {
     currentSlideRef: '',
@@ -62,6 +64,35 @@ const buildInitialState = (state: StoreState, question: SlideFromAPI): StoreStat
   )(state);
 };
 
+test('editAnswer should throw an Error if the slide is not found', async t => {
+  const state = buildInitialState(initialState, freeTextSlide);
+  const expectedActions = [{type: undefined, payload: []}];
+  const {dispatch} = createTestStore(
+    t,
+    omit(['data', 'slides'], state) as StoreState,
+    services,
+    expectedActions
+  );
+  await t.throws(
+    () => dispatch(editAnswer(['Some kind of answer'])),
+    undefined,
+    'No slide was found or questionType was not found'
+  );
+});
+
+test('editAnswer should throw an Error for unsupported questions', async t => {
+  const state = buildInitialState(initialState, {
+    ...freeTextSlide,
+    question: {...freeTextSlide.question, type: 'unsupportedType'} as unknown as Question
+  });
+  const {dispatch} = createTestStore(t, state, services, []);
+  await t.throws(
+    () => dispatch(editAnswer(['Some kind of answer'])),
+    undefined,
+    'Question type unsupportedType is not supported'
+  );
+});
+
 test('should dispatch EDIT_BASIC action when editAnswer is called', async t => {
   const state = buildInitialState(initialState, freeTextSlide);
   const expectedActions = [{type: ANSWER_EDIT.basic, payload: ['My Answer']}];

package/src/actions/ui/test/slides.test.ts

@@ -10,7 +10,8 @@ const initialState: StoreState = {
     progression: null,
     slides: {},
     skills: [],
-    token: '1234'
+    token: '1234',
+    corrections: {}
   },
   ui: {
     currentSlideRef: '',

package/src/reducers/data/index.ts

@@ -1,21 +1,17 @@
 import {combineReducers} from 'redux';
 
+import corrections, {CorrectionsState} from './corrections';
 import progression, {ProgressionState} from './progression';
 import skills, {SkillsState} from './skills';
 import slides, {SlidesState} from './slides';
 import token, {TokenState} from './token';
 
 export type DataState = {
-  isFetching?: boolean;
+  corrections: CorrectionsState;
   progression: ProgressionState;
   skills: SkillsState;
   slides: SlidesState;
   token: TokenState;
 };
 
-export default combineReducers({
-  progression,
-  skills,
-  slides,
-  token
-});
+export default combineReducers({corrections, progression, skills, slides, token});

package/src/reducers/ui/slide.ts

@@ -1,6 +1,7 @@
 import compact from 'lodash/fp/compact';
 import isEmpty from 'lodash/fp/isEmpty';
 import pipe from 'lodash/fp/pipe';
+import set from 'lodash/fp/set';
 import {
   EditAnswerAction,
   EDIT_BASIC,
@@ -11,9 +12,11 @@ import {
   EDIT_TEMPLATE
 } from '../../actions/ui/answers';
 import {PostAnswerRequestAction, POST_ANSWER_REQUEST} from '../../actions/api/post-answer';
+import {CORRECTION_FETCH_SUCCESS, ReceivedCorrection} from '../../actions/api/fetch-correction';
 
 export type UISlideState = {
   validateButton: boolean;
+  animateCorrectionPopin?: boolean;
 };
 
 export const initialState: UISlideState = {validateButton: false};
@@ -21,7 +24,7 @@ export const initialState: UISlideState = {validateButton: false};
 const reducer = (
   // eslint-disable-next-line default-param-last
   state: UISlideState = initialState,
-  action: PostAnswerRequestAction | EditAnswerAction
+  action: PostAnswerRequestAction | EditAnswerAction | ReceivedCorrection
 ): UISlideState => {
   switch (action.type) {
     case EDIT_QCM:
@@ -35,6 +38,9 @@ const reducer = (
     case POST_ANSWER_REQUEST: {
       return initialState;
     }
+    case CORRECTION_FETCH_SUCCESS: {
+      return set(['animateCorrectionPopin'], true, state);
+    }
     default:
       return state;
   }

package/src/reducers/ui/test/slide.test.ts

@@ -2,11 +2,24 @@ import test from 'ava';
 import reducer, {initialState} from '../slide';
 import {EDIT_BASIC} from '../../../actions/ui/answers';
 import {PostAnswerRequestAction} from '../../../actions/api/post-answer';
+import {CORRECTION_FETCH_SUCCESS} from '../../../actions/api/fetch-correction';
 
 test('should use initial state if no answers are found when an EditAnswerAction is received', t => {
   const state = reducer(undefined, {type: EDIT_BASIC, payload: ['']});
   t.truthy(state);
   t.false(state.validateButton);
+  t.falsy(state.animateCorrectionPopin);
+});
+
+test('should set animateCorrectionPopin to true if CORRECTION_FETCH_SUCCESS is received', t => {
+  const state = reducer(undefined, {
+    type: CORRECTION_FETCH_SUCCESS,
+    payload: undefined,
+    meta: {slideRef: '1234'}
+  });
+  t.truthy(state);
+  t.false(state.validateButton);
+  t.true(state.animateCorrectionPopin);
 });
 
 test('should return state directly when there is no corresponding action handler + have an initial state', t => {

package/src/types/slides.ts

@@ -5,6 +5,7 @@ export type Choice = {
   help?: string;
   onClick: Function;
   ariaLabel?: string;
+  'aria-label'?: string;
 };
 
 export type QcmDrag = {

package/src/views/skills/test/skills.test.ts

@@ -10,7 +10,8 @@ test('should create initial props when there are no skills on the state', t => {
       progression: null,
       skills: [],
       slides: {},
-      token: '1234'
+      token: '1234',
+      corrections: {}
     },
     ui: {
       currentSlideRef: '',
@@ -54,7 +55,8 @@ test('should create initial props when skills on the state', t => {
         }
       ],
       slides: {},
-      token: '1234'
+      token: '1234',
+      corrections: {}
     },
     ui: {
       currentSlideRef: '',

package/src/views/slides/map-api-slide-to-ui.ts

@@ -52,14 +52,14 @@ const qcmProps =
     return {
       type: 'qcm',
       answers: map(choice => {
-        const label = choice.label || '';
+        const label = getOr('', 'label', choice);
         return {
           title: label,
           selected: includes(label, answers),
           onClick: (): void => {
             dispatch(editAnswer([label]));
           },
-          ariaLabel: choice.label
+          'aria-label': label
         };
       }, question.content.choices)
     };
@@ -71,7 +71,7 @@ const qcmDragProps =
     return {
       type: 'qcmDrag',
       answers: map(choice => {
-        const label = choice.label || '';
+        const label = getOr('', 'label', choice);
         const indexInAnswer = indexOf(label, answers);
         return {
           title: label,
@@ -91,14 +91,15 @@ const qcmGraphicProps =
     return {
       type: 'qcmGraphic',
       answers: map(choice => {
-        const label = choice.label || '';
+        const label = getOr('', 'label', choice);
         return {
           title: label,
           image: get('media.src.0.url', choice),
           selected: includes(label, answers),
           onClick: (): void => {
             dispatch(editAnswer([label]));
-          }
+          },
+          ariaLabel: label
         };
       }, question.content.choices)
     };
@@ -189,8 +190,8 @@ const basicProps =
   (answers: string[], question: BasicQuestion): FreeText => {
     return {
       type: 'freeText',
-      placeholder: question.content.placeholder || '',
-      value: answers[0] || '',
+      placeholder: getOr('', 'content.placeholder', question),
+      value: getOr('', '0', answers),
       onChange: (text: string): void => {
         dispatch(editAnswer([text]));
       }