@coorpacademy/app-review 0.1.16 → 0.1.18

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

@@ -0,0 +1,473 @@
+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', t => {
+    const 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
+            }
+        }
+    };
+    const 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', t => {
+    const 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
+            }
+        }
+    };
+    const 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
+        }
+    });
+});
+test('should create props when the next slide is on the state', t => {
+    const state = {
+        data: {
+            progression: {
+                _id: '62b1d1087aa12f00253f40ee',
+                content: {
+                    ref: '_skill-ref',
+                    type: 'skill'
+                },
+                engine: {
+                    ref: 'review'
+                },
+                state: {
+                    allAnswers: [
+                        {
+                            slideRef: 'sli_VJYjJnJhg',
+                            isCorrect: true,
+                            answer: ['Benchmark']
+                        }
+                    ],
+                    isCorrect: true,
+                    nextContent: {
+                        ref: 'sli_VkSQroQnx',
+                        type: 'slide'
+                    },
+                    content: {
+                        ref: 'sli_VJYjJnJhg',
+                        type: 'slide'
+                    },
+                    pendingSlides: [],
+                    slides: ['sli_VJYjJnJhg'],
+                    step: {
+                        current: 2
+                    },
+                    stars: 4
+                }
+            },
+            skills: [],
+            slides: {
+                sli_VJYjJnJhg: {
+                    question: {
+                        content: {
+                            media: {
+                                src: [],
+                                posters: [],
+                                subtitles: []
+                            },
+                            label: '',
+                            placeholder: 'Type here',
+                            id: 'sli_VJYjJnJhg.choice_1'
+                        },
+                        type: 'basic',
+                        header: 'Which term is used to describe the act of asking what the usual salary is for the position you are applying for?',
+                        explanation: 'Type your answer.'
+                    },
+                    klf: 'To negotiate your salary when being hired, you have to establish a benchmark beforehand. In other words, you should assess the salary to which you aspire by enquiring about the remuneration paid in the same industry, the same region and the same position.',
+                    tips: 'According to Insee, Paris salaries are 20-25% higher compared with those of the provinces in 2015.',
+                    universalRef: 'sli_VJYjJnJhg',
+                    id: 'sli_VJYjJnJhg',
+                    parentContentTitle: {
+                        title: 'Developing the review app',
+                        type: 'course'
+                    }
+                },
+                sli_VkSQroQnx: {
+                    question: {
+                        content: {
+                            media: {
+                                src: [],
+                                posters: [],
+                                subtitles: []
+                            },
+                            choices: [
+                                {
+                                    media: {
+                                        src: [
+                                            {
+                                                _id: '624efd915948a7013083e986',
+                                                mimeType: 'image/jpeg',
+                                                url: '//static.coorpacademy.com/content/CoorpAcademy/content-partnerships/cockpit-partner-au-feminin/default/true-1512554153232.jpg',
+                                                id: '624efd915948a7013083e986'
+                                            }
+                                        ],
+                                        posters: [],
+                                        subtitles: [],
+                                        type: 'img'
+                                    },
+                                    items: [],
+                                    _id: '624efd915948a7013083e985',
+                                    label: 'Vrai',
+                                    value: 'sli_VkSQroQnx.choice_NJesyUo7nx',
+                                    id: '624efd915948a7013083e985'
+                                },
+                                {
+                                    media: {
+                                        src: [
+                                            {
+                                                _id: '624efd915948a7013083e988',
+                                                mimeType: 'image/jpeg',
+                                                url: '//static.coorpacademy.com/content/CoorpAcademy/content-partnerships/cockpit-partner-au-feminin/default/false-1512554160848.jpg',
+                                                id: '624efd915948a7013083e988'
+                                            }
+                                        ],
+                                        posters: [],
+                                        subtitles: [],
+                                        type: 'img'
+                                    },
+                                    items: [],
+                                    _id: '624efd915948a7013083e987',
+                                    label: 'Faux',
+                                    value: 'sli_VkSQroQnx.choice_VkgayLjX3e',
+                                    id: '624efd915948a7013083e987'
+                                }
+                            ]
+                        },
+                        type: 'qcmGraphic',
+                        header: 'Pour mener une bonne négociation, il ne faut ressentir aucune émotion. Vrai ou faux ?',
+                        explanation: 'Sélectionnez la bonne réponse.'
+                    },
+                    klf: "Il ne faut pas prendre la négociation comme une affaire personnelle, afin de rester centré sur son sujet. Mais cela ne signifie pas être dépourvu de toute émotion, car celles-ci peuvent être de vrais atouts. À condition de réussir à les exprimer sans accuser l'autre d'en être à l'origine.",
+                    tips: "Pour gérer ses émotions, il faut d'abord les identifier, notamment en analysant ses ressentis physiques et en trouvant l'élément déclencheur.",
+                    universalRef: 'sli_VkSQroQnx',
+                    id: 'sli_VkSQroQnx',
+                    parentContentTitle: {
+                        title: 'Developing the review app',
+                        type: 'course'
+                    }
+                }
+            },
+            token: 'undefined'
+        },
+        ui: {
+            currentSlideRef: 'sli_VJYjJnJhg',
+            navigation: ['loader', 'slides'],
+            answers: ['My value'],
+            slide: {
+                validateButton: false
+            }
+        }
+    };
+    const 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: 'right',
+                value: '1'
+            },
+            {
+                // FIX ME: update on PR -> https://trello.com/c/qOSDa8Fm/2715-app-review-props-dynamiques-pour-les-step-items-du-header-bas%C3%A9-sur-le-state
+                current: true,
+                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.true(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', '1.answerUI.model.answers.0.onClick', '1.answerUI.model.answers.1.onClick'], props.stack.slides), {
+        '1': {
+            answerUI: {
+                help: 'Sélectionnez la bonne réponse.',
+                model: {
+                    answers: [
+                        {
+                            image: '//static.coorpacademy.com/content/CoorpAcademy/content-partnerships/cockpit-partner-au-feminin/default/true-1512554153232.jpg',
+                            selected: false,
+                            title: 'Vrai'
+                        },
+                        {
+                            image: '//static.coorpacademy.com/content/CoorpAcademy/content-partnerships/cockpit-partner-au-feminin/default/false-1512554160848.jpg',
+                            selected: false,
+                            title: 'Faux'
+                        }
+                    ],
+                    type: 'qcmGraphic'
+                }
+            },
+            hidden: false,
+            loading: false,
+            position: 1,
+            parentContentTitle: 'From "Developing the review app" course',
+            questionText: 'Pour mener une bonne négociation, il ne faut ressentir aucune émotion. Vrai ou faux ?'
+        },
+        '2': {
+            hidden: false,
+            position: 2,
+            loading: true
+        },
+        '3': {
+            hidden: false,
+            position: 3,
+            loading: true
+        },
+        '4': {
+            hidden: false,
+            position: 4,
+            loading: true
+        }
+    });
+});

