Add Element Menu and fix tests

src/modules/feature/board-collaborative-text-editor-element/CollaborativeTextEditorElement.unit.ts

@@ -1,29 +1,17 @@
-import { ConfigResponse } from "@/serverApi/v3/api";
-import AuthModule from "@/store/auth";
-import EnvConfigModule from "@/store/env-config";
 import NotifierModule from "@/store/notifier";
-import {
-	AUTH_MODULE_KEY,
-	ENV_CONFIG_MODULE_KEY,
-	NOTIFIER_MODULE_KEY,
-} from "@/utils/inject";
+import { NOTIFIER_MODULE_KEY } from "@/utils/inject";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import { collaborativeTextEditorElementResponseFactory } from "@@/tests/test-utils";
 import {
 	createTestingI18n,
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
 import { createMock } from "@golevelup/ts-jest";
-import {
-	BoardMenu,
-	BoardMenuActionDelete,
-	BoardMenuActionMoveDown,
-	BoardMenuActionMoveUp,
-} from "@ui-board";
-import { shallowMount } from "@vue/test-utils";
+import { ContentElementBar } from "@ui-board";
+import { mount } from "@vue/test-utils";
 import { nextTick } from "vue";
 import CollaborativeTextEditorElement from "./CollaborativeTextEditorElement.vue";
-import CollaborativeTextEditor from "./content/CollaborativeTextEditor.vue";
+import CollaborativeTextEditorElementMenu from "./components/CollaborativeTextEditorElementMenu.vue";
 
 // Mocks
 jest.mock("@data-board", () => ({
@@ -33,40 +21,34 @@ jest.mock("@data-board", () => ({
 }));
 jest.mock("@feature-board");
 
-const mockedEnvConfigModule = createModuleMocks(EnvConfigModule, {
-	getEnv: createMock<ConfigResponse>({
-		FEATURE_TLDRAW_ENABLED: true,
-	}),
-});
-
 describe("CollaborativeTextEditorElement", () => {
 	const notifierModule = createModuleMocks(NotifierModule);
 
-	const setup = (props: { isEditMode: boolean; isTeacher?: boolean }) => {
+	const setup = (props: { isEditMode: boolean }) => {
 		document.body.setAttribute("data-app", "true");
 
-		const authModule = createModuleMocks(AuthModule, {
-			getUserRoles: ["teacher"],
-		});
-
 		const COLLABORATIVE_TEXTEDITOR_ELEMENT =
 			collaborativeTextEditorElementResponseFactory.build();
 
-		const wrapper = shallowMount(CollaborativeTextEditorElement, {
+		const wrapper = mount(CollaborativeTextEditorElement, {
 			global: {
 				plugins: [createTestingVuetify(), createTestingI18n()],
 				provide: {
 					[NOTIFIER_MODULE_KEY.valueOf()]: notifierModule,
-					[ENV_CONFIG_MODULE_KEY.valueOf()]: mockedEnvConfigModule,
-					[AUTH_MODULE_KEY.valueOf()]: authModule,
 				},
 			},
 			propsData: { ...props, element: COLLABORATIVE_TEXTEDITOR_ELEMENT },
+			attachTo: document.body,
 		});
-		return { wrapper, isEditMode: true, isTeacher: true };
+
+		return { wrapper, isEditMode: true };
 	};
 
-	describe("when component is mounted", () => {
+	afterEach(() => {
+		jest.resetAllMocks();
+	});
+
+	describe("when component is not in edit-mode", () => {
 		it("should render the element corrrectly", () => {
 			const { wrapper } = setup({
 				isEditMode: false,
@@ -76,141 +58,103 @@ describe("CollaborativeTextEditorElement", () => {
 			).toBe(true);
 		});
 
-		it("should render the InnerContent element correctly", () => {
+		it("should render the ContentElementBar", () => {
 			const { wrapper } = setup({
 				isEditMode: false,
 			});
-			expect(wrapper.findComponent(CollaborativeTextEditor).exists()).toBe(
-				true
-			);
-		});
-
-		it("should render BoardMenu element correctly", async () => {
-			const { wrapper } = setup({
-				isEditMode: true,
-			});
-
-			const board = wrapper.findComponent(BoardMenu);
-			expect(board.exists()).toBe(true);
+			expect(wrapper.findComponent(ContentElementBar).exists()).toBe(true);
 		});
 
-		it("should render BoardMenuActionMoveUp element correctly", async () => {
+		it("should not render the BoardMenu", () => {
 			const { wrapper } = setup({
-				isEditMode: true,
+				isEditMode: false,
 			});
 
-			const moveUp = wrapper.findComponent(BoardMenuActionMoveUp);
-			expect(moveUp.exists()).toBe(true);
-		});
-
-		it("should render BoardMenuActionMoveDown element correctly", async () => {
-			const { wrapper } = setup({
-				isEditMode: true,
-			});
+			const boardMenu = wrapper.findComponent(
+				CollaborativeTextEditorElementMenu
+			);
 
-			const moveDown = wrapper.findComponent(BoardMenuActionMoveDown);
-			expect(moveDown.exists()).toBe(true);
+			expect(boardMenu.exists()).toBe(false);
 		});
 
-		it("should render BoardMenuActionDelete element correctly", async () => {
-			const { wrapper } = setup({
-				isEditMode: true,
-			});
+		describe("when element is clicked", () => {
+			it("should open collaborative text editor in new tab correctly", async () => {
+				const { wrapper } = setup({
+					isEditMode: false,
+				});
 
-			const actionDelete = wrapper.findComponent(BoardMenuActionDelete);
-			expect(actionDelete.exists()).toBe(true);
-		});
+				const windowMock = createMock<Window>();
+				const spy = jest
+					.spyOn(window, "open")
+					.mockImplementation(() => windowMock);
 
-		describe("when component is in edit-mode", () => {
-			describe("when move down is clicked", () => {
-				it('should emit "move-down" collaborative text editor', async () => {
-					const { wrapper } = setup({
-						isEditMode: true,
-					});
+				const card = wrapper.find(
+					"[data-testId=collaborative-text-editor-element]"
+				);
 
-					wrapper.findComponent(BoardMenuActionMoveDown).vm.$emit("click");
+				card.trigger("click");
+				await nextTick();
 
-					expect(wrapper.emitted("move-down:edit")).toBeTruthy();
-				});
+				expect(spy).toHaveBeenCalledTimes(1);
 			});
+		});
+	});
 
-			describe("when move up is clicked", () => {
-				it('should emit "move-up" collaborative text editor', async () => {
-					const { wrapper } = setup({
-						isEditMode: true,
-					});
-
-					wrapper.findComponent(BoardMenuActionMoveUp).vm.$emit("click");
-
-					expect(wrapper.emitted("move-up:edit")).toBeTruthy();
-				});
+	describe("when component is in edit-mode", () => {
+		it("should render BoardMenu element", async () => {
+			const { wrapper } = setup({
+				isEditMode: true,
 			});
 
-			describe("when delete is clicked", () => {
-				it('should emit "delete" collaborative text editor', async () => {
-					const { wrapper } = setup({
-						isEditMode: true,
-					});
-
-					wrapper
-						.findComponent(BoardMenuActionDelete)
-						.vm.$emit("click", Promise.resolve(true));
-					await nextTick();
-					expect(wrapper.emitted("delete:element")).toBeTruthy();
-				});
-			});
+			const boardMenu = wrapper.findComponent(
+				CollaborativeTextEditorElementMenu
+			);
+			expect(boardMenu.exists()).toBe(true);
 		});
 
-		describe("when component is NOT in edit-mode", () => {
-			it('should NOT emit "move-down" collaborative text editor', async () => {
+		describe("when move down is emitted by CollaborativeTextEditorElementMenu", () => {
+			it('should emit "move-down:edit" collaborative text editor', async () => {
 				const { wrapper } = setup({
-					isEditMode: false,
-					isTeacher: false,
+					isEditMode: true,
 				});
 
-				expect(wrapper.findComponent(BoardMenuActionMoveDown).exists()).toBe(
-					false
+				const boardMenu = wrapper.findComponent(
+					CollaborativeTextEditorElementMenu
 				);
-			});
+				boardMenu.vm.$emit("move-down:element");
 
-			it('should NOT emit "move-up" collaborative text editor', async () => {
-				const { wrapper } = setup({
-					isEditMode: false,
-					isTeacher: false,
-				});
-
-				expect(wrapper.findComponent(BoardMenuActionMoveUp).exists()).toBe(
-					false
-				);
+				expect(wrapper.emitted("move-down:edit")).toBeTruthy();
 			});
+		});
 
-			it('should NOT emit "delete" collaborative text editor', async () => {
+		describe("when move up is clicked", () => {
+			it('should emit "move-up" collaborative text editor', async () => {
 				const { wrapper } = setup({
-					isEditMode: false,
-					isTeacher: false,
+					isEditMode: true,
 				});
 
-				expect(wrapper.findComponent(BoardMenuActionDelete).exists()).toBe(
-					false
+				const boardMenu = wrapper.findComponent(
+					CollaborativeTextEditorElementMenu
 				);
+				boardMenu.vm.$emit("move-up:element");
+
+				expect(wrapper.emitted("move-up:edit")).toBeTruthy();
 			});
 		});
 
-		describe("when element is clicked", () => {
-			it("should open collaborative text editor in new tab correctly", async () => {
+		describe("when delete is clicked", () => {
+			it('should emit "delete" collaborative text editor', async () => {
 				const { wrapper } = setup({
-					isEditMode: false,
+					isEditMode: true,
 				});
-				const divElement = wrapper.find("div");
-				window.open = jest.fn();
-
-				await divElement.trigger("click");
 
-				wrapper.vm.$nextTick(() =>
-					window.open(`/tldraw?roomName=test-id`, "_blank")
+				const boardMenu = wrapper.findComponent(
+					CollaborativeTextEditorElementMenu
 				);
+				boardMenu.vm.$emit("delete:element", Promise.resolve(true));
+				await nextTick();
 
-				expect(window.open).toHaveBeenCalledTimes(1);
+				expect(wrapper.emitted("delete:element")).toBeTruthy();
 			});
 		});
 	});

src/modules/feature/board-collaborative-text-editor-element/CollaborativeTextEditorElement.vue

@@ -23,12 +23,13 @@
 			<template #title>
 				{{ $t("components.cardElement.collaborativeTextEditorElement") }}
 			</template>
-			<template #menu v-if="isEditMode">
-				<BoardMenu scope="element">
-					<BoardMenuActionMoveUp @click="onMoveUp" />
-					<BoardMenuActionMoveDown @click="onMoveDown" />
-					<BoardMenuActionDelete @click="onDelete" />
-				</BoardMenu>
+			<template #menu>
+				<CollaborativeTextEditorElementMenu
+					v-if="isEditMode"
+					@move-down:element="onMoveDown"
+					@move-up:element="onMoveUp"
+					@delete:element="onDelete"
+				/>
 			</template>
 		</ContentElementBar>
 	</v-card>
@@ -42,15 +43,10 @@ import {
 	CollaborativeTextEditorParentType,
 } from "@/serverApi/v3";
 import { useBoardFocusHandler } from "@data-board";
-import {
-	BoardMenu,
-	BoardMenuActionDelete,
-	BoardMenuActionMoveDown,
-	BoardMenuActionMoveUp,
-	ContentElementBar,
-} from "@ui-board";
+import { ContentElementBar } from "@ui-board";
 import { PropType, ref, toRef } from "vue";
 import { useCollaborativeTextEditorApi } from "./composables/CollaborativeTextEditorApi.composable";
+import CollaborativeTextEditorElementMenu from "./components/CollaborativeTextEditorElementMenu.vue";
 
 const props = defineProps({
 	element: {

src/modules/feature/board-collaborative-text-editor-element/components/CollaborativeTextEditorElementMenu.vue

@@ -0,0 +1,63 @@
+<template>
+	<BoardMenu scope="element">
+		<BoardMenuActionMoveUp @click="onMoveUp" />
+		<BoardMenuActionMoveDown @click="onMoveDown" />
+		<BoardMenuActionDelete @click="onDelete" />
+	</BoardMenu>
+</template>
+
+<script lang="ts">
+import {
+	mdiArrowCollapseDown,
+	mdiArrowCollapseUp,
+	mdiCogOutline,
+	mdiTrashCanOutline,
+} from "@mdi/js";
+import {
+	BoardMenu,
+	BoardMenuActionDelete,
+	BoardMenuActionMoveDown,
+	BoardMenuActionMoveUp,
+} from "@ui-board";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	components: {
+		BoardMenu,
+		BoardMenuActionDelete,
+		BoardMenuActionMoveUp,
+		BoardMenuActionMoveDown,
+	},
+	emits: [
+		"edit:element",
+		"delete:element",
+		"move-down:element",
+		"move-up:element",
+	],
+	setup(_, { emit }) {
+		const onEdit = () => emit("edit:element");
+
+		const onDelete = async (confirmation: Promise<boolean>) => {
+			const shouldDelete = await confirmation;
+			if (shouldDelete) {
+				emit("delete:element");
+			}
+		};
+
+		const onMoveDown = () => emit("move-down:element");
+
+		const onMoveUp = () => emit("move-up:element");
+
+		return {
+			mdiArrowCollapseUp,
+			mdiArrowCollapseDown,
+			mdiTrashCanOutline,
+			mdiCogOutline,
+			onEdit,
+			onDelete,
+			onMoveDown,
+			onMoveUp,
+		};
+	},
+});
+</script>