BC-9604 - consistent breadcrumbs

src/components/administration/ProvisioningOptionsPage.unit.ts

@@ -17,14 +17,6 @@ import { VCheckboxBtn } from "vuetify/lib/components/index";
 
 vi.mock("@data-provisioning-options");
 
-vi.mock(
-	"@/utils/pageTitle",
-	() =>
-		({
-			buildPageTitle: (pageTitle) => pageTitle ?? "",
-		}) as typeof import("@/utils/pageTitle")
-);
-
 vi.mock("vue-router");
 const useRouterMock = <Mock>useRouter;
 
@@ -87,9 +79,8 @@ describe("ProvisioningOptionsPage", () => {
 
 			const breadcrumbs = wrapper.findAll(".breadcrumbs-item");
 
-			expect(breadcrumbs[0].text()).toEqual("pages.administration.index.title");
-			expect(breadcrumbs[1].text()).toEqual("pages.administration.school.index.title");
-			expect(breadcrumbs[2].text()).toEqual("components.administration.provisioningOptions.page.title");
+			expect(breadcrumbs[0].text()).toEqual("pages.administration.school.index.title");
+			expect(breadcrumbs[1].text()).toEqual("components.administration.provisioningOptions.page.title");
 		});
 	});
 

src/components/administration/ProvisioningOptionsPage.vue

@@ -123,8 +123,8 @@
 </template>
 
 <script setup lang="ts">
+import { Breadcrumb } from "../templates/default-wireframe.types";
 import VCustomDialog from "@/components/organisms/vCustomDialog.vue";
-import { Breadcrumb } from "@/components/templates/default-wireframe.types";
 import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
 import { injectStrict, THEME_KEY } from "@/utils/inject";
 import { buildPageTitle } from "@/utils/pageTitle";
@@ -157,21 +157,16 @@ const theme = injectStrict(THEME_KEY);
 const pageTitle = buildPageTitle(t("components.administration.provisioningOptions.page.title"));
 useTitle(pageTitle);
 
-const schoolSettingsPage: Breadcrumb = {
-	title: t("pages.administration.school.index.title"),
-	to: "/administration/school-settings",
-};
-const breadcrumbs: Breadcrumb[] = [
+const breadcrumbs: ComputedRef<Breadcrumb[]> = computed(() => [
 	{
-		title: t("pages.administration.index.title"),
-		disabled: true,
+		title: t("pages.administration.school.index.title"),
+		to: "/administration/school-settings",
 	},
-	schoolSettingsPage,
 	{
 		title: t("components.administration.provisioningOptions.page.title"),
 		disabled: true,
 	},
-];
+]);
 
 const provisioningOptions: ComputedRef<ProvisioningOptions> = computed(() => provisioningOptionsData.value);
 
