Skip to content

test(ui/country-display): add snapshot test #1686

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

Open
Utsav789 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

test(ui/country-display): add snapshot test #1686

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
72 changes: 72 additions & 0 deletions packages/ui/src/CountryDisplay/__test__/CountryDisplay.snapshot.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
});
});
156 changes: 156 additions & 0 deletions packages/ui/src/CountryDisplay/__test__/__snapshots__/CountryDisplay.snapshot.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
`;