@coorpacademy/app-review 0.6.0 → 0.6.1-alpha.0

package/lib/views/slides/index.js

@@ -0,0 +1,325 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapStateToSlidesProps = exports.buildStepItems = exports.initialState = void 0;
+const findLast_1 = __importDefault(require("lodash/fp/findLast"));
+const get_1 = __importDefault(require("lodash/fp/get"));
+const getOr_1 = __importDefault(require("lodash/fp/getOr"));
+const last_1 = __importDefault(require("lodash/fp/last"));
+const reduce_1 = __importDefault(require("lodash/fp/reduce"));
+const set_1 = __importDefault(require("lodash/fp/set"));
+const toInteger_1 = __importDefault(require("lodash/fp/toInteger"));
+const join_1 = __importDefault(require("lodash/fp/join"));
+const quit_popin_1 = require("../../actions/ui/quit-popin");
+const common_1 = require("../../common");
+const post_answer_1 = require("../../actions/api/post-answer");
+const next_slide_1 = require("../../actions/ui/next-slide");
+const map_api_slide_to_ui_1 = require("./map-api-slide-to-ui");
+const ICON_VALUES = {
+    right: 'right',
+    wrong: 'wrong',
+    'no-answer': 'no-answer'
+};
+const confettiAnimation = {
+    '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
+    },
+    ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/conffeti_congrats.svg'
+};
+exports.initialState = {
+    '0': {
+        position: 0,
+        loading: true
+    },
+    '1': {
+        position: 1,
+        loading: true
+    },
+    '2': {
+        position: 2,
+        loading: true
+    },
+    '3': {
+        position: 3,
+        loading: true
+    },
+    '4': {
+        position: 4,
+        loading: true
+    }
+};
+const getCurrentSlideRef = (state) => {
+    const currentSlideRef = (0, get_1.default)(['ui', 'currentSlideRef'], state);
+    const endReview = currentSlideRef === 'successExitNode';
+    if (!endReview)
+        return currentSlideRef;
+    const progression = state.data.progression;
+    const content = progression.state.content;
+    return content.ref;
+};
+const buildStackSlides = (state, dispatch) => {
+    const currentSlideRef = getCurrentSlideRef(state);
+    const progression = state.data.progression;
+    if (!currentSlideRef || !progression)
+        return exports.initialState;
+    const slideRefs = (0, common_1.getProgressionSlidesRefs)(progression);
+    // @ts-expect-error typescript does not support capped versions of lodash functions
+    const stack = reduce_1.default.convert({ cap: false })((acc, uiSlide, _index) => {
+        const index = (0, toInteger_1.default)(_index);
+        const positions = state.ui.positions;
+        const position = positions[index];
+        const slideRef = slideRefs[index];
+        if (!slideRef)
+            return (0, set_1.default)(index, { ...uiSlide, position }, acc);
+        const slideFromAPI = (0, get_1.default)(slideRef, state.data.slides);
+        if (!slideFromAPI)
+            return (0, set_1.default)(index, { ...uiSlide, position }, acc);
+        const answers = (0, getOr_1.default)([], ['ui', 'answers', slideRef], state);
+        const { questionText, answerUI } = (0, map_api_slide_to_ui_1.mapApiSlideToUi)(dispatch)(slideFromAPI, answers);
+        const { title: parentContentTitle, type: parentContentType } = slideFromAPI.parentContentTitle;
+        const isCurrentSlideRef = currentSlideRef === slideRef;
+        const slideUI = (0, get_1.default)(['ui', 'slide', slideRef], state);
+        const animateCorrectionPopin = isCurrentSlideRef && slideUI.animateCorrectionPopin;
+        const showCorrectionPopin = isCurrentSlideRef && slideUI.showCorrectionPopin;
+        const animationType = slideUI.animationType;
+        const updatedUiSlide = {
+            ...uiSlide,
+            position,
+            showCorrectionPopin,
+            animateCorrectionPopin,
+            loading: false,
+            questionText,
+            answerUI,
+            parentContentTitle: `From "${parentContentTitle}" ${parentContentType}`,
+            animationType
+        };
+        return (0, set_1.default)(index, updatedUiSlide, acc);
+    }, exports.initialState, exports.initialState);
+    return stack;
+};
+const getIconForCurrentStep = (slideRef, lastGivenAnswerForSlide, currentSlideRef, lastGivenAnswer) => {
+    if (slideRef !== currentSlideRef)
+        return lastGivenAnswerForSlide.isCorrect ? 'right' : 'wrong';
+    if (lastGivenAnswer.slideRef !== slideRef)
+        return 'no-answer';
+    return lastGivenAnswerForSlide.isCorrect ? 'right' : 'wrong';
+};
+const buildStepItems = (state) => {
+    const { progression } = state.data;
+    const { currentSlideRef } = state.ui;
+    if (!progression)
+        return [];
+    const defaultProps = [
+        {
+            icon: 'no-answer',
+            current: true,
+            value: '1'
+        },
+        {
+            icon: 'no-answer',
+            current: false,
+            value: '2'
+        },
+        {
+            icon: 'no-answer',
+            current: false,
+            value: '3'
+        },
+        {
+            icon: 'no-answer',
+            current: false,
+            value: '4'
+        },
+        {
+            icon: 'no-answer',
+            current: false,
+            value: '5'
+        }
+    ];
+    const slideRefs = (0, common_1.getProgressionSlidesRefs)(progression);
+    const allAnswers = progression.state.allAnswers;
+    const step = progression.state.step;
+    const nextContentRef = progression.state.nextContent.ref;
+    const lastGivenAnswer = (0, last_1.default)(allAnswers);
+    if (!lastGivenAnswer)
+        return defaultProps;
+    const steps = defaultProps.map((stepItem, index) => {
+        const slideRef = slideRefs[index];
+        if (!slideRef)
+            return stepItem; // non fecthed slide pour given index
+        const lastGivenAnswerForSlide = (0, findLast_1.default)(answer => answer.slideRef === slideRef, allAnswers);
+        // never answered slide
+        if (!lastGivenAnswerForSlide) {
+            return {
+                ...stepItem,
+                current: nextContentRef === currentSlideRef && step.current === index + 1
+            };
+        }
+        // already answered slide, we computed based on the lastGivenAnswer
+        return {
+            ...stepItem,
+            icon: getIconForCurrentStep(slideRef, lastGivenAnswerForSlide, currentSlideRef, lastGivenAnswer),
+            current: lastGivenAnswerForSlide.slideRef === currentSlideRef
+        };
+    });
+    return steps;
+};
+exports.buildStepItems = buildStepItems;
+const getCorrectionPopinProps = (dispatch) => (isCorrect, correctAnswer, klf) => {
+    return {
+        klf: isCorrect
+            ? undefined
+            : {
+                label: '_klf',
+                tooltip: klf
+            },
+        resultLabel: isCorrect ? '_right' : '_wrong',
+        information: {
+            label: isCorrect ? '_klf' : '_correctAnswer',
+            message: isCorrect ? klf : (0, join_1.default)(',', correctAnswer)
+        },
+        next: {
+            'aria-label': '_correctionNextAriaLabel',
+            label: '_correctionNextLabel',
+            onClick: () => {
+                dispatch(next_slide_1.nextSlide);
+            }
+        },
+        type: isCorrect ? 'right' : 'wrong'
+    };
+};
+const buildQuitPopinProps = (dispatch) => (onQuitClick) => {
+    return {
+        content: `Tu t'en vas déjà ?`,
+        icon: `MoonRocket`,
+        mode: 'alert',
+        descriptionText: `Tu vas t'en sortir ! Si tu arrêtes maintenant, tu vas perdre ta progression.`,
+        firstButton: {
+            label: 'Arrêter ma session',
+            type: 'tertiary',
+            customStyle: {
+                color: '#ED3436'
+            },
+            handleOnclick: onQuitClick,
+            'aria-label': 'Stop session'
+        },
+        secondButton: {
+            label: `Continuer d'apprendre`,
+            type: 'primary',
+            handleOnclick: () => {
+                dispatch(quit_popin_1.closeQuitPopin);
+            },
+            'aria-label': 'Continue review'
+        }
+    };
+};
+const buildRankCard = (rank) => {
+    return {
+        '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',
+            loop: true,
+            autoplay: true,
+            ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg'
+        },
+        cardType: 'card-rank',
+        iconAriaLabel: 'Image without information',
+        className: undefined,
+        reviewCardTitle: 'You are now',
+        reviewCardValue: `${rank}`,
+        rankSuffix: 'th',
+        timerAnimation: 200
+    };
+};
+const buildCongratsProps = (state) => {
+    if (!state.ui.showCongrats)
+        return;
+    const progression = state.data.progression;
+    const stars = progression.state.stars;
+    const cardCongratsStar = {
+        'aria-label': 'Review Card Congrats Container',
+        'data-name': 'card-star',
+        animationLottie: {
+            'aria-label': 'aria lottie',
+            'data-name': 'default-lottie',
+            className: undefined,
+            animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',
+            loop: false,
+            autoplay: undefined,
+            rendererSettings: {
+                hideOnTransparent: false
+            },
+            ie11ImageBackup: 'https://static-staging.coorpacademy.com/animations/review/stars_icon_congrats.svg'
+        },
+        iconAriaLabel: 'Image without information',
+        className: undefined,
+        cardType: 'card-star',
+        reviewCardTitle: 'You have won',
+        reviewCardValue: `${stars}`,
+        timerAnimation: 200
+    };
+    const { start, end } = state.data.rank;
+    const newRank = start - end;
+    const cardCongratsRank = !Number.isNaN(newRank) && newRank > 0 ? buildRankCard(end) : undefined;
+    return {
+        'aria-label': 'Review Congratulations',
+        'data-name': 'review-congrats',
+        animationLottie: confettiAnimation,
+        title: 'Congratulations!',
+        cardCongratsStar,
+        cardCongratsRank,
+        buttonRevising: undefined,
+        buttonRevisingSkill: undefined // TODO make boutons and actions
+    };
+};
+const isEndOfProgression = (progression) => {
+    if (!progression)
+        return false;
+    return progression.state.nextContent.ref === 'successExitNode';
+};
+const mapStateToSlidesProps = (state, dispatch, onQuitClick) => {
+    const currentSlideRef = getCurrentSlideRef(state);
+    const endReview = isEndOfProgression(state.data.progression);
+    const correction = (0, get_1.default)(['data', 'corrections', currentSlideRef], state);
+    const isCorrect = (0, get_1.default)(['data', 'progression', 'state', 'isCorrect'], state);
+    const klf = (0, getOr_1.default)('', ['data', 'slides', currentSlideRef, 'klf'], state);
+    const showQuitPopin = (0, get_1.default)(['ui', 'showQuitPopin'], state);
+    const showCongrats = (0, get_1.default)(['ui', 'showCongrats'], state);
+    return {
+        header: {
+            mode: '__revision_mode',
+            skillName: '__agility',
+            onQuitClick: () => dispatch(quit_popin_1.openQuitPopin),
+            'aria-label': 'aria-header-wrapper',
+            closeButtonAriaLabel: 'aria-close-button',
+            steps: (0, exports.buildStepItems)(state),
+            hiddenSteps: showCongrats
+        },
+        stack: {
+            slides: buildStackSlides(state, dispatch),
+            validateButton: {
+                label: '__validate',
+                disabled: !(0, get_1.default)(['ui', 'slide', currentSlideRef, 'validateButton'], state),
+                onClick: () => {
+                    dispatch(post_answer_1.postAnswer);
+                }
+            },
+            correctionPopinProps: correction && getCorrectionPopinProps(dispatch)(isCorrect, correction.correctAnswer, klf),
+            endReview: endReview && state.ui.showCongrats
+        },
+        congrats: buildCongratsProps(state),
+        quitPopin: showQuitPopin ? buildQuitPopinProps(dispatch)(onQuitClick) : undefined
+    };
+};
+exports.mapStateToSlidesProps = mapStateToSlidesProps;

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

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapApiSlideToUi = exports.getQuestionType = void 0;
+const fp_1 = require("lodash/fp");
+const answers_1 = require("../../actions/ui/answers");
+const qcmProps = (dispatch) => (answers, question) => {
+    return {
+        type: 'qcm',
+        answers: (0, fp_1.map)(choice => {
+            const label = (0, fp_1.getOr)('', 'label', choice);
+            return {
+                title: label,
+                selected: (0, fp_1.includes)(label, answers),
+                onClick: () => {
+                    dispatch((0, answers_1.editAnswer)([label]));
+                },
+                'aria-label': label
+            };
+        }, question.content.choices)
+    };
+};
+const qcmDragProps = (dispatch) => (answers, question) => {
+    return {
+        type: 'qcmDrag',
+        answers: (0, fp_1.map)(choice => {
+            const label = (0, fp_1.getOr)('', 'label', choice);
+            const indexInAnswer = (0, fp_1.indexOf)(label, answers);
+            return {
+                title: label,
+                selected: (0, fp_1.includes)(label, answers),
+                order: indexInAnswer,
+                onClick: () => {
+                    dispatch((0, answers_1.editAnswer)([label]));
+                }
+            };
+        }, question.content.choices)
+    };
+};
+const qcmGraphicProps = (dispatch) => (answers, question) => {
+    return {
+        type: 'qcmGraphic',
+        answers: (0, fp_1.map)(choice => {
+            const label = (0, fp_1.getOr)('', 'label', choice);
+            return {
+                title: label,
+                image: (0, fp_1.get)('media.src.0.url', choice),
+                selected: (0, fp_1.includes)(label, answers),
+                onClick: () => {
+                    dispatch((0, answers_1.editAnswer)([label]));
+                },
+                ariaLabel: label
+            };
+        }, question.content.choices)
+    };
+};
+const updateTemplateAnswer = (text, _answers, index, max) => {
+    const answers = (0, fp_1.isEmpty)(_answers) ? (0, fp_1.times)((0, fp_1.constant)(undefined), max) : _answers;
+    return (0, fp_1.map)(a => ((0, fp_1.isNil)(a) ? '' : a), (0, fp_1.set)(index, text, answers));
+};
+const templateTextProps = (dispatch, answers, choice, index, maxLength) => {
+    return {
+        type: 'text',
+        name: (0, fp_1.getOr)('', 'name', choice),
+        placeholder: 'Type here',
+        value: (0, fp_1.get)(index, answers),
+        onChange: (text) => {
+            const newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
+            dispatch((0, answers_1.editAnswer)(newAnswers));
+        }
+    };
+};
+const templateSelectProps = (dispatch, answers, choice, index, maxLength) => {
+    const answer = (0, fp_1.get)(index, answers);
+    const temporaryOption = {
+        name: 'Select an answer',
+        value: '',
+        validOption: false,
+        selected: true
+    };
+    const selectOptions = choice.items.map(item => {
+        const itemText = (0, fp_1.getOr)('', 'text', item);
+        return {
+            name: itemText,
+            value: itemText,
+            validOption: true,
+            selected: itemText === answer
+        };
+    });
+    return {
+        type: 'select',
+        name: (0, fp_1.getOr)('', 'name', choice),
+        onChange: (text) => {
+            const newAnswers = updateTemplateAnswer(text, answers, index, maxLength);
+            dispatch((0, answers_1.editAnswer)(newAnswers));
+        },
+        options: (0, fp_1.isEmpty)(answer) ? (0, fp_1.concat)([temporaryOption], selectOptions) : selectOptions
+    };
+};
+const templateProps = (dispatch) => (answers, question) => {
+    const choices = question.content.choices;
+    const maxLength = (0, fp_1.size)(choices);
+    return {
+        type: 'template',
+        template: (0, fp_1.get)('content.template', question),
+        answers: choices.map((choice, index) => choice.type === 'text'
+            ? templateTextProps(dispatch, answers, choice, index, maxLength)
+            : templateSelectProps(dispatch, answers, choice, index, maxLength))
+    };
+};
+const basicProps = (dispatch) => (answers, question) => {
+    return {
+        type: 'freeText',
+        placeholder: (0, fp_1.getOr)('', 'content.placeholder', question),
+        value: (0, fp_1.getOr)('', '0', answers),
+        onChange: (text) => {
+            dispatch((0, answers_1.editAnswer)([text]));
+        }
+    };
+};
+const sliderProps = (dispatch) => (answers, question) => {
+    const values = (0, fp_1.rangeStep)((0, fp_1.getOr)(1, 'content.step', question), (0, fp_1.get)('content.min', question), (0, fp_1.get)('content.max', question) + 1
+    // Lodash doesn't infer the type very well here
+    );
+    const stateValue = (0, fp_1.head)(answers) || question.content.min;
+    const currentValue = (0, fp_1.toInteger)(stateValue);
+    const indexValue = (0, fp_1.indexOf)(currentValue, values);
+    const maxValue = (0, fp_1.size)(values) - 1;
+    const sliderPosition = (0, fp_1.divide)(indexValue, maxValue);
+    const unitLabel = (0, fp_1.get)('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,
+        onChange: (position) => {
+            // atom/range handler
+            const newValue = (0, fp_1.pipe)((0, fp_1.multiply)(maxValue), fp_1.round, (0, fp_1.get)(fp_1.__, values), fp_1.toString)(position);
+            dispatch((0, answers_1.editAnswer)([newValue]));
+        },
+        onSliderChange: (newValue) => {
+            // mobile/slider handler
+            dispatch((0, answers_1.editAnswer)([`${newValue}`]));
+        }
+    };
+};
+const getQuestionType = (question) => question.type;
+exports.getQuestionType = getQuestionType;
+const getHelp = (slide) => (0, fp_1.get)('question.explanation', slide);
+const getAnswerUIModel = (question, answers, dispatch) => {
+    const type = (0, exports.getQuestionType)(question);
+    switch (type) {
+        case 'qcm':
+            return qcmProps(dispatch)(answers, question);
+        case 'qcmGraphic':
+            return qcmGraphicProps(dispatch)(answers, question);
+        case 'qcmDrag':
+            return qcmDragProps(dispatch)(answers, question);
+        case 'basic':
+            return basicProps(dispatch)(answers, question);
+        case 'template':
+            return templateProps(dispatch)(answers, question);
+        case 'slider':
+            return sliderProps(dispatch)(answers, question);
+        default:
+            throw new Error(`${type} is not an handled question.type`);
+    }
+};
+const mapApiSlideToUi = (dispatch) => (slide, answers) => {
+    const questionText = (0, fp_1.getOr)('', 'question.header', slide);
+    return {
+        questionText,
+        answerUI: { model: getAnswerUIModel(slide.question, answers, dispatch), help: getHelp(slide) }
+    };
+};
+exports.mapApiSlideToUi = mapApiSlideToUi;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.6.0",
+  "version": "0.6.1-alpha.0+397b6bc37",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -29,20 +29,12 @@
   "files": [
     "lib",
     "es",
-    "src",
     "readme.md"
   ],
