From ea1c27000b676205791705afcfaab554715552d1 Mon Sep 17 00:00:00 2001
From: "hoeppner.dataport" <marcus.hoeppner@dataport.de>
Date: Tue, 10 Dec 2024 17:54:55 +0100
Subject: [PATCH 1/8] initial commit

---
 .../data/room/roomMembers/roomMembers.composable.ts  |  3 +++
 .../feature/room/RoomMembers/MembersTable.vue        |  4 +++-
 src/modules/page/room/RoomMembers.page.vue           | 12 +++++++++++-
 src/serverApi/v3/api.ts                              | 10 ++++++++++
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/modules/data/room/roomMembers/roomMembers.composable.ts b/src/modules/data/room/roomMembers/roomMembers.composable.ts
index b5fceb22f1..76429f4e4b 100644
--- a/src/modules/data/room/roomMembers/roomMembers.composable.ts
+++ b/src/modules/data/room/roomMembers/roomMembers.composable.ts
@@ -27,7 +27,10 @@ export const useRoomMembers = (roomId: string) => {
 	};
 
 	const userRoles: Record<string, string> = {
+		[RoleName.Roomowner]: t("common.labels.teacher"),
+		[RoleName.Roomadmin]: t("common.labels.teacher"),
 		[RoleName.Roomeditor]: t("common.labels.teacher"),
+		[RoleName.Roomviewer]: t("common.labels.teacher"),
 	};
 
 	const roomApi = RoomApiFactory(undefined, "/v3", $axios);
diff --git a/src/modules/feature/room/RoomMembers/MembersTable.vue b/src/modules/feature/room/RoomMembers/MembersTable.vue
index d8ba934427..8fc94ec028 100644
--- a/src/modules/feature/room/RoomMembers/MembersTable.vue
+++ b/src/modules/feature/room/RoomMembers/MembersTable.vue
@@ -56,6 +56,7 @@
 		item-value="userId"
 		mobile-breakpoint="sm"
 		:items="memberList"
+		item-selectable="isSelectable"
 		:headers="tableHeader"
 		:items-per-page-options="[5, 10, 25, 50, 100]"
 		:items-per-page="50"
@@ -69,6 +70,7 @@
 		<template #[`item.actions`]="{ item, index }">
 			<v-btn
 				:data-testid="`remove-member-${index}`"
+				v-if="item.roleName !== RoleName.Roomowner"
 				size="x-small"
 				variant="text"
 				:aria-label="getRemoveAriaLabel(item)"
@@ -90,7 +92,7 @@ import {
 	mdiMagnify,
 	mdiTrashCanOutline,
 } from "@icons/material";
