From 26911ed6cc55148a6136e860a6ab306c5edf8f46 Mon Sep 17 00:00:00 2001
From: Pavlo Strunkin <pashidlos@gmail.com>
Date: Fri, 18 Aug 2023 17:49:00 +0300
Subject: [PATCH] UserList. fix role update

---
 integration_tests/pages/UserListPage.ts | 15 ++++++++++++++-
 integration_tests/test/userList.spec.ts | 22 ++++++++++++++++++++++
 playwright.config.ts                    |  4 ----
 src/components/UserList/index.tsx       | 19 ++++++++++---------
 src/services/users.service.ts           |  6 +++++-
 5 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/integration_tests/pages/UserListPage.ts b/integration_tests/pages/UserListPage.ts
index 1c2e235a..cb9dad6d 100644
--- a/integration_tests/pages/UserListPage.ts
+++ b/integration_tests/pages/UserListPage.ts
@@ -1,3 +1,16 @@
+import { Locator } from "@playwright/test";
 import { BasePage } from "./BasePage";
+import { type Role } from "~client/types";
 
-export class UserListPage extends BasePage {}
+export class UserListPage extends BasePage {
+  private getRow(userId: string): Locator {
+    return this.page.locator(`[data-id='${userId}']`);
+  }
+
+  async changeRole(userId: string, role: keyof typeof Role) {
+    await this.getRow(userId).locator("[data-field='role']").dblclick();
+    await this.page.locator(`[data-value='${role}']`).click();
+
+    return this.page.keyboard.press("Enter");
+  }
+}
diff --git a/integration_tests/test/userList.spec.ts b/integration_tests/test/userList.spec.ts
index f4d7352e..0da5cf63 100644
--- a/integration_tests/test/userList.spec.ts
+++ b/integration_tests/test/userList.spec.ts
@@ -1,3 +1,4 @@
+import { expect } from "@playwright/test";
 import { test } from "fixtures";
 import { mockGetProjects, mockGetUsers } from "utils/mocks";
 import {
@@ -6,6 +7,7 @@ import {
   TEST_PROJECT,
   TEST_USER,
 } from "~client/_test/test.data.helper";
+import { Role, User } from "~client/types";
 
 test.beforeEach(async ({ page }) => {
   await mockGetProjects(page, [TEST_PROJECT]);
@@ -16,3 +18,23 @@ test.beforeEach(async ({ page }) => {
 test("renders", async ({ userListPage, page, vrt }) => {
   await vrt.trackPage(page, "User list page");
 });
+
+const assignRoleCases: [User, keyof typeof Role][] = [
+  [EDITOR_USER, "admin"],
+  [EDITOR_USER, "guest"],
+  [GUEST_USER, "editor"],
+];
+
+for (const [user, role] of assignRoleCases) {
+  test(`can assign role ${role}`, async ({ userListPage, page }) => {
+    const [request] = await Promise.all([
+      page.waitForRequest("**/assignRole"),
+      userListPage.changeRole(user.id, role),
+    ]);
+
+    expect(request.postDataJSON()).toEqual({
+      id: user.id,
+      role,
+    });
+  });
+}
diff --git a/playwright.config.ts b/playwright.config.ts
index d2ded8a2..f4e3b673 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -10,7 +10,6 @@ export default defineConfig({
     command: "npm run start",
     url: baseURL,
     reuseExistingServer: true,
-    timeout: 300 * 1000,
   },
   use: {
     headless: true,
@@ -20,8 +19,5 @@ export default defineConfig({
     trace: "retry-with-trace",
   },
   retries: process.env.CI ? 1 : 0,
-  expect: {
-    timeout: 10 * 1000,
-  },
   forbidOnly: !!process.env.CI,
 });
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index 7cab1b90..81100b5c 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -10,7 +10,7 @@ import {
 } from "@mui/x-data-grid";
 import { ActionButtons } from "./ActionButtons";
 import { usersService } from "../../services";
-import { Role } from "../../types";
+import { Role, User } from "../../types";
 import { useSnackbar } from "notistack";
 import { useUserDispatch, useUserState } from "../../contexts";
 
@@ -61,15 +61,15 @@ const UserList = () => {
       userDispatch({
         type: "getAll",
         payload: users,
-      }),
+      })
     );
   }, [userDispatch]);
 
-  const handleEditCellChangeCommitted = React.useCallback(
-    ({ id, field, value }) => {
-      if (field === "role") {
+  const processRowUpdate = React.useCallback(
+    (newState: User, oldState: User) => {
+      if (newState.role !== oldState.role) {
         usersService
-          .assignRole(id, value as Role)
+          .assignRole(oldState.id, newState.role as Role)
           .then(() => {
             enqueueSnackbar("Updated", {
               variant: "success",
@@ -78,11 +78,12 @@ const UserList = () => {
           .catch((err) =>
             enqueueSnackbar(err, {
               variant: "error",
-            }),
+            })
           );
       }
+      return newState;
     },
-    [enqueueSnackbar],
+    [enqueueSnackbar]
   );
 
   const apiRef = useGridApiRef();
@@ -101,7 +102,7 @@ const UserList = () => {
       slots={{
         toolbar: DataGridCustomToolbar,
       }}
-      onCellEditStop={handleEditCellChangeCommitted}
+      processRowUpdate={processRowUpdate}
     />
   );
 };
diff --git a/src/services/users.service.ts b/src/services/users.service.ts
index dfe2959b..3afa2f97 100644
--- a/src/services/users.service.ts
+++ b/src/services/users.service.ts
@@ -59,7 +59,11 @@ function register(
     });
 }
 
-function update({ firstName, lastName, email }): Promise<User> {
+function update({
+  firstName,
+  lastName,
+  email,
+}: Pick<User, "firstName" | "lastName" | "email">): Promise<User> {
   const requestOptions = {
     method: "PUT",
     headers: {