tests: reimplement PermissionsEditor tests (#1756)

closes #1684
dyc3 · Apr 28, 2024 · 73e2d0f · 73e2d0f
1 parent e581552
commit 73e2d0f
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 2 deletions.
diff --git a/client/src/components/PermissionsEditor.vue b/client/src/components/PermissionsEditor.vue
@@ -32,8 +32,14 @@
 							:disabled="getLowestGranted(item) < r - 1"
 							color="primary"
 							@update:model-value="onCheckboxModified"
+							:data-cy="`perm-chk-${item.name}-${r - 1}`"
+						/>
+						<v-checkbox
+							v-else
+							v-model="item[r - 1]"
+							:disabled="true"
+							:data-cy="`perm-chk-${item.name}-${r - 1}`"
 						/>
-						<v-checkbox v-else v-model="item[r - 1]" :disabled="true" />
 					</td>
 				</tr>
 			</tbody>
@@ -60,7 +66,7 @@ const props = withDefaults(
 );
 const { currentRole } = toRefs(props);
 
-const permissions: Ref<Permission[]> = ref([]);
+const permissions: Ref<Permission[]> = ref(extractFromGrants(props.modelValue));
 const granted = useGrants();
 
 const rolePerms = {
@@ -110,6 +116,7 @@ function rebuildMasks(): Grants {
 }
 
 watch(model, value => {
+	console.log("model changed", value);
 	permissions.value = extractFromGrants(value);
 });
 

diff --git a/client/tests/e2e/component/PermissionsEditor.cy.ts b/client/tests/e2e/component/PermissionsEditor.cy.ts
@@ -0,0 +1,58 @@
+import { Grants } from "ott-common/permissions";
+import PermissionsEditor from "../../../src/components/PermissionsEditor.vue";
+import { Role } from "ott-common";
+
+function getPermissionCheckbox(permission: string, role: Role) {
+	return cy.get(`[data-cy="perm-chk-${permission}-${role}"] input`);
+}
+
+describe("<PermissionsEditor />", () => {
+	it("should render grants correctly", () => {
+		const grants = new Grants();
+		grants.setRoleGrants(Role.UnregisteredUser, (1 << 0) | (1 << 1));
+
+		cy.mount(PermissionsEditor, {
+			props: {
+				modelValue: grants,
+				currentRole: 4,
+			},
+		}).as("wrapper");
+		cy.getPermissionCheckbox("playback.play-pause", Role.UnregisteredUser).should("be.checked");
+		cy.getPermissionCheckbox("playback.skip", Role.UnregisteredUser).should("not.be.checked");
+		cy.getPermissionCheckbox("playback.play-pause", Role.RegisteredUser).should("be.checked");
+		cy.getPermissionCheckbox("playback.skip", Role.RegisteredUser).should("be.checked");
+		cy.getPermissionCheckbox("playback.seek", Role.RegisteredUser).should("not.be.checked");
+
+		grants.setRoleGrants(Role.UnregisteredUser, 1 << 0);
+		grants.setRoleGrants(Role.RegisteredUser, 1 << 1);
+		cy.setProps({ modelValue: grants });
+
+		cy.getPermissionCheckbox("playback.play-pause", Role.UnregisteredUser).should("be.checked");
+		cy.getPermissionCheckbox("playback.skip", Role.UnregisteredUser).should("not.be.checked");
+		cy.getPermissionCheckbox("playback.play-pause", Role.RegisteredUser).should("be.checked");
+		cy.getPermissionCheckbox("playback.skip", Role.RegisteredUser).should("be.checked");
+		cy.getPermissionCheckbox("playback.seek", Role.RegisteredUser).should("not.be.checked");
+	});
+
+	it("should handle clicking checkboxes", () => {
+		const grants = new Grants();
+		grants.setRoleGrants(Role.UnregisteredUser, (1 << 0) | (1 << 1));
+
+		cy.mount(PermissionsEditor, {
+			props: {
+				modelValue: grants,
+				currentRole: 4,
+			},
+		}).as("wrapper");
+
+		cy.getPermissionCheckbox("playback.play-pause", Role.UnregisteredUser).click();
+		cy.getPermissionCheckbox("playback.play-pause", Role.UnregisteredUser).should(
+			"not.be.checked"
+		);
+		cy.getPermissionCheckbox("playback.play-pause", Role.RegisteredUser).should("be.checked");
+
+		cy.getPermissionCheckbox("playback.skip", Role.UnregisteredUser).click();
+		cy.getPermissionCheckbox("playback.skip", Role.UnregisteredUser).should("not.be.checked");
+		cy.getPermissionCheckbox("playback.skip", Role.RegisteredUser).should("be.checked");
+	});
+});
diff --git a/client/tests/e2e/support/commands.ts b/client/tests/e2e/support/commands.ts
@@ -46,6 +46,7 @@ import { routes } from "../../../src/router";
 import { VueWrapper } from "@vue/test-utils";
 import { OttRoomConnectionMock, connectionInjectKey } from "../../../src/plugins/connection";
 import { OttSfx, sfxInjectKey } from "../../../src/plugins/sfx";
+import type { Role } from "ott-common";
 
 Cypress.Commands.add("mount", (component, options = {}) => {
 	options.global = options.global || {};
@@ -130,3 +131,7 @@ Cypress.Commands.add("store", () => {
 Cypress.Commands.add("connection", () => {
 	return cy.get("@connection") as any;
 });
+
+Cypress.Commands.add("getPermissionCheckbox", (permission: string, role: Role) => {
+	return cy.get(`[data-cy="perm-chk-${permission}-${role}"] input`) as any;
+});
diff --git a/client/tests/e2e/support/component.ts b/client/tests/e2e/support/component.ts
@@ -26,6 +26,7 @@ import { mount } from "cypress/vue";
 import type { FullOTTStoreState } from "../../../src/store";
 import type { Store } from "vuex";
 import type { OttRoomConnectionMock } from "../../../src/plugins/connection";
+import type { Role } from "ott-common";
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -42,6 +43,7 @@ declare global {
 			emitted(event: string): Chainable<unknown[]>;
 			store(): Chainable<Store<FullOTTStoreState>>;
 			connection(): Chainable<OttRoomConnectionMock>;
+			getPermissionCheckbox(permission: string, role: Role): Chainable<HTMLElement>;
 		}
 	}
 }