-import { RoomMemberResponse } from "@/serverApi/v3";
+import { RoleName, RoomMemberResponse } from "@/serverApi/v3";
 import {
 	ConfirmationDialog,
 	useConfirmationDialog,
diff --git a/src/modules/page/room/RoomMembers.page.vue b/src/modules/page/room/RoomMembers.page.vue
index 25a31f1ed1..1abf776444 100644
--- a/src/modules/page/room/RoomMembers.page.vue
+++ b/src/modules/page/room/RoomMembers.page.vue
@@ -65,6 +65,8 @@ import { MembersTable, AddMembers } from "@feature-room";
 import { RoleName, RoomMemberResponse } from "@/serverApi/v3";
 import { useDisplay } from "vuetify";
 
+import { authModule } from "@/store/store-accessor";
+
 const { fetchRoom } = useRoomDetailsStore();
 const { t } = useI18n();
 const route = useRoute();
@@ -83,7 +85,15 @@ const {
 	getSchools,
 	removeMembers,
 } = useRoomMembers(roomId);
-const memberList: Ref<RoomMemberResponse[]> = ref(roomMembers);
+const currentUserId = authModule.getUser?.id ?? "";
+const memberList: Ref<RoomMemberResponse[]> = computed(() => {
+	return roomMembers.value.map((member) => ({
+		...member,
+		isSelectable: !(
+			member.userId === currentUserId || member.roleName === RoleName.Roomowner
+		),
+	}));
+});
 const pageTitle = computed(() =>
 	buildPageTitle(`${room.value?.name} - ${t("pages.rooms.members.manage")}`)
 );
diff --git a/src/serverApi/v3/api.ts b/src/serverApi/v3/api.ts
index 4366d4fe13..9a138f178f 100644
--- a/src/serverApi/v3/api.ts
+++ b/src/serverApi/v3/api.ts
@@ -361,6 +361,9 @@ export enum AuthorizationContextParamsRequiredPermissionsEnum {
     RoomEdit = 'ROOM_EDIT',
     RoomView = 'ROOM_VIEW',
     RoomDelete = 'ROOM_DELETE',
+    RoomMembersAdd = 'ROOM_MEMBERS_ADD',
+    RoomMembersRemove = 'ROOM_MEMBERS_REMOVE',
+    RoomChangeOwner = 'ROOM_CHANGE_OWNER',
     SchoolChatManage = 'SCHOOL_CHAT_MANAGE',
     SchoolCreate = 'SCHOOL_CREATE',
     SchoolEdit = 'SCHOOL_EDIT',
@@ -6887,6 +6890,9 @@ export enum Permission {
     RoomEdit = 'ROOM_EDIT',
     RoomView = 'ROOM_VIEW',
     RoomDelete = 'ROOM_DELETE',
+    RoomMembersAdd = 'ROOM_MEMBERS_ADD',
+    RoomMembersRemove = 'ROOM_MEMBERS_REMOVE',
+    RoomChangeOwner = 'ROOM_CHANGE_OWNER',
     SchoolChatManage = 'SCHOOL_CHAT_MANAGE',
     SchoolCreate = 'SCHOOL_CREATE',
     SchoolEdit = 'SCHOOL_EDIT',
@@ -7309,6 +7315,8 @@ export enum RoleName {
     Helpdesk = 'helpdesk',
     Roomviewer = 'roomviewer',
     Roomeditor = 'roomeditor',
+    Roomadmin = 'roomadmin',
+    Roomowner = 'roomowner',
     Student = 'student',
     Superhero = 'superhero',
     Teacher = 'teacher',
@@ -9480,6 +9488,8 @@ export interface UserIdAndRole {
     * @enum {string}
     */
 export enum UserIdAndRoleRoleNameEnum {
+    Roomowner = 'roomowner',
+    Roomadmin = 'roomadmin',
     Roomeditor = 'roomeditor',
     Roomviewer = 'roomviewer'
 }

From abc7a98adaf9c912cfca73a91ee0d7fde92a68fe Mon Sep 17 00:00:00 2001
From: "hoeppner.dataport" <marcus.hoeppner@dataport.de>
Date: Wed, 11 Dec 2024 12:30:39 +0100
Subject: [PATCH 2/8] adjust color of disabled checkboxes

---
 src/modules/feature/room/RoomMembers/MembersTable.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/modules/feature/room/RoomMembers/MembersTable.vue b/src/modules/feature/room/RoomMembers/MembersTable.vue
index 8fc94ec028..5123543cb4 100644
--- a/src/modules/feature/room/RoomMembers/MembersTable.vue
+++ b/src/modules/feature/room/RoomMembers/MembersTable.vue
@@ -191,6 +191,10 @@ const tableHeader = [
 	font-weight: bold;
 }
 
+:deep(.v-data-table__td .v-selection-control--disabled i) {
+	color: rgba(var(--v-theme-on-surface), 0.6);
+}
+
 .table-title-header {
 	min-height: 50px;
 }

From 3aa8f32e9acb607325cc2cac71d15c3cd9272893 Mon Sep 17 00:00:00 2001
From: "hoeppner.dataport" <marcus.hoeppner@dataport.de>
Date: Wed, 11 Dec 2024 16:45:58 +0100
Subject: [PATCH 3/8] use existing variable for disabled opacity for checkbox

---
 src/modules/feature/room/RoomMembers/MembersTable.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/feature/room/RoomMembers/MembersTable.vue b/src/modules/feature/room/RoomMembers/MembersTable.vue
index 5123543cb4..8a2ba88e60 100644
--- a/src/modules/feature/room/RoomMembers/MembersTable.vue
+++ b/src/modules/feature/room/RoomMembers/MembersTable.vue
@@ -191,8 +191,8 @@ const tableHeader = [
 	font-weight: bold;
 }
 
-:deep(.v-data-table__td .v-selection-control--disabled i) {
-	color: rgba(var(--v-theme-on-surface), 0.6);
+:deep(.v-data-table__td .v-selection-control--disabled) {
+	color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
 }
 
 .table-title-header {

From ccf0110337bbe516ddfd7efa7e8bde9cf03b99db Mon Sep 17 00:00:00 2001
From: Murat Merdoglu <murat.merdoglu@dataport.de>
Date: Thu, 12 Dec 2024 13:43:48 +0100
Subject: [PATCH 4/8] move mapping into composable

---
 .../data/room/roomMembers/roomMembers.composable.ts |  8 +++++++-
 .../room/roomMembers/roomMembers.composable.unit.ts |  1 +
 src/modules/page/room/RoomMembers.page.vue          | 13 ++-----------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/modules/data/room/roomMembers/roomMembers.composable.ts b/src/modules/data/room/roomMembers/roomMembers.composable.ts
index 76429f4e4b..90eaabe25f 100644
--- a/src/modules/data/room/roomMembers/roomMembers.composable.ts
+++ b/src/modules/data/room/roomMembers/roomMembers.composable.ts
@@ -13,9 +13,10 @@ import { $axios } from "@/utils/api";
 import { useI18n } from "vue-i18n";
 import { useBoardNotifier } from "@util-board";
 import { schoolsModule } from "@/store";
+import { authModule } from "@/store/store-accessor";
 
 export const useRoomMembers = (roomId: string) => {
-	const roomMembers: Ref<RoomMemberResponse[]> = ref([]);
+	const roomMembers: Ref<RoomMemberResponse[] | any[]> = ref([]);
 	const potentialRoomMembers: Ref<RoomMember[]> = ref([]);
 	const schools: Ref<SchoolForExternalInviteResponse[]> = ref([]);
 	const isLoading = ref(false);
@@ -25,6 +26,7 @@ export const useRoomMembers = (roomId: string) => {
 		id: schoolsModule.getSchool.id,
 		name: schoolsModule.getSchool.name,
 	};
+	const currentUserId = authModule.getUser?.id ?? "";
 
 	const userRoles: Record<string, string> = {
 		[RoleName.Roomowner]: t("common.labels.teacher"),
@@ -45,6 +47,10 @@ export const useRoomMembers = (roomId: string) => {
 				return {
 					...member,
 					displayRoleName: userRoles[member.roleName],
+					isSelectable: !(
+						member.userId === currentUserId ||
+						member.roleName === RoleName.Roomowner
+					),
 				};
 			});
 			isLoading.value = false;
diff --git a/src/modules/data/room/roomMembers/roomMembers.composable.unit.ts b/src/modules/data/room/roomMembers/roomMembers.composable.unit.ts
index c065523b7c..5df648e29c 100644
--- a/src/modules/data/room/roomMembers/roomMembers.composable.unit.ts
+++ b/src/modules/data/room/roomMembers/roomMembers.composable.unit.ts
@@ -86,6 +86,7 @@ describe("useRoomMembers", () => {
 				membersMock.map((member) => ({
 					...member,
 					displayRoleName: "common.labels.teacher",
+					isSelectable: true,
 				}))
 			);
 		});
diff --git a/src/modules/page/room/RoomMembers.page.vue b/src/modules/page/room/RoomMembers.page.vue
index 1abf776444..15b115c248 100644
--- a/src/modules/page/room/RoomMembers.page.vue
+++ b/src/modules/page/room/RoomMembers.page.vue
@@ -65,8 +65,6 @@ import { MembersTable, AddMembers } from "@feature-room";
 import { RoleName, RoomMemberResponse } from "@/serverApi/v3";
 import { useDisplay } from "vuetify";
 
-import { authModule } from "@/store/store-accessor";
-
 const { fetchRoom } = useRoomDetailsStore();
 const { t } = useI18n();
 const route = useRoute();
@@ -85,15 +83,8 @@ const {
 	getSchools,
 	removeMembers,
 } = useRoomMembers(roomId);
-const currentUserId = authModule.getUser?.id ?? "";
-const memberList: Ref<RoomMemberResponse[]> = computed(() => {
-	return roomMembers.value.map((member) => ({
-		...member,
-		isSelectable: !(
-			member.userId === currentUserId || member.roleName === RoleName.Roomowner
-		),
-	}));
-});
+
+const memberList: Ref<RoomMemberResponse[]> = ref(roomMembers);
 const pageTitle = computed(() =>
 	buildPageTitle(`${room.value?.name} - ${t("pages.rooms.members.manage")}`)
 );

From c3869aa8436f31143c9ae267808f895886f35cac Mon Sep 17 00:00:00 2001
From: Murat Merdoglu <murat.merdoglu@dataport.de>
Date: Thu, 12 Dec 2024 13:45:29 +0100
Subject: [PATCH 5/8] chore: remove empty line

---
 src/modules/page/room/RoomMembers.page.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modules/page/room/RoomMembers.page.vue b/src/modules/page/room/RoomMembers.page.vue
index 15b115c248..25a31f1ed1 100644
--- a/src/modules/page/room/RoomMembers.page.vue
+++ b/src/modules/page/room/RoomMembers.page.vue
@@ -83,7 +83,6 @@ const {
 	getSchools,
 	removeMembers,
 } = useRoomMembers(roomId);
-
 const memberList: Ref<RoomMemberResponse[]> = ref(roomMembers);
 const pageTitle = computed(() =>
 	buildPageTitle(`${room.value?.name} - ${t("pages.rooms.members.manage")}`)

From 67ddd7c5a3a96e65242403836170646dd4258ebd Mon Sep 17 00:00:00 2001
From: Murat Merdoglu <murat.merdoglu@dataport.de>
Date: Thu, 12 Dec 2024 15:48:05 +0100
Subject: [PATCH 6/8] chore: remove added type for testing purpose

---
 src/modules/data/room/roomMembers/roomMembers.composable.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/data/room/roomMembers/roomMembers.composable.ts b/src/modules/data/room/roomMembers/roomMembers.composable.ts
index 90eaabe25f..f121d8bde3 100644
--- a/src/modules/data/room/roomMembers/roomMembers.composable.ts
+++ b/src/modules/data/room/roomMembers/roomMembers.composable.ts
@@ -16,7 +16,7 @@ import { schoolsModule } from "@/store";
 import { authModule } from "@/store/store-accessor";
 
 export const useRoomMembers = (roomId: string) => {
-	const roomMembers: Ref<RoomMemberResponse[] | any[]> = ref([]);
+	const roomMembers: Ref<RoomMemberResponse[]> = ref([]);
 	const potentialRoomMembers: Ref<RoomMember[]> = ref([]);
 	const schools: Ref<SchoolForExternalInviteResponse[]> = ref([]);
 	const isLoading = ref(false);

From 4ae07d6a3a00bd80f97b829c34e4fe1d5f5de1cb Mon Sep 17 00:00:00 2001
From: Murat Merdoglu <murat.merdoglu@dataport.de>
Date: Fri, 13 Dec 2024 16:22:15 +0100
Subject: [PATCH 7/8] add unit tests for composable file

---
 .../roomMembers.composable.unit.ts            | 77 ++++++++++++++-----
 .../room/RoomMembers/MembersTable.unit.ts     |  5 +-
 .../page/room/RoomMembers.page.unit.ts        |  4 +-
 .../factory/room/roomMembersFactory.ts        |  9 +--
 4 files changed, 65 insertions(+), 30 deletions(-)

diff --git a/src/modules/data/room/roomMembers/roomMembers.composable.unit.ts b/src/modules/data/room/roomMembers/roomMembers.composable.unit.ts
index 5df648e29c..fa066e906b 100644
--- a/src/modules/data/room/roomMembers/roomMembers.composable.unit.ts
+++ b/src/modules/data/room/roomMembers/roomMembers.composable.unit.ts
@@ -1,9 +1,10 @@
 import {
 	roomMemberListFactory,
 	mockApiResponse,
-	roomMemberResponseFactory,
+	roomMemberFactory,
 	roomMemberSchoolResponseFactory,
 	schoolFactory,
+	meResponseFactory,
 } from "@@/tests/test-utils";
 import { createMock, DeepMocked } from "@golevelup/ts-jest";
 import * as serverApi from "@/serverApi/v3/api";
@@ -18,8 +19,9 @@ import {
 	UserIdAndRoleRoleNameEnum,
 } from "@/serverApi/v3/api";
 import { useBoardNotifier } from "@util-board";
-import { schoolsModule } from "@/store";
+import { schoolsModule, authModule } from "@/store";
 import SchoolsModule from "@/store/schools";
+import AuthModule from "@/store/auth";
 import setupStores from "@@/tests/test-utils/setupStores";
 
 jest.mock("vue-i18n");
@@ -54,6 +56,7 @@ describe("useRoomMembers", () => {
 
 		setupStores({
 			schoolsModule: SchoolsModule,
+			authModule: AuthModule,
 		});
 
 		schoolsModule.setSchool(
@@ -62,6 +65,9 @@ describe("useRoomMembers", () => {
 				name: "Paul-Gerhardt-Gymnasium",
 			})
 		);
+
+		const mockMe = meResponseFactory.build();
+		authModule.setMe(mockMe);
 	});
 
 	afterEach(() => {
@@ -70,25 +76,52 @@ describe("useRoomMembers", () => {
 	});
 
 	describe("fetchMembers", () => {
-		it("should fetch members and map members with role names", async () => {
-			const { fetchMembers, roomMembers } = useRoomMembers(roomId);
-			const membersMock = roomMemberResponseFactory.buildList(3);
+		describe("when the user is not room owner", () => {
+			it("should fetch members and map members with role names", async () => {
+				const { fetchMembers, roomMembers } = useRoomMembers(roomId);
+				const membersMock = roomMemberFactory(RoleName.Roomeditor).buildList(3);
+
+				roomApiMock.roomControllerGetMembers.mockResolvedValue(
+					mockApiResponse({
+						data: { data: membersMock },
+					})
+				);
+
+				await fetchMembers();
+
+				expect(roomMembers.value).toEqual(
+					membersMock.map((member) => ({
+						...member,
+						displayRoleName: "common.labels.teacher",
+						isSelectable: true,
+					}))
+				);
+			});
+		});
 
-			roomApiMock.roomControllerGetMembers.mockResolvedValue(
-				mockApiResponse({
-					data: { data: membersMock },
-				})
-			);
+		describe("when the user is room owner", () => {
+			it("should fetch members and map members with role names", async () => {
+				const { fetchMembers, roomMembers } = useRoomMembers(roomId);
+				const membersMock = roomMemberFactory(RoleName.Roomowner).buildList(3);
 
-			await fetchMembers();
-
-			expect(roomMembers.value).toEqual(
-				membersMock.map((member) => ({
-					...member,
-					displayRoleName: "common.labels.teacher",
-					isSelectable: true,
-				}))
-			);
+				roomApiMock.roomControllerGetMembers.mockResolvedValue(
+					mockApiResponse({
+						data: {
+							data: membersMock,
+						},
+					})
+				);
+
+				await fetchMembers();
+
+				expect(roomMembers.value).toEqual(
+					membersMock.map((member) => ({
+						...member,
+						displayRoleName: "common.labels.teacher",
+						isSelectable: false,
+					}))
+				);
+			});
 		});
 
 		it("should throw an error if the API call fails", async () => {
@@ -152,7 +185,9 @@ describe("useRoomMembers", () => {
 			const { getPotentialMembers, potentialRoomMembers, roomMembers } =
 				useRoomMembers(roomId);
 
-			const membersMock: RoomMemberResponse = roomMemberResponseFactory.build();
+			const membersMock: RoomMemberResponse = roomMemberFactory(
+				RoleName.Roomeditor
+			).build();
 
 			roomMembers.value = [membersMock];
 
@@ -281,7 +316,7 @@ describe("useRoomMembers", () => {
 				mockApiResponse({})
 			);
 
-			const membersMock = roomMemberResponseFactory.buildList(3);
+			const membersMock = roomMemberFactory(RoleName.Roomeditor).buildList(3);
 			roomMembers.value = membersMock;
 
 			const firstMember = membersMock[0];
diff --git a/src/modules/feature/room/RoomMembers/MembersTable.unit.ts b/src/modules/feature/room/RoomMembers/MembersTable.unit.ts
index a0da092c36..36b65e57ce 100644
--- a/src/modules/feature/room/RoomMembers/MembersTable.unit.ts
+++ b/src/modules/feature/room/RoomMembers/MembersTable.unit.ts
@@ -5,11 +5,12 @@ import {
 import MembersTable from "./MembersTable.vue";
 import { ref } from "vue";
 import { mdiMenuDown, mdiMenuUp, mdiMagnify } from "@icons/material";
-import { roomMemberResponseFactory } from "@@/tests/test-utils";
+import { roomMemberFactory } from "@@/tests/test-utils";
 import { DOMWrapper, VueWrapper } from "@vue/test-utils";
 import { VDataTable, VTextField } from "vuetify/lib/components/index.mjs";
 import { useConfirmationDialog } from "@ui-confirmation-dialog";
 import setupConfirmationComposableMock from "@@/tests/test-utils/composable-mocks/setupConfirmationComposableMock";
+import { RoleName } from "@/serverApi/v3";
 
 jest.mock("@ui-confirmation-dialog");
 const mockedUseRemoveConfirmationDialog = jest.mocked(useConfirmationDialog);
@@ -37,7 +38,7 @@ describe("MembersTable", () => {
 	];
 
 	const setup = () => {
-		const mockMembers = roomMemberResponseFactory.buildList(3);
+		const mockMembers = roomMemberFactory(RoleName.Roomeditor).buildList(3);
 		const wrapper = mount(MembersTable, {
 			attachTo: document.body,
 			global: {
diff --git a/src/modules/page/room/RoomMembers.page.unit.ts b/src/modules/page/room/RoomMembers.page.unit.ts
index 520b31a623..fb6712e379 100644
--- a/src/modules/page/room/RoomMembers.page.unit.ts
+++ b/src/modules/page/room/RoomMembers.page.unit.ts
@@ -3,7 +3,7 @@ import { createTestingPinia } from "@pinia/testing";
 import {
 	roomMemberListFactory,
 	mockedPiniaStoreTyping,
-	roomMemberResponseFactory,
+	roomMemberFactory,
 	roomMemberSchoolResponseFactory,
 } from "@@/tests/test-utils";
 import { useRoomMembers, useRoomDetailsStore } from "@data-room";
@@ -76,7 +76,7 @@ describe("RoomMembersPage", () => {
 
 		const room = createRoom ? buildRoom() : undefined;
 
-		const members = roomMemberResponseFactory.buildList(3);
+		const members = roomMemberFactory(RoleName.Roomeditor).buildList(3);
 		mockRoomMemberCalls.roomMembers = ref(members);
 
 		const wrapper = mount(RoomMembersPage, {
diff --git a/tests/test-utils/factory/room/roomMembersFactory.ts b/tests/test-utils/factory/room/roomMembersFactory.ts
index 358b36a77b..72f9cc9f53 100644
--- a/tests/test-utils/factory/room/roomMembersFactory.ts
+++ b/tests/test-utils/factory/room/roomMembersFactory.ts
@@ -6,16 +6,15 @@ import {
 } from "@/serverApi/v3";
 import { RoomMember } from "@data-room";
 
-export const roomMemberResponseFactory = Factory.define<RoomMemberResponse>(
-	({ sequence }) => ({
+export const roomMemberFactory = (roleName = RoleName.Roomowner) =>
+	Factory.define<RoomMemberResponse>(({ sequence }) => ({
 		userId: `member${sequence}`,
 		firstName: `firstName${sequence}`,
 		lastName: `lastName${sequence}`,
-		roleName: RoleName.Roomeditor,
+		roleName,
 		displayRoleName: RoleName.Teacher,
 		schoolName: "Paul-Gerhardt-Gymnasium",
-	})
-);
+	}));
 
 export const roomMemberListFactory = Factory.define<RoomMember>(
 	({ sequence }) => ({

From 5fc98399a60c8842458d0495bf5e2915033e72f9 Mon Sep 17 00:00:00 2001
From: Murat Merdoglu <murat.merdoglu@dataport.de>
Date: Mon, 16 Dec 2024 10:37:54 +0100
Subject: [PATCH 8/8] add unit test cases if the members are 'roomowner'

---
 .../room/RoomMembers/MembersTable.unit.ts     | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/modules/feature/room/RoomMembers/MembersTable.unit.ts b/src/modules/feature/room/RoomMembers/MembersTable.unit.ts
index 36b65e57ce..e087fe58a5 100644
--- a/src/modules/feature/room/RoomMembers/MembersTable.unit.ts
+++ b/src/modules/feature/room/RoomMembers/MembersTable.unit.ts
@@ -3,7 +3,7 @@ import {
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
 import MembersTable from "./MembersTable.vue";
-import { ref } from "vue";
+import { nextTick, ref } from "vue";
 import { mdiMenuDown, mdiMenuUp, mdiMagnify } from "@icons/material";
 import { roomMemberFactory } from "@@/tests/test-utils";
 import { DOMWrapper, VueWrapper } from "@vue/test-utils";
@@ -345,6 +345,41 @@ describe("MembersTable", () => {
 
 				expect(wrapper.emitted()).not.toHaveProperty("remove:members");
 			});
+
+			describe("when members are 'roomowner'", () => {
+				const ownerMembers = roomMemberFactory(RoleName.Roomowner)
+					.buildList(3)
+					.map((member) => ({ ...member, isSelectable: false }));
+
+				it("should not render remove button for room owner", async () => {
+					const { wrapper } = setup();
+
+					wrapper.setProps({ members: ownerMembers });
+					await nextTick();
+
+					const dataTable = wrapper.getComponent(VDataTable);
+					const removeButton = dataTable.findComponent(
+						"[data-testid=remove-member-0]"
+					);
+
+					expect(removeButton.exists()).toBe(false);
+				});
+
+				it("members should not be selectable", async () => {
+					const { wrapper } = setup();
+
+					wrapper.setProps({ members: ownerMembers });
+					await nextTick();
+
+					const dataTable = wrapper.getComponent(VDataTable);
+
+					const checkboxes = dataTable.findAllComponents({
+						name: "VSelectionControl",
+					});
+
+					expect(checkboxes[1].vm.disabled).toBe(true);
+				});
+			});
 		});
 	});