Use sections for install e2e

client/coral-admin/src/routes/Install/components/Steps/FinalStep.js

@@ -2,12 +2,13 @@ import React from 'react';
 import styles from './style.css';
 import {Button} from 'coral-ui';
 import {Link} from 'react-router';
+import cn from 'classnames';
 
 import t from 'coral-framework/services/i18n';
 
 const InitialStep = () => {
   return (
-    <div className={`${styles.step} ${styles.finalStep}`}>
+    <div className={cn(styles.step, styles.finalStep, 'talk-install-step-5')}>
       <p>{t('install.final.description')}</p>
       <Button raised><Link to='/admin'>{t('install.final.launch')}</Link></Button>
       <Button cStyle='black' raised><a href="http://coralproject.net">{t('install.final.close')}</a></Button>

client/coral-admin/src/routes/Install/components/Steps/InitialStep.js

@@ -3,11 +3,12 @@ import styles from './style.css';
 import {Button} from 'coral-ui';
 import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
+import cn from 'classnames';
 
 const InitialStep = (props) => {
   const {nextStep} = props;
   return (
-    <div className={styles.step}>
+    <div className={cn(styles.step, 'talk-install-step-1')}>
       <p>{t('install.initial.description')}</p>
       <Button className={'talk-install-get-started-button'} cStyle='green' onClick={nextStep} raised>{t('install.initial.submit')}</Button>
     </div>

test/e2e/page_objects/install.js

@@ -8,19 +8,39 @@ module.exports = {
         .waitForElementVisible('body');
     }
   }],
-  elements: {
-    'getStartedButton': '.talk-install-get-started-button',
-    'step2': '.talk-install-step-2',
-    'step2organizationNameInput': '.talk-install-step-2 #organizationName',
-    'step2saveButton': '.talk-install-step-2-save-button',
-    'step3': '.talk-install-step-3',
-    'step3EmailInput': '.talk-install-step-3 #email',
-    'step3UsernameInput': '.talk-install-step-3 #username',
-    'step3PasswordInput': '.talk-install-step-3 #password',
-    'step3ConfirmPasswordInput': '.talk-install-step-3 #confirmPassword',
-    'step3saveButton': '.talk-install-step-3-save-button',
-    'step4': '.talk-install-step-4',
-    'step4DomainInput': '.talk-install-step-4-permited-domains-input input',
-    'step4saveButton': '.talk-install-step-4-save-button',
-  }
+  sections: {
+    step1: {
+      selector: '.talk-install-step-1',
+      elements: {
+        getStartedButton: '.talk-install-get-started-button',
+      },
+    },
+    step2: {
+      selector: '.talk-install-step-2',
+      elements: {
+        organizationNameInput: '.talk-install-step-2 #organizationName',
+        saveButton: '.talk-install-step-2-save-button',
+      },
+    },
+    step3: {
+      selector: '.talk-install-step-3',
+      elements: {
+        emailInput: '.talk-install-step-3 #email',
+        usernameInput: '.talk-install-step-3 #username',
+        passwordInput: '.talk-install-step-3 #password',
+        confirmPasswordInput: '.talk-install-step-3 #confirmPassword',
+        saveButton: '.talk-install-step-3-save-button',
+      },
+    },
+    step4: {
+      selector: '.talk-install-step-4',
+      elements: {
+        domainInput: '.talk-install-step-4-permited-domains-input input',
+        saveButton: '.talk-install-step-4-save-button',
+      },
+    },
+    step5: {
+      selector: '.talk-install-step-5',
+    },
+  },
 };

test/e2e/specs/01_install.js

@@ -5,13 +5,13 @@ module.exports = {
 
     install
       .navigate()
-      .ready();
+      .expect.section('@step1').to.be.present;
 
   },
   'User clicks get started button': (client) => {
-    const install = client.page.install();
+    const step1 = client.page.install().section.step1;
 
-    install
+    step1
       .waitForElementVisible('@getStartedButton')
       .click('@getStartedButton');
   },
@@ -19,54 +19,60 @@ module.exports = {
     const install = client.page.install();
 
     install
-      .waitForElementVisible('@step2');
+      .expect.section('@step2').to.be.present;
   },
   'User fills step 2': (client) => {
-    const install = client.page.install();
+    const step2 = client.page.install().section.step2;
     const {testData} = client.globals;
 
-    install
-      .waitForElementVisible('@step2organizationNameInput')
-      .setValue('@step2organizationNameInput', testData.organizationName)
-      .waitForElementVisible('@step2saveButton')
-      .click('@step2saveButton');
+    step2
+      .waitForElementVisible('@organizationNameInput')
+      .setValue('@organizationNameInput', testData.organizationName)
+      .waitForElementVisible('@saveButton')
+      .click('@saveButton');
   },
   'User should see step 3 - Create your account': (client) => {
     const install = client.page.install();
 
     install
-      .waitForElementVisible('@step3');
+      .expect.section('@step3').to.be.present;
   },
   'User fills step 3': (client) => {
-    const install = client.page.install();
+    const step3 = client.page.install().section.step3;
     const {testData: {admin}} = client.globals;
 
-    install
-      .setValue('@step3EmailInput', admin.email)
-      .setValue('@step3UsernameInput', admin.username)
-      .setValue('@step3PasswordInput', admin.password)
-      .setValue('@step3ConfirmPasswordInput', admin.password)
-      .waitForElementVisible('@step3saveButton')
-      .click('@step3saveButton');
+    step3
+      .setValue('@emailInput', admin.email)
+      .setValue('@usernameInput', admin.username)
+      .setValue('@passwordInput', admin.password)
+      .setValue('@confirmPasswordInput', admin.password)
+      .waitForElementVisible('@saveButton')
+      .click('@saveButton');
   },
   'User should see step 4 - Domain Whitelist': (client) => {
     const install = client.page.install();
 
     install
-      .waitForElementVisible('@step4');
+      .expect.section('@step4').to.be.present;
   },
   'User fills step 4': (client) => {
-    const install = client.page.install();
+    const step4 = client.page.install().section.step4;
 
-    install
-      .waitForElementVisible('@step4DomainInput')
-      .setValue('@step4DomainInput', client.launchUrl);
+    step4
+      .waitForElementVisible('@domainInput')
+      .setValue('@domainInput', client.launchUrl);
 
     client.keys(client.Keys.ENTER);
 
+    step4
+      .waitForElementVisible('@saveButton')
+      .click('@saveButton');
+  },
+  'User should see step 5 - Final Step': (client) => {
+    const install = client.page.install();
+
     install
-      .waitForElementVisible('@step4saveButton')
-      .click('@step4saveButton');
+      .expect.section('@step5').to.be.present;
   },
   after: (client) => {
     client.end();