useTitle and test fix

src/components/administration/ProvisioningOptionsPage.unit.ts

@@ -15,6 +15,10 @@ import * as routerComposables from "vue-router/composables";
 
 jest.mock("@data-provisioning-options");
 
+jest.mock<typeof import("@/utils/pageTitle")>("@/utils/pageTitle", () => ({
+	buildPageTitle: (pageTitle) => pageTitle ?? "",
+}));
+
 const $theme = {
 	name: "instance name",
 };

src/components/administration/ProvisioningOptionsPage.vue

@@ -93,7 +93,8 @@ import {
 import { useRouter } from "vue-router/composables";
 import DefaultWireframe from "../templates/DefaultWireframe.vue";
 import { Breadcrumb } from "../templates/default-wireframe.types";
-import { buildPageTitle } from "../../utils/pageTitle";
+import { buildPageTitle } from "@/utils/pageTitle";
+import { useTitle } from "@vueuse/core";
 
 export default defineComponent({
 	name: "ProvisioningOptionsPage",
@@ -112,6 +113,11 @@ export default defineComponent({
 		} = useProvisioningOptionsState();
 		const router = useRouter();
 
+		const pageTitle = buildPageTitle(
+			t("components.administration.provisioningOptions.page.title")
+		);
+		useTitle(pageTitle);
+
 		const schoolSettingsPage: Breadcrumb = {
 			text: t("pages.administration.school.index.title"),
 			to: "/administration/school-settings",
@@ -133,9 +139,6 @@ export default defineComponent({
 		);
 
 		onMounted(async () => {
-			document.title = buildPageTitle(
-				t("components.administration.provisioningOptions.page.title")
-			);
 			await fetchProvisioningOptionsData(props.systemId);
 		});