package/es/views/slides/test/map-api-slide-to-ui.test.js

@@ -5,8 +5,7 @@ import { qcmUISlide, qcmSlide } from './fixtures/qcm';
 import { qcmDragUISlide, qcmDragSlide } from './fixtures/qcm-drag';
 import { freeTextSlide, freeTextUISlide } from './fixtures/free-text';
 import { qcmGraphicUISlide, qcmGraphicSlide } from './fixtures/qcm-graphic';
-import { textTemplateSlide, textTemplateUISlide } from './fixtures/text-template';
-import { selectTemplateSlide, selectTemplateUISlide } from './fixtures/select-template';
+import { templateSlide, templateUISlide } from './fixtures/template';
 import { sliderSlide, sliderUISlide } from './fixtures/slider';
 const _mapApiSlideToUi = mapApiSlideToUi(identity);
 const macro = test.macro({
@@ -24,15 +23,10 @@ test('qcm graphic', macro, {
     answers: [],
     expectedUiSlide: qcmGraphicUISlide
 });
-test('text template', macro, {
-    slide: textTemplateSlide,
+test('template', macro, {
+    slide: templateSlide,
     answers: [],
-    expectedUiSlide: textTemplateUISlide
-});
-test('select template', macro, {
-    slide: selectTemplateSlide,
-    answers: [],
-    expectedUiSlide: selectTemplateUISlide
+    expectedUiSlide: templateUISlide
 });
 test('free text', macro, { slide: freeTextSlide, answers: [], expectedUiSlide: freeTextUISlide });
 test('slider', macro, { slide: sliderSlide, answers: [], expectedUiSlide: sliderUISlide });

package/es/views/slides/test/slide.template.on-change.test.d.ts

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

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

@@ -0,0 +1,79 @@
+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_TEMPLATE } from '../../../actions/ui/answers';
+import { templateSlide } from './fixtures/template';
+const progression = {
+    _id: '123456789123',
+    content: { type: 'skill', ref: '_skill-ref' },
+    engine: {
+        ref: 'review'
+    },
+    state: {
+        allAnswers: [],
+        isCorrect: true,
+        nextContent: {
+            ref: templateSlide.id,
+            type: 'slide'
+        },
+        pendingSlides: [],
+        slides: [],
+        step: {
+            current: 1
+        },
+        stars: 0
+    }
+};
+const initialState = {
+    data: {
+        progression,
+        slides: {
+            [templateSlide.id]: templateSlide
+        },
+        skills: [],
+        token: '1234'
+    },
+    ui: {
+        currentSlideRef: templateSlide.id,
+        navigation: ['skills', 'slides'],
+        answers: [],
+        slide: {
+            validateButton: false
+        }
+    }
+};
+test('should dispatch EDIT_TEMPLATE action via the property onChange of a Template Text slide', t => {
+    t.plan(2);
+    const expectedActions = [{ type: EDIT_TEMPLATE, payload: ['', 'test', ''] }];
+    const { dispatch, getState } = createTestStore(t, initialState, services, expectedActions);
+    const 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: 'Complétez la phrase ci-dessous.'
+    });
+    const SlideProps = props.stack.slides['0'].answerUI?.model;
+    const onChange = get(['1', 'onChange'], SlideProps.answers);
+    onChange('test');
+});
+test('should dispatch EDIT_TEMPLATE action via the property onChange of a Template Select slide', t => {
+    t.plan(2);
+    const expectedActions = [{ type: EDIT_TEMPLATE, payload: ['Catalogue', '', ''] }];
+    const { dispatch, getState } = createTestStore(t, initialState, services, expectedActions);
+    const 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: 'Complétez la phrase ci-dessous.'
+    });
+    const SlideProps = props.stack.slides['0'].answerUI?.model;
+    const onChange = get(['0', 'onChange'], SlideProps.answers);
+    onChange('Catalogue');
+});

