@coorpacademy/app-review 0.1.15 → 0.1.17

package/src/views/slides/test/index.test.ts

@@ -0,0 +1,240 @@
+import test from 'ava';
+import identity from 'lodash/fp/identity';
+import omit from 'lodash/fp/omit';
+import {mapStateToSlidesProps} from '..';
+import {StoreState} from '../../../reducers';
+import {freeTextSlide} from './fixtures/free-text';
+
+test('should create initial props when fetched slide is still not received', t => {
+  const state: StoreState = {
+    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: StoreState = {
+    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
+    }
+  });
+});

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

@@ -1,6 +1,8 @@
 import test from 'ava';
-import {SlideFromAPI, UISlide} from '../../types/common';
+import identity from 'lodash/fp/identity';
+import {SlideFromAPI} from '../../../types/common';
 import {mapApiSlideToUi} from '../map-api-slide-to-ui';
+import {UISlide} from '..';
 import {qcmUISlide, qcmSlide} from './fixtures/qcm';
 import {qcmDragUISlide, qcmDragSlide} from './fixtures/qcm-drag';
 import {freeTextSlide, freeTextUISlide} from './fixtures/free-text';
@@ -9,7 +11,7 @@ import {textTemplateSlide, textTemplateUISlide} from './fixtures/text-template';
 import {selectTemplateSlide, selectTemplateUISlide} from './fixtures/select-template';
 import {sliderSlide, sliderUISlide} from './fixtures/slider';
 
