Add e2e tests

packages/web-pkg/src/components/ItemFilter.vue

@@ -23,6 +23,7 @@
                 class="item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1 oc-p-xs"
                 justify-content="left"
                 appearance="raw"
+                :data-test-value="item[displayNameAttribute]"
                 @click="toggleItemSelection(item)"
               >
                 <div>

packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap

@@ -64,7 +64,7 @@ exports[`ItemFilter renders all items 1`] = `
         <div>
           <ul class="oc-list oc-my-rm oc-mx-rm item-filter-list">
             <li class="oc-my-xs">
-              <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1 oc-p-xs" type="button">
+              <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1 oc-p-xs" data-test-value="Albert Einstein" type="button">
                 <!-- @slot Content of the button -->
                 <div>
                   <oc-checkbox-stub class="item-filter-checkbox" disabled="false" hidelabel="true" id="oc-checkbox-3" label="Toggle selection" modelvalue="false" outline="false" size="large"></oc-checkbox-stub>
@@ -74,7 +74,7 @@ exports[`ItemFilter renders all items 1`] = `
               </button>
             </li>
             <li class="oc-my-xs">
-              <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1 oc-p-xs" type="button">
+              <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1 oc-p-xs" data-test-value="Marie Curie" type="button">
                 <!-- @slot Content of the button -->
                 <div>
                   <oc-checkbox-stub class="item-filter-checkbox" disabled="false" hidelabel="true" id="oc-checkbox-4" label="Toggle selection" modelvalue="false" outline="false" size="large"></oc-checkbox-stub>

tests/e2e/cucumber/features/smoke/admin-settings/users.ocis.feature

@@ -31,7 +31,7 @@ Feature: spaces management
     And "Admin" navigates to the users management page
     When "Admin" changes the quota of the user "Alice" to "500"
     Then "Alice" should have quota "500"
-    When "Admin" changes the quota using a batch action to "20" for users: 
+    When "Admin" changes the quota using a batch action to "20" for users:
       | id    |
       | Alice |
       | Brian |
@@ -41,3 +41,43 @@ Feature: spaces management
     And "Alice" logs out
     And "Admin" logs out
 
+
+  Scenario: user group assignments can be handled via batch actions
+    Given "Admin" creates following users
+      | id    |
+      | Alice |
+      | Brian |
+      | Carol |
+    And "Admin" creates following groups
+      | id      |
+      | sales   |
+      | finance |
+    When "Admin" logs in
+    And "Admin" opens the "admin-settings" app
+    And "Admin" navigates to the users management page
+    And "Admin" adds the following users to the groups "sales department,finance department" using the batch actions
+      | user  |
+      | Alice |
+      | Brian |
+      | Carol |
+    When "Admin" sets the following filter
+      | filter | values                              |
+      | groups | sales department,finance department |
+    Then "Admin" should see the following users
+      | user  |
+      | Alice |
+      | Brian |
+      | Carol |
+    And "Admin" removes the following users from the groups "sales department,finance department" using the batch actions
+      | user  |
+      | Alice |
+      | Brian |
+    When "Admin" reloads the page
+    Then "Admin" should see the following users
+      | user  |
+      | Carol |
+    Then "Admin" should not see the following users
+      | user  |
+      | Alice |
+      | Brian |
+    And "Admin" logs out

tests/e2e/cucumber/steps/ui/adminSettings.ts

@@ -173,3 +173,72 @@ When(
     await usersObject.changeQuotaUsingBatchAction({ value })
   }
 )
+
+Then(
+  /^"([^"]*)" (should see|should not see) the following user(s)$/,
+  async function (
+    this: World,
+    stepUser: string,
+    action: string,
+    _: string,
+    stepTable: DataTable
+  ): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const usersObject = new objects.applicationAdminSettings.Users({ page })
+    const users = await usersObject.getDisplayedUsers()
+    for (const { user } of stepTable.hashes()) {
+      switch (action) {
+        case 'should see':
+          expect(users).toContain(usersObject.getUUID({ key: user }))
+          break
+        case 'should not see':
+          expect(users).not.toContain(usersObject.getUUID({ key: user }))
+          break
+        default:
+          throw new Error(`${action} not implemented`)
+      }
+    }
+  }
+)
+
+Then(
+  '{string} sets the following filter(s)',
+  async function (this: World, stepUser: string, stepTable: DataTable): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const usersObject = new objects.applicationAdminSettings.Users({ page })
+
+    for (const { filter, values } of stepTable.hashes()) {
+      await usersObject.filter({ filter, values: values.split(',') })
+    }
+  }
+)
+
+When(
+  /^"([^"]*)" (adds|removes) the following users (to|from) the groups "([^"]*)" using the batch actions$/,
+  async function (
+    this: World,
+    stepUser: string,
+    action: string,
+    _: string,
+    groups: string,
+    stepTable: DataTable
+  ): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const usersObject = new objects.applicationAdminSettings.Users({ page })
+
+    for (const { user } of stepTable.hashes()) {
+      await usersObject.select({ key: user })
+    }
+
+    switch (action) {
+      case 'adds':
+        await usersObject.addToGroups({ groups: groups.split(',') })
+        break
+      case 'removes':
+        await usersObject.removeFromGroups({ groups: groups.split(',') })
+        break
+      default:
+        throw new Error(`${action} not implemented`)
+    }
+  }
+)

