diff --git a/web/app/components/NotificationBox.nuxt.test.ts b/web/app/components/NotificationBox.nuxt.test.ts index d8756a7e..52f64a76 100644 --- a/web/app/components/NotificationBox.nuxt.test.ts +++ b/web/app/components/NotificationBox.nuxt.test.ts @@ -443,24 +443,18 @@ describe("", { concurrent: false }, () => { expect(calls[0]?.body).toEqual({ ids: [] }) }) - it("does nothing when every notification is already read", async ({ + it("hides the button when every notification is already read", async ({ expect, }) => { - const calls = mockEndpoint( - "PUT", - "/api/notifications/read-status", - () => ({}), - ) seedNotifications([makeNotification({ read: true })]) + const wrapper = await mountBox() - await findButtonByText( - wrapper, - t("notification.read-all-button"), - ).trigger("click") - await flushPromises() - - expect(calls).toHaveLength(0) + expect( + wrapper + .findAll("button") + .some((b) => b.text().includes(t("notification.read-all-button"))), + ).toBe(false) }) it("warns when marking everything read fails", async ({ expect }) => { diff --git a/web/app/components/NotificationBox.vue b/web/app/components/NotificationBox.vue index d372c07d..4f49f997 100644 --- a/web/app/components/NotificationBox.vue +++ b/web/app/components/NotificationBox.vue @@ -29,6 +29,10 @@ const notifications = computed( () => fetchNotifications.data.value?.notifications ?? [], ) +const hasUnreadNotifications = computed(() => + notifications.value.some((n) => !n.read), +) + onMounted(() => { unsubWsNotifications = wsState.state?.subscribe( WS_NOTIFICATION_CREATION_TOPIC, @@ -235,8 +239,7 @@ async function handleMarkRead( } async function handleMarkAllRead() { - const unreadNotificationIds = notifications.value.filter((n) => !n.read) - if (unreadNotificationIds.length === 0) { + if (!hasUnreadNotifications.value) { return } @@ -261,6 +264,7 @@ async function handleMarkAllRead() {