add e2e tests for the admin notification-hub + locators

frontend/src/pages/admin/NotificationsHub.vue

@@ -4,23 +4,23 @@
             <ff-page-header title="Notifications Hub" />
         </div>
         <div class="px-3 py-3 md:px-6 md:py-6">
-            <form class="flex flex-col gap-5" @submit.prevent>
+            <form class="flex flex-col gap-5" data-el="notification-form" @submit.prevent>
                 <section class="flex gap-10">
                     <section>
-                        <FormRow v-model="form.title" type="input" placeholder="Title" class="mb-5">
+                        <FormRow v-model="form.title" type="input" placeholder="Title" class="mb-5" data-el="notification-title">
                             Announcement Title
                             <template #description>Enter a concise title for your announcement.</template>
                         </FormRow>
-                        <FormRow v-model="form.message" class="mb-5">
+                        <FormRow v-model="form.message" class="mb-5" data-el="notification-message">
                             Announcement Text
                             <template #description>Provide the details of your announcement.</template>
                             <template #input><textarea v-model="form.message" class="w-full max-h-80 min-h-40" rows="4" /></template>
                         </FormRow>
-                        <FormRow v-model="form.url" type="input" :placeholder="urlPlaceholder" class="mb-5">
+                        <FormRow v-model="form.url" type="input" :placeholder="urlPlaceholder" class="mb-5" data-el="notification-external-url">
                             URL Link
                             <template #description>Provide an url where users will be redirected when they click on the notification.</template>
                         </FormRow>
-                        <ff-checkbox v-model="form.externalUrl">
+                        <ff-checkbox v-model="form.externalUrl" data-el="notification-external-url-toggle">
                             External URL
                         </ff-checkbox>
                     </section>
@@ -29,15 +29,23 @@
                         <div class="ff-description mb-2 space-y-1">Select the audience of your announcement.</div>
 
                         <label class="block text-sm font-medium mb-2">By User Roles</label>
-                        <label v-for="(role, $key) in roleIds" :key="$key" class="ff-checkbox mb-2" @keydown.space.prevent="toggleRole(role)">
-                            <span ref="input" class="checkbox" :checked="form.roles.includes(role)" tabindex="0" @keydown.space.prevent="console.log(2)" />
-                            <input v-model="form.roles" type="checkbox" :value="role" @keydown.space.prevent="console.log(3)">
+                        <label
+                            v-for="(role, $key) in roleIds"
+                            :key="$key"
+                            class="ff-checkbox mb-2"
+                            :data-el="`audience-role-${role}`"
+                            @keydown.space.prevent="toggleRole(role)"
+                        >
+                            <span ref="input" class="checkbox" :checked="form.roles.includes(role)" tabindex="0" @keydown.space.prevent />
+                            <input v-model="form.roles" type="checkbox" :value="role" @keydown.space.prevent>
                             {{ role }}
                         </label>
                     </section>
                 </section>
                 <section class="actions">
-                    <ff-button :disabled="!canSubmit" @click.stop.prevent="submitForm"> Send Announcement </ff-button>
+                    <ff-button :disabled="!canSubmit" data-action="submit" @click.stop.prevent="submitForm">
+                        Send Announcement
+                    </ff-button>
                 </section>
             </form>
         </div>

test/e2e/frontend/cypress/tests/admin/notifications-hub.spec.js

@@ -0,0 +1,57 @@
+describe('FlowForge - Notifications Hub', () => {
+    it('is accessible from the admin menu', () => {
+        cy.login('alice', 'aaPassword')
+
+        cy.home()
+
+        cy.visit('admin/overview')
+
+        cy.wait(['@getSettings'])
+
+        cy.get('[data-nav="notifications-hub"]').click()
+
+        cy.url().should('include', 'notifications-hub')
+
+        cy.get('[data-el="page-name"]').contains('Notifications Hub')
+    })
+
+    it('can send a platform-wide notification', () => {
+        cy.intercept('POST', '/api/*/admin/announcements', { recipientCount: 2 }).as('postAnnouncement')
+        cy.login('alice', 'aaPassword')
+
+        cy.home()
+
+        cy.visit('admin/notifications-hub')
+
+        cy.wait(['@getSettings'])
+
+        cy.get('[data-action="submit"]').should('be.disabled')
+        cy.get('[data-el="notification-title"] input').type('Notification Title')
+        cy.get('[data-action="submit"]').should('be.disabled')
+        cy.get('[data-el="notification-message"] textarea').type('Lorem ipsum and Dolores Umbrige')
+        cy.get('[data-action="submit"]').should('be.disabled')
+        cy.get('[data-el="notification-external-url"] input').type('https://flowfuse.com')
+        cy.get('[data-action="submit"]').should('be.disabled')
+        cy.get('[data-el="audience-role-owner"]').click()
+        cy.get('[data-action="submit"]').should('not.be.disabled')
+
+        cy.get('[data-el="platform-dialog"]').should('not.be.visible')
+
+        cy.get('[data-action="submit"]').click()
+
+        cy.get('[data-el="platform-dialog"]').should('be.visible')
+
+        cy.get('[data-el="platform-dialog"] .ff-dialog-header').contains('Platform Wide Announcement')
+        cy.get('[data-el="platform-dialog"] .ff-dialog-content').contains('You are about to send an announcement to 2 recipients.')
+
+        cy.get('[data-action="dialog-cancel"]').click()
+        cy.get('[data-el="platform-dialog"]').should('not.be.visible')
+
+        cy.get('[data-action="submit"]').click()
+        cy.get('[data-el="platform-dialog"]').should('be.visible')
+        cy.get('[data-action="dialog-confirm"]').click()
+
+        cy.get('[data-el="notification-title"] input').should('be.empty')
+        cy.get('[data-el="notification-message"] textarea').should('be.empty')
+    })
+})