-
-
- #{id.toString().padStart(ID_LENGTH, '0')}
-
-
-
-
{capitalizedName}
-
-
Types:
-
- {typeContent}
-
-
-
-
Abilities:
-
- {abilityContent}
-
-
- {description && (
-
-
Description:
-
{description}
-
- )}
-
-
- Height: {height * 10} cm
-
-
- Weight: {weight / 10} kg
-
-
+ const capitalizedName =
+ name.length > 0 ? name[0].toUpperCase() + name.slice(1) : name;
+
+ const isDetailed = variant === 'detailed';
+
+ const config = cardConfig(item);
+
+ const options = config.data.filter(
+ (option) =>
+ (option.visible === 'always' || isDetailed) && option.condition !== false,
+ );
+
+ const handleClick = () => {
+ onClick?.();
+ };
+
+ return (
+
+
+
+ #{id.toString().padStart(ID_LENGTH, '0')}
+
+
+
{capitalizedName}
+
+ {options.map((option, index) => (
+
+ ))}
+
+ );
+}
+
+type CardOptionProps = {
+ label: string;
+ value: string | number;
+ variant?: 'inline' | 'block';
+};
+
+export function CardOption({
+ label,
+ value,
+ variant = 'block',
+}: CardOptionProps) {
+ if (variant === 'inline') {
+ return (
+
+ {label} {value}
+
);
}
+
+ return (
+
+ );
}
diff --git a/src/components/detail-view/detail-view.module.css b/src/components/detail-view/detail-view.module.css
new file mode 100644
index 0000000..a37af89
--- /dev/null
+++ b/src/components/detail-view/detail-view.module.css
@@ -0,0 +1,76 @@
+.detail-view {
+ position: relative;
+
+ overflow-y: auto;
+
+ width: 100%;
+ max-width: 100%;
+ height: 100%;
+ padding: 1rem;
+
+ @media (width <= 560px) {
+ padding: 0;
+ }
+}
+
+.header {
+ position: relative;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ margin-bottom: 1rem;
+}
+
+.title {
+ margin: 0;
+
+ font-size: 1.5rem;
+ font-weight: var(--font-weight-semibold);
+ line-height: 1;
+ text-align: center;
+
+ @media (width <= 900px) {
+ font-size: 1.25rem;
+ }
+}
+
+.close-button {
+ cursor: pointer;
+
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 2rem;
+ height: 2rem;
+ padding: 0.5rem;
+ border: none;
+ border-radius: 50%;
+
+ font-size: 1.5rem;
+ line-height: 1;
+
+ background: none;
+
+ transition: background-color var(--transition-default) var(--ease-in-cubic);
+}
+
+.close-button:hover {
+ color: var(--color-yellow-600);
+}
+
+.loader-overlay {
+ position: absolute;
+ inset: 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/src/components/detail-view/detail-view.test.tsx b/src/components/detail-view/detail-view.test.tsx
new file mode 100644
index 0000000..8fb1bad
--- /dev/null
+++ b/src/components/detail-view/detail-view.test.tsx
@@ -0,0 +1,156 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { DetailView } from './detail-view';
+import { useDetailData } from '@/hooks/use-detail-data';
+import { useDetailNavigation } from '@/hooks/use-detail-navigation';
+import { API_STATUS, ERROR_MESSAGES } from '@/constants/constants';
+import type { PokemonWithDescription } from '@/types/api';
+import { mockItemFull } from '@/test-utils/api-mock';
+import userEvent from '@testing-library/user-event';
+
+vi.mock('@/hooks/use-detail-data', () => ({
+ useDetailData: vi.fn(),
+}));
+
+vi.mock('@/hooks/use-detail-navigation', () => ({
+ useDetailNavigation: vi.fn(),
+}));
+
+vi.mock('@/components/card/card', () => ({
+ Card: vi.fn(
+ ({ item, variant }: { item: PokemonWithDescription; variant: string }) => (
+
+ {item.name}
+
+ ),
+ ),
+}));
+
+vi.mock('@/components/loader/loader', () => ({
+ Loader: vi.fn(() =>
Loading...
),
+}));
+
+vi.mock('@/components/error-state/error-state', () => ({
+ ErrorState: vi.fn(
+ ({ message, onReload }: { message: string; onReload: () => void }) => (
+
+ {message}
+
+
+ ),
+ ),
+}));
+
+describe('DetailView', () => {
+ const mockCloseDetailView = vi.fn();
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ vi.mocked(useDetailNavigation).mockReturnValue({
+ openDetailView: vi.fn(),
+ closeDetailView: mockCloseDetailView,
+ });
+ });
+
+ it('renders card with data when correctly', () => {
+ vi.mocked(useDetailData).mockReturnValue({
+ status: API_STATUS.SUCCESS,
+ data: mockItemFull,
+ });
+
+ render(
);
+
+ expect(screen.getByTestId('card')).toBeInTheDocument();
+ expect(screen.getByText(mockItemFull.name)).toBeInTheDocument();
+ expect(screen.queryByTestId('loader')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('error-state')).not.toBeInTheDocument();
+ });
+
+ it('renders loader when the content is loading', () => {
+ vi.mocked(useDetailData).mockReturnValue({ status: API_STATUS.LOADING });
+
+ render(
);
+
+ expect(screen.getByTestId('loader')).toBeInTheDocument();
+ expect(screen.queryByTestId('card')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('error-state')).not.toBeInTheDocument();
+ });
+
+ it('renders error message when status is error', () => {
+ const errorMessage = 'Failed to get data';
+ vi.mocked(useDetailData).mockReturnValue({
+ status: API_STATUS.ERROR,
+ message: errorMessage,
+ });
+
+ render(
);
+
+ expect(screen.getByTestId('error-state')).toBeInTheDocument();
+ expect(screen.getByText(errorMessage)).toBeInTheDocument();
+ expect(screen.queryByTestId('card')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('loader')).not.toBeInTheDocument();
+ });
+
+ it('renders not-found message when status is not found', () => {
+ vi.mocked(useDetailData).mockReturnValue({
+ status: API_STATUS.NOT_FOUND,
+ });
+
+ render(
);
+
+ expect(screen.getByTestId('error-state')).toBeInTheDocument();
+ expect(screen.getByText(ERROR_MESSAGES.NOTFOUND)).toBeInTheDocument();
+ expect(screen.queryByTestId('card')).not.toBeInTheDocument();
+ expect(screen.queryByTestId('loader')).not.toBeInTheDocument();
+ });
+
+ it('close the card when close button is clicked', async () => {
+ const user = userEvent.setup();
+
+ vi.mocked(useDetailData).mockReturnValue({
+ status: API_STATUS.SUCCESS,
+ data: mockItemFull,
+ });
+
+ render(
);
+
+ const closeButton = screen.getByText('✕');
+ await user.click(closeButton);
+
+ expect(mockCloseDetailView).toHaveBeenCalledTimes(1);
+ });
+
+ it('does not close the card when clicking on the detail card', async () => {
+ const user = userEvent.setup();
+
+ vi.mocked(useDetailData).mockReturnValue({
+ status: API_STATUS.SUCCESS,
+ data: mockItemFull,
+ });
+
+ render(
);
+
+ const detailElement = screen.getByRole('complementary');
+
+ await user.click(detailElement);
+
+ expect(mockCloseDetailView).not.toHaveBeenCalled();
+ });
+
+ it('closes the card when clicking outside detail and card elements', async () => {
+ const user = userEvent.setup();
+
+ vi.mocked(useDetailData).mockReturnValue({
+ status: API_STATUS.SUCCESS,
+ data: mockItemFull,
+ });
+
+ render(
);
+
+ await user.click(document.body);
+
+ expect(mockCloseDetailView).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/src/components/detail-view/detail-view.tsx b/src/components/detail-view/detail-view.tsx
new file mode 100644
index 0000000..069a3cc
--- /dev/null
+++ b/src/components/detail-view/detail-view.tsx
@@ -0,0 +1,96 @@
+import classNames from 'classnames/bind';
+import { useEffect } from 'react';
+import { useDetailData } from '@/hooks/use-detail-data';
+import { useDetailNavigation } from '@/hooks/use-detail-navigation';
+import { Card } from '@/components/card/card';
+import { Loader } from '@/components/loader/loader';
+import { ErrorState } from '@/components/error-state/error-state';
+import { API_STATUS, ERROR_MESSAGES } from '@/constants/constants';
+import styles from './detail-view.module.css';
+
+const cx = classNames.bind(styles);
+
+type DetailViewProps = {
+ detailId: string;
+};
+
+export function DetailView({ detailId }: DetailViewProps) {
+ const result = useDetailData(detailId);
+ const { closeDetailView } = useDetailNavigation();
+
+ useEffect(() => {
+ const handleKeyDown = (event_: KeyboardEvent) => {
+ if (event_.key === 'Escape') {
+ closeDetailView();
+ }
+ };
+
+ const handleOutsideClick = (event: MouseEvent) => {
+ const target = event.target;
+ if (!(target instanceof HTMLElement)) {
+ return;
+ }
+ if (target.closest('[data-detail]') || target.closest('[data-card]')) {
+ return;
+ }
+
+ closeDetailView();
+ };
+
+ globalThis.addEventListener('keydown', handleKeyDown);
+ document.addEventListener('click', handleOutsideClick);
+ return () => {
+ globalThis.removeEventListener('keydown', handleKeyDown);
+ document.removeEventListener('click', handleOutsideClick);
+ };
+ }, [closeDetailView]);
+
+ if (!result) {
+ return null;
+ }
+
+ if (result.status === API_STATUS.NOT_FOUND) {
+ return (
+
{
+ globalThis.location.reload();
+ }}
+ />
+ );
+ }
+
+ if (result.status === API_STATUS.ERROR) {
+ return (
+ {
+ globalThis.location.reload();
+ }}
+ />
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/src/components/error-boundary/error-boundary-adapter.test.tsx b/src/components/error-boundary/error-boundary-adapter.test.tsx
new file mode 100644
index 0000000..1d63d75
--- /dev/null
+++ b/src/components/error-boundary/error-boundary-adapter.test.tsx
@@ -0,0 +1,14 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ErrorBoundaryAdapter } from './error-boundary-adapter';
+
+describe('ErrorBoundaryAdapter integration', () => {
+ it('renders ErrorBoundary with no layout', () => {
+ const mockError = new Error('Test error');
+ const mockReset = vi.fn();
+
+ render();
+
+ expect(screen.queryByText('Test error')).toBeDefined();
+ });
+});
diff --git a/src/components/error-boundary/error-boundary-adapter.tsx b/src/components/error-boundary/error-boundary-adapter.tsx
new file mode 100644
index 0000000..04e9be6
--- /dev/null
+++ b/src/components/error-boundary/error-boundary-adapter.tsx
@@ -0,0 +1,11 @@
+import { ErrorBoundary } from '@/components/error-boundary/error-boundary';
+
+export function ErrorBoundaryAdapter({
+ error,
+ reset,
+}: {
+ error: Error;
+ reset: () => void;
+}) {
+ return ;
+}
diff --git a/src/components/error-boundary/error-boundary.module.css b/src/components/error-boundary/error-boundary.module.css
index cdc1fb7..e6840bd 100644
--- a/src/components/error-boundary/error-boundary.module.css
+++ b/src/components/error-boundary/error-boundary.module.css
@@ -1,17 +1,19 @@
.error-container {
display: flex;
- align-items: center;
- justify-content: center;
flex-direction: column;
gap: 1rem;
+ align-items: center;
+ justify-content: center;
+
height: 100%;
}
.title {
margin-bottom: 0.5rem;
+
font-size: 1.5rem;
- line-height: 2rem;
font-weight: 600;
+ line-height: 2rem;
text-align: center;
}
@@ -20,6 +22,6 @@
color: var(--color-gray-400);
}
-.button-container {
+.height {
height: 2.75rem;
}
diff --git a/src/components/error-boundary/error-boundary.test.tsx b/src/components/error-boundary/error-boundary.test.tsx
index 3696dc8..e5521ce 100644
--- a/src/components/error-boundary/error-boundary.test.tsx
+++ b/src/components/error-boundary/error-boundary.test.tsx
@@ -10,22 +10,20 @@ const TestError = ({ isError }: { isError: boolean }) => {
return Expected content
;
};
-let consoleSpy: ReturnType;
-
describe('ErrorBoundary component', () => {
beforeEach(() => {
- consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+ vi.spyOn(console, 'error').mockReturnValue(undefined);
});
afterEach(() => {
- consoleSpy.mockRestore();
+ vi.restoreAllMocks();
});
it('renders children components when no error occurs', () => {
render(
App Content
-
+ ,
);
expect(screen.getByText('App Content')).toBeInTheDocument();
@@ -35,12 +33,12 @@ describe('ErrorBoundary component', () => {
render(
-
+ ,
);
expect(screen.getByText('Something went wrong')).toBeInTheDocument();
expect(
- screen.getByText('Please try again or reset the app.')
+ screen.getByText('Please try again or reset the app.'),
).toBeInTheDocument();
});
@@ -48,7 +46,7 @@ describe('ErrorBoundary component', () => {
render(
-
+ ,
);
expect(screen.getByRole('button')).toBeInTheDocument();
@@ -59,7 +57,7 @@ describe('ErrorBoundary component', () => {
render(
App Content
-
+ ,
);
expect(screen.getByText('App Content')).toBeInTheDocument();
@@ -72,7 +70,7 @@ describe('ErrorBoundary component', () => {
render(
-
+ ,
);
expect(screen.getByText(/something went wrong/i)).toBeInTheDocument();
@@ -84,7 +82,7 @@ describe('ErrorBoundary component', () => {
await user.click(button);
expect(
- await screen.findByRole('button', { name: /try again/i })
+ await screen.findByRole('button', { name: /try again/i }),
).toBeInTheDocument();
});
});
diff --git a/src/components/error-boundary/error-boundary.tsx b/src/components/error-boundary/error-boundary.tsx
index f2ff04b..65f2274 100644
--- a/src/components/error-boundary/error-boundary.tsx
+++ b/src/components/error-boundary/error-boundary.tsx
@@ -1,15 +1,17 @@
+import classNames from 'classnames/bind';
import { Component, type ReactNode } from 'react';
import type { ErrorInfo } from 'react';
import { Button } from '@/components/button/button';
-import classNames from 'classnames/bind';
import { Layout } from '@/components/layout/layout';
-
import styles from './error-boundary.module.css';
const cx = classNames.bind(styles);
type ErrorBoundaryProps = {
- children: ReactNode;
+ children?: ReactNode;
+ layout?: boolean;
+ error?: Error;
+ reset?: () => void;
};
type ErrorBoundaryState = {
@@ -36,21 +38,32 @@ export class ErrorBoundary extends Component<
private resetError = () => {
this.setState({ hasError: false });
+ if (this.props.reset) {
+ this.props.reset();
+ }
};
public render() {
- if (this.state.hasError) {
- return (
-
-
-
Something went wrong
-
Please try again or reset the app.
-
-
-
-
+
Something went wrong
+
Please try again or reset the app.
+
+