-  "main": "./es/index.js",
-  "exports": {
-    ".": {
-      "import": "./es/index.js",
-      "commonjs": "./lib/index.js",
-      "types": "./es/index.d.ts"
-    },
-    "./package.json": "./package.json"
-  },
+  "main": "lib/index.js",
+  "module": "es/index.js",
   "dependencies": {
-    "@coorpacademy/components": "10.25.0",
+    "@coorpacademy/components": "10.25.1-alpha.0+397b6bc37",
     "@coorpacademy/redux-task": "1.1.6",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
@@ -77,5 +69,5 @@
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"
   },
-  "gitHead": "c588893546b513a06e95efcc4dd7c5ce31b27a3f"
+  "gitHead": "397b6bc37e3ee081c19b8f246647a87f0648e1e6"
 }

package/es/sandbox/index.d.ts

@@ -1,9 +0,0 @@
-declare type SandboxOptions = {
-    container: string;
-};
-declare global {
-    interface Window {
-        createSandbox?: (sandboxOptions: SandboxOptions) => void;
-    }
-}
-export {};

package/es/sandbox/index.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-import isNil from 'lodash/fp/isNil';
-import get from 'lodash/fp/get';
-import pipe from 'lodash/fp/pipe';
-import { WebContext } from '@coorpacademy/components/es/atom/provider';
-import { identity } from 'lodash/fp';
-import AppReview from '../src';
-import { services } from '../src/test/util/services.mock';
-const isContainerAvailable = (options) => !pipe(get('container'), isNil)(options);
-const createSandbox = (options) => {
-    if (!isContainerAvailable(options)) {
-        // eslint-disable-next-line no-console
-        console.error('[AppReview sandbox] Requires a container.');
-    }
-    else {
-        const container = document.getElementById(options.container);
-        // mode mobile/web
-        const appOptions = {
-            token: process.env.API_TEST_TOKEN || '',
-            skillRef: '123',
-            services,
-            onQuitClick: () => {
-                location.reload();
-            },
-            url: process.env.LAMBDA_API_REVIEW_GET_SLIDES_URL || 'http://localhost:7006'
-        };
-        const skin = {
-            common: {
-                primary: '#248e59'
-            }
-        };
-        render(React.createElement(WebContext, { skin: skin, translate: identity },
-            React.createElement(AppReview, { options: appOptions })), container);
-    }
-};
-// -----------------------------------------------------------------------------
-if (window && !window.createSandbox) {
-    window.createSandbox = createSandbox;
-}
-createSandbox({ container: 'root' });

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

@@ -1,5 +0,0 @@
-import type { ExecutionContext } from 'ava';
-import { AnyAction, Store } from 'redux';
-import { ThunkOptions } from '../../types/common';
-import { StoreState } from '../../reducers';
-export declare const createTestStore: (t: ExecutionContext, initialState: StoreState, thunkOptions: ThunkOptions, actions: AnyAction[]) => Store<StoreState, AnyAction>;

package/es/src/actions/test/create-test-store.js

@@ -1,16 +0,0 @@
-import constant from 'lodash/fp/constant';
-import { applyMiddleware, compose, createStore } from 'redux';
-import thunk from 'redux-thunk';
-import rootReducer from '../../reducers';
-const assertActionsMiddleware = (t, ACTIONS) => constant((next) => (action) => {
-    const expectedAction = ACTIONS.shift();
-    if (!expectedAction)
-        throw new Error(`Missing {type: "${action.type}"} action`);
-    t.deepEqual(action, expectedAction);
-    return next(action);
-});
-export const createTestStore = (t, initialState, thunkOptions, actions) => {
-    const thunkMiddleware = thunk.withExtraArgument(thunkOptions);
-    const enhancer = compose(applyMiddleware(thunkMiddleware, assertActionsMiddleware(t, actions)));
-    return createStore(rootReducer, initialState, enhancer);
-};

