@coorpacademy/app-review 0.1.16 → 0.1.17

package/lib/views/slides/test/fixtures/select-template.d.ts

@@ -1,3 +1,4 @@
-import { SlideFromAPI, UISlide } from '../../../../types/common';
+import { UISlide } from '../..';
+import { SlideFromAPI } from '../../../../types/common';
 export declare const selectTemplateSlide: SlideFromAPI;
 export declare const selectTemplateUISlide: Partial<UISlide>;

package/lib/views/slides/test/fixtures/slider.d.ts

@@ -1,3 +1,4 @@
-import { SlideFromAPI, UISlide } from '../../../../types/common';
+import { UISlide } from '../..';
+import { SlideFromAPI } from '../../../../types/common';
 export declare const sliderSlide: SlideFromAPI;
 export declare const sliderUISlide: Partial<UISlide>;

package/lib/views/slides/test/fixtures/text-template.d.ts

@@ -1,3 +1,4 @@
-import { SlideFromAPI, UISlide } from '../../../../types/common';
+import { UISlide } from '../..';
+import { SlideFromAPI } from '../../../../types/common';
 export declare const textTemplateSlide: SlideFromAPI;
 export declare const textTemplateUISlide: Partial<UISlide>;

package/lib/views/slides/test/index.test.d.ts

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.1.16",
+  "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.10",
+    "@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": "508e3fdb30d727840bd9b13e9402c2970eb17731"
+  "gitHead": "7191ac405f4eebce61c459722595014ea973818c"
 }

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

@@ -1,7 +1,8 @@
 import buildTask from '@coorpacademy/redux-task';
-import {Dispatch} 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;
@@ -12,13 +13,19 @@ export type ReceivedSkills = {
   payload: Skill[];
 };
 
-export const fetchSkills =
-  (token: string) =>
-  async (dispatch: Dispatch, getState: () => StoreState, {services}: Options): Promise<void> => {
-    const action = buildTask({
-      types: [SKILLS_FETCH_REQUEST, SKILLS_FETCH_SUCCESS, SKILLS_FETCH_FAILURE],
-      task: () => services.fetchSkills(token)
-    });
+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: () => {
+      const state = getState();
+      const token = get('data.token', state);
+      return services.fetchSkills(token);
+    }
+  });
 
-    await dispatch(action);
-  };
+  await dispatch(action);
+};

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

@@ -23,7 +23,7 @@ export type ReceivedSlide = {
 };
 
 export const fetchSlide =
