Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

USAGOV-2028 add regression tests for footer #2074

Merged
merged 4 commits into from
Nov 14, 2024
Merged

USAGOV-2028 add regression tests for footer #2074

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f95141e
USAGOV-2028-Add-regression-tests-for-footer: Verify correct content i…
cwacht Nov 13, 2024
4a9530e
USAGOV-2028-Add-regression-tests-for-footer: Spanish translation for …
cwacht Nov 13, 2024
cf9e455
USAGOV-2028-Add-regression-tests-for-footer: Revert to original test …
cwacht Nov 13, 2024
2529d40
Merge branch 'dev' into USAGOV-2028-Add-regression-tests-for-footer
developer43 Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 77 additions & 36 deletions automated_tests/e2e-cypress/cypress/e2e/regression_testing/footer.cy.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading