@coorpacademy/app-review 0.5.3 → 0.5.4

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

@@ -10,7 +10,7 @@ import {
   getChoicesCorrection,
   incorrectFreeTextPostAnswerResponse
 } from '../../../test/util/services.mock';
-import {mapStateToSlidesProps} from '..';
+import {CongratsCardProps, CongratsProps, mapStateToSlidesProps} from '..';
 import type {StoreState} from '../../../reducers';
 import {freeTextSlide} from './fixtures/free-text';
 import {qcmGraphicSlide} from './fixtures/qcm-graphic';
@@ -29,9 +29,10 @@ test('should create initial props when fetched slide is not still received', t =
       },
       token: '1234',
       corrections: {},
-      rank: {}
+      rank: {start: Number.NaN, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: '',
       navigation: ['loader', 'slides'],
       answers: {},
@@ -42,7 +43,8 @@ test('should create initial props when fetched slide is not still received', t =
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -120,9 +122,10 @@ test('should create props when first slide is on the state', t => {
       },
       token: '1234',
       corrections: {},
-      rank: {}
+      rank: {start: Number.NaN, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: 'sli_VJYjJnJhg',
       navigation: ['loader', 'slides'],
       answers: {},
@@ -133,7 +136,8 @@ test('should create props when first slide is on the state', t => {
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -226,9 +230,10 @@ test('should create props when slide is on the state and user has selected answe
       },
       token: '1234',
       corrections: {},
-      rank: {}
+      rank: {start: 10, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: 'sli_VJYjJnJhg',
       navigation: ['loader', 'slides'],
       answers: {sli_VJYjJnJhg: ['My value']},
@@ -239,7 +244,8 @@ test('should create props when slide is on the state and user has selected answe
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -333,9 +339,10 @@ test('should verify props when first slide was answered correctly and next slide
       },
       token: '1234',
       corrections: {},
-      rank: {}
+      rank: {start: 10, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: 'sli_VJYjJnJhg',
       navigation: ['loader', 'slides'],
       answers: {sli_VJYjJnJhg: ['My value']},
@@ -351,7 +358,8 @@ test('should verify props when first slide was answered correctly and next slide
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -449,9 +457,10 @@ test('should verify props when first slide was answered with error and next slid
       },
       token: '1234',
       corrections: {},
-      rank: {}
+      rank: {start: 10, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: 'sli_VJYjJnJhg',
       navigation: ['loader', 'slides'],
       answers: {sli_VJYjJnJhg: ['My value']},
@@ -467,7 +476,8 @@ test('should verify props when first slide was answered with error and next slid
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -522,9 +532,10 @@ test('should verify props when first slide was answered, next slide is fetched &
       corrections: {
         [freeTextSlide._id]: getChoicesCorrection(freeTextSlide._id)
       },
-      rank: {}
+      rank: {start: 10, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: 'sli_VJYjJnJhg',
       navigation: ['loader', 'slides'],
       answers: {sli_VJYjJnJhg: ['My value']},
@@ -540,7 +551,8 @@ test('should verify props when first slide was answered, next slide is fetched &
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -652,9 +664,10 @@ test('should verify props when first slide was answered incorrectly, next slide
       corrections: {
         [freeTextSlide._id]: getChoicesCorrection(freeTextSlide._id, true)
       },
-      rank: {}
+      rank: {start: 10, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: 'sli_VJYjJnJhg',
       navigation: ['loader', 'slides'],
       answers: {sli_VJYjJnJhg: ['My value']},
@@ -670,7 +683,8 @@ test('should verify props when first slide was answered incorrectly, next slide
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -785,9 +799,10 @@ test('should verify props when currentSlideRef has changed to nextContent of pro
       corrections: {
         [freeTextSlide._id]: getChoicesCorrection(freeTextSlide._id)
       },
-      rank: {}
+      rank: {start: 10, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: 'sli_VkSQroQnx',
       navigation: ['loader', 'slides'],
       answers: {
@@ -807,7 +822,8 @@ test('should verify props when currentSlideRef has changed to nextContent of pro
           animateCorrectionPopin: false,
           showCorrectionPopin: false
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -874,7 +890,7 @@ test('should verify props when currentSlideRef has changed to nextContent of pro
   });
 });
 
-test('should verify props when progression is in success', t => {
+test('should verify props when progression is in success, showing last correction popin', t => {
   // state after receive last POST_ANSWER_SUCCESS and before last NEXT_SLIDE
   const state: StoreState = {
     data: {
@@ -895,9 +911,10 @@ test('should verify props when progression is in success', t => {
         [sliderSlide.universalRef]: getChoicesCorrection(sliderSlide._id),
         [templateSlide.universalRef]: getChoicesCorrection(templateSlide._id)
       },
-      rank: {}
+      rank: {start: 10, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: templateSlide.universalRef,
       navigation: ['loader', 'slides'],
       answers: {
@@ -938,7 +955,8 @@ test('should verify props when progression is in success', t => {
           animateCorrectionPopin: true,
           showCorrectionPopin: true
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -978,7 +996,263 @@ test('should verify props when progression is in success', t => {
     ]
   });
 
-  // TODO update test with props.stack validations when NEXT_SLIDE implemented
+  t.deepEqual(omit(['next.onClick'], props.stack.correctionPopinProps), {
+    information: {
+      label: '_klf',
+      message:
+        'L’apprenant peut aussi évaluer sa performance grâce à un classement disponible sur la vue leaderboard. Elle compare sa position par rapport à celle des autres apprenants de la plateforme.'
+    },
+    klf: undefined,
+    next: {
+      ariaLabel: '_correctionNextAriaLabel',
+      label: '_correctionNextLabel'
+    },
+    resultLabel: '_right',
+    type: 'right'
+  });
+});
+
+test('should verify props showing congrats', t => {
+  const state: StoreState = {
+    data: {
+      progression: postAnswerResponses[templateSlide.universalRef],
+      skills: [],
+      slides: {
+        [freeTextSlide.universalRef]: freeTextSlide,
+        [qcmGraphicSlide.universalRef]: qcmGraphicSlide,
+        [qcmSlide.universalRef]: qcmSlide,
+        [sliderSlide.universalRef]: sliderSlide,
+        [templateSlide.universalRef]: templateSlide
+      },
+      token: '1234',
+      corrections: {
+        [freeTextSlide._id]: getChoicesCorrection(freeTextSlide._id),
+        [qcmGraphicSlide.universalRef]: getChoicesCorrection(qcmGraphicSlide._id),
+        [qcmSlide.universalRef]: getChoicesCorrection(qcmSlide._id),
+        [sliderSlide.universalRef]: getChoicesCorrection(sliderSlide._id),
+        [templateSlide.universalRef]: getChoicesCorrection(templateSlide._id)
+      },
+      rank: {start: 10, end: 9}
+    },
+    ui: {
+      showCongrats: true,
+      showQuitPopin: false,
+      currentSlideRef: 'successExitNode',
+      navigation: ['loader', 'slides'],
+      answers: {
+        sli_VJYjJnJhg: ['Benchmark'],
+        sli_VkSQroQnx: ['Faux'],
+        sli_N1XACJobn: ['Le créateur peut fixer un pourcentage pour chaque transaction future'],
+        sli_VkAzsCLKb: ['7'],
+        'sli_N13-hG3kX': ['Leaderboard', 'utilisateurs', 'étoiles']
+      },
+      positions: [-1, -1, -1, -1, 0],
+      slide: {
+        sli_VJYjJnJhg: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        sli_VkSQroQnx: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        sli_N1XACJobn: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        sli_VkAzsCLKb: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        'sli_N13-hG3kX': {
+          validateButton: false,
+          animateCorrectionPopin: true,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        }
+      }
+    }
+  };
+
+  const props = mapStateToSlidesProps(state, identity, identity);
+  const congrats = props.congrats as CongratsProps;
+  t.is(congrats.title, 'Congratulations!');
+  t.is(
+    congrats.animationLottie.animationSrc,
+    'https://static-staging.coorpacademy.com/animations/review/confetti.json'
+  );
+  const {cardCongratsStar, buttonRevising, buttonRevisingSkill} = congrats;
+  const cardCongratsRank = congrats.cardCongratsRank as CongratsCardProps;
+  t.deepEqual(
+    {
+      animationLottie: cardCongratsRank.animationLottie,
+      rankSuffix: cardCongratsRank.rankSuffix,
+      reviewCardTitle: cardCongratsRank.reviewCardTitle,
+      reviewCardValue: cardCongratsRank.reviewCardValue
+    },
+    {
+      animationLottie: {
+        animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
+        'aria-label': 'aria lottie',
+        autoplay: true,
+        'data-name': 'default-lottie',
+        ie11ImageBackup:
+          'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg',
+        loop: true
+      },
+      rankSuffix: 'th',
+      reviewCardTitle: 'You are now',
+      reviewCardValue: '9'
+    }
+  );
+  t.deepEqual(
+    {
+      animationLottie: cardCongratsStar.animationLottie,
+      rankSuffix: cardCongratsStar.rankSuffix,
+      reviewCardTitle: cardCongratsStar.reviewCardTitle,
+      reviewCardValue: cardCongratsStar.reviewCardValue
+    },
+    {
+      animationLottie: {
+        animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',
+        'aria-label': 'aria lottie',
+        autoplay: undefined,
+        className: undefined,
+        'data-name': 'default-lottie',
+        ie11ImageBackup:
+          'https://static-staging.coorpacademy.com/animations/review/stars_icon_congrats.svg',
+        loop: false,
+        rendererSettings: {
+          hideOnTransparent: false
+        }
+      },
+      rankSuffix: undefined,
+      reviewCardTitle: 'You have won',
+      reviewCardValue: '40'
+    }
+  );
+
+  t.is(buttonRevising, undefined);
+  t.is(buttonRevisingSkill, undefined);
+});
+
+test('should verify props showing congrats, with only stars card, if user has no earn positions on raking', t => {
+  const state: StoreState = {
+    data: {
+      progression: postAnswerResponses[templateSlide.universalRef],
+      skills: [],
+      slides: {
+        [freeTextSlide.universalRef]: freeTextSlide,
+        [qcmGraphicSlide.universalRef]: qcmGraphicSlide,
+        [qcmSlide.universalRef]: qcmSlide,
+        [sliderSlide.universalRef]: sliderSlide,
+        [templateSlide.universalRef]: templateSlide
+      },
+      token: '1234',
+      corrections: {
+        [freeTextSlide._id]: getChoicesCorrection(freeTextSlide._id),
+        [qcmGraphicSlide.universalRef]: getChoicesCorrection(qcmGraphicSlide._id),
+        [qcmSlide.universalRef]: getChoicesCorrection(qcmSlide._id),
+        [sliderSlide.universalRef]: getChoicesCorrection(sliderSlide._id),
+        [templateSlide.universalRef]: getChoicesCorrection(templateSlide._id)
+      },
+      rank: {start: 10, end: 10}
+    },
+    ui: {
+      showCongrats: true,
+      showQuitPopin: false,
+      currentSlideRef: 'successExitNode',
+      navigation: ['loader', 'slides'],
+      answers: {
+        sli_VJYjJnJhg: ['Benchmark'],
+        sli_VkSQroQnx: ['Faux'],
+        sli_N1XACJobn: ['Le créateur peut fixer un pourcentage pour chaque transaction future'],
+        sli_VkAzsCLKb: ['7'],
+        'sli_N13-hG3kX': ['Leaderboard', 'utilisateurs', 'étoiles']
+      },
+      positions: [-1, -1, -1, -1, 0],
+      slide: {
+        sli_VJYjJnJhg: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        sli_VkSQroQnx: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        sli_N1XACJobn: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        sli_VkAzsCLKb: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        },
+        'sli_N13-hG3kX': {
+          validateButton: false,
+          animateCorrectionPopin: true,
+          showCorrectionPopin: false,
+          animationType: 'unstack'
+        }
+      }
+    }
+  };
+
+  const props = mapStateToSlidesProps(state, identity, identity);
+  const congrats = props.congrats as CongratsProps;
+  t.is(congrats.title, 'Congratulations!');
+  t.is(
+    congrats.animationLottie.animationSrc,
+    'https://static-staging.coorpacademy.com/animations/review/confetti.json'
+  );
+  const {cardCongratsStar, buttonRevising, buttonRevisingSkill} = congrats;
+  t.deepEqual(
+    {
+      animationLottie: cardCongratsStar.animationLottie,
+      rankSuffix: cardCongratsStar.rankSuffix,
+      reviewCardTitle: cardCongratsStar.reviewCardTitle,
+      reviewCardValue: cardCongratsStar.reviewCardValue
+    },
+    {
+      animationLottie: {
+        animationSrc: 'https://static-staging.coorpacademy.com/animations/review/star.json',
+        'aria-label': 'aria lottie',
+        autoplay: undefined,
+        className: undefined,
+        'data-name': 'default-lottie',
+        ie11ImageBackup:
+          'https://static-staging.coorpacademy.com/animations/review/stars_icon_congrats.svg',
+        loop: false,
+        rendererSettings: {
+          hideOnTransparent: false
+        }
+      },
+      rankSuffix: undefined,
+      reviewCardTitle: 'You have won',
+      reviewCardValue: '40'
+    }
+  );
+  const cardCongratsRank = congrats.cardCongratsRank;
+  t.is(cardCongratsRank, undefined);
+
+  t.is(buttonRevising, undefined);
+  t.is(buttonRevisingSkill, undefined);
 });
 
 test('should verify props when progression has answered a current pendingSlide', t => {
@@ -1002,9 +1276,10 @@ test('should verify props when progression has answered a current pendingSlide',
         [sliderSlide.universalRef]: getChoicesCorrection(sliderSlide._id),
         [templateSlide.universalRef]: getChoicesCorrection(templateSlide._id)
       },
-      rank: {}
+      rank: {start: 10, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: freeTextSlide.universalRef,
       navigation: ['loader', 'slides'],
       answers: {
@@ -1045,7 +1320,8 @@ test('should verify props when progression has answered a current pendingSlide',
           showCorrectionPopin: false,
           animationType: 'unstack'
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -1106,9 +1382,10 @@ test('should verify props when progression still has a pendingSlide', t => {
         [sliderSlide.universalRef]: getChoicesCorrection(sliderSlide._id),
         [templateSlide.universalRef]: getChoicesCorrection(templateSlide._id)
       },
-      rank: {}
+      rank: {start: 10, end: Number.NaN}
     },
     ui: {
+      showCongrats: false,
       currentSlideRef: qcmSlide.universalRef,
       navigation: ['loader', 'slides'],
       answers: {
@@ -1149,7 +1426,8 @@ test('should verify props when progression still has a pendingSlide', t => {
           showCorrectionPopin: false,
           animationType: 'unstack'
         }
-      }
+      },
+      showQuitPopin: false
     }
   };
 
@@ -1188,3 +1466,35 @@ test('should verify props when progression still has a pendingSlide', t => {
     ]
   });
 });
+
+test('should verify that props quitPopin is not undefined when popin is displayed', t => {
+  const state: StoreState = {
+    data: {
+      progression: createdProgression,
+      skills: [],
+      slides: {
+        sli_N1XACJobn: null
+      },
+      token: '1234',
+      corrections: {},
+      rank: {start: Number.NaN, end: Number.NaN}
+    },
+    ui: {
+      showCongrats: false,
+      currentSlideRef: '',
+      navigation: ['loader', 'slides'],
+      answers: {},
+      positions: [0, 1, 2, 3, 4],
+      slide: {
+        sli_N1XACJobn: {
+          validateButton: false,
+          animateCorrectionPopin: false,
+          showCorrectionPopin: false
+        }
+      },
+      showQuitPopin: true
+    }
+  };
+  const props = mapStateToSlidesProps(state, identity, identity);
+  t.not(props.quitPopin, undefined);
+});

package/src/views/slides/test/on-quit-popin.on-click.test.ts

@@ -0,0 +1,65 @@
+import test from 'ava';
+import identity from 'lodash/fp/identity';
+import {createTestStore} from '../../../actions/test/create-test-store';
+import {CLOSE_POPIN} from '../../../actions/ui/quit-popin';
+import {incorrectFreeTextPostAnswerResponse, services} from '../../../test/util/services.mock';
+import {StoreState} from '../../../reducers';
+import {mapStateToSlidesProps, QuitPopinProps} from '..';
+import {freeTextSlide} from './fixtures/free-text';
+import {qcmGraphicSlide} from './fixtures/qcm-graphic';
+
+const state: StoreState = {
+  data: {
+    progression: incorrectFreeTextPostAnswerResponse,
+    skills: [],
+    slides: {
+      sli_VJYjJnJhg: freeTextSlide,
+      sli_VkSQroQnx: qcmGraphicSlide
+    },
+    token: '1234',
+    corrections: {},
+    rank: {start: 10, end: Number.NaN}
+  },
+  ui: {
+    showCongrats: false,
+    currentSlideRef: 'sli_VJYjJnJhg',
+    navigation: ['loader', 'slides'],
+    answers: {sli_VJYjJnJhg: ['My value']},
+    positions: [0, 1, 2, 3, 4],
+    slide: {
+      sli_VJYjJnJhg: {
+        validateButton: false,
+        animateCorrectionPopin: true,
+        showCorrectionPopin: true
+      },
+      sli_VkSQroQnx: {
+        validateButton: false,
+        animateCorrectionPopin: false,
+        showCorrectionPopin: false
+      }
+    },
+    showQuitPopin: true
+  }
+};
+
+test('should dispatch CLOSE_POPIN action via the property handleOnclick of secondButton when popin is open', async t => {
+  const expectedAction = [{type: CLOSE_POPIN}];
+  const {dispatch, getState} = createTestStore(t, state, services, expectedAction);
+  const props = mapStateToSlidesProps(getState(), dispatch, identity);
+  const quitPopin = props.quitPopin as QuitPopinProps;
+  await quitPopin.secondButton.handleOnclick();
+  const updatedState = getState();
+  t.is(updatedState.ui.showQuitPopin, false);
+  t.pass();
+});
+
+test('should dispatch onQuitClick function via the property handleOnclick of firstButton when popin is open', async t => {
+  t.plan(2);
+
+  const expectedAction = [{type: CLOSE_POPIN}];
+  const {dispatch, getState} = createTestStore(t, state, services, expectedAction);
+  const props = mapStateToSlidesProps(getState(), dispatch, () => t.pass());
+  const quitPopin = props.quitPopin as QuitPopinProps;
+  await quitPopin.firstButton.handleOnclick();
+  t.pass();
+});

package/src/views/slides/test/slide.free-text.on-change.test.ts

@@ -53,9 +53,10 @@ const initialState: StoreState = {
     skills: [],
     token: '1234',
     corrections: {},
-    rank: {}
+    rank: {start: 10, end: Number.NaN}
   },
   ui: {
+    showCongrats: false,
     currentSlideRef: freeTextSlide._id,
     navigation: ['skills', 'slides'],
     answers: {},
@@ -66,7 +67,8 @@ const initialState: StoreState = {
         animateCorrectionPopin: false,
         showCorrectionPopin: false
       }
-    }
+    },
+    showQuitPopin: false
   }
 };