From 65fb1d8508587f952b2af56026c0eb7970cabc7c Mon Sep 17 00:00:00 2001
From: arjunpras <96985754+arjunpras@users.noreply.github.com>
Date: Wed, 20 Dec 2023 12:31:21 +0530
Subject: [PATCH] feat: Mobile app in footer (#52481)
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
---
client/i18n/locales/english/translations.json | 1 +
.../images/footer-ads/apple-store-badge.svg | 12 +++++
.../images/footer-ads/google-play-badge.svg | 12 +++++
.../Footer/__snapshots__/footer.test.tsx.snap | 49 +++++++++++++++++++
client/src/components/Footer/footer.css | 20 ++++++++
client/src/components/Footer/index.tsx | 28 ++++++++++-
e2e/footer.spec.ts | 48 ++++++++++++++++++
7 files changed, 169 insertions(+), 1 deletion(-)
create mode 100644 client/src/assets/images/footer-ads/apple-store-badge.svg
create mode 100644 client/src/assets/images/footer-ads/google-play-badge.svg
diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index 20f5d16be46..574df39920e 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -315,6 +315,7 @@
"donation-initiatives": "Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.",
"donate-text": "You can <1>make a tax-deductible donation here.",
"trending-guides": "Trending Guides",
+ "mobile-app": "Mobile App",
"our-nonprofit": "Our Charity",
"links": {
"about": "About",
diff --git a/client/src/assets/images/footer-ads/apple-store-badge.svg b/client/src/assets/images/footer-ads/apple-store-badge.svg
new file mode 100644
index 00000000000..8c7e1f9d398
--- /dev/null
+++ b/client/src/assets/images/footer-ads/apple-store-badge.svg
@@ -0,0 +1,12 @@
+
+
+
+
\ No newline at end of file
diff --git a/client/src/assets/images/footer-ads/google-play-badge.svg b/client/src/assets/images/footer-ads/google-play-badge.svg
new file mode 100644
index 00000000000..30d44b38cdc
--- /dev/null
+++ b/client/src/assets/images/footer-ads/google-play-badge.svg
@@ -0,0 +1,12 @@
+
+
+
+
\ No newline at end of file
diff --git a/client/src/components/Footer/__snapshots__/footer.test.tsx.snap b/client/src/components/Footer/__snapshots__/footer.test.tsx.snap
index b733a898267..386f05cf07d 100644
--- a/client/src/components/Footer/__snapshots__/footer.test.tsx.snap
+++ b/client/src/components/Footer/__snapshots__/footer.test.tsx.snap
@@ -316,6 +316,55 @@ exports[` matches snapshot 1`] = `
+
+
+
+ footer.mobile-app
+
+
+
+
+
+
+
+
+ {t('footer.mobile-app')}
+
+
+
+ -
+
+
+
+
+ -
+
+
+
+
+
+
+
diff --git a/e2e/footer.spec.ts b/e2e/footer.spec.ts
index 48c38791429..e06ff3eb8f0 100644
--- a/e2e/footer.spec.ts
+++ b/e2e/footer.spec.ts
@@ -93,6 +93,54 @@ test.describe('Footer Trending Guides section', () => {
});
});
+test.describe('Footer mobile app section', () => {
+ test('should render the download links correctly', async ({ page }) => {
+ await expect(
+ page.getByRole('heading', {
+ level: 2,
+ name: translations.footer['mobile-app']
+ })
+ ).toBeVisible();
+
+ const downloadLinks = await page
+ .getByRole('list', { name: translations.footer['mobile-app'] })
+ .getByRole('listitem')
+ .all();
+
+ expect(downloadLinks).toHaveLength(2);
+
+ const appleStoreLink = downloadLinks[0];
+
+ await expect(
+ appleStoreLink.getByRole('img', { name: 'Apple Store' })
+ ).toBeVisible();
+ await expect(
+ appleStoreLink.getByRole('link', { name: 'Apple Store' })
+ ).toBeVisible();
+ await expect(
+ appleStoreLink.getByRole('link', { name: 'Apple Store' })
+ ).toHaveAttribute(
+ 'href',
+ 'https://apps.apple.com/us/app/freecodecamp/id6446908151?itsct=apps_box_link&itscg=30200'
+ );
+
+ const googlePlayLink = downloadLinks[1];
+
+ await expect(
+ googlePlayLink.getByRole('img', { name: 'Google Play' })
+ ).toBeVisible();
+ await expect(
+ googlePlayLink.getByRole('link', { name: 'Google Play' })
+ ).toBeVisible();
+ await expect(
+ googlePlayLink.getByRole('link', { name: 'Google Play' })
+ ).toHaveAttribute(
+ 'href',
+ 'https://play.google.com/store/apps/details?id=org.freecodecamp'
+ );
+ });
+});
+
test.describe('Footer bottom section', () => {
test('should display the content correctly', async ({ page, isMobile }) => {
if (isMobile) {