tests(case): adds case reporting test

src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue

@@ -292,6 +292,14 @@ export default {
       this.case_priority = { name: this.$route.query.case_priority }
     }
 
+    if (this.$route.query.title) {
+      this.title = this.$route.query.title
+    }
+
+    if (this.$route.query.description) {
+      this.description = this.$route.query.description
+    }
+
     this.getFAQ()
     this.$watch(
       (vm) => [vm.project],
@@ -301,12 +309,14 @@ export default {
     )
 
     this.$watch(
-      (vm) => [vm.project, vm.case_priority, vm.case_type],
+      (vm) => [vm.project, vm.case_priority, vm.case_type, vm.title, vm.description],
       () => {
         var queryParams = {
           project: this.project ? this.project.name : null,
           case_priority: this.case_priority ? this.case_priority.name : null,
           case_type: this.case_type ? this.case_type.name : null,
+          title: this.title,
+          description: this.description,
         }
         Object.keys(queryParams).forEach((key) => (queryParams[key] ? {} : delete queryParams[key]))
         router.replace({

tests/static/e2e/fixtures/dispatch-fixtures.ts

@@ -1,11 +1,13 @@
 import { test as base } from "@playwright/test"
 import { AuthPage } from "../pages/auth-page"
 import { ReportIncidentPage } from "../pages/report-incident-page"
+import { ReportCasePage } from "../pages/report-case-page"
 import { IncidentsPage } from "../pages/incidents-page"
 
 type DispatchFixtures = {
   authPage: AuthPage
   reportIncidentPage: ReportIncidentPage
+  reportCasePage: ReportCasePage
   incidentsPage: IncidentsPage
 }
 
@@ -18,6 +20,10 @@ export const test = base.extend<DispatchFixtures>({
     await use(new ReportIncidentPage(page))
   },
 
+  reportCasePage: async ({ page }, use) => {
+    await use(new ReportCasePage(page))
+  },
+
   incidentsPage: async ({ page }, use) => {
     const incidentsPage = new IncidentsPage(page)
     await use(incidentsPage)

tests/static/e2e/pages/report-case-page.ts

@@ -0,0 +1,101 @@
+import { expect, Locator, Page } from "@playwright/test"
+import { orgSlug, Routes } from "../routes"
+
+export class ReportCasePage {
+  readonly page: Page
+  readonly route: string
+  readonly reportHeader: Locator
+  readonly titleTextBox: Locator
+  readonly descriptionTextBox: Locator
+  readonly projectDropdown: Locator
+  readonly typeDropdown: Locator
+  readonly priorityDropdown: Locator
+  readonly submitButton: Locator
+  readonly pageBorder: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.route = orgSlug + Routes.ReportCase
+    this.reportHeader = page.getByText("Open a Case").first()
+    this.titleTextBox = page.getByLabel("Title", { exact: true })
+    this.descriptionTextBox = page.getByLabel("Description", { exact: true })
+    this.projectDropdown = page.getByRole("combobox").filter({ hasText: "Project" })
+    this.typeDropdown = page.getByRole("combobox").filter({ hasText: "Type" })
+    this.priorityDropdown = page.getByRole("combobox").filter({ hasText: "Priority" })
+    this.submitButton = page.getByRole("button", { name: "Submit" })
+    this.pageBorder = this.page.locator("span").filter({
+      hasText: "Open a Case Cases are meant to triage events",
+    })
+  }
+
+  async goto() {
+    await Promise.all([
+      this.page.goto(this.route),
+      await this.page.waitForURL(this.route),
+      await expect(this.reportHeader).toBeVisible(),
+    ])
+  }
+
+  async reportCase(
+    title: string,
+    description: string,
+    project: string = "default",
+    type: string = "Security Triage",
+    priority: string = "Low",
+  ) {
+    await this.goto()
+    // give time for default project to settle
+    await this.page.waitForTimeout(3000);
+    await this.addTitle(title)
+    await this.addDescription(description)
+    await this.selectProject(project)
+    await this.selectType(type)
+    await this.selectPriority(priority)
+    await this.page.waitForTimeout(1500);
+    await this.resetPageView()
+    await Promise.all([
+      await this.submitButton.click(),
+      await this.page.waitForLoadState("networkidle"),
+    ])
+  }
+
+  async addTitle(title: string) {
+    await this.titleTextBox.click()
+    await this.titleTextBox.fill(title)
+  }
+
+  async addDescription(description: string) {
+    await this.descriptionTextBox.click()
+    await this.descriptionTextBox.fill(description)
+  }
+
+  async selectProject(project: string) {
+    await this.projectDropdown.click()
+    await this.page.getByText(project, { exact: true }).first().click()
+  }
+
+  async selectType(type: string) {
+    await this.typeDropdown.click()
+    await this.page.getByText(type, { exact: true }).click()
+  }
+
+  async selectPriority(priority: string) {
+    await this.priorityDropdown.click()
+    await this.page.getByText(priority, { exact: true }).click()
+  }
+
+  async resetPageView() {
+    // await this.pageBorder.click()
+  }
+
+  async pageObjectModel(
+    title: string,
+    description: string,
+    project: string = "default",
+    type: string,
+    priority: string = "Low",
+    tags: string[]
+  ) {
+    await this.reportCase(title, description, project, type, priority, tags)
+  }
+}

tests/static/e2e/report-case.spec.ts

@@ -0,0 +1,51 @@
+import register from "./utils/register"
+import { test, expect } from "./fixtures/dispatch-fixtures"
+
+test.describe("Authenticated Dispatch App", () => {
+  test.beforeEach(async ({ authPage }) => {
+    await register(authPage)
+  }),
+    test("Should allow me to report an case", async ({ page, reportCasePage }) => {
+      /* The ability to report a case is one of the most critical
+      user stories in the Dispatch application. */
+
+      const title = "Case Test Created by Playwright"
+      const description = "Test description created by Playwright"
+      const project = "default"
+      const type = "Security Triage"
+      const priority = "Low"
+
+      await reportCasePage.reportCase(title, description, project, type, priority)
+      // Soft validate that we get redirected to the case submission form
+      const expectedURL = encodeURI(
+        `/default/cases/report?project=${project}&case_priority=${priority}&case_type=${type}&title=${title}&description=${description}`
+      )
+      // replace + with %20
+      const pageURL = page.url().replace(/\+/g, "%20")
+
+      await expect.soft(pageURL).toContain(expectedURL)
+
+      // Soft validate that we receive the report form.
+      await expect
+        .soft(
+          page.getByText("Open a Case"),
+          "'Open a Case' text not visible on page after submission of a case."
+        )
+        .toBeVisible()
+
+      // Soft validate that we receive the post-create resources form.
+      await expect
+        .soft(
+          page.getByText(
+            "This page will be populated with case resources as they are created (if available). If you have any questions, please feel free to review the Frequently Asked Questions (FAQ) document linked below, and/or reach out to the listed assignee."
+          ),
+          "'Case Resources' text not visible on page after submission of a case."
+        )
+        .toBeVisible()
+
+      // Soft validate that the ticket link is present
+      const loc = page.getByRole('link', { name: 'Ticket Ticket for tracking purposes. It contains information and links to resources.' })
+      await expect.soft(await loc.first().getAttribute("href")).toContain('default/cases/dispatch-default-default-')
+
+    })
+})

tests/static/e2e/routes.ts

@@ -6,4 +6,5 @@ export enum Routes {
   Dashboards = "/dashboards/incidents",
   Incidents = "/incidents",
   ReportIncident = "/incidents/report",
+  ReportCase = "/cases/report",
 }