-const _mapApiSlideToUi = mapApiSlideToUi({translate: (text: string) => text});
+const _mapApiSlideToUi = mapApiSlideToUi(identity);
 
 const macro = test.macro({
   title(providedTitle) {
@@ -19,28 +21,38 @@ const macro = test.macro({
     t,
     arg: {
       slide: SlideFromAPI;
+      answers: string[];
       expectedUiSlide: Partial<UISlide>;
     }
   ) {
     t.deepEqual(
-      JSON.parse(JSON.stringify(_mapApiSlideToUi(arg.slide))),
+      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', t => {
   const faultySlide = {...qcmSlide, question: {type: 'lol'}};
-  t.throws(() => _mapApiSlideToUi(faultySlide as SlideFromAPI));
+  t.throws(() => _mapApiSlideToUi(faultySlide as SlideFromAPI, []));
 });

package/es/fixtures/qcm-slide.d.ts

@@ -1,2 +0,0 @@
-import { UISlide } from '../types/common';
-export declare const slide: Pick<UISlide, 'questionText' | 'answerUI'>;

package/es/fixtures/qcm-slide.js

@@ -1,33 +0,0 @@
-import noop from 'lodash/fp/noop';
-export const slide = {
-    questionText: 'QCM',
-    answerUI: {
-        help: '__help',
-        model: {
-            type: 'qcm',
-            answers: [
-                {
-                    selected: false,
-                    title: 'choix1',
-                    help: '(help choix1)',
-                    ariaLabel: '__ariaLabel1',
-                    onClick: noop
-                },
-                {
-                    selected: false,
-                    title: 'choix2',
-                    help: '(help choix2)',
-                    ariaLabel: '__ariaLabel2',
-                    onClick: noop
-                },
-                {
-                    selected: false,
-                    title: 'choix3',
-                    help: '(help choix3)',
-                    ariaLabel: '__ariaLabel3',
-                    onClick: noop
-                }
-            ]
-        }
-    }
-};

package/es/fixtures/temp-fixture.d.ts

@@ -1,3 +0,0 @@
-import { SlidesViewProps, CorrectionPopinProps } from '../types/views/slides';
-export declare const correctionPopinProps: CorrectionPopinProps;
-export declare const congratsProps: SlidesViewProps['congratsProps'];

package/es/fixtures/temp-fixture.js

@@ -1,84 +0,0 @@
-export const correctionPopinProps = {
-    klf: {
-        label: 'Key learning factor',
-        tooltip: 'Some tooltip info.',
-        onClick: () => {
-            console.log('klf onClick');
-        }
-    },
-    information: {
-        label: 'Key learning factor',
-        message: 'info msg'
-    },
-    next: {
-        label: 'Next',
-        ariaLabel: 'Next'
-    },
-    successLabel: 'CORRECT ANSWER',
-    failureLabel: 'WRONG ANSWER'
-};
-const confettiAnimationProps = {
-    'aria-label': 'aria lottie',
-    'data-name': 'default-lottie',
-    className: undefined,
-    animationSrc: 'https://static-staging.coorpacademy.com/animations/review/confetti.json',
-    loop: undefined,
-    autoplay: true,
-    rendererSettings: {
-        hideOnTransparent: false,
-        animationClassName: ''
-    },
-    ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/conffeti_congrats.svg',
-    animationControl: undefined
-};
-const starAnimationProps = {
-    'aria-label': 'Review Card Congrats Container',
-    'data-name': 'card-star',
-    animationLottie: {
-        'aria-label': 'aria lottie',
-        'data-name': 'default-lottie',
-        animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',
-        ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/stars_icon_congrats.svg'
-    },
-    iconAriaLabel: 'Image without information',
-    cardType: 'card-star',
-    reviewCardTitle: 'You have won',
-    reviewCardValue: '100',
-    timerAnimation: 200
-};
-const rankAnimationProps = {
-    'aria-label': 'Review Card Congrats Container',
-    'data-name': 'card-rank',
-    animationLottie: {
-        'aria-label': 'aria lottie',
-        'data-name': 'default-lottie',
-        animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
-        ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg'
-    },
-    cardType: 'card-rank',
-    iconAriaLabel: 'Image without information',
-    reviewCardTitle: 'You are now',
-    reviewCardValue: '14',
-    rankSuffix: 'th',
-    timerAnimation: 200
-};
-export const congratsProps = {
-    'aria-label': 'Review Congratulations',
-    'data-name': 'review-congrats',
-    animationLottie: confettiAnimationProps,
-    title: 'Congratulations!',
-    cardCongratsStar: starAnimationProps,
-    cardCongratsRank: rankAnimationProps,
-    buttonRevising: {
-        'aria-label': 'Continue revising button',
-        label: 'Continue revising',
-        onClick: () => console.log('Continue revising'),
-        type: 'tertiary'
-    },
-    buttonRevisingSkill: {
-        label: 'Revise another skill',
-        'aria-label': 'Revise another skill button',
-        onClick: () => console.log('Revise another skill'),
-        type: 'primary'
-    }
-};

package/es/helpers/map-api-slide-to-ui.d.ts

@@ -1,11 +0,0 @@
-import { AnswerUI } from '../types/slides';
-import { SlideFromAPI } from '../types/common';
-declare type UiUtils = {
-    translate: (text: string) => string;
-};
-export declare const getQuestionType: (slide: SlideFromAPI) => SlideFromAPI['question']['type'];
-export declare const mapApiSlideToUi: (uiUtils: UiUtils) => (slide: SlideFromAPI) => {
-    questionText: string;
-    answerUI: AnswerUI;
-};
-export {};

package/es/helpers/map-api-slide-to-ui.js

@@ -1,193 +0,0 @@
-import { concat, divide, get, getOr, head, includes, indexOf, isEmpty, map, pipe, rangeStep, size, toInteger } from 'lodash/fp';
-const qcmProps = (question) => {
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    const answers = [];
-    return {
-        type: 'qcm',
-        answers: map(choice => ({
-            title: choice.label,
-            selected: includes(choice.label, answers),
-            // TODO: EDIT_CHOICES
-            // eslint-disable-next-line no-console
-            onClick: () => console.log('TODO: on choice click'),
-            ariaLabel: choice.label
-        }), 
-        // TODO: EDIT_CHOICES -> getChoices
-        question.content.choices)
-    };
-};
-const qcmDragProps = (question) => {
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    const answers = [];
-    return {
-        type: 'qcmDrag',
-        answers: map(choice => {
-            const indexInAnswer = indexOf(choice.label, answers);
-            return {
-                title: choice.label,
-                selected: indexInAnswer !== -1,
-                order: indexInAnswer,
-                // TODO: EDIT_CHOICES
-                // eslint-disable-next-line no-console
-                onClick: () => console.log('TODO: on choice click')
-            };
-            // TODO: EDIT_CHOICES -> getChoices
-        }, question.content.choices)
-    };
-};
-const qcmGraphicProps = (question) => {
-    // mock the answers
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    const answers = [];
-    return {
-        type: 'qcmGraphic',
-        answers: map(choice => ({
-            title: choice.label,
-            image: get('media.src.0.url', choice),
-            selected: includes(choice.label, answers),
-            // TODO: EDIT_CHOICES
-            // eslint-disable-next-line no-console
-            onClick: () => console.log('TODO: on choice click')
-        }), 
-        // TODO: EDIT_CHOICES -> getChoices
-        question.content.choices)
-    };
-};
-const templateTextProps = (uiUtils) => (choice, index) => {
-    const { translate } = uiUtils;
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    const answers = [];
-    return {
-        type: 'text',
-        name: getOr('', 'name', choice),
-        placeholder: translate('Type here'),
-        value: get(index, answers),
-        // TODO: EDIT_CHOICES
-        // eslint-disable-next-line no-console
-        onChange: () => console.log('TODO: on choice change')
-    };
-};
-// const getItemText = (item: ChoiceFromAPI['items'][0]): item['text'] is string =>
-const templateSelectProps = (uiUtils) => {
-    return (choice, index) => {
-        const { translate } = uiUtils;
-        // TODO: EDIT_CHOICES -> getAnswerValues
-        const answers = [];
-        const answer = get(index, answers);
-        const temporaryOption = {
-            name: translate('Select an answer'),
-            value: '',
-            validOption: false,
-            selected: true
-        };
-        const selectOptions = choice.items.map(item => {
-            const itemText = getOr('', 'text', item);
-            return {
-                name: itemText,
-                value: itemText,
-                validOption: true,
-                selected: itemText === answer
-            };
-        });
-        return {
-            type: 'select',
-            name: getOr('', 'name', choice),
-            // TODO: EDIT_CHOICES
-            // eslint-disable-next-line no-console
-            onChange: () => console.log('TODO: on choice change'),
-            options: isEmpty(answer) ? concat([temporaryOption], selectOptions) : selectOptions
-        };
-    };
-};
-const templateProps = (uiUtils) => {
-    const templateTextProps_ = templateTextProps(uiUtils);
-    const templateSelectProps_ = templateSelectProps(uiUtils);
-    return question => {
-        // TODO: EDIT_CHOICES -> getChoices
-        const choices = question.content.choices;
-        return {
-            type: 'template',
-            template: get('content.template', question),
-            answers: choices.map((choice, index) => choice.type === 'text'
-                ? templateTextProps_(choice, index)
-                : templateSelectProps_(choice, index))
-        };
-    };
-};
-const basicProps = (uiUtils) => {
-    const { translate } = uiUtils;
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    const answers = [];
-    return () => {
-        return {
-            type: 'freeText',
-            placeholder: translate('Type here'),
-            value: head(answers),
-            // TODO: EDIT_CHOICES
-            // eslint-disable-next-line no-console
-            onChange: () => console.log('TODO: on choice change')
-        };
-    };
-};
-const sliderProps = (question) => {
-    const values = rangeStep(getOr(1, 'content.step', question), getOr(Number.NaN, 'content.min', question), getOr(Number.NaN, 'content.max', question) + 1
-    // Lodash doesn't infer the type very well here
-    );
-    // TODO: EDIT_CHOICES -> getAnswerValues
-    const answers = [];
-    const stateValue = head(answers);
-    const currentValue = toInteger(stateValue);
-    const indexValue = indexOf(currentValue, values);
-    const sliderPosition = divide(indexValue, size(values) - 1);
-    const unitLabel = get('question.content.unitLabel', question);
-    return {
-        type: 'slider',
-        placeholder: question.explanation,
-        minLabel: `${question.content.min} ${unitLabel}`,
-        maxLabel: `${question.content.max} ${unitLabel}`,
-        title: `${currentValue} ${question.content.unitLabel}`,
-        value: sliderPosition,
-        // TODO: EDIT_CHOICES
-        // eslint-disable-next-line no-console
-        onChange: () => console.log('TODO: on choice change')
-    };
-};
-export const getQuestionType = (slide) => slide.question.type;
-const getHelp = (uiUtils) => (slide) => {
-    const { translate } = uiUtils;
-    return get('question.explanation', slide) || translate('Select something below');
-};
-const getAnswerUIModel = (uiUtils) => {
-    const basicProps_ = basicProps(uiUtils);
-    const templateProps_ = templateProps(uiUtils);
-    return slide => {
-        const type = getQuestionType(slide);
-        switch (type) {
-            case 'qcm':
-                return pipe(get('question'), qcmProps)(slide);
-            case 'qcmGraphic':
-                return pipe(get('question'), qcmGraphicProps)(slide);
-            case 'qcmDrag':
-                return pipe(get('question'), qcmDragProps)(slide);
-            case 'basic':
-                return basicProps_();
-            case 'template':
-                return pipe(get('question'), templateProps_)(slide);
-            case 'slider':
-                return pipe(get('question'), sliderProps)(slide);
-            default:
-                throw new Error(`${type} is not an handled question.type`);
-        }
-    };
-};
-export const mapApiSlideToUi = (uiUtils) => {
-    const getAnswerUIModel_ = getAnswerUIModel(uiUtils);
-    const getHelp_ = getHelp(uiUtils);
-    return slide => {
-        if (!slide) {
-            throw new Error('no slide was found');
-        }
-        const questionText = pipe(getOr('', 'question.header'), uiUtils.translate)(slide);
-        return { questionText, answerUI: { model: getAnswerUIModel_(slide), help: getHelp_(slide) } };
-    };
-};

package/es/helpers/test/fixtures/free-text.js

@@ -1,30 +0,0 @@
-import noop from 'lodash/fp/noop';
-export const freeTextSlide = {
-    id: 'sli_E1Pcl-XAYbi',
-    universalRef: 'sli_E1Pcl-XAYbi',
-    question: {
-        type: 'basic',
-        header: 'sli_E1Pcl-XAYbi.header',
-        explanation: 'sli_E1Pcl-XAYbi.explanation',
-        content: {
-            label: 'sli_E1Pcl-XAYbi.label',
-            placeholder: 'sli_E1Pcl-XAYbi.placeholder',
-            id: 'sli_E1Pcl-XAYbi.choice_1'
-        }
-    },
-    clue: 'sli_E1Pcl-XAYbi.clue',
-    klf: 'sli_E1Pcl-XAYbi.klf',
-    tips: 'sli_E1Pcl-XAYbi.tips'
-};
-export const freeTextUISlide = {
-    answerUI: {
-        help: 'sli_E1Pcl-XAYbi.explanation',
-        model: {
-            type: 'freeText',
-            placeholder: 'Type here',
-            value: undefined,
-            onChange: noop
-        }
-    },
-    questionText: 'sli_E1Pcl-XAYbi.header'
-};