Refactor 2

client/coral-admin/src/routes/Community/components/CommunityMenu.js

@@ -13,11 +13,11 @@ const CommunityMenu = ({flaggedUsernamesCount = 0}) => {
     <div className='mdl-tabs'>
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
         <div>
-          <Link to={flaggedPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+          <Link to={flaggedPath} className={`mdl-tabs__tab ${styles.tab} talk-admin-nav-flagged-accounts`} activeClassName={styles.active}>
             {t('community.flaggedaccounts')}
             <CountBadge count={flaggedUsernamesCount} />
           </Link>
-          <Link to={peoplePath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+          <Link to={peoplePath} className={`mdl-tabs__tab ${styles.tab} talk-admin-nav-people`} activeClassName={styles.active}>
             {t('community.people')}
           </Link>
         </div>

test/e2e/page_objects/admin.js

@@ -7,33 +7,139 @@ module.exports = {
       return this
         .waitForElementVisible('body');
     },
-    login(user) {
+    openDrawer() {
       this
-        .waitForElementVisible('@loginLayout')
-        .waitForElementVisible('@signInForm')
-        .setValue('@emailInput', user.email)
-        .setValue('@passwordInput', user.password)
-        .waitForElementVisible('@signInButton')
-        .click('@signInButton')
-        .waitForElementVisible('@moderationContainer');
+        .waitForElementVisible('@drawerButton')
+        .click('@drawerButton');
+      this.expect.section('@drawer').to.be.present;
+      return this.section.drawer;
+    },
+    goToStories() {
+      this
+        .click('@storiesNav')
+        .expect.section('@stories').to.be.present;
+      return this.section.stories;
+    },
+    goToCommunity() {
+      this
+        .click('@communityNav')
+        .expect.section('@community').to.be.present;
+      return this.section.community;
+    },
+    logout() {
+      this
+        .waitForElementVisible('@settingsButton')
+        .click('@settingsButton')
+        .waitForElementVisible('@signOutButton')
+        .click('@signOutButton');
     },
   }],
   elements: {
-    'loginLayout': '.talk-admin-login',
-    'signInForm': '.talk-admin-login-sign-in',
-    'emailInput': '.talk-admin-login-sign-in #email',
-    'passwordInput': '.talk-admin-login-sign-in #password',
-    'signInButton': '.talk-admin-login-sign-in-button',
-    'storiesNav': '.talk-admin-nav-stories',
-    'storiesDrawerNav': '.talk-admin-drawer-nav .talk-admin-nav-stories',
-    'storiesSection': '.talk-admin-stories',
-    'communityNav': '.talk-admin-nav-community',
-    'communityDrawerNav': '.talk-admin-drawer-nav .talk-admin-nav-community',
-    'communitySection': '.talk-admin-community',
-    'moderationContainer': '.talk-admin-moderation-container',
     'drawerButton': '.mdl-layout__drawer-button',
     'drawerOverlay': 'div.mdl-layout__obfuscator.is-visible',
+    'storiesNav': '.talk-admin-nav-stories',
+    'communityNav': '.talk-admin-nav-community',
     'settingsButton': '.talk-admin-header-settings-button',
     'signOutButton': '.talk-admin-header-sign-out',
-  }
+  },
+  sections: {
+    moderate: {
+      selector: '.talk-admin-moderation-container',
+    },
+    stories: {
+      selector: '.talk-admin-stories',
+    },
+    community: {
+      selector: '.talk-admin-community',
+      commands: [{
+        url: function() {
+          return `${this.api.launchUrl}/admin/community`;
+        },
+        ready() {
+          return this
+            .waitForElementVisible('body');
+        },
+        goToPeople() {
+          this
+            .click('@peopleNav')
+            .expect.section('@people').to.be.present;
+          return this.section.people;
+        },
+      }],
+      elements: {
+        peopleNav: '.talk-admin-nav-people',
+        flaggedAccountsNav: '.talk-admin-nav-flagged-accounts',
+        flaggedAccountsContainer: '.talk-adnin-community-flagged-accounts',
+        flaggedUser:'.talk-admin-community-flagged-user',
+        flaggedUserApproveButton: '.talk-admin-flagged-user-approve-button',
+        flaggedUserRejectButton: '.talk-admin-flagged-user-reject-button',
+        usernameDialog: '.talk-reject-username-dialog',
+        usernameDialogButtons: '.talk-reject-username-dialog-buttons',
+        usernameDialogSuspend: '.talk-reject-username-dialog-button-k',
+        usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message'
+      },
+      sections: {
+        people: {
+          selector: '.talk-admin-community-people-container',
+          elements: {
+            firstRow: '.talk-admin-community-people-row:first-child',
+            dropdownStatus: '.talk-admin-community-people-dd-status',
+            dropdownRole: '.talk-admin-community-people-dd-role',
+            dropdownStatusActive: '.talk-admin-community-people-dd-status .dd-list-active',
+            optionActive: '.dd-option#ACTIVE',
+            optionBanned: '.dd-option#BANNED',
+          }
+        }
+      }
+    },
+    drawer: {
+      selector: '.talk-admin-drawer-nav',
+      commands: [{
+        goToStories() {
+          this
+            .click('@storiesButton');
+          this.parent.expect.section('@stories').to.be.present;
+          this.close();
+          return this.parent.section.stories;
+        },
+        goToCommunity() {
+          this
+            .click('@communityButton');
+          this.parent.expect.section('@community').to.be.present;
+          this.close();
+          return this.parent.section.stories;
+        },
+        close() {
+          this.parent
+            .click('@drawerOverlay');
+        },
+      }],
+      elements: {
+        'storiesButton': '.talk-admin-drawer-nav .talk-admin-nav-stories',
+        'communityButton': '.talk-admin-drawer-nav .talk-admin-nav-community',
+      },
+    },
+    login: {
+      commands: [{
+        login(user) {
+          this
+            .waitForElementVisible('@signInForm')
+            .setValue('@emailInput', user.email)
+            .setValue('@passwordInput', user.password)
+            .waitForElementVisible('@signInButton')
+            .click('@signInButton');
+          const adminPage = this.api.page.admin();
+          adminPage.expect.section('@moderate').to.be.present;
+          return adminPage.section.moderate;
+        },
+      }],
+      selector: '.talk-admin-login',
+      elements: {
+        'signInForm': '.talk-admin-login-sign-in',
+        'emailInput': '.talk-admin-login-sign-in #email',
+        'passwordInput': '.talk-admin-login-sign-in #password',
+        'signInButton': '.talk-admin-login-sign-in-button',
+      }
+    },
+  },
 };

