From f8f65ed97b2be43d6a77b2ac9b0431a9de302902 Mon Sep 17 00:00:00 2001
From: Sawaymaan Singh <sawaymas@stud.ntnu.no>
Date: Thu, 17 Sep 2026 15:35:50 +0200
Subject: [PATCH] test: create a snapshot test

Adds a snapshot test for CountryCard using fixed test data, with the useId()-generated heading id normalized so the snapshot only reflects stable content.

Closes #47
---
 .../src/components/CountryCard.test.tsx       | 25 +++++
 .../__snapshots__/CountryCard.test.tsx.snap   | 97 +++++++++++++++++++
 2 files changed, 122 insertions(+)
 create mode 100644 country-explorer/src/components/__snapshots__/CountryCard.test.tsx.snap

diff --git a/country-explorer/src/components/CountryCard.test.tsx b/country-explorer/src/components/CountryCard.test.tsx
index 234814f..316f272 100644
--- a/country-explorer/src/components/CountryCard.test.tsx
+++ b/country-explorer/src/components/CountryCard.test.tsx
@@ -72,3 +72,28 @@ describe('CountryCard', () => {
     expect(screen.getAllByText('Not available')).toHaveLength(6);
   });
 });
+
+describe('CountryCard snapshot', () => {
+  it('matches the snapshot for a country with complete data', () => {
+    const { container } = render(
+      <CountryCard country={country} isFavorite={false} onToggleFavorite={vi.fn()} />,
+    );
+
+    // CountryCard links its heading to the card with an id from useId().
+    // That id is a React implementation detail, not something derived from
+    // the country data, and it isn't guaranteed to stay the same (it can
+    // shift with the React version or render order). Replace it with a
+    // fixed placeholder so the snapshot only captures data that should
+    // actually stay the same, and doesn't fail for unrelated reasons.
+    const heading = container.querySelector('h3');
+    const article = container.querySelector('article');
+    heading?.setAttribute('id', 'country-card-heading');
+    article?.setAttribute('aria-labelledby', 'country-card-heading');
+
+    // To intentionally update this snapshot after a real change to
+    // CountryCard's markup, run `npm test -- -u` (or `npx vitest -u`) and
+    // review the diff in __snapshots__/CountryCard.test.tsx.snap before
+    // committing it.
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/country-explorer/src/components/__snapshots__/CountryCard.test.tsx.snap b/country-explorer/src/components/__snapshots__/CountryCard.test.tsx.snap
new file mode 100644
index 0000000..0e65294
--- /dev/null
+++ b/country-explorer/src/components/__snapshots__/CountryCard.test.tsx.snap
@@ -0,0 +1,97 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CountryCard snapshot > matches the snapshot for a country with complete data 1`] = `
+<article
+  aria-labelledby="country-card-heading"
+  class="country-card"
+>
+  <img
+    alt="Flag of Norway"
+    class="country-card__flag"
+    src="https://example.com/flags/no.svg"
+  />
+  <div
+    class="country-card__content"
+  >
+    <div
+      class="country-card__heading-row"
+    >
+      <h3
+        id="country-card-heading"
+      >
+        Norway
+      </h3>
+      <button
+        aria-label="Add Norway to favorites"
+        aria-pressed="false"
+        class="favorite-button"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="favorite-button__icon"
+        >
+          ☆
+        </span>
+        <span
+          class="favorite-button__text"
+        >
+          Favorite
+        </span>
+      </button>
+    </div>
+    <dl
+      class="country-card__details"
+    >
+      <div>
+        <dt>
+          Capital
+        </dt>
+        <dd>
+          Oslo
+        </dd>
+      </div>
+      <div>
+        <dt>
+          Region
+        </dt>
+        <dd>
+          Europe
+        </dd>
+      </div>
+      <div>
+        <dt>
+          Population
+        </dt>
+        <dd>
+          5,379,475
+        </dd>
+      </div>
+      <div>
+        <dt>
+          Area
+        </dt>
+        <dd>
+          323,802 km²
+        </dd>
+      </div>
+      <div>
+        <dt>
+          Languages
+        </dt>
+        <dd>
+          Norwegian, Sámi
+        </dd>
+      </div>
+      <div>
+        <dt>
+          Currency
+        </dt>
+        <dd>
+          Norwegian krone (NOK)
+        </dd>
+      </div>
+    </dl>
+  </div>
+</article>
+`;