Skip to content

Commit

Permalink
Merge pull request #2074 from usagov/USAGOV-2028-Add-regression-tests…
Browse files Browse the repository at this point in the history
…-for-footer

USAGOV-2028 add regression tests for footer
  • Loading branch information
developer43 authored Nov 14, 2024
2 parents 1d86fbc + 2529d40 commit 614468f
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 48 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const socials = require("../../fixtures/socials.json");
const fixtures = require("../../fixtures/footer.json");
const paths = ["/", "/es"];

paths.forEach((path, idx) => {
Expand All @@ -13,6 +13,8 @@ paths.forEach((path, idx) => {
// Set base URL
cy.visit(path);
});


it(`BTE/S 12: Footer links appear and work appropriately`, () => {
cy.get(".usa-footer__nav")
.find("a")
Expand All @@ -25,7 +27,9 @@ paths.forEach((path, idx) => {
});
});
});
it("BTE/S 13: Email subscription form appears in footer and works appropriately", () => {


it("BTE/S 13: Footer: Email subscription form appears in footer and works appropriately", () => {
const validEmail = "[email protected]";
const invalidEmails = ["test@#$1123", "test2@", "@test3.com"];
const emails = [
Expand Down Expand Up @@ -63,46 +67,83 @@ paths.forEach((path, idx) => {
cy.get("input").filter('[name="email"]').should("have.value", email);
});
});
it("BTE/S 14: Social media icons appear in footer and link to correct places", () => {
for (const social of socials) {
//if spanish check that there are links
if (path === "/es" && social.linkEs.length <= 0) {
continue;
} else {
cy.get(".usa-footer__contact-links")
.find(`[alt="${social.alt_text} USAGov"]`)
.should(
"have.attr",
"src",
`/themes/custom/usagov/images/social-media-icons/${social.name}_Icon.svg`,
);

let socialLink;
if (path === "/es") {
socialLink = social.linkEs;
} else {
socialLink = social.link;
}
cy.get(".usa-footer__contact-links")
.find(`[alt="${social.alt_text} USAGov"]`)
.parent()


it("BTE/S 14: Footer: Social media icons appear in footer and link to correct places", () => {
cy.get(".usa-footer__contact-links")
.within(() => {
// Verify correct text in social media heading
cy.get('h4')
.should("have.text", fixtures.socials_heading[idx])
// Verify correct number of social media links
cy.get('.usa-social-link')
.should('have.length', fixtures.num_socials[idx])
});

// Verify correct social media links, images, alt texts, and accessible names
for (const social of fixtures.socials) {
let socialLink = social.link[idx];
let imgSrc = `${fixtures.iconDir}${social.icon}`

if (socialLink.length > 0) {
cy.get(`.usa-footer__social-links`)
.find(`[href="${socialLink}"]`)
.as("link")
.should("have.attr", "href", socialLink);
.should("have.attr", "href", socialLink)
.within(() => {
cy.get('img')
.should("have.attr", "src", imgSrc)
.should("have.attr", "alt", social.alt_text)
cy.get('span')
.should("have.text", social.name)
});
}
}
});
it("BTE/S 15: Contact Center information appears in footer and phone number links to /phone", () => {
const phones = ["/phone", "/es/llamenos"];
cy.get("#footer-phone").find("a").click();

cy.url().should("include", phones[idx]);

it("BTE/S 15: Footer: Contact Center information appears in footer and phone number links are correct", () => {
cy.get("#footer-phone").within(() => {
cy.get("h4")
.should("have.text", fixtures.contact_heading[idx])
cy.get(".footer-question")
.should("have.text", fixtures.ask_a_question[idx])
cy.get(".usa-footer__contact-info a")
.as("link")
.should("have.text", fixtures.phone_number)
.should("have.attr", "href", fixtures.phone_path[idx])
.click();
cy.url().should("include", fixtures.phone_path[idx]);
});
});
it("BTE/S 16: Subfooter indicating USAGov is official site appears at very bottom", () => {
const identifier = ["official guide", "la guía oficial"];
cy.get(".usa-footer")
.find(".usa-identifier")
.should("contain", "USAGov")
.should("contain", identifier[idx]);


it("BTE/S 16: Footer: Subfooter indicating USAGov is official site appears at very bottom", () => {
cy.get(".usa-identifier__section--usagov")
.should("have.attr", "aria-label", fixtures.official_guide[idx])
.find(".usa-identifier__identity")
.should("have.attr", "aria-label", fixtures.official_site[idx])
.within(() => {
cy.get(".usa-identifier__identity-disclaimer:nth-of-type(1)")
.should("have.text", fixtures.official_guide[idx])
cy.get(".usa-identifier__identity-disclaimer:nth-of-type(2)")
.should("have.text", fixtures.official_site[idx])
.find("a")
.as("link")
.should("have.attr", "href", fixtures.gsa_url).click();
cy.url().should("include", fixtures.gsa_url);
cy.go('back')
});
cy.get(".usa-identifier__section--required-links")
.should("have.attr", "aria-label", fixtures.important_links[idx])
.find("a")
.each((link) => {
cy.wrap(link)
.invoke("attr", "href")
.then((href) => {
cy.request(href).its("status").should("eq", 200);
});
});
});
});
});
88 changes: 88 additions & 0 deletions automated_tests/e2e-cypress/cypress/fixtures/footer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
{
"socials_heading": [
"Find us on social media",
"Encuéntrenos en las redes sociales"
],
"num_socials": [4, 3],
"socials": [
{
"name": "Facebook",
"icon": "Facebook_Icon.svg",
"alt_text": "Facebook USAGov",
"link": [
"https://www.facebook.com/USAgov",
"https://www.facebook.com/usagovespanol"
]
},
{
"name": "Twitter",
"icon": "X_Twitter_Icon.svg",
"alt_text": "X Twitter USAGov",
"link": [
"https://twitter.com/USAgov",
"https://twitter.com/usagovespanol"
]
},
{
"name": "YouTube",
"icon": "YouTube_Icon.svg",
"alt_text": "Youtube USAGov",
"link": [
"https://www.youtube.com/usagov1",
"https://www.youtube.com/USAgovespanol"
]
},
{
"name": "Instagram",
"icon": "Instagram_Icon.svg",
"alt_text": "Instagram USAGov",
"link": [
"https://www.instagram.com/usagov",
""
]
}
],
"iconDir": "/themes/custom/usagov/images/social-media-icons/",


"contact_heading": [
"USAGov Contact Center",
"Centro de llamadas de USAGov"
],
"ask_a_question": [
"Ask USA.gov a question at",
"Haga una pregunta a USAGov en Español al"
],
"phone_path": [
"/phone",
"/es/llamenos"
],
"phone_number": "1-844-USAGOV1 (1-844-872-4681)",


"official_guide": [
"USAGov is the official guide to government information and services",
"USAGov en Español es la guía oficial de información y servicios del Gobierno"
],
"official_site": [
"An official website of the U.S. General Services Administration",
"Un sitio web oficial de la Administración de Servicios Generales de los Estados Unidos (GSA, sigla en inglés)"
],
"gsa_url": "https://www.gsa.gov/",
"important_links": [
"Important links",
"Enlaces importantes"
],
"accessibility_support": [
"GSA accessibility support",
"Política de accesibilidad de\n GSA (en inglés)"
],
"privacy_policy": [
"GSA privacy policy",
"Política de privacidad de\n GSA (en inglés)"
],
"foia_requests": [
"FOIA requests",
"Solicitud a través de\n FOIA (en inglés)"
]
}
16 changes: 8 additions & 8 deletions web/themes/custom/usagov/templates/footer-identifier.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
'official_guide': 'USAGov en Español es la guía oficial de información y servicios del Gobierno',
'official_site_1': 'Un sitio web oficial de la',
'official_site_2': 'Administración de Servicios Generales de los Estados Unidos',
'official_site_3': '(GSA, sigla en inglés)',
'official_site_3': ' (GSA, sigla en inglés)',
'accessibility_support': 'Política de accesibilidad de\n GSA (en inglés)',
'privacy_policy': 'Política de privacidad de\n GSA (en inglés)',
'foia_requests': 'Solicitud a través de\n FOIA (en inglés)'
'foia_requests': 'Solicitud a través de\n FOIA (en inglés)',
'important_links': 'Enlaces importantes'
} %}
{% else %}
{% set translations = {
Expand All @@ -17,23 +18,22 @@
'official_site_3': '',
'accessibility_support': 'GSA accessibility support',
'privacy_policy': 'GSA privacy policy',
'foia_requests': 'FOIA requests'
'foia_requests': 'FOIA requests',
'important_links': 'Important links'
} %}
{% endif %}


<div class="usa-identifier">
<section class="usa-identifier__section usa-identifier__section--usagov" aria-label="{{ translations.official_guide }}">
<div class="usa-identifier__container">
<section class="usa-identifier__identity" aria-label="{{ translations.official_site_1 }} {{ translations.official_site_2 }} {{ translations.official_site_3 }}">
<section class="usa-identifier__identity" aria-label="{{ translations.official_site_1 }} {{ translations.official_site_2 }}{{ translations.official_site_3 }}">
<p class="usa-identifier__identity-disclaimer">{{ translations.official_guide }}</p>
<p class="usa-identifier__identity-disclaimer">
{{ translations.official_site_1 }} <a href="https://www.gsa.gov/">{{ translations.official_site_2 }}</a> {{ translations.official_site_3 }}
</p>
<p class="usa-identifier__identity-disclaimer">{{ translations.official_site_1 }} <a href="https://www.gsa.gov/">{{ translations.official_site_2 }}</a>{{ translations.official_site_3 }}</p>
</section>
</div>
</section>
<nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links">
<nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="{{ translations.important_links }}">
<div class="usa-identifier__container">
<ul class="usa-identifier__required-links-list">
<li class="usa-identifier__required-links-item">
Expand Down
8 changes: 4 additions & 4 deletions web/themes/custom/usagov/templates/footer-secondary.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
'contact_center': 'Centro de llamadas de USAGov',
'ask_a_question': 'Haga una pregunta a USAGov en Español al',
'phone_URL': '/es/llamenos',
'find_us': 'Encuéntrenos en las redes sociales',
'find_us': 'Encuéntrenos en las redes sociales',
'social_media_usernames': ['usagovespanol', 'usagovespanol', 'USAgovespanol']
} %}
{% else %}
Expand Down Expand Up @@ -51,12 +51,12 @@
<div id="footer-phone">
<div class="mobile-lg:grid-col-auto">
<h4 class="usa-footer__logo-heading">
{{ translations.contact_center }}
{{- translations.contact_center -}}
</h4>
</div>
<div class="mobile-lg:grid-col-auto">
<p class="footer-question">
{{ translations.ask_a_question }}
{{- translations.ask_a_question -}}
</p>
<address class="usa-footer__address">
<div class="usa-footer__contact-info">
Expand All @@ -69,7 +69,7 @@
<div class="usa-footer__contact-links mobile-lg:grid-col-6">
<div class="footer-social-block">
<h4 class="usa-footer__contact-heading">
{{ translations.find_us }}
{{- translations.find_us -}}
</h4>
<div class="usa-footer__social-links en-links grid-row grid-gap-1">

Expand Down

0 comments on commit 614468f

Please sign in to comment.