From f3a1ddb0515948fbc0d052379bbfca99a7b0ce5e Mon Sep 17 00:00:00 2001
From: Utsav Luintel <utsav.luintel@dzangolab.com>
Date: Thu, 29 Jan 2026 13:51:24 +0545
Subject: [PATCH] test(ui/country-display): add snapshot test

---
 .../__test__/CountryDisplay.snapshot.test.tsx |  72 ++++++++
 .../CountryDisplay.snapshot.test.tsx.snap     | 156 ++++++++++++++++++
 2 files changed, 228 insertions(+)
 create mode 100644 packages/ui/src/CountryDisplay/__test__/CountryDisplay.snapshot.test.tsx
 create mode 100644 packages/ui/src/CountryDisplay/__test__/__snapshots__/CountryDisplay.snapshot.test.tsx.snap

diff --git a/packages/ui/src/CountryDisplay/__test__/CountryDisplay.snapshot.test.tsx b/packages/ui/src/CountryDisplay/__test__/CountryDisplay.snapshot.test.tsx
new file mode 100644
index 000000000..1892f40d5
--- /dev/null
+++ b/packages/ui/src/CountryDisplay/__test__/CountryDisplay.snapshot.test.tsx
@@ -0,0 +1,72 @@
+import { render } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+
+import { Country } from "../../CountryDisplay";
+
+describe("Country Component Snapshots", () => {
+  test("renders basic country with default flag", () => {
+    const { container } = render(<Country code="NP" locale="en" />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test("renders with different flag styles and positions", () => {
+    const { container } = render(
+      <Country code="US" flagsStyle="circle" flagsPosition="right-edge" />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test("renders without flag when showFlag is false", () => {
+    const { container } = render(<Country code="GB" showFlag={false} />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test("renders with custom flagsPath image source", () => {
+    const { container } = render(
+      <Country
+        code="FR"
+        flagsPath={(code) => `https://static.example.com/flags/${code}.svg`}
+      />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test("renders with localized labels", () => {
+    const mockLocales = {
+      fr: {
+        DE: "Allemagne",
+      },
+    };
+
+    const { container } = render(
+      <Country code="DE" locale="fr" locales={mockLocales} />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test("renders using custom renderOption prop", () => {
+    const { container } = render(
+      <Country
+        code="JP"
+        renderOption={(code, label) => (
+          <div className="custom-render">
+            <strong>{code}</strong>: {label}
+          </div>
+        )}
+      />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test("renders fallback hyphen when code is missing or empty", () => {
+    const { container } = render(<Country code="" />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/ui/src/CountryDisplay/__test__/__snapshots__/CountryDisplay.snapshot.test.tsx.snap b/packages/ui/src/CountryDisplay/__test__/__snapshots__/CountryDisplay.snapshot.test.tsx.snap
new file mode 100644
index 000000000..457527f02
--- /dev/null
+++ b/packages/ui/src/CountryDisplay/__test__/__snapshots__/CountryDisplay.snapshot.test.tsx.snap
@@ -0,0 +1,156 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Country Component Snapshots > renders basic country with default flag 1`] = `
+<div>
+  <div
+    class="country-display"
+    data-country-code="NP"
+  >
+    <div
+      class="country-content"
+    >
+      <span
+        class="flag-icon flag-icon-np"
+        title="Nepal"
+      />
+      <span
+        class="country-label"
+      >
+        Nepal
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Country Component Snapshots > renders fallback hyphen when code is missing or empty 1`] = `
+<div>
+  <div
+    class="country-display"
+    data-country-code=""
+  >
+    <div
+      class="country-content"
+    >
+      <span
+        class="country-label"
+      >
+        -
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Country Component Snapshots > renders using custom renderOption prop 1`] = `
+<div>
+  <div
+    class="country-display"
+    data-country-code="JP"
+  >
+    <div
+      class="country-content"
+    >
+      <div
+        class="custom-render"
+      >
+        <strong>
+          JP
+        </strong>
+        : 
+        Japan
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Country Component Snapshots > renders with custom flagsPath image source 1`] = `
+<div>
+  <div
+    class="country-display"
+    data-country-code="FR"
+  >
+    <div
+      class="country-content"
+    >
+      <img
+        alt="France"
+        class="flag-icon flag-icon-fr"
+        src="https://static.example.com/flags/FR.svg"
+        title="France"
+      />
+      <span
+        class="country-label"
+      >
+        France
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Country Component Snapshots > renders with different flag styles and positions 1`] = `
+<div>
+  <div
+    class="country-display"
+    data-country-code="US"
+  >
+    <div
+      class="country-content"
+    >
+      <span
+        class="flag-icon flag-icon-us flag-icon-right-edge flag-icon-rounded"
+        title="United States"
+      />
+      <span
+        class="country-label"
+      >
+        United States
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Country Component Snapshots > renders with localized labels 1`] = `
+<div>
+  <div
+    class="country-display"
+    data-country-code="DE"
+  >
+    <div
+      class="country-content"
+    >
+      <span
+        class="flag-icon flag-icon-de"
+        title="Allemagne"
+      />
+      <span
+        class="country-label"
+      >
+        Allemagne
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Country Component Snapshots > renders without flag when showFlag is false 1`] = `
+<div>
+  <div
+    class="country-display"
+    data-country-code="GB"
+  >
+    <div
+      class="country-content"
+    >
+      <span
+        class="country-label"
+      >
+        United Kingdom
+      </span>
+    </div>
+  </div>
+</div>
+`;