test/e2e/page_objects/adminCommunity.js

@@ -1,39 +0,0 @@
-module.exports = {
-  commands: [{
-    url: function() {
-      return `${this.api.launchUrl}/admin/community`;
-    },
-    ready() {
-      return this
-        .waitForElementVisible('body');
-    },
-    goToPeople() {
-      this
-        .navigate(`${this.url()}/people`);
-    },
-  }],
-  elements: {
-    container: '.talk-admin-community',
-    flaggedAccountsContainer: '.talk-adnin-community-flagged-accounts',
-    flaggedUser:'.talk-admin-community-flagged-user',
-    flaggedUserApproveButton: '.talk-admin-flagged-user-approve-button',
-    flaggedUserRejectButton: '.talk-admin-flagged-user-reject-button',
-    usernameDialog: '.talk-reject-username-dialog',
-    usernameDialogButtons: '.talk-reject-username-dialog-buttons',
-    usernameDialogSuspend: '.talk-reject-username-dialog-button-k',
-    usernameDialogSuspensionMessage: '.talk-reject-username-dialog-suspension-message'
-  },
-  sections: {
-    people: {
-      selector: '.talk-admin-community-people-container',
-      elements: {
-        firstRow: '.talk-admin-community-people-row:first-child',
-        dropdownStatus: '.talk-admin-community-people-dd-status',
-        dropdownRole: '.talk-admin-community-people-dd-role',
-        dropdownStatusActive: '.talk-admin-community-people-dd-status .dd-list-active',
-        optionActive: '.dd-option#ACTIVE',
-        optionBanned: '.dd-option#BANNED',
-      }
-    }
-  }
-};

test/e2e/page_objects/embedStream.js

@@ -64,8 +64,8 @@ module.exports = {
             this.api.switchWindow(handles[1]);
           });
 
-          const login = this.api.page.login().ready();
-          callback(login);
+          const popup = this.api.page.popup().ready();
+          callback(popup);
 
           // Give a tiny bit of time to let popup close.
           this.api.pause(50);
@@ -80,7 +80,7 @@ module.exports = {
           // Focusing on the Embed Window
           windowHandler.windowHandles((handles) => {
             this.api.switchWindow(handles[0]);
-            this.api.page.embedStream().switchToIframe();
+            this.parent.switchToIframe();
           });
         },
         logout() {

test/e2e/specs/02_admin.js

@@ -8,37 +8,25 @@ module.exports = {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
 
-    adminPage
-      .navigate()
-      .ready()
-      .login(admin);
+    adminPage.navigate();
+    adminPage.expect.section('@login').to.be.present;
+    adminPage.section.login.login(admin);
   },
 
   'Admin goes to Stories': (client) => {
     const adminPage = client.page.admin();
 
     adminPage
-      .waitForElementVisible('@drawerButton')
-      .click('@drawerButton')
-      .waitForElementVisible('@storiesDrawerNav')
-      .click('@storiesDrawerNav')
-      .waitForElementVisible('@drawerOverlay')
-      .click('@drawerOverlay')
-      .waitForElementVisible('@storiesSection');
-
+      .openDrawer()
+        .goToStories();
   },
 
   'Admin goes to Community': (client) => {
     const adminPage = client.page.admin();
 
     adminPage
-      .waitForElementVisible('@drawerButton')
-      .click('@drawerButton')
-      .waitForElementVisible('@communityDrawerNav')
-      .click('@communityDrawerNav')
-      .waitForElementVisible('@drawerOverlay')
-      .click('@drawerOverlay')
-      .waitForElementVisible('@communitySection');
+      .openDrawer()
+        .goToCommunity();
   },
 
   after: (client) => {

test/e2e/specs/03_embedStream.js

@@ -21,8 +21,8 @@ module.exports = {
       .ready();
 
     comments
-      .openLoginPopup((login) => {
-        login.register(user);
+      .openLoginPopup((popup) => {
+        popup.register(user);
       });
   },
   'user posts a comment': (client) => {

test/e2e/specs/04_userStatus.js

@@ -1,11 +1,16 @@
 module.exports = {
+   beforeEach: (client) => {
+    client.resizeWindow(1600, 1200);
+  },
   'admin logs in': (client) => {
     const adminPage = client.page.admin();
     const {testData: {admin}} = client.globals;
 
     adminPage
       .navigate()
-      .ready()
+      .expect.section('@login').to.be.present;
+
+    adminPage.section.login
       .login(admin);
   },
   'admin flags user\'s username as offensive': (client) => {
@@ -32,25 +37,26 @@ module.exports = {
       .click('@continueButton');
   },
   'admin goes to Reported Usernames': (client) => {
-    const community = client.page.adminCommunity();
+    const adminPage = client.page.admin();
+
+    const community = adminPage
+      .navigate()
+      .ready()
+      .goToCommunity();
 
     community
-      .navigate();
-
-    community
-      .waitForElementVisible('@container')
       .waitForElementVisible('@flaggedAccountsContainer')
       .waitForElementVisible('@flaggedUser');
   },
   'admin rejects the user flag': (client) => {
-    const community = client.page.adminCommunity();
+    const community = client.page.admin().section.community;
 
     community
       .waitForElementVisible('@flaggedUserRejectButton')
       .click('@flaggedUserRejectButton');
   },
   'admin suspends the user': (client) => {
-    const community = client.page.adminCommunity();
+    const community = client.page.admin().section.community;
 
     community
       .waitForElementVisible('@usernameDialog')
@@ -62,13 +68,7 @@ module.exports = {
       .waitForElementNotPresent('@flaggedUser');
   },
   'admin logs out': (client) => {
-    const admin = client.page.admin();
-
-    admin
-      .waitForElementVisible('@settingsButton')
-      .click('@settingsButton')
-      .waitForElementVisible('@signOutButton')
-      .click('@signOutButton');
+    client.page.admin().logout();
   },
   'user logs in': (client) => {
     const {testData: {user}} = client.globals;

test/e2e/specs/05_banUser.js

@@ -5,7 +5,9 @@ module.exports = {
 
     adminPage
       .navigate()
-      .ready()
+      .expect.section('@login').to.be.present;
+
+    adminPage.section.login
       .login(admin);
   },
   'navigate to the embed stream': (client) => {
@@ -65,19 +67,24 @@ module.exports = {
 
     adminPage
       .navigate()
-      .ready()
+      .expect.section('@login').to.be.present;
+
+    adminPage.section.login
       .login(admin);
   },
   'admin goes to community': (client) => {
-    const community = client.page.adminCommunity();
+    const adminPage = client.page.admin();
 
-    community
-      .goToPeople();
+    adminPage
+      .goToCommunity()
+        .goToPeople();
   },
   'admin removes ban from user': (client) => {
-    const modSection = client.page.adminCommunity().section.people;
+    const people = client.page.admin()
+      .section.community
+      .section.people;
 
-    modSection
+    people
       .waitForElementVisible('@firstRow')
       .waitForElementVisible('@dropdownStatus')
       .click('@dropdownStatus')