Write e2e tests for onboarding - Closes #589

src/components/onboarding/index.js

@@ -59,6 +59,8 @@ class Onboarding extends React.Component {
   reset() {
     this.isAlreadyOnboarded = true;
     this.onboardingStarted = false;
+    this.onboardingFinished = false;
+    this.joyride.reset(true);
     this.setState({ start: false, intro: true, skip: false });
   }
 
@@ -68,6 +70,7 @@ class Onboarding extends React.Component {
     const onboardingStarted = data.index === 1;
     const onboardingStep = data.index > 1;
     const skipOnboarding = data.action === 'skip';
+    const lastStepReached = data.index === this.state.steps.length - 1;
     const onboardingFinished = data.type === 'finished';
 
     if (onboardingNotStarted) {
@@ -84,6 +87,9 @@ class Onboarding extends React.Component {
       this.setState({ skip: true });
       this.joyride.reset(true); // go to step 0 to show the skip step
     }
+    if (lastStepReached) {
+      this.onboardingFinished = true;
+    }
     if (onboardingFinished) {
       if (this.onboardingFinished) this.reset();
       this.onboardingFinished = true;

src/components/setting/setting.js

@@ -91,7 +91,7 @@ class Setting extends React.Component {
         </div>
         {this.showOnboardingSetting()
           ? <div>
-            <button className={styles.settingsButton} onClick={() => {
+            <button className={`${styles.settingsButton} onboarding-setting`} onClick={() => {
               toggleMenu();
               startOnboarding();
             }

test/e2e/onboarding.feature

@@ -0,0 +1,111 @@
+Feature: Onboarding
+  Scenario: should not start onboarding when not logged in
+    Given I go to "/"
+    And I wait 1 seconds
+    Then I should see no "joyride-tooltip__header"
+
+  Scenario: should start onboarding automatically
+    Given I'm logged in as "genesis"
+    And I wait 0.4 seconds
+    Then I should see text "Welcome to Lisk Hub" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Lisk ID" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Keep the overview" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Send LSK" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Explore the network" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Manage your application" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Access extra features" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "You’ve completed the tour!" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    Then I should see no "joyride-tooltip__header"
+
+    When I click "more menu"
+    And I click 1 item in setting carousel
+    And I wait 0.4 seconds
+    And I click "advancedMode"
+    And I click 3 item in setting carousel
+    And I wait 0.4 seconds
+    And I click "onboarding-setting"
+    Then I should see text "Welcome to Lisk Hub" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Lisk ID" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Keep the overview" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Send LSK" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Explore the network" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Delegate voting" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Manage your application" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Access extra features" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "You’ve completed the tour!" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    Then I should see no "joyride-tooltip__header"
+
+    When I refresh the page
+    And I wait 1 seconds
+    Then I should see no "joyride-tooltip__header"
+
+    When I click "more menu"
+    And I click 3 item in setting carousel
+    And I wait 0.4 seconds
+    And I click "onboarding-setting"
+    And I wait 0.4 seconds
+    Then I should see text "Welcome to Lisk Hub" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--primary"
+    And I wait 0.4 seconds
+    Then I should see text "Lisk ID" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--skip"
+    And I wait 0.4 seconds
+    Then I should see text "Onboarding whenever you need" in "joyride-tooltip__header" element
+
+    And I click "joyride-tooltip__button--skip"
+    Then I should see no "joyride-tooltip__header"
+
+
+
+

test/e2e/step_definitions/hooks.js

@@ -48,7 +48,9 @@ defineSupportCode(({ Before, After, registerListener }) => {
     browser.get(browser.params.baseURL);
     localStorage.clear();
     localStorage.setItem('showNetwork', 'true');
-    localStorage.setItem('onboarding', 'false');
+    if (scenario.scenario.feature.name !== 'Onboarding') {
+      localStorage.setItem('onboarding', 'false');
+    }
     browser.get(browser.params.baseURL).then(callback);
   });