Add acceptance tests

ui/components/App.vue

@@ -5,7 +5,7 @@
       <oc-grid v-if="selectedAccountsAmount > 0" key="selected-accounts-info" gutter="small" class="uk-flex-middle">
         <span v-text="selectionInfoText" />
         <div>
-          <oc-action-drop>
+          <oc-action-drop class="accounts-actions-dropdown">
             <template v-slot:button>
               <span class="uk-margin-xsmall-right" v-text="$gettext('Actions')" />
               <oc-icon name="expand_more" />
@@ -14,6 +14,7 @@
                 <oc-button
                   v-for="(action, index) in actions"
                   :key="action.label"
+                  :id="action.id"
                   variation="raw"
                   role="menuitem"
                   :class="{ 'uk-margin-small-bottom': index + 1 !== actions.length }"
@@ -65,6 +66,7 @@ export default {
 
       if (isAnyAccountDisabled) {
         actions.push({
+          id: 'accounts-actions-dropdown-action-enable',
           label: this.$gettext('Enable'),
           handler: this.enableAccounts
         })
@@ -72,6 +74,7 @@ export default {
 
       if (isAnyAccountEnabled) {
         actions.push({
+          id: 'accounts-actions-dropdown-action-disable',
           label: this.$gettext('Disable'),
           handler: this.disableAccounts
         })

ui/components/accounts/AccountsListRow.vue

@@ -42,8 +42,22 @@
     <oc-table-cell v-text="account.uidNumber || '-'" />
     <oc-table-cell v-text="account.gidNumber || '-'" />
     <oc-table-cell class="uk-text-center">
-      <oc-icon v-if="account.accountEnabled" key="account-icon-enabled" name="ready" variation="success" :aria-label="$gettext('Account is enabled')" />
-      <oc-icon v-else name="deprecated" key="account-icon-disabled" variation="danger" :aria-label="$gettext('Account is disabled')" />
+      <oc-icon
+        v-if="account.accountEnabled"
+        key="account-icon-enabled"
+        name="ready"
+        variation="success"
+        :aria-label="$gettext('Account is enabled')"
+        class="accounts-status-indicator-enabled"
+      />
+      <oc-icon
+        v-else
+        name="deprecated"
+        key="account-icon-disabled"
+        variation="danger"
+        :aria-label="$gettext('Account is disabled')"
+        class="accounts-status-indicator-disabled"
+      />
     </oc-table-cell>
   </oc-table-row>
 </template>

ui/tests/acceptance/features/accounts.feature

@@ -32,3 +32,30 @@ Feature: Accounts
 		And user "Einstein" logs in using the webUI
 		And the user browses to the accounts page
 		Then the user should not be able to see the accounts list on the WebUI
+
+	# We want to separate this into own scenarios but because we do not have clean env for each scenario yet
+	# we are resetting it manually by combining them into one
+	Scenario: disable/enable account
+		Given user "Moss" has logged in using the webUI
+		When the user browses to the accounts page
+		Then user "einstein" should be displayed in the accounts list on the WebUI
+		When the user disables user "einstein" using the WebUI
+		Then the status indicator of user "einstein" should be "disabled" on the WebUI
+		# And user "einstein" should not be able to log in
+		When the user enables user "einstein" using the WebUI
+		Then the status indicator of user "einstein" should be "enabled" on the WebUI
+		# And user "einstein" should be able to log in
+
+	Scenario: disable/enable multiple accounts
+		Given user "Moss" has logged in using the webUI
+		When the user browses to the accounts page
+		Then user "einstein" should be displayed in the accounts list on the WebUI
+		And user "marie" should be displayed in the accounts list on the WebUI
+		When the user disables users "einstein,marie" using the WebUI
+		Then the status indicator of users "einstein,marie" should be "disabled" on the WebUI
+		# And user "einstein" should not be able to log in
+		# And user "marie" should not be able to log in
+		When the user enables users "einstein,marie" using the WebUI
+		Then the status indicator of user "einstein,marie" should be "enabled" on the WebUI
+		# And user "einstein" should be able to log in
+		# And user "marie" should be able to log in

ui/tests/acceptance/pageobjects/accountsPage.js

@@ -40,6 +40,42 @@ module.exports = {
         util.format(this.elements.currentRole.selector, role)
 
       return this.useXpath().expect.element(roleSelector).to.be.visible
+    },
+
+    toggleUserStatus: function (usernames, status) {
+      usernames = usernames.split(',')
+      const actionSelector = status === 'enabled' ? this.elements.enableAction : this.elements.disableAction
+
+      // Select users
+      for (const username of usernames) {
+        const checkboxSelector =
+          util.format(this.elements.rowByUsername.selector, username) +
+          this.elements.rowCheckbox.selector
+
+        this.useXpath().click(checkboxSelector)
+      }
+
+      return this
+        .waitForElementVisible('@actionsDropdownTrigger')
+        .click('@actionsDropdownTrigger')
+        .useCss()
+        .waitForElementVisible(actionSelector)
+        .click(actionSelector)
+        .useXpath()
+    },
+
+    checkUsersStatus: function (usernames, status) {
+      usernames = usernames.split(',')
+
+      for (const username of usernames) {
+        const indicatorSelector =
+          util.format(this.elements.rowByUsername.selector, username) +
+          util.format(this.elements.statusIndicator.selector, status)
+
+        this.useXpath().waitForElementVisible(indicatorSelector)
+      }
+
+      return this
     }
   },
 
@@ -75,6 +111,24 @@ module.exports = {
     loadingAccountsList: {
       selector: '//div[contains(@class, "oc-loader")]',
       locateStrategy: 'xpath'
+    },
+    rowCheckbox: {
+      selector: '//input[@class="oc-checkbox"]',
+      locateStrategy: 'xpath'
+    },
+    actionsDropdownTrigger: {
+      selector: '//div[contains(@class, "accounts-actions-dropdown")]//button[normalize-space()="Actions"]',
+      locateStrategy: 'xpath'
+    },
+    disableAction: {
+      selector: '#accounts-actions-dropdown-action-disable'
+    },
+    enableAction: {
+      selector: '#accounts-actions-dropdown-action-enable'
+    },
+    statusIndicator: {
+      selector: '//span[contains(@class, "accounts-status-indicator-%s")]',
+      locateStrategy: 'xpath'
     }
   }
 }

ui/tests/acceptance/stepDefinitions/accountsContext.js

@@ -30,3 +30,15 @@ Then('the user should not be able to see the accounts list on the WebUI', async
     .waitForElementVisible('@loadingAccountsList')
     .waitForElementNotPresent('@accountsListTable')
 })
+
+When('the user disables user/users {string} using the WebUI', function (usernames) {
+  return client.page.accountsPage().toggleUserStatus(usernames, 'disabled')
+})
+
+When('the user enables user/users {string} using the WebUI', function (usernames) {
+  return client.page.accountsPage().toggleUserStatus(usernames, 'enabled')
+})
+
+Then('the status indicator of user/users {string} should be {string} on the WebUI', function (usernames, status) {
+  return client.page.accountsPage().checkUsersStatus(usernames, status)
+})