diff --git a/admin-frontend/src/App.vue b/admin-frontend/src/App.vue index aa5bcd7a..87032cd7 100644 --- a/admin-frontend/src/App.vue +++ b/admin-frontend/src/App.vue @@ -10,15 +10,11 @@ class="d-flex flex-column align-start" :class="{ 'ptap-panel': areHeaderAndSidebarVisible }" > -
-

- {{ activeRoute.meta.pageTitle }} -

- -
+ + @@ -49,9 +45,7 @@ export default { data() { return { areHeaderAndSidebarVisible: false, - isTitleVisible: false, isBreadcrumbTrailVisible: false, - activeRoute: null, }; }, computed: { @@ -73,13 +67,11 @@ export default { appStore, ...mapActions(authStore, ['doesUserHaveRole']), onRouteChanged(to, from) { - this.activeRoute = to; if (to.fullPath != '/error') { //Reset error page message back to the default NotificationService.setErrorPageMessage(); } this.areHeaderAndSidebarVisible = to.meta.requiresAuth; - this.isTitleVisible = to?.meta?.isTitleVisible && to?.meta?.pageTitle; this.isBreadcrumbTrailVisible = to?.meta?.breadcrumbs?.length && this.doesUserHaveRole(USER_ROLE_NAME); }, diff --git a/admin-frontend/src/__tests__/App.spec.ts b/admin-frontend/src/__tests__/App.spec.ts index 6024dd85..77f45f9f 100644 --- a/admin-frontend/src/__tests__/App.spec.ts +++ b/admin-frontend/src/__tests__/App.spec.ts @@ -1,4 +1,5 @@ import { createTestingPinia } from '@pinia/testing'; +import { waitFor } from '@testing-library/vue'; import { flushPromises, mount } from '@vue/test-utils'; import { getActivePinia, setActivePinia } from 'pinia'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; @@ -9,7 +10,6 @@ import * as directives from 'vuetify/directives'; import App from '../App.vue'; import router from '../router'; import { authStore } from '../store/modules/auth'; -import { waitFor } from '@testing-library/vue'; // Mock the ResizeObserver const ResizeObserverMock = vi.fn(() => ({ @@ -144,7 +144,6 @@ describe('App', () => { }; mockDoesUserHaveRole.mockReturnValueOnce(false); componentEnv.app.vm.onRouteChanged(to, null); - expect(componentEnv.app.vm.activeRoute).toStrictEqual(to); expect(componentEnv.app.vm.areHeaderAndSidebarVisible).toBe( to.meta.requiresAuth, ); diff --git a/admin-frontend/src/components/BreadcrumbTrail.vue b/admin-frontend/src/components/BreadcrumbTrail.vue index 4bd3da14..87296bc8 100644 --- a/admin-frontend/src/components/BreadcrumbTrail.vue +++ b/admin-frontend/src/components/BreadcrumbTrail.vue @@ -1,9 +1,9 @@ diff --git a/admin-frontend/src/components/__tests__/Header.spec.ts b/admin-frontend/src/components/__tests__/Header.spec.ts index 0805a920..090aed6b 100644 --- a/admin-frontend/src/components/__tests__/Header.spec.ts +++ b/admin-frontend/src/components/__tests__/Header.spec.ts @@ -1,16 +1,26 @@ import { createTestingPinia } from '@pinia/testing'; import { render, screen } from '@testing-library/vue'; import { beforeEach, describe, expect, it, vi } from 'vitest'; +import { nextTick } from 'vue'; +import { createRouter, createWebHistory } from 'vue-router'; import { createVuetify } from 'vuetify'; +import router from '../../router'; import { authStore } from '../../store/modules/auth'; import Header from '../Header.vue'; const pinia = createTestingPinia(); const vuetify = createVuetify(); + +const routes = router.getRoutes(); +const mockRouter = createRouter({ + history: createWebHistory(), + routes: routes, +}); + const wrappedRender = async () => { return render(Header, { global: { - plugins: [pinia, vuetify], + plugins: [pinia, vuetify, mockRouter], }, }); }; @@ -41,4 +51,29 @@ describe('Header', () => { expect(screen.getByTestId('logout-btn')).toHaveTextContent('Logout'); }); }); + + describe('when route has a pageTitle but not sectionTitle', () => { + it('route pageTitle is shown', async () => { + const { getByText } = await wrappedRender(); + const route = routes.find((r) => r.name == 'announcements'); //this route doesn't have a section title + await mockRouter.push({ name: route.name }); + await nextTick(); + const expectedTitle = route.meta.sectionTitle + ? route.meta.sectionTitle + : route.meta.pageTitle; + expect(getByText(expectedTitle)).toBeInTheDocument(); + }); + }); + describe('when route has a sectionTitle', () => { + it('route sectionTitle is shown (not pageTitle)', async () => { + const { getByText } = await wrappedRender(); + const route = routes.find((r) => r.name == 'add-announcement'); //this route has a section title + await mockRouter.push({ name: route.name }); + await nextTick(); + const expectedTitle = route.meta.sectionTitle + ? route.meta.sectionTitle + : route.meta.pageTitle; + expect(getByText(expectedTitle)).toBeInTheDocument(); + }); + }); }); diff --git a/admin-frontend/src/components/announcements/AnnouncementForm.vue b/admin-frontend/src/components/announcements/AnnouncementForm.vue index a1be4ac3..d24692cc 100644 --- a/admin-frontend/src/components/announcements/AnnouncementForm.vue +++ b/admin-frontend/src/components/announcements/AnnouncementForm.vue @@ -4,7 +4,12 @@

{{ title }}

- Cancel @@ -34,8 +39,8 @@
- - + +
@@ -180,9 +185,7 @@ variant="outlined" > @@ -303,7 +306,6 @@ const isPreviewVisible = computed(() => announcementsToPreview.value?.length); const isConfirmDialogVisible = ref(false); const attachment = ref(null); -console.log(announcement) const { handleSubmit, setErrors, errors, meta, values } = useForm({ initialValues: { title: announcement?.title || '', @@ -542,8 +544,16 @@ const handleSave = handleSubmit(async (values) => { await emits('save', { ...values, - published_on: values.published_on ? convert(LocalDate.from(nativeJs(values.published_on))).toDate().toISOString() : undefined, - expires_on: values.expires_on ? convert(LocalDate.from(nativeJs(values.expires_on))).toDate().toISOString() : undefined, + published_on: values.published_on + ? convert(LocalDate.from(nativeJs(values.published_on))) + .toDate() + .toISOString() + : undefined, + expires_on: values.expires_on + ? convert(LocalDate.from(nativeJs(values.expires_on))) + .toDate() + .toISOString() + : undefined, linkDisplayName: isEmpty(values.linkDisplayName) ? undefined : values.linkDisplayName, @@ -554,7 +564,7 @@ const handleSave = handleSubmit(async (values) => { }); -