Merge pull request #1464 from weather-gov/eg-1424-touchpoints-footer-…

…padding

Fix touchpoints button padding

Makefile

@@ -116,6 +116,10 @@ ee: end-to-end-test
 end-to-end-test: ## Run end-to-end tests in Cypress. (alias ee)
 	npx cypress run --project tests/e2e
 
+eep: end-to-end-playwright
+end-to-end-playwright: ## Run Playwright version of e2e tests
+	npx playwright test e2e/*
+
 lt: load-time-test
 load-time-test: ## Run page load time tests in Cypress (alias lt)
 	npx cypress run --project tests/load-times

tests/playwright/e2e/touchpoints.spec.js

@@ -0,0 +1,23 @@
+const { test, expect } = require("@playwright/test");
+
+const { describe } = test;
+
+describe("Touchpoints button tests", () => {
+  describe("Basic layout", () => {
+
+    test("Touchpoints button is visible", async ({ page }) => {
+      await page.goto("http://localhost:8080/");
+      const button = await page.locator("a.touchpoints-button");
+
+      await expect(button).toBeVisible();
+    });
+
+    test("Does not occlude any links in the footer", async ({ page }) => {
+      await page.goto("http:localhost:8080/");
+      await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+      const footerLinks = await page.locator("footer a").last();
+
+      await expect(footerLinks).toBeVisible();
+    });
+  });
+});

web/themes/new_weather_theme/templates/layout/footer.html.twig

@@ -1,5 +1,5 @@
 {% if page.footer %}
-  <footer role="contentinfo" class="margin-top-0">
+  <footer role="contentinfo" class="margin-top-0 padding-bottom-3">
     <div class="usa-identifier">
       <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links,">
         <div class="grid-container">