package/lib/actions/api/fetch-skills.d.ts

@@ -1,6 +1,6 @@
-import { Dispatch } from 'redux';
+import type { Dispatch } from 'redux';
 import type { StoreState } from '../../reducers';
-import { Options, Skill } from '../../types/common';
+import type { Options, Skill } from '../../types/common';
 export declare const SKILLS_FETCH_REQUEST: "@@skills/FETCH_REQUEST";
 export declare const SKILLS_FETCH_SUCCESS: "@@skills/FETCH_SUCCESS";
 export declare const SKILLS_FETCH_FAILURE: "@@skills/FETCH_FAILURE";
@@ -8,4 +8,4 @@ export declare type ReceivedSkills = {
     type: '@@skills/FETCH_SUCCESS';
     payload: Skill[];
 };
-export declare const fetchSkills: (token: string) => (dispatch: Dispatch, getState: () => StoreState, { services }: Options) => Promise<void>;
+export declare const fetchSkills: (dispatch: Dispatch, getState: () => StoreState, { services }: Options) => Promise<void>;

package/lib/actions/api/fetch-skills.js

@@ -35,27 +35,30 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import buildTask from '@coorpacademy/redux-task';
+import get from 'lodash/fp/get';
 export var SKILLS_FETCH_REQUEST = '@@skills/FETCH_REQUEST';
 export var SKILLS_FETCH_SUCCESS = '@@skills/FETCH_SUCCESS';
 export var SKILLS_FETCH_FAILURE = '@@skills/FETCH_FAILURE';
-export var fetchSkills = function (token) {
-    return function (dispatch, getState, _a) {
-        var services = _a.services;
-        return __awaiter(void 0, void 0, void 0, function () {
-            var action;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        action = buildTask({
-                            types: [SKILLS_FETCH_REQUEST, SKILLS_FETCH_SUCCESS, SKILLS_FETCH_FAILURE],
-                            task: function () { return services.fetchSkills(token); }
-                        });
-                        return [4 /*yield*/, dispatch(action)];
-                    case 1:
-                        _b.sent();
-                        return [2 /*return*/];
-                }
-            });
+export var fetchSkills = function (dispatch, getState, _a) {
+    var services = _a.services;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var action;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    action = buildTask({
+                        types: [SKILLS_FETCH_REQUEST, SKILLS_FETCH_SUCCESS, SKILLS_FETCH_FAILURE],
+                        task: function () {
+                            var state = getState();
+                            var token = get('data.token', state);
+                            return services.fetchSkills(token);
+                        }
+                    });
+                    return [4 /*yield*/, dispatch(action)];
+                case 1:
+                    _b.sent();
+                    return [2 /*return*/];
+            }
         });
-    };
+    });
 };

package/lib/actions/api/fetch-slide.d.ts

@@ -17,4 +17,4 @@ export declare type ReceivedSlide = {
         slideRef: string;
     };
 };
-export declare const fetchSlide: (slideRef: string, token: string) => (dispatch: Dispatch, getState: () => StoreState, { services }: Options) => Promise<void>;
+export declare const fetchSlide: (slideRef: string) => (dispatch: Dispatch, getState: () => StoreState, { services }: Options) => Promise<void>;

package/lib/actions/api/fetch-slide.js

@@ -42,7 +42,7 @@ import { setCurrentSlide } from '../ui/slides';
 export var SLIDE_FETCH_REQUEST = '@@slides/FETCH_REQUEST';
 export var SLIDE_FETCH_SUCCESS = '@@slides/FETCH_SUCCESS';
 export var SLIDE_FETCH_FAILURE = '@@slides/FETCH_FAILURE';
-export var fetchSlide = function (slideRef, token) {
+export var fetchSlide = function (slideRef) {
     return function (dispatch, getState, _a) {
         var services = _a.services;
         return __awaiter(void 0, void 0, void 0, function () {
@@ -56,6 +56,8 @@ export var fetchSlide = function (slideRef, token) {
                                 return has("data.slide.".concat(slideRef), state);
                             },
                             task: function () {
+                                var state = getState();
+                                var token = get('data.token', state);
                                 return services.fetchSlide(slideRef, token);
                             },
                             meta: { slideRef: slideRef }