@@ -239,7 +234,7 @@ const onCancel = async () => {
 
 const redirectToAdminPage = async () => {
 	await router.push({
-		path: schoolSettingsPage.to,
+		path: "/administration/school-settings",
 		query: { openPanels: "authentication" },
 	});
 };

src/components/error-handling/errorContent.unit.ts

@@ -2,17 +2,15 @@ import PermissionErrorSvg from "@/assets/img/PermissionErrorSvg.vue";
 import ErrorContent from "@/components/error-handling/ErrorContent.vue";
 import { HttpStatusCode } from "@/store/types/http-status-code.enum";
 import { createTestingI18n, createTestingVuetify } from "@@/tests/test-utils/setup";
+import { createTestingPinia } from "@pinia/testing";
 import { mount } from "@vue/test-utils";
-
-vi.mock(
-	"@/utils/pageTitle",
-	() =>
-		({
-			buildPageTitle: (pageTitle) => pageTitle ?? "",
-		}) as typeof import("@/utils/pageTitle")
-);
+import { setActivePinia } from "pinia";
 
 describe("@/components/error-handling/ErrorContent.vue", () => {
+	beforeAll(() => {
+		setActivePinia(createTestingPinia());
+	});
+
 	const getWrapper = (errorText: string, statusCode: HttpStatusCode) =>
 		mount(ErrorContent, {
 			propsData: {

src/components/lern-store/LernstoreCollectionDetailView.unit.js

@@ -4,11 +4,9 @@ import { initializeAxios } from "@/utils/api";
 import { Collection } from "@@/tests/test-utils/mockDataCollection";
 import { createTestingI18n, createTestingVuetify } from "@@/tests/test-utils/setup";
 import setupStores from "@@/tests/test-utils/setupStores";
+import { createTestingPinia } from "@pinia/testing";
 import { RouterLinkStub } from "@vue/test-utils";
-
-vi.mock("@/utils/pageTitle", () => ({
-	buildPageTitle: (pageTitle) => pageTitle ?? "",
-}));
+import { setActivePinia } from "pinia";
 
 initializeAxios({
 	get: async () => ({ data: [] }),
@@ -26,6 +24,10 @@ describe("@/components/organisms/LernstoreCollectionDetailView", () => {
 	window.scrollTo = vi.fn();
 	let wrapper;
 
+	beforeAll(() => {
+		setActivePinia(createTestingPinia());
+	});
+
 	beforeEach(() => {
 		wrapper = shallowMount(LernstoreCollectionDetailView, {
 			props: { ...testProps },

src/components/lern-store/LernstoreDetailView.unit.js

@@ -1,16 +1,16 @@
 import LernstoreDetailView from "./LernstoreDetailView";
 import { Resource } from "@@/tests/test-utils/mockDataResource";
 import { createTestingI18n, createTestingVuetify } from "@@/tests/test-utils/setup";
-
-vi.mock("@/utils/pageTitle", () => ({
-	buildPageTitle: (pageTitle) => pageTitle ?? "",
-}));
+import { createTestingPinia } from "@pinia/testing";
+import { setActivePinia } from "pinia";
 
 const testProps = {
 	resource: Resource,
 };
 
 describe("@/components/molecules/LernstoreDetailView", () => {
+	setActivePinia(createTestingPinia());
+
 	const wrapper = shallowMount(LernstoreDetailView, {
 		props: { ...testProps },
 		global: {

src/layouts/LoggedIn.layout.unit.ts

@@ -14,6 +14,7 @@ import { VApp } from "vuetify/lib/components/index";
 
 vi.mock("vue-router", () => ({
 	useRoute: () => ({ path: "rooms/courses-list" }),
+	useRouter: vi.fn(),
 }));
 
 const setup = () => {

src/modules/data/board/BoardPageInformation.composable.ts

@@ -1,76 +1,78 @@
+import { useBoardStore } from "./Board.store";
 import { useBoardApi } from "./BoardApi.composable";
 import { Breadcrumb } from "@/components/templates/default-wireframe.types";
 import { BoardContextType } from "@/types/board/BoardContext";
 import { createTestableSharedComposable } from "@/utils/create-shared-composable";
 import { buildPageTitle } from "@/utils/pageTitle";
-import { computed, ref, unref } from "vue";
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 const useBoardPageInformation = () => {
 	const { t } = useI18n();
 
 	const { getContextInfo } = useBoardApi();
+	const boardStore = useBoardStore();
 
 	const boardContext = ref<Awaited<ReturnType<typeof getContextInfo>>>();
-
 	const roomId = computed(() => boardContext.value?.id);
 	const contextType = computed(() => boardContext.value?.type);
 
-	const pageTitle = computed(() => {
-		const roomName = unref(boardContext)?.name;
-		const roomNameForPageTitle = roomName ? ", " + roomName : "";
-		const type = unref(boardContext)?.type;
+	const isCourse = computed(() => contextType.value === BoardContextType.Course);
+	const isRoom = computed(() => contextType.value === BoardContextType.Room);
+
+	const roomName = computed(() => {
+		const roomNameFallback = isCourse.value ? t("common.labels.course") : t("common.labels.room");
+
+		return boardContext.value?.name ?? roomNameFallback;
+	});
+
+	const boardTitle = computed(() => {
+		let fallback = t("common.words.board");
 
-		if (type === BoardContextType.Course) {
-			return buildPageTitle(`${t("pages.room.boardCard.label.courseBoard")}${roomNameForPageTitle}`);
+		if (isCourse.value) {
+			fallback = t("pages.room.boardCard.label.courseBoard");
 		}
-		if (type === BoardContextType.Room) {
-			return buildPageTitle(`${t("pages.roomDetails.board.defaultName")}${roomNameForPageTitle}`);
+		if (isRoom.value) {
+			fallback = t("pages.roomDetails.board.defaultName");
 		}
-		return "";
+
+		return boardStore.board?.title ?? fallback;
 	});
 
-	const breadcrumbs = computed((): Breadcrumb[] => {
-		const id = unref(boardContext)?.id;
-		const type = unref(boardContext)?.type;
-		const name = unref(boardContext)?.name;
+	const pageTitle = computed(() => buildPageTitle(boardTitle.value, roomName.value));
 
-		if (!id || !type) {
-			return [];
-		}
+	const breadcrumbs = computed<Breadcrumb[]>(() => {
+		if (!roomId.value) return [];
+
+		const crumbs: Breadcrumb[] = [
+			{
+				title: roomName.value,
+				to: `/rooms/${roomId.value}`,
+			},
+			{
+				title: boardTitle.value,
+				disabled: true,
+			},
+		];
 
-		if (type === BoardContextType.Course) {
-			return [
-				{
-					title: t("common.words.courses"),
-					to: "/rooms/courses-overview",
-					disabled: false,
-				},
-				{
-					title: name ?? t("common.labels.course"),
-					to: `/rooms/${id}`,
-					disabled: false,
-				},
-			];
+		if (isCourse.value) {
+			crumbs.unshift({
+				title: t("common.words.courses"),
+				to: "/rooms/courses-overview",
+			});
 		}
-		if (type === BoardContextType.Room) {
-			return [
-				{
-					title: t("pages.rooms.title"),
-					to: "/rooms",
-					disabled: false,
-				},
-				{
-					title: name ?? t("common.labels.room"),
-					to: `/rooms/${id}`,
-					disabled: false,
-				},
-			];
+
+		if (isRoom.value) {
+			crumbs.unshift({
+				title: t("pages.rooms.title"),
+				to: "/rooms",
+			});
 		}
-		return [];
+
+		return crumbs;
 	});
 
-	const createPageInformation = async (id: string): Promise<void> => {
+	const createPageInformation = async (id: string) => {
 		boardContext.value = await getContextInfo(id);
 	};
 

src/modules/data/board/BoardPageInformation.composable.unit.ts

@@ -1,12 +1,19 @@
+import { useBoardStore } from "./Board.store";
 import { useBoardApi } from "./BoardApi.composable";
 import { useSharedBoardPageInformation } from "./BoardPageInformation.composable";
 import { BoardContextType } from "@/types/board/BoardContext";
+import { boardResponseFactory } from "@@/tests/test-utils";
 import { mountComposable } from "@@/tests/test-utils/mountComposable";
 import { createMock, DeepMocked } from "@golevelup/ts-vitest";
+import { createTestingPinia } from "@pinia/testing";
+import { setActivePinia } from "pinia";
 
 vi.mock("./BoardApi.composable");
 const mockedUseBoardApi = vi.mocked(useBoardApi);
 
+vi.mock("./Board.store");
+const mockedUseBoardStore = vi.mocked(useBoardStore);
+
 vi.mock(
 	"@/utils/create-shared-composable",
 	() =>
@@ -19,17 +26,14 @@ vi.mock("vue-i18n", () => ({
 	useI18n: vi.fn().mockReturnValue({ t: (key: string) => key }),
 }));
 
-vi.mock(
-	"@/utils/pageTitle",
-	() =>
-		({
-			buildPageTitle: (pageTitle) => pageTitle ?? "",
-		}) as typeof import("@/utils/pageTitle")
-);
 describe("BoardPageInformation.composable", () => {
 	let mockedBoardApiCalls: DeepMocked<ReturnType<typeof useBoardApi>>;
 
 	beforeEach(() => {
+		mockedUseBoardStore.mockReturnValue({ board: boardResponseFactory.build() } as ReturnType<typeof useBoardStore>);
+
+		setActivePinia(createTestingPinia());
+
 		mockedBoardApiCalls = createMock<ReturnType<typeof useBoardApi>>();
 		mockedUseBoardApi.mockReturnValue(mockedBoardApiCalls);
 	});
@@ -60,14 +64,14 @@ describe("BoardPageInformation.composable", () => {
 				};
 			};
 
-			it("should return two breadcrumbs: 1. course page and and 2. course-overview page", async () => {
+			it("should return three breadcrumbs: course-overview-page > course-page > board-page", async () => {
 				const { createPageInformation, breadcrumbs } = setup();
 
 				const fakeId = "abc123-1";
 
 				await createPageInformation(fakeId);
 
-				expect(breadcrumbs.value).toHaveLength(2);
+				expect(breadcrumbs.value).toHaveLength(3);
 			});
 
 			it("should set page title", async () => {
@@ -122,14 +126,14 @@ describe("BoardPageInformation.composable", () => {
 				};
 			};
 
-			it("should return two breadcrumbs: 1. room page and and 2. room-overview page", async () => {
+			it("should return three breadcrumbs: room-overview-page > room-page > board-page", async () => {
 				const { createPageInformation, breadcrumbs } = setup();
 
 				const fakeId = "abc123-1";
 
 				await createPageInformation(fakeId);
 
-				expect(breadcrumbs.value).toHaveLength(2);
+				expect(breadcrumbs.value).toHaveLength(3);
 			});
 
 			it("should set page title", async () => {
@@ -183,14 +187,14 @@ describe("BoardPageInformation.composable", () => {
 			expect(breadcrumbs.value).toEqual([]);
 		});
 
-		it("should generate empty page title", async () => {
+		it("should generate page title with generic fallback", async () => {
 			const { createPageInformation, pageTitle } = setup();
 
 			const fakeId = "abc123";
 
 			await createPageInformation(fakeId);
 
-			expect(pageTitle.value).toEqual("");
+			expect(pageTitle.value).toContain("common.labels.room");
 		});
 	});
 });