-  (slideRef: string, token: string) =>
+  (slideRef: string) =>
   async (dispatch: Dispatch, getState: () => StoreState, {services}: Options): Promise<void> => {
     const action = buildTask({
       types: [SLIDE_FETCH_REQUEST, SLIDE_FETCH_SUCCESS, SLIDE_FETCH_FAILURE],
@@ -31,6 +31,8 @@ export const fetchSlide =
         return has(`data.slide.${slideRef}`, state);
       },
       task: () => {
+        const state = getState();
+        const token = get('data.token', state);
         return services.fetchSlide(slideRef, token);
       },
       meta: {slideRef}

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,6 +1,7 @@
 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';
 
@@ -8,14 +9,16 @@ 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 type ReceiveProgression = {
+export type ReceivedProgression = {
   type: typeof POST_PROGRESSION_SUCCESS;
   payload: ProgressionFromAPI;
 };
 
 export const postProgression =
-  (skillRef: string, token: string) =>
+  (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: () => {
@@ -27,6 +30,6 @@ export const postProgression =
     if (response.type === POST_PROGRESSION_SUCCESS) {
       const progression = response.payload;
       const slideRef = progression.state.nextContent.ref;
-      await dispatch(fetchSlide(slideRef, token));
+      await dispatch(fetchSlide(slideRef));
     }
   };

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

@@ -1,5 +1,6 @@
 import test from 'ava';
-import {Services} from '../../../types/common';
+import type {Services} from '../../../types/common';
+import type {StoreState} from '../../../reducers';
 import {
   fetchSkills,
   SKILLS_FETCH_FAILURE,
@@ -7,8 +8,7 @@ import {
   SKILLS_FETCH_SUCCESS
 } from '../fetch-skills';
 import {services as mockedServices} from '../../../test/util/services.mock';
-import {StoreState} from '../../../reducers';
-import {createTestStore} from './create-test-store';
+import {createTestStore} from '../../test/create-test-store';
 
 const initialState: StoreState = {
   data: {
@@ -20,7 +20,10 @@ const initialState: StoreState = {
   ui: {
     currentSlideRef: '',
     navigation: [],
-    answers: []
+    answers: [],
+    slide: {
+      validateButton: false
+    }
   }
 };
 
@@ -43,7 +46,7 @@ test('should dispatch SKILLS_FETCH_SUCCESS actions when fetchSkills return a lis
 
   const {dispatch} = createTestStore(t, initialState, services, expectedActions);
 
-  await dispatch(fetchSkills('1234'));
+  await dispatch(fetchSkills);
 });
 
 test('should dispatch SKILLS_FETCH_FAILURE action when fetchSkills fails', async t => {
@@ -66,5 +69,5 @@ test('should dispatch SKILLS_FETCH_FAILURE action when fetchSkills fails', async
 
   const {dispatch} = createTestStore(t, initialState, services, expectedActions);
 
-  await dispatch(fetchSkills('1234'));
+  await dispatch(fetchSkills);
 });

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

@@ -1,5 +1,5 @@
 import test from 'ava';
-import {Services} from '../../../types/common';
+import type {Services} from '../../../types/common';
 import {
   fetchSlide,
   SLIDE_FETCH_FAILURE,
@@ -8,9 +8,9 @@ import {
 } from '../fetch-slide';
 import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
 import {services as mockedServices} from '../../../test/util/services.mock';
-import {StoreState} from '../../../reducers';
+import type {StoreState} from '../../../reducers';
 import {SET_CURRENT_SLIDE} from '../../ui/slides';
-import {createTestStore} from './create-test-store';
+import {createTestStore} from '../../test/create-test-store';
 
 const initialState: StoreState = {
   data: {
@@ -22,7 +22,10 @@ const initialState: StoreState = {
   ui: {
     currentSlideRef: '',
     navigation: [],
-    answers: []
+    answers: [],
+    slide: {
+      validateButton: false
+    }
   }
 };
 
@@ -48,7 +51,7 @@ test('should dispatch FETCH_SUCCESS and SET_CURRENT_SLIDE actions when fetchSlid
 
   const {dispatch} = createTestStore(t, initialState, services, expectedActions);
 
-  await dispatch(fetchSlide('sli_VJYjJnJhg', '1234'));
+  await dispatch(fetchSlide('sli_VJYjJnJhg'));
 });
 
 test('should dispatch SLIDE_FETCH_FAILURE action when fetchSlide fails', async t => {
@@ -73,5 +76,5 @@ test('should dispatch SLIDE_FETCH_FAILURE action when fetchSlide fails', async t
 
   const {dispatch} = createTestStore(t, initialState, services, expectedActions);
 
-  await dispatch(fetchSlide('slide_ref', '1234'));
+  await dispatch(fetchSlide('slide_ref'));
 });

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

@@ -0,0 +1,101 @@
+import test from 'ava';
+import {createTestStore} from '../../test/create-test-store';
+import {postAnswerResponse, services} from '../../../test/util/services.mock';
+import {
+  postAnswer,
+  POST_ANSWER_FAILURE,
+  POST_ANSWER_REQUEST,
+  POST_ANSWER_SUCCESS
+} from '../post-answer';
+import type {StoreState} from '../../../reducers';
+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';
+const answer = ['Lister vos tâches pour vous libérer l’esprit', 'Vous isoler dans un lieu calme'];
+
+const initialState: StoreState = {
+  data: {
+    progression: {
+      _id: progressionId,
+      content: {type: 'skill', ref: skillRef},
+      engine: {
+        ref: 'review'
+      },
+      state: {
+        allAnswers: [],
+        isCorrect: true,
+        nextContent: {
+          ref: 'sli_VJYjJnJhg',
+          type: 'slide'
+        },
+        pendingSlides: [],
+        slides: [],
+        step: {
+          current: 1
+        },
+        stars: 0
+      }
+    },
+    slides: {
+      [freeTextSlide.id]: freeTextSlide
+    },
+    skills: [{skillRef, custom: false, name: skillRef, slidesToReview: 5}],
+    token: '1234'
+  },
+  ui: {
+    currentSlideRef: 'sli_VJYjJnJhg',
+    navigation: ['skills', 'slides'],
+    answers: answer,
+    slide: {
+      validateButton: false
+    }
+  }
+};
+
+test('should dispatch POST_ANSWER_REQUEST, then POST_ANSWER_SUCCESS when the updated progression is returned', async t => {
+  const expectedActions = [
+    {type: POST_ANSWER_REQUEST},
+    {
+      type: POST_ANSWER_SUCCESS,
+      payload: postAnswerResponse
+    },
+    {type: SLIDE_FETCH_REQUEST, meta: {slideRef: 'sli_VkSQroQnx'}},
+    {
+      type: SLIDE_FETCH_SUCCESS,
+      meta: {slideRef: 'sli_VkSQroQnx'},
+      payload: qcmGraphicSlide
+    },
+    {type: SET_CURRENT_SLIDE, payload: qcmGraphicSlide}
+  ];
+
+  const {dispatch} = createTestStore(t, initialState, services, expectedActions);
+
+  await dispatch(postAnswer);
+});
+
+test('should dispatch POST_ANSWER_REQUEST, then POST_ANSWER_FAILURE on error', async t => {
+  const expectedActions = [
+    {type: POST_ANSWER_REQUEST},
+    {
+      type: POST_ANSWER_FAILURE,
+      payload: new Error('unexpected'),
+      error: true
+    }
+  ];
+
+  const {dispatch} = createTestStore(
+    t,
+    initialState,
+    {
+      ...services,
+      postAnswer: () => Promise.reject(new Error('unexpected'))
+    },
+    expectedActions
+  );
+
+  await dispatch(postAnswer);
+});

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

@@ -1,5 +1,5 @@
 import test from 'ava';
-import {ProgressionFromAPI, Services} from '../../../types/common';
+import type {ProgressionFromAPI, Services} from '../../../types/common';
 import {
   postProgression,
   POST_PROGRESSION_REQUEST,
@@ -8,10 +8,10 @@ import {
 } from '../post-progression';
 import {freeTextSlide} from '../../../views/slides/test/fixtures/free-text';
 import {services as mockedServices} from '../../../test/util/services.mock';
-import {StoreState} from '../../../reducers';
+import type {StoreState} from '../../../reducers';
 import {SLIDE_FETCH_REQUEST, SLIDE_FETCH_SUCCESS} from '../fetch-slide';
 import {SET_CURRENT_SLIDE} from '../../ui/slides';
-import {createTestStore} from './create-test-store';
+import {createTestStore} from '../../test/create-test-store';
 
 const initialState: StoreState = {
   data: {
@@ -23,7 +23,10 @@ const initialState: StoreState = {
   ui: {
     currentSlideRef: '',
     navigation: [],
-    answers: []
+    answers: [],
+    slide: {
+      validateButton: false
+    }
   }
 };
 
@@ -91,7 +94,7 @@ test('should dispatch POST_PROGRESSION_SUCCESS and SLIDE_FETCH_REQUEST actions w
 
   const {dispatch} = createTestStore(t, initialState, services, expectedActions);
 
-  await dispatch(postProgression('skill_12345', '1234'));
+  await dispatch(postProgression('skill_12345'));
 });
 
 test('should dispatch POST_PROGRESSION_FAILURE action when postProgression fails', async t => {
@@ -115,5 +118,5 @@ test('should dispatch POST_PROGRESSION_FAILURE action when postProgression fails
 
   const {dispatch} = createTestStore(t, initialState, services, expectedActions);
 
-  await dispatch(postProgression('skill_12345', '1234'));
+  await dispatch(postProgression('skill_12345'));
 });