Onboarding v3 e2e tests

src/renderer/components/ModalQuizz/ModalQuizz.tsx

@@ -166,6 +166,7 @@ const ModalQuizz: React.FunctionComponent<Props> = ({
       >
         {choices.map(({ label, correct }: QuizzChoice, index: number) => (
           <RadioElement
+            data-test-id={`v3-quiz-answer-${index}`}
             key={`${radioName}-choice-${index}`}
             label={label}
             value={`${index}`}
@@ -216,6 +217,7 @@ const ModalQuizz: React.FunctionComponent<Props> = ({
         <StartScreen onStart={() => setStarted(true)} />
       ) : (
         <ModalStepperBody
+          dataTestId="v3-quiz-container"
           AsideLeft={AsideLeft}
           AsideRight={AsideRight}
           hideBackButton

src/renderer/components/ModalStepper/ModalStepperBody.tsx

@@ -37,6 +37,7 @@ export default function ModalStepperBody({
   rightSideBgColor,
   stepIndex,
   stepCount,
+  dataTestId,
 }: Props) {
   const { t } = useTranslation();
 
@@ -45,7 +46,7 @@ export default function ModalStepperBody({
   const defaultContinueLabel = t("common.continue");
   const defaultBackLabel = t("common.back");
   return (
-    <StepContainer>
+    <StepContainer data-test-id={dataTestId}>
       <StepLeftSide
         Header={<ProgressHeader title={title} {...stepsProps} />}
         stepTitle={stepTitle}
@@ -59,6 +60,9 @@ export default function ModalStepperBody({
         backDisabled={backDisabled}
         onClickContinue={onClickContinue}
         onClickBack={onClickBack}
+        dataTestId={
+          stepIndex !== stepCount - 1 ? "v3-modal-stepper-continue" : "v3-modal-stepper-end"
+        }
       />
       <StepRightSide AsideRight={AsideRight} rightSideBgColor={rightSideBgColor} />
       <ProgressBar {...stepsProps} />

src/renderer/components/ModalStepper/StepLeftSide.tsx

@@ -22,6 +22,7 @@ export type StepLeftSideProps = {
   continueDisabled?: boolean;
   hideBackButton?: boolean;
   backDisabled?: boolean;
+  dataTestId: string;
   onClickContinue?: (...args: any) => any;
   onClickBack?: (...args: any) => any;
 };
@@ -37,6 +38,7 @@ const StepLeftSide = ({
   continueDisabled = false,
   backDisabled = false,
   hideBackButton = false,
+  dataTestId,
   onClickContinue,
   onClickBack,
 }: StepLeftSideProps) => {
@@ -59,6 +61,7 @@ const StepLeftSide = ({
       <FlexBox flexDirection="column">
         {!hideContinueButton && (
           <Button
+            data-test-id={dataTestId}
             disabled={continueDisabled}
             variant="main"
             Icon={ArrowRightRegular}

src/renderer/components/ModalStepper/index.tsx

@@ -25,10 +25,11 @@ type Props = {
   onClose: () => void;
   onFinish: () => void;
   dismissable?: boolean;
+  dataTestId: string;
 };
 
 const ModalStepper = (props: Props) => {
-  const { title, steps, onClose, onFinish, isOpen, dismissable = true } = props;
+  const { title, steps, onClose, onFinish, isOpen, dismissable = true, dataTestId } = props;
   const { t } = useTranslation();
   const [stepIndex, setStepIndex] = useState(0);
   const stepCount = steps.length;
@@ -64,6 +65,7 @@ const ModalStepper = (props: Props) => {
       position="relative"
     >
       <ModalStepperBody
+        dataTestId={dataTestId}
         AsideLeft={step.AsideLeft}
         AsideRight={step.AsideRight}
         backDisabled={step.backDisabled}

src/renderer/components/Onboarding/Pedagogy/index.tsx

@@ -24,6 +24,7 @@ export function Pedagogy({ isOpen, onDone, onClose }: PedagogyProps) {
 
   return (
     <ModalStepper
+      dataTestId="v3-onboarding-pedagogy-modal"
       isOpen={isOpen}
       title={t("v3.onboarding.pedagogy.heading")}
       steps={[

src/renderer/components/Onboarding/Screens/SelectDevice/DeviceSelectorOption.v3.tsx

@@ -80,7 +80,7 @@ export function DeviceSelectorOption({
 }: DeviceSelectOptionProps) {
   const { t } = useTranslation();
   return (
-    <Container {...{ id, isFirst, isLast }}>
+    <Container data-test-id={`v3-container-${id}`} {...{ id, isFirst, isLast }}>
       <ContentContainer>
         <DeviceIllustrationContainer>{Illu}</DeviceIllustrationContainer>
         <DeviceName
@@ -91,7 +91,7 @@ export function DeviceSelectorOption({
         >
           {label}
         </DeviceName>
-        <SelectButton variant="main" onClick={onClick}>
+        <SelectButton data-test-id={`v3-${id}`} variant="main" onClick={onClick}>
           {t("v3.onboarding.screens.selectDevice.selectLabel")}
         </SelectButton>
       </ContentContainer>

src/renderer/components/Onboarding/Screens/SelectUseCase/UseCaseOption.v3.tsx

@@ -69,11 +69,19 @@ interface UseCaseOptionProps {
   Illu: React.ReactNode;
   onClick: () => void;
   id?: string;
+  dataTestId: string;
 }
 
-export function UseCaseOption({ title, description, Illu, onClick, id }: UseCaseOptionProps) {
+export function UseCaseOption({
+  title,
+  description,
+  Illu,
+  onClick,
+  id,
+  dataTestId,
+}: UseCaseOptionProps) {
   return (
-    <UseCaseOptionContainer id={id} onClick={onClick}>
+    <UseCaseOptionContainer data-test-id={dataTestId} id={id} onClick={onClick}>
       <Container>
         <IllustrationContainer>{Illu}</IllustrationContainer>
         <TitleText>{title}</TitleText>

src/renderer/components/Onboarding/Screens/SelectUseCase/index.v3.tsx

@@ -109,6 +109,7 @@ export function SelectUseCase({ setUseCase, setOpenedPedagogyModal }: Props) {
           </LeftColumn>
           <RightColumn>
             <UseCaseOption
+              dataTestId="v3-onboarding-new-device"
               id="first-use"
               title={
                 <Trans
@@ -136,6 +137,7 @@ export function SelectUseCase({ setUseCase, setOpenedPedagogyModal }: Props) {
           </LeftColumn>
           <RightColumn>
             <UseCaseOption
+              dataTestId="v3-onboarding-initialized-device"
               id="initialized-device"
               title={
                 <Trans
@@ -155,6 +157,7 @@ export function SelectUseCase({ setUseCase, setOpenedPedagogyModal }: Props) {
               }}
             />
             <UseCaseOption
+              dataTestId="v3-onboarding-restore-device"
               id="restore-device"
               title={t("v3.onboarding.screens.selectUseCase.options.3.title")}
               description={

src/renderer/components/Onboarding/Screens/Tutorial/index.tsx

@@ -131,6 +131,7 @@ const FlowStepper: React.FC<FlowStepperProps> = ({
               {backLabel || t("common.back")}
             </Button>
             <Button
+              data-test-id="v3-tutorial-continue"
               onClick={handleContinue}
               disabled={disableContinue}
               variant="main"

src/renderer/components/Onboarding/Screens/Tutorial/screens/ExistingRecoveryPhrase.tsx

@@ -23,6 +23,7 @@ export function ExistingRecoveryPhrase({
         {t("onboarding.screens.tutorial.screens.existingRecoveryPhrase.paragraph2")}
       </SubTitle>
       <CheckStep
+        data-test-id="v3-recovery-phrase-loss-checkbox"
         checked={userUnderstandConsequences}
         onClick={toggleUserUnderstandConsequences}
         label={t("onboarding.screens.tutorial.screens.existingRecoveryPhrase.disclaimer")}

src/renderer/components/Onboarding/Screens/Tutorial/screens/NewRecoveryPhrase.tsx

@@ -20,6 +20,7 @@ export function NewRecoveryPhrase({
       <SubTitle>{t("onboarding.screens.tutorial.screens.newRecoveryPhrase.paragraph1")}</SubTitle>
       <SubTitle>{t("onboarding.screens.tutorial.screens.newRecoveryPhrase.paragraph2")}</SubTitle>
       <CheckStep
+        data-test-id="v3-recovery-phrase-checkbox"
         checked={userUnderstandConsequences}
         onClick={toggleUserUnderstandConsequences}
         label={t("onboarding.screens.tutorial.screens.newRecoveryPhrase.disclaimer")}

src/renderer/components/Onboarding/Screens/Tutorial/screens/PinCode.tsx

@@ -16,6 +16,7 @@ export function PinCode({ toggleUserChosePinCodeHimself, userChosePinCodeHimself
       <Title>{t("onboarding.screens.tutorial.screens.pinCode.title")}</Title>
       <SubTitle>{t("onboarding.screens.tutorial.screens.pinCode.paragraph")}</SubTitle>
       <CheckStep
+        data-test-id="v3-private-pin-code-checkbox"
         checked={userChosePinCodeHimself}
         onClick={toggleUserChosePinCodeHimself}
         label={t("onboarding.screens.tutorial.screens.pinCode.disclaimer")}

src/renderer/components/Onboarding/Screens/Welcome/TermsAndConditionsModal.tsx

@@ -31,14 +31,21 @@ const TermsAndConditionsModal: React.FC<{
   }, [dispatch, setOpenedTermsModal, history]);
 
   return (
-    <Popin isOpen={isOpen} onClose={onClose} width={622} height={220}>
+    <Popin
+      data-test-id="v3-onboarding-terms-and-conditions-popin"
+      isOpen={isOpen}
+      onClose={onClose}
+      width={622}
+      height={220}
+    >
       <Flex justifyContent="center" mt={4} mb={3}>
         <Text variant="h2" textTransform="uppercase">
           {t("Terms.title")}
         </Text>
       </Flex>
       <Flex mt={5} ml={5}>
         <Checkbox
+          data-test-id="v3-onboarding-terms-checkbox"
           name="termsOfUseCheckbox"
           onChange={e => setAcceptedTermsOfUse(e.target.checked)}
           isChecked={acceptedTermsOfUse}
@@ -52,6 +59,7 @@ const TermsAndConditionsModal: React.FC<{
       </Flex>
       <Flex mt={2} ml={5}>
         <Checkbox
+          data-test-id="v3-onboarding-privacy-checkbox"
           name="privacyPolicyCheckbox"
           onChange={e => setAcceptedPrivacyPolicy(e.target.checked)}
           isChecked={acceptedPrivacyPolicy}
@@ -65,7 +73,7 @@ const TermsAndConditionsModal: React.FC<{
       </Flex>
       <Flex justifyContent="center" mt={8}>
         <Button
-          data-testid="onboarding-cta-done"
+          data-test-id="v3-onboarding-terms-and-conditions-button"
           onClick={handleAcceptTermsOfUse}
           variant="main"
           color="palette.neutral.c100"

src/renderer/components/Onboarding/Screens/Welcome/index.tsx

@@ -127,7 +127,7 @@ export function Welcome({ setOpenedTermsModal }: Props) {
         </Presentation>
         <ProductHighlight>
           <Button
-            data-testid="onboarding-get-started-button"
+            data-test-id="v3-onboarding-get-started-button"
             iconPosition="right"
             Icon={Icons.ArrowRightMedium}
             variant="main"

src/renderer/modals/OnboardingQuizz/StartScreen.tsx

@@ -29,7 +29,13 @@ const StartScreen = ({ onStart }: Props) => {
         <Text variant="body" fontWeight="medium">
           {t("v3.onboarding.quizz.descr")}
         </Text>
-        <Button variant="main" Icon={Icons.PlusMedium} iconPosition="left" onClick={onStart}>
+        <Button
+          data-test-id="v3-quiz-start-button"
+          variant="main"
+          Icon={Icons.PlusMedium}
+          iconPosition="left"
+          onClick={onStart}
+        >
           {t("v3.onboarding.quizz.buttons.start")}
         </Button>
       </Flex>