feat: GEO 1063 write announcements feature e2e tests

admin-frontend/e2e/announcements.spec.ts

@@ -0,0 +1,105 @@
+import { expect, test } from '@playwright/test';
+import { AnnouncementsPage } from './pages/announcements/announcements-page';
+import { AddAnnouncementPage } from './pages/announcements/add-announcement-page';
+import { EditAnnouncementPage } from './pages/announcements/edit-announcement-page';
+import { AnnouncementStatus } from './types';
+
+test.describe('Announcements', () => {
+  test.describe('add announcement', () => {
+    test('save as draft', async ({ page }) => {
+      const announcementsPage = await AnnouncementsPage.visit(page);
+      await announcementsPage.clickAddAnnouncementButton();
+      const addAnnouncementPage = await AddAnnouncementPage.visit(page);
+      await addAnnouncementPage.fillDraftForm();
+      const announcement = await addAnnouncementPage.save(AnnouncementStatus.DRAFT);
+      await expect(announcement.status).toBe(AnnouncementStatus.DRAFT);
+      await expect(announcement.title).toBeDefined();
+      await expect(announcement.description).toBeDefined();
+      await expect(announcement.active_on).toBeNull();
+      await expect(announcement.expires_on).toBeNull();
+      await announcementsPage.search(announcement.title);
+      await announcementsPage.expectTitleVisible(announcement.title);
+    });
+
+    test('save as published', async ({ page }) => {
+      const announcementsPage = await AnnouncementsPage.visit(page);
+      await announcementsPage.clickAddAnnouncementButton();
+      const addAnnouncementPage = await AddAnnouncementPage.visit(page);
+      await addAnnouncementPage.fillPublishedForm();
+      await addAnnouncementPage.verifyPreview();
+      const announcement = await addAnnouncementPage.save(AnnouncementStatus.PUBLISHED);
+      await expect(announcement.status).toBe(AnnouncementStatus.PUBLISHED);
+      await expect(announcement.title).toBeDefined();
+      await expect(announcement.description).toBeDefined();
+      await expect(announcement.active_on).toBeDefined();
+      await expect(announcement.expires_on).toBeDefined();
+      await announcementsPage.search(announcement.title);
+      await announcementsPage.expectTitleVisible(announcement.title);
+    });
+
+    test('save announcement with file attachment', async ({ page }) => {
+      const announcementsPage = await AnnouncementsPage.visit(page);
+      await announcementsPage.clickAddAnnouncementButton();
+      const addAnnouncementPage = await AddAnnouncementPage.visit(page);
+
+      await addAnnouncementPage.fillDraftForm();
+      await addAnnouncementPage.chooseFile(false);
+      await addAnnouncementPage.expectFileInvalidError();
+      await addAnnouncementPage.chooseFile(true);
+      const announcement = await addAnnouncementPage.save(AnnouncementStatus.DRAFT);
+      await expect(announcement.status).toBe(AnnouncementStatus.DRAFT);
+      await expect(announcement.title).toBeDefined();
+      await expect(announcement.description).toBeDefined();
+      await expect(announcement.active_on).toBeNull();
+      await expect(announcement.expires_on).toBeNull();
+      await announcementsPage.search(announcement.title);
+      await announcementsPage.expectTitleVisible(announcement.title);
+    });
+  });
+
+  test.describe('edit announcement', () => {
+    test('should successfully edit and save announcement', async ({ page }) => {
+      const announcementsPage = await AnnouncementsPage.visit(page);
+      await announcementsPage.clickAddAnnouncementButton();
+      const addAnnouncementPage = await AddAnnouncementPage.visit(page);
+      await addAnnouncementPage.fillPublishedForm();
+      const { title } = await addAnnouncementPage.save(AnnouncementStatus.PUBLISHED);
+      const announcement = await announcementsPage.searchAndEdit(title);
+      const editAnnouncementPage = new EditAnnouncementPage(page);
+      await editAnnouncementPage.setup();
+      editAnnouncementPage.initialData = announcement;
+      await editAnnouncementPage.verifyLoadedData();
+      await editAnnouncementPage.editForm();
+      const changes = await editAnnouncementPage.saveChanges();
+      expect(changes.announcement_id).toBe(announcement.announcement_id);
+      await announcementsPage.search(changes.title);
+      await announcementsPage.expectTitleVisible(changes.title);
+      await announcementsPage.expectDatesVisible(
+        changes.active_on,
+        changes.expires_on,
+      );
+      await announcementsPage.expectStatusVisible(changes.status);
+    });
+  });
+
+  test.describe('archive announcement', () => {
+    test('should successfully archive an announcement', async ({ page }) => {
+      const announcementsPage = await AnnouncementsPage.visit(page);
+      await announcementsPage.clickAddAnnouncementButton();
+      const addAnnouncementPage = await AddAnnouncementPage.visit(page);
+      await addAnnouncementPage.fillPublishedForm();
+      const { title } = await addAnnouncementPage.save(AnnouncementStatus.PUBLISHED);
+      await announcementsPage.archiveAnnouncement(title);
+    });
+  });
+  test.describe('unpublish announcement', () => {
+    test('should successfully unpublish an announcement', async ({ page }) => {
+      const announcementsPage = await AnnouncementsPage.visit(page);
+      await announcementsPage.clickAddAnnouncementButton();
+      const addAnnouncementPage = await AddAnnouncementPage.visit(page);
+      await addAnnouncementPage.fillPublishedForm();
+      const { title } = await addAnnouncementPage.save(AnnouncementStatus.PUBLISHED);
+      await announcementsPage.unpublishedAnnouncement(title);
+    });
+  });
+});

admin-frontend/e2e/assets/announcements/invalid.com

@@ -0,0 +1 @@
+X5O!P%@AP[4\PZX54(P^)7CC)7}$EICAR-STANDARD-ANTIVIRUS-TEST-FILE!$H+H*

admin-frontend/e2e/pages/announcements/add-announcement-page.ts

@@ -0,0 +1,42 @@
+import { LocalDate } from '@js-joda/core';
+import { PagePaths } from '../../utils';
+import { FormPage } from './form-page';
+import { faker } from '@faker-js/faker';
+import { AnnouncementStatus } from '../../types';
+
+export class AddAnnouncementPage extends FormPage {
+  static path = PagePaths.ADD_ANNOUNCEMENTS;
+
+  async setup() {
+    await super.setup();
+  }
+
+  static async visit(page) {
+    await page.goto(AddAnnouncementPage.path);
+    const addAnnouncementPage = new AddAnnouncementPage(page);
+    await addAnnouncementPage.setup();
+    return addAnnouncementPage;
+  }
+
+  async saveAnnouncementAsDraft() {
+    await this.save(AnnouncementStatus.DRAFT);
+    await this.page.waitForURL(PagePaths.ANNOUNCEMENTS);
+  }
+
+  async fillDraftForm() {
+    await this.fillTitle(faker.lorem.words(3));
+    await this.fillDescription(faker.lorem.words(10));
+  }
+
+  async fillPublishedForm() {
+    await this.fillTitle(faker.lorem.words(3));
+    await this.fillDescription(faker.lorem.words(10));
+    const activeOn = LocalDate.now();
+    const expiresOn = LocalDate.now().plusDays(1);
+    await this.fillActiveOn(activeOn);
+    await this.fillExpiresOn(expiresOn);
+    await this.fillLinkUrl(faker.internet.url());
+    await this.fillLinkTextInput(faker.lorem.words(3));
+    await this.chooseFile(true);
+  }
+}

admin-frontend/e2e/pages/announcements/announcements-page.ts

