test: add test

fingerprintjs · Jan 31, 2024 · 56b8f2e · 56b8f2e
1 parent d277329
commit 56b8f2e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/e2e/home.spec.ts b/e2e/home.spec.ts
@@ -7,4 +7,17 @@ test.describe('Home page', () => {
     const cards = await page.getByTestId(TEST_IDS.homepageCard.useCaseTitle);
     expect(await cards.count()).toBeGreaterThan(5);
   });
+
+  test('Entire cards should be clickable, clicking on the description or image should take you to the use case', async ({
+    page,
+  }) => {
+    await page.goto('/');
+
+    await page.getByTestId(TEST_IDS.homepageCard.useCaseDescription).first().click({ force: true });
+    await expect(page).toHaveURL('/playground');
+    await page.goBack();
+
+    await page.getByTestId(TEST_IDS.homepageCard.useCaseIcon).first().click({ force: true });
+    await expect(page).toHaveURL('/playground');
+  });
 });
diff --git a/src/client/testIDs.ts b/src/client/testIDs.ts
@@ -18,6 +18,8 @@ export const TEST_IDS = {
   },
   homepageCard: {
     useCaseTitle: 'useCaseTitle',
+    useCaseDescription: 'useCaseDescription',
+    useCaseIcon: 'useCaseIcon',
   },
   loanRisk: {
     monthlyInstallmentValue: 'monthlyInstallmentValue',

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -35,11 +35,16 @@ export default function Index() {
         {HOMEPAGE_CARDS.map((card) => (
           <div className={styles.useCaseCard} key={card.url}>
             <div>
-              <Image src={card.iconSvg} alt="" className={styles.useCaseIcon} />
+              <Image
+                src={card.iconSvg}
+                alt=""
+                className={styles.useCaseIcon}
+                data-testid={TEST_IDS.homepageCard.useCaseIcon}
+              />
               <Link className={styles.useCaseTitle} data-testid={TEST_IDS.homepageCard.useCaseTitle} href={card.url}>
                 {card.title}
               </Link>
-              <div className={styles.useCaseDescription}>
+              <div className={styles.useCaseDescription} data-testid={TEST_IDS.homepageCard.useCaseDescription}>
                 {card.descriptionHomepage?.map((line, i) => <Fragment key={i}>{line}</Fragment>)}
               </div>
             </div>