tests/e2e/cucumber/steps/ui/application.ts

@@ -12,6 +12,12 @@ When(
   }
 )
 
+When('{string} reloads the page', async function (this: World, stepUser: string): Promise<void> {
+  const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+  const applicationObject = new objects.runtime.Application({ page })
+  await applicationObject.reloadPage()
+})
+
 Then(
   /^"([^"]*)" should have quota "([^"]*)"$/,
   async function (this: World, stepUser: string, quota: string): Promise<void> {

tests/e2e/support/objects/app-admin-settings/users/actions.ts

@@ -4,12 +4,20 @@ import util from 'util'
 const userIdSelector = `[data-item-id="%s"] .users-table-btn-action-dropdown`
 const editActionBtn = `.oc-users-actions-edit-trigger`
 const loginDropDown = '.vs__dropdown-menu'
-const loginValueDropDownOption = '.vs__dropdown-option'
+const dropdownOption = '.vs__dropdown-option'
 const loginInput = '#login-input'
-const actionConfirmButton = '.compare-save-dialog-confirm-btn'
+const compareDialogConfirm = '.compare-save-dialog-confirm-btn'
+const addToGroupsBatchAction = '.oc-users-actions-add-to-groups-trigger'
+const removeFromGroupsBatchAction = '.oc-users-actions-remove-from-groups-trigger'
+const groupsModalInput = '.oc-modal .vs__search'
+const actionConfirmButton = '.oc-modal-body-actions-confirm'
+const userTrSelector = 'tr'
+const userFilter = '.item-filter-%s'
+const userFilterOption = '//ul[contains(@class, "item-filter-list")]//button[@data-test-value="%s"]'
+const usersTable = '.users-table'
 const quotaInput = '#quota-select-form .vs__search'
 const quotaValueDropDown = `.vs__dropdown-option :text-is("%s")`
-const userCheckboxSelector = `//*[@data-test-user-name="%s"]//ancestor::tr//input`
+const userCheckboxSelector = `[data-item-id="%s"]:not(.oc-table-highlighted) input[type=checkbox]`
 const editQuotaBtn = '.oc-files-actions-edit-quota-trigger'
 const quotaInputBatchAction = '#quota-select-batch-action-form .vs__search'
 const confirmChangeQuotaSeveralSpacesBtn = '.oc-modal-body-actions-confirm'
@@ -29,7 +37,7 @@ export const changeAccountEnabled = async (args: {
   await page.waitForSelector(loginDropDown)
 
   await page
-    .locator(loginValueDropDownOption)
+    .locator(dropdownOption)
     .getByText(value === false ? 'Forbidden' : 'Allowed')
     .click()
 
@@ -40,7 +48,7 @@ export const changeAccountEnabled = async (args: {
         resp.status() === 200 &&
         resp.request().method() === 'PATCH'
     ),
-    await page.locator(actionConfirmButton).click()
+    await page.locator(compareDialogConfirm).click()
   ])
 }
 
@@ -62,20 +70,10 @@ export const changeQuota = async (args: {
         resp.status() === 200 &&
         resp.request().method() === 'PATCH'
     ),
-    await page.locator(actionConfirmButton).click()
+    await page.locator(compareDialogConfirm).click()
   ])
 }
 
-export const selectUser = async (args: { page: Page; displayName: string }): Promise<void> => {
-  const { page, displayName } = args
-  const checkbox = await page.locator(util.format(userCheckboxSelector, displayName))
-  const checkBoxAlreadySelected = await checkbox.isChecked()
-  if (checkBoxAlreadySelected) {
-    return
-  }
-  await checkbox.click()
-}
-
 export const changeQuotaUsingBatchAction = async (args: {
   page: Page
   value: string
@@ -90,3 +88,69 @@ export const changeQuotaUsingBatchAction = async (args: {
     page.locator(confirmChangeQuotaSeveralSpacesBtn).click()
   ])
 }
+
+export const getDisplayedUsers = async (args: { page: Page }): Promise<string[]> => {
+  const { page } = args
+  const users = []
+  await page.waitForSelector(usersTable)
+  const result = page.locator(userTrSelector)
+
+  const count = await result.count()
+  for (let i = 0; i < count; i++) {
+    users.push(await result.nth(i).getAttribute('data-item-id'))
+  }
+
+  return users
+}
+
+export const selectUser = async (args: { page: Page; uuid: string }): Promise<void> => {
+  const { page, uuid } = args
+  const checkbox = await page.locator(util.format(userCheckboxSelector, uuid))
+  const checkBoxAlreadySelected = !(await checkbox.isVisible())
+  if (checkBoxAlreadySelected) {
+    return
+  }
+  await checkbox.click()
+}
+
+export const addSelectedUsersToGroups = async (args: {
+  page: Page
+  groups: string[]
+}): Promise<void> => {
+  const { page, groups } = args
+  await page.locator(addToGroupsBatchAction).click()
+  for (const group of groups) {
+    await page.locator(groupsModalInput).click()
+    await page.locator(dropdownOption).getByText(group).click()
+  }
+  await page.locator(actionConfirmButton).click()
+}
+
+export const removeSelectedUsersFromGroups = async (args: {
+  page: Page
+  groups: string[]
+}): Promise<void> => {
+  const { page, groups } = args
+  await page.locator(removeFromGroupsBatchAction).click()
+  for (const group of groups) {
+    await page.locator(groupsModalInput).click()
+    await page.locator(dropdownOption).getByText(group).click()
+  }
+  await page.locator(actionConfirmButton).click()
+}
+
+export const filterUsers = async (args: {
+  page: Page
+  filter: string
+  values: string[]
+}): Promise<void> => {
+  const { page, filter, values } = args
+  await page.locator(util.format(userFilter, filter)).click()
+  for (const value of values) {
+    await page.locator(util.format(userFilterOption, value)).click()
+    await page.waitForResponse(
+      (resp) =>
+        resp.url().includes('/users') && resp.status() === 200 && resp.request().method() === 'GET'
+    )
+  }
+}

tests/e2e/support/objects/app-admin-settings/users/index.ts

@@ -1,10 +1,14 @@
 import { Page } from 'playwright'
 import { UsersEnvironment } from '../../../environment'
 import {
+  addSelectedUsersToGroups,
   changeAccountEnabled,
-  selectUser,
   changeQuota,
-  changeQuotaUsingBatchAction
+  changeQuotaUsingBatchAction,
+  filterUsers,
+  getDisplayedUsers,
+  removeSelectedUsersFromGroups,
+  selectUser
 } from './actions'
 
 export class Users {
@@ -14,6 +18,10 @@ export class Users {
     this.#usersEnvironment = new UsersEnvironment()
     this.#page = page
   }
+  getUUID({ key }: { key: string }) {
+    const { uuid } = this.#usersEnvironment.getUser({ key })
+    return uuid
+  }
   async allowLogin({ key }: { key: string }): Promise<void> {
     const { uuid } = this.#usersEnvironment.getUser({ key })
     await changeAccountEnabled({ uuid, value: true, page: this.#page })
@@ -27,10 +35,26 @@ export class Users {
     await changeQuota({ uuid, value, page: this.#page })
   }
   async selectUser({ key }: { key: string }): Promise<void> {
-    const { displayName } = this.#usersEnvironment.getUser({ key })
-    await selectUser({ displayName, page: this.#page })
+    const { uuid } = this.#usersEnvironment.getUser({ key })
+    await selectUser({ uuid, page: this.#page })
   }
   async changeQuotaUsingBatchAction({ value }: { value: string }): Promise<void> {
     await changeQuotaUsingBatchAction({ value, page: this.#page })
   }
+  getDisplayedUsers(): Promise<string[]> {
+    return getDisplayedUsers({ page: this.#page })
+  }
+  async select({ key }: { key: string }): Promise<void> {
+    const { uuid } = this.#usersEnvironment.getUser({ key })
+    await selectUser({ uuid, page: this.#page })
+  }
+  async addToGroups({ groups }: { groups: string[] }): Promise<void> {
+    await addSelectedUsersToGroups({ page: this.#page, groups })
+  }
+  async removeFromGroups({ groups }: { groups: string[] }): Promise<void> {
+    await removeSelectedUsersFromGroups({ page: this.#page, groups })
+  }
+  async filter({ filter, values }: { filter: string; values: string[] }): Promise<void> {
+    await filterUsers({ page: this.#page, filter, values })
+  }
 }

tests/e2e/support/objects/runtime/application.ts

@@ -10,6 +10,10 @@ export class Application {
     this.#page = page
   }
 
+  async reloadPage(): Promise<void> {
+    await this.#page.reload()
+  }
+
   async open({ name }: { name: string }): Promise<void> {
     await this.#page.locator(appSwitcherButton).click()
     await this.#page.locator(util.format(appSelector, name, name)).click()