package/es/src/test/index.test.d.ts

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

package/es/src/test/index.test.js

@@ -1,66 +0,0 @@
-import browserEnv from 'browser-env';
-import identity from 'lodash/fp/identity';
-import test from 'ava';
-import React from 'react';
-import { render, fireEvent, act } from '@testing-library/react';
-import { sleep } from '../services/tools/sleep';
-import AppReview from '..';
-import { services } from './util/services.mock';
-browserEnv({ pretendToBeVisual: true });
-const elementExists = (foundElements) => foundElements && foundElements[0];
-const waitForChanges = async (msToWait = 3000) => {
-    await act(async () => {
-        await sleep(msToWait); // wait *just* a little longer than the timeout in the component
-    });
-};
-const LIMIT = 5;
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const clickAllSlides = async (t, container, accumulator = 0) => {
-    if (accumulator === LIMIT)
-        return;
-    // last one needs to wait for more calculations && components updates
-    if (accumulator === 4)
-        await act(async () => {
-            await sleep(1000);
-        });
-    const validateButton = container.querySelectorAll(`[data-name="slide-validate-button-${accumulator}"]`);
-    t.truthy(elementExists(validateButton));
-    await act(async () => {
-        await fireEvent.click(validateButton[0]);
-    });
-    const nextButton = container.querySelectorAll(`[data-name="next-question-button-${accumulator}"]`);
-    t.truthy(elementExists(nextButton));
-    await act(async () => {
-        await fireEvent.click(nextButton[0]);
-    });
-    await clickAllSlides(t, container, accumulator + 1);
-};
-const appOptions = {
-    token: process.env.API_TEST_TOKEN || '',
-    skillRef: 'skill_NJC0jFKoH',
-    services,
-    onQuitClick: identity,
-    url: process.env.LAMBDA_API_REVIEW_GET_SLIDES_URL || 'http://localhost:7006'
-};
-test('should show the loader while the app is fetching the data', async (t) => {
-    t.plan(2);
-    const { container } = render(React.createElement(AppReview, { options: appOptions }));
-    await waitForChanges(1000);
-    const loader = container.querySelector('[data-name="loader"]');
-    t.truthy(loader);
-    // await waitFor(async () => {
-    //   // await sleep(500);
-    //   const result = await t.try(tt => {
-    //     // rerender(<AppReview options={appOptions} />);
-    //     const slidesContainer = container.querySelector('[data-name="slides-revision-container"]');
-    //     tt.truthy(slidesContainer);
-    //   });
-    //   if (result.passed) return result.commit();
-    //   result.discard();
-    //   throw result.errors;
-    // });
-    // const stackedSlidesContainer = container.querySelector('[data-name="stacked-slides-container"]');
-    // t.truthy(stackedSlidesContainer);
-    // await clickAllSlides(t, container);
-    t.pass();
-});