@@ -0,0 +1,217 @@
+import { expect, Locator, Page } from 'playwright/test';
+import { PagePaths } from '../../utils';
+import { AdminPortalPage } from '../admin-portal-page';
+import { DateTimeFormatter, ZonedDateTime, ZoneId } from '@js-joda/core';
+import { Locale } from '@js-joda/locale_en';
+import { AnnouncementStatus } from '../../types';
+
+export class AnnouncementsPage extends AdminPortalPage {
+  static path = PagePaths.ANNOUNCEMENTS;
+  addAnnouncementButton: Locator;
+  searchInput: Locator;
+  searchButton: Locator;
+  resetButton: Locator;
+
+  static async visit(page: Page) {
+    await page.goto(PagePaths.ANNOUNCEMENTS);
+    const announcementsPage = new AnnouncementsPage(page);
+    await announcementsPage.setup();
+    return announcementsPage;
+  }
+
+  async setup() {
+    await super.setup();
+    this.addAnnouncementButton = await this.page.getByRole('link', {
+      name: 'Add Announcement',
+    });
+    this.searchInput = await this.page.getByLabel('Search by title');
+    this.searchButton = await this.page.getByRole('button', { name: 'Search' });
+    this.resetButton = await this.page.getByRole('button', { name: 'Reset' });
+    await expect(this.searchInput).toBeVisible();
+    await expect(this.searchButton).toBeVisible();
+    await expect(this.addAnnouncementButton).toBeVisible();
+    await expect(this.resetButton).toBeVisible();
+  }
+
+  async clickAddAnnouncementButton() {
+    await this.addAnnouncementButton.click();
+    await this.page.waitForURL(PagePaths.ADD_ANNOUNCEMENTS);
+  }
+
+  async expectTitleVisible(title: string) {
+    const titleElement = await this.page.getByText(title);
+    await expect(titleElement).toBeVisible();
+  }
+
+  async expectStatusVisible(status: string) {
+    const statusElement = await this.page.getByText(status);
+    await expect(statusElement).toBeVisible();
+  }
+
+  async expectDatesVisible(activeOn: string, expiresOn: string) {
+    if (activeOn) {
+      const activeOnElement = await this.page.getByText(
+        this.formatDate(activeOn),
+      );
+      await expect(activeOnElement).toBeVisible();
+    }
+
+    if (expiresOn) {
+      const expiresOnElement = await this.page.getByText(
+        this.formatDate(expiresOn),
+      );
+      await expect(expiresOnElement).toBeVisible();
+    }
+  }
+
+  async search(title: string) {
+    await this.page.waitForTimeout(3000);
+    await this.searchInput.fill(title);
+    const searchResponse = this.waitForSearch();
+    await this.searchButton.click();
+    const response = await searchResponse;
+    return response.json();
+  }
+
+  async searchAndEdit(title: string) {
+    const { items } = await this.search(title);
+    expect(items).toHaveLength(1);
+    await this.expectTitleVisible(title);
+    const actions = await this.page.getByRole('button', { name: 'Actions' });
+    const actionsButton = await actions.first();
+
+    await actionsButton.click();
+    const getAnnouncementResponse = this.waitForGetAnnouncement(
+      items[0].announcement_id,
+    );
+    const editButton = await this.page.getByRole('button', { name: 'Edit' });
+    await editButton.click();
+    const response = await getAnnouncementResponse;
+    await response.json();
+    await this.page.waitForURL(PagePaths.EDIT_ANNOUNCEMENTS);
+    return items[0];
+  }
+
+  async archiveAnnouncement(title: string) {
+    await this.search(title);
+    await this.expectTitleVisible(title);
+    const actions = await (
+      await this.page.getByRole('button', { name: 'Actions' })
+    ).first();
+    await actions.click();
+    const archiveButton = await this.page.getByRole('button', {
+      name: 'Archive',
+      disabled: false,
+    });
+    await expect(archiveButton).toBeVisible();
+    await archiveButton.click();
+    const confirmButton = await this.page.getByRole('button', {
+      name: 'Confirm',
+    });
+    const archiveAnnouncementResponse = this.waitForPatchReponse();
+    const searchResponse = this.waitForSearch();
+    await confirmButton.click();
+    const response = await archiveAnnouncementResponse;
+    await response.json();
+    const searchResponseJson = await searchResponse;
+    await searchResponseJson.json();
+    await this.page.waitForURL(PagePaths.ANNOUNCEMENTS);
+    await this.expectEmptySearchResults();
+  }
+
+  async unpublishedAnnouncement(title: string) {
+    await this.search(title);
+    await this.expectTitleVisible(title);
+    await this.expectStatusVisible(AnnouncementStatus.PUBLISHED);
+    const actions = await (
+      await this.page.getByRole('button', { name: 'Actions' })
+    ).first();
+
+    await actions.click();
+    const unpublishButton = await this.page.getByRole('button', {
+      name: 'Unpublish',
+      disabled: false,
+    });
+    await expect(unpublishButton).toBeVisible();
+    await unpublishButton.click();
+    const confirmButton = await this.page.getByRole('button', {
+      name: 'Confirm',
+    });
+    const archiveAnnouncementResponse = this.waitForPatchReponse();
+    const searchResponse = this.waitForSearch();
+    await confirmButton.click();
+    const response = await archiveAnnouncementResponse;
+    await response.json();
+    const searchResponseJson = await searchResponse;
+    await searchResponseJson.json();
+    await this.page.waitForTimeout(2000);
+    await this.expectTitleVisible(title);
+    await this.expectStatusVisible(AnnouncementStatus.DRAFT);
+    await this.reset();
+  }
+
+  private async expectEmptySearchResults() {
+    const noResults = await this.page.getByText(
+      'No announcements matched the search criteria',
+    );
+    await expect(noResults).toBeVisible;
+  }
+
+  private async reset() {
+    const searchResponse = this.waitForSearch();
+    await this.resetButton.click();
+    const response = await searchResponse;
+    await response.json();
+    await expect(this.searchInput).toHaveValue('');
+    await this.page.waitForURL(PagePaths.ANNOUNCEMENTS);
+  }
+
+  private async waitForSearch() {
+    const searchResponse = this.page.waitForResponse((res) => {
+      return (
+        res.status() === 200 &&
+        res.url().includes('/admin-api/v1/announcements') &&
+        res.request().method() === 'GET'
+      );
+    });
+
+    return searchResponse;
+  }
+
+  private async waitForGetAnnouncement(id: string) {
+    const getAnnouncementResponse = this.page.waitForResponse((res) => {
+      return (
+        res.status() === 200 &&
+        res.url().includes(`/admin-api/v1/announcements/${id}`) &&
+        res.request().method() === 'GET'
+      );
+    });
+
+    return getAnnouncementResponse;
+  }
+
+  private async waitForPatchReponse() {
+    const getAnnouncementResponse = this.page.waitForResponse((res) => {
+      return (
+        res.status() === 201 &&
+        res.url().includes(`/admin-api/v1/announcements`) &&
+        res.request().method() === 'PATCH'
+      );
+    });
+
+    return getAnnouncementResponse;
+  }
+
+  private formatDate(
+    inDateStr: string,
+    inFormatter = DateTimeFormatter.ISO_DATE_TIME,
+    outFormatter = DateTimeFormatter.ofPattern('MMM d, yyyy').withLocale(
+      Locale.CANADA,
+    ),
+  ) {
+    const date = ZonedDateTime.parse(inDateStr, inFormatter);
+    const localTz = ZoneId.systemDefault();
+    const dateInLocalTz = date.withZoneSameInstant(localTz);
+    return outFormatter.format(dateInLocalTz);
+  }
+}