API Querying in React

src/components/Card/Card.test.tsx

@@ -11,7 +11,7 @@ describe('Card Component', () => {
   it('renders character name and basic info', () => {
     const { label } = CARD_TEXT;
 
-    render(<Card character={rickCharacter} />);
+    render(<Card character={rickCharacter} variant={'list'} />);
     expect(screen.getByText(rickCharacter.name)).toBeInTheDocument();
     expect(
       screen.getByText(`${label.species}: ${rickCharacter.species}`),
@@ -35,7 +35,7 @@ describe('Card Component', () => {
       status: 'unknown',
       gender: 'unknown',
     } as Character;
-    render(<Card character={unknownCharacter} />);
+    render(<Card character={unknownCharacter} variant={'list'} />);
     expect(
       screen.getByText(`${label.status}: ${fallback.status}`),
     ).toBeInTheDocument();
@@ -49,7 +49,7 @@ describe('Card Component', () => {
       ...rickCharacter,
       origin: { name: 'unknown', url: '' },
     };
-    render(<Card character={noOriginCharacter} />);
+    render(<Card character={noOriginCharacter} variant={'list'} />);
     expect(
       screen.getByText(
         `${CARD_TEXT.fallback.originFallback}: ${rickCharacter.location.name}`,

src/components/Fallback/FallBack.test.tsx → src/components/Fallback/Fallback.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { expect, it } from 'vitest';
-import { Fallback } from './FallBack';
+import { Fallback } from '@/components/Fallback';
 import { ERROR_UI_STRINGS } from '@/shared/constants/errors';
 
 it('renders fallback content', () => {

src/components/Fallback/index.ts

@@ -1 +1 @@
-export { Fallback } from './FallBack';
+export { Fallback } from './Fallback';

src/components/Footer.test.tsx

@@ -0,0 +1,21 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Footer } from './Footer';
+
+describe('Footer', () => {
+  it('renders both buttons', () => {
+    const queryClient = new QueryClient();
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Footer />
+      </QueryClientProvider>,
+    );
+
+    expect(
+      screen.getByRole('button', { name: /refresh/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /break/i })).toBeInTheDocument();
+  });
+});

src/components/Footer.tsx

@@ -1,8 +1,10 @@
 import { ErrorBoundaryTesterButton } from '@/components/ErrorBoundaryTesterButton';
+import { RefreshButton } from '@/components/RefreshButton';
 
 export const Footer = () => {
   return (
-    <footer className="px-4 pb-4 flex justify-end">
+    <footer className="px-4 pb-4 flex justify-end gap-4">
+      <RefreshButton queryKey={['characters']} />
       <ErrorBoundaryTesterButton />
     </footer>
   );

src/components/RefreshButton.test.tsx

@@ -0,0 +1,20 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { RefreshButton } from '@/components/RefreshButton';
+
+describe('RefreshButton', () => {
+  it('calls invalidateQueries with the correct queryKey', () => {
+    const queryClient = new QueryClient();
+    const spy = vi.spyOn(queryClient, 'invalidateQueries');
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <RefreshButton queryKey={['characters']} />
+      </QueryClientProvider>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /refresh/i }));
+    expect(spy).toHaveBeenCalledWith({ queryKey: ['characters'] });
+  });
+});

src/components/RefreshButton.tsx

@@ -0,0 +1,21 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { Button } from '@/components/Button';
+import { UI_STRINGS } from '@/shared/constants/ui-strings';
+
+type RefreshButtonProps = {
+  queryKey: unknown[];
+};
+
+export const RefreshButton = ({ queryKey }: RefreshButtonProps) => {
+  const queryClient = useQueryClient();
+
+  const handleRefresh = () => {
+    queryClient.invalidateQueries({ queryKey });
+  };
+
+  return (
+    <Button onClick={handleRefresh} className="text-red-500 cursor-pointer">
+      {UI_STRINGS.refreshButton}
+    </Button>
+  );
+};

src/pages/AboutPage.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { AboutPage } from '@/pages/AboutPage';
+import { UI_STRINGS } from '@/shared/constants/ui-strings';
+
+it('renders about page content', () => {
+  render(<AboutPage />);
+  expect(screen.getByText(UI_STRINGS.contentAboutPage)).toBeInTheDocument();
+});

src/shared/constants/ui-strings.ts

@@ -3,6 +3,7 @@ export const UI_STRINGS = {
   searchButton: 'Scan the Multiverse',
   title: 'Rick and Morty',
   errorButton: 'Break the Universe',
+  refreshButton: 'Refresh the Universe',
   altLoading: 'Loading...',
   altLogo: 'Logo: Rick and Morty',
   home: 'Home',

src/shared/ui/LoadingSpinner.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+import { expect, it } from 'vitest';
+import { UI_STRINGS } from '@/shared/constants/ui-strings';
+import { LoadingSpinner } from '@/shared/ui/LoadingSpinner';
+
+it('renders loading spinner with correct alt text', () => {
+  render(<LoadingSpinner />);
+  const img = screen.getByAltText(UI_STRINGS.altLoading);
+  expect(img).toBeInTheDocument();
+  expect(img).toHaveClass('animate-spin');
+});