Merge pull request #1183 from weather-gov/eg-757-alert-url-parsing

Alert URL parsing (and new e2e testing setup)

.github/workflows/code-standards.yaml

@@ -295,6 +295,36 @@ jobs:
       - name: run tests
         run: npx playwright test a11y
 
+  new-end-to-end-tests:
+    name: playwright end to end tests
+    runs-on: ubuntu-latest
+    needs: [populate-database, should-test]
+
+    steps:
+      - uses: browser-actions/setup-chrome@v1
+      - uses: browser-actions/setup-edge@v1
+
+      - name: checkout
+        if: needs.should-test.outputs.yes == 'true'
+        uses: actions/checkout@v4
+
+      - name: setup site
+        if: needs.should-test.outputs.yes == 'true'
+        uses: ./.github/actions/setup-site
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: install dependencies
+        run: npm ci
+
+      - name: install browsers
+        run: npx playwright install --with-deps
+
+      - name: run tests
+        run: npx playwright test e2e/*
+
   end-to-end-tests:
     name: end-to-end tests
     runs-on: ubuntu-latest

package.json

@@ -53,6 +53,8 @@
   "scripts": {
     "load-spatial": "cd spatial-data && node load-shapefiles.js",
     "cypress:e2e": "cypress open --project tests/e2e",
+    "a11y": "playwright test a11y",
+    "playwright:e2e": "playwright test e2e/*",
     "js-component-tests": "npx mocha web/themes/**/tests/components/*-tests.js",
     "js-format": "npx prettier -w 'web/themes/**/assets/**/*.js' 'tests/**/*.js' '*.js'",
     "js-lint": "eslint 'web/**/assets/**/*.js' 'tests/**/*.js' '*.js'",

tests/api/data/e2e/alerts/active__status=actual&area=AR.json

@@ -245,7 +245,7 @@
         "sender": "w-nws.webmaster@noaa.gov",
         "senderName": "NWS Los Angeles/Oxnard CA",
         "headline": "High Wind Warning issued January 3 at 9:50AM PST until January 5 at 1:00AM PST by NWS Los Angeles/Oxnard CA",
-        "description": "* WHAT...North winds 25 to 35 mph with gusts up to 60 to 65 mph\nexpected.\n\n* WHERE...Santa Ynez Mountains Eastern Range.\n\n* WHEN...Until 1 AM PST Friday.\n\n* IMPACTS...Damaging winds will blow down large objects such as\ntrees and power lines. Power outages are expected. Travel will\nbe difficult, especially for high profile vehicles.",
+        "description": "* WHAT...North winds 25 to 35 mph with gusts up to 60 to 65 mph\nexpected.\n\n* WHERE...Santa Ynez Mountains Eastern Range.\n\n* WHEN...Until 1 AM PST Friday.\n\n* IMPACTS...Damaging winds will blow down large objects such as\ntrees and power lines. Power outages are expected. See www.your-power-company.com/outages for more information. Travel will\nbe difficult, especially for high profile vehicles. For road safety, see https://transportation.gov/safe-travels . For more weather information, check out https://weather.gov/your-office for up to date forecasts and alerts.",
         "instruction": "People should avoid being outside in forested areas and around\ntrees and branches. If possible, remain in the lower levels of\nyour home during the windstorm, and avoid windows. Use caution if\nyou must drive.",
         "response": "Prepare",
         "parameters": {

tests/playwright/e2e/alerts.spec.js

@@ -0,0 +1,59 @@
+/* eslint-disable no-await-in-loop, no-plusplus */
+const { test, expect } = require("@playwright/test");
+
+const { describe, beforeEach } = test;
+
+describe("Alerts e2e tests", () => {
+  beforeEach(async ({ page }) => {
+    await page.goto("http://localhost:8081/play/testing");
+    await page.goto("/point/34.749/-92.275");
+  });
+
+  test("The correct number of alerts show on the page", async ({ page }) => {
+    const alertAccordions = await page.locator("weathergov-alerts div.usa-accordion").all();
+    expect(alertAccordions).toHaveLength(6);
+  });
+
+  test("All alert accordions are open by default", async ({ page }) => {
+    const alertAccordions = await page.locator('weathergov-alerts div.usa-accordion button[aria-expanded="true"]').all();
+    expect(alertAccordions).toHaveLength(6);
+  });
+
+  test("Clicking the alert accordion buttons closes them", async ({ page }) => {
+    const alertAccordions = page.locator("weathergov-alerts div.usa-accordion button");
+    for(let i = 0; i < await alertAccordions.count(); i++){
+      await alertAccordions.nth(i).click();
+      await expect(alertAccordions.nth(i)).toHaveAttribute("aria-expanded", "false");
+    }
+  });
+
+  describe("Parsed URLs in alerts", () => {
+    test("Should not find a link wrapping the non-gov url", async ({ page }) => {
+      const containingText = page.locator("weathergov-alerts").getByText("www.your-power-company.com/outages");
+      await expect(containingText).toHaveCount(1);
+
+      const link = page.locator('a[href="www.your-power-company.com/outages"]');
+      await expect(link).toHaveCount(0);
+    });
+
+    test("Should find a link wrapping the external url, and should have the correct class", async ({ page }) => {
+      const containingText = page.locator("weathergov-alerts").getByText("https://transportation.gov/safe-travels");
+      await expect(containingText).toHaveCount(1);
+
+      const link = page.getByRole("link").filter({hasText: "https://transportation.gov/safe-travels"});
+      await expect(link).toHaveCount(1);
+      await expect(link).toHaveAttribute("href", "https://transportation.gov/safe-travels");
+      await expect(link).toHaveClass(/usa-link--external/);
+    });
+
+    test("Should find a link wrapping the inernal url, and should have the correct class", async ({ page }) => {
+      const containingText = page.locator("weathergov-alerts").getByText("https://weather.gov/your-office");
+      await expect(containingText).toHaveCount(1);
+
+      const link = page.getByRole("link").filter({hasText: "https://weather.gov/your-office"});
+      await expect(link).toHaveCount(1);
+      await expect(link).toHaveAttribute("href", "https://weather.gov/your-office");
+      await expect(link).not.toHaveClass(/usa-link--external/);
+    });
+  });
+});