From fd878dbaac5402591c969134ace7c2f7ddc3e451 Mon Sep 17 00:00:00 2001
From: maiano <maiano@yandex.ru>
Date: Mon, 11 Aug 2025 01:20:44 +0200
Subject: [PATCH 1/6] feat: add manual cache invalidation button

---
 src/components/Footer.tsx          |  4 +++-
 src/components/RefreshButton.tsx   | 21 +++++++++++++++++++++
 src/shared/constants/ui-strings.ts |  1 +
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/components/RefreshButton.tsx

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 242fb1f..c9159cf 100644
--- a/src/components/Footer.tsx
+++ b/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>
   );
diff --git a/src/components/RefreshButton.tsx b/src/components/RefreshButton.tsx
new file mode 100644
index 0000000..8376e42
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/shared/constants/ui-strings.ts b/src/shared/constants/ui-strings.ts
index 59fc635..0aae098 100644
--- a/src/shared/constants/ui-strings.ts
+++ b/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',

From eb39650d7e4222305491f34404b6f4cc7146e461 Mon Sep 17 00:00:00 2001
From: maiano <maiano@yandex.ru>
Date: Mon, 11 Aug 2025 01:35:45 +0200
Subject: [PATCH 2/6] test: add test for LoadingSpinner

---
 src/shared/ui/LoadingSpinner.test.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/shared/ui/LoadingSpinner.test.tsx

diff --git a/src/shared/ui/LoadingSpinner.test.tsx b/src/shared/ui/LoadingSpinner.test.tsx
new file mode 100644
index 0000000..22cfbe4
--- /dev/null
+++ b/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');
+});

From 3c7ccbbf9ebaba80b0dd51c2ed79ae43ca87f9ad Mon Sep 17 00:00:00 2001
From: maiano <maiano@yandex.ru>
Date: Mon, 11 Aug 2025 01:42:07 +0200
Subject: [PATCH 3/6] test: add test for AboutPage

---
 src/pages/AboutPage.test.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/pages/AboutPage.test.tsx

diff --git a/src/pages/AboutPage.test.tsx b/src/pages/AboutPage.test.tsx
new file mode 100644
index 0000000..8810ffa
--- /dev/null
+++ b/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();
+});

From bc027cc69be6f731056d1ab623d140af06c81718 Mon Sep 17 00:00:00 2001
From: maiano <maiano@yandex.ru>
Date: Mon, 11 Aug 2025 01:49:12 +0200
Subject: [PATCH 4/6] test: add test for Footer

---
 src/components/Footer.test.tsx        | 21 +++++++++++++++++++++
 src/components/RefreshButton.test.tsx | 20 ++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 src/components/Footer.test.tsx
 create mode 100644 src/components/RefreshButton.test.tsx

diff --git a/src/components/Footer.test.tsx b/src/components/Footer.test.tsx
new file mode 100644
index 0000000..5427c22
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/components/RefreshButton.test.tsx b/src/components/RefreshButton.test.tsx
new file mode 100644
index 0000000..f4dc32f
--- /dev/null
+++ b/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'] });
+  });
+});

From c94d4f6624adf7910725b6ab5d46c415073d6092 Mon Sep 17 00:00:00 2001
From: maiano <maiano@yandex.ru>
Date: Mon, 11 Aug 2025 01:58:43 +0200
Subject: [PATCH 5/6] fix: imports in tests

---
 src/components/Card/Card.test.tsx         | 6 +++---
 src/components/Fallback/FallBack.test.tsx | 2 +-
 src/components/Fallback/index.ts          | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Card/Card.test.tsx b/src/components/Card/Card.test.tsx
index 842eeaa..fa3ff6f 100644
--- a/src/components/Card/Card.test.tsx
+++ b/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}`,
diff --git a/src/components/Fallback/FallBack.test.tsx b/src/components/Fallback/FallBack.test.tsx
index 870cc5b..ac623d1 100644
--- a/src/components/Fallback/FallBack.test.tsx
+++ b/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', () => {
diff --git a/src/components/Fallback/index.ts b/src/components/Fallback/index.ts
index 93704cf..aa98ed2 100644
--- a/src/components/Fallback/index.ts
+++ b/src/components/Fallback/index.ts
@@ -1 +1 @@
-export { Fallback } from './FallBack';
+export { Fallback } from './Fallback';

From 0bfa5a18d3538d1b5463371324b9cb8baf119adb Mon Sep 17 00:00:00 2001
From: maiano <maiano@yandex.ru>
Date: Mon, 11 Aug 2025 22:02:30 +0200
Subject: [PATCH 6/6] fix: correct file case Fallback.tsx

---
 src/components/Fallback/{FallBack.test.tsx => Fallback.test.tsx} | 0
 src/components/Fallback/{FallBack.tsx => Fallback.tsx}           | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename src/components/Fallback/{FallBack.test.tsx => Fallback.test.tsx} (100%)
 rename src/components/Fallback/{FallBack.tsx => Fallback.tsx} (100%)

diff --git a/src/components/Fallback/FallBack.test.tsx b/src/components/Fallback/Fallback.test.tsx
similarity index 100%
rename from src/components/Fallback/FallBack.test.tsx
rename to src/components/Fallback/Fallback.test.tsx
diff --git a/src/components/Fallback/FallBack.tsx b/src/components/Fallback/Fallback.tsx
similarity index 100%
rename from src/components/Fallback/FallBack.tsx
rename to src/components/Fallback/Fallback.tsx