- {error} + {errorMessage ?? ERROR_UI_STRINGS.unknownError}
) : ({name}
-{children}
+); diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts new file mode 100644 index 0000000..1e15afd --- /dev/null +++ b/src/components/Card/index.ts @@ -0,0 +1 @@ +export { Card } from './Card'; diff --git a/src/components/CardList/CardList.test.tsx b/src/components/CardList/CardList.test.tsx new file mode 100644 index 0000000..93134a7 --- /dev/null +++ b/src/components/CardList/CardList.test.tsx @@ -0,0 +1,24 @@ +import { render, screen } from '@testing-library/react'; +import { describe, it, expect } from 'vitest'; +import { CardList } from './CardList'; +import { mockCharacters } from '@/tests/mockCharacters'; +import type { Character } from '@/types/character'; + +describe('CardList component', () => { + const mockItems = mockCharacters.results.slice(1, 3) as Character[]; + + it('renders correct number of cards', () => { + render(
- 
-
- );
- }
-
- return this.props.children;
- }
-}
-
-export default ErrorBoundary;
diff --git a/src/components/ErrorBoundary/ErrorBoundary.test.tsx b/src/components/ErrorBoundary/ErrorBoundary.test.tsx
new file mode 100644
index 0000000..1b4cb82
--- /dev/null
+++ b/src/components/ErrorBoundary/ErrorBoundary.test.tsx
@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeAll, afterAll } from 'vitest';
+import { ErrorBoundary } from './ErrorBoundary';
+
+const ThrowComponent = () => {
+ throw new Error('Test error');
+};
+
+const Fallback = () => - Seriously? You crashed the multiverse’s mainframe! -
-- Like, this is lamer than Rick’s parenting or Morty’s entire - existence. Smash the button, or be a loser who looks stuff up! -
- -unexpected error
;
+
+describe('ErrorBoundary tests', () => {
+ const originalError = console.error;
+ beforeAll(() => {
+ console.error = vi.fn();
+ });
+
+ afterAll(() => {
+ console.error = originalError;
+ });
+
+ it('renders fallback on error', () => {
+ render(
+ {NO_ERROR}
+ ,
+ );
+
+ expect(screen.getByText(NO_ERROR)).toBeInTheDocument();
+ });
+});
diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/ErrorBoundary.tsx
new file mode 100644
index 0000000..4041334
--- /dev/null
+++ b/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -0,0 +1,32 @@
+import { Component, type ReactNode, type ErrorInfo } from 'react';
+
+type Props = {
+ children: ReactNode;
+ fallback?: React.ReactElement;
+};
+
+type State = {
+ hasError: boolean;
+};
+
+export class ErrorBoundary extends Component
+ 
+
+ );
+ }
+}
diff --git a/src/components/Fallback/index.ts b/src/components/Fallback/index.ts
new file mode 100644
index 0000000..1e04069
--- /dev/null
+++ b/src/components/Fallback/index.ts
@@ -0,0 +1 @@
+export { FallBack } from './FallBack';
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 408cae8..0d1de13 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,6 @@
import { Component, type ReactNode } from 'react';
import { Button } from '@/components/Button';
+import { UI_STRINGS } from '@/shared/constants/ui-strings';
type FooterProps = {
onThrowError: () => void;
@@ -13,7 +14,7 @@ class Footer extends Component+ {ERROR_UI_STRINGS.heading} +
++ {ERROR_UI_STRINGS.description} +
+ +- Rick and Morty + {UI_STRINGS.title}
@@ -49,23 +52,21 @@ class SearchBar extends Component {
name="search"
id="search"
autoFocus
- value={this.state.searchText}
+ value={this.state.inputValue}
onChange={this.handleInputChange}
type="text"
- placeholder={'Pickle? Prove it!'}
- disabled={loading}
+ placeholder={UI_STRINGS.searchPlaceholder}
+ disabled={isLoading}
/>
);
}
}
-
-export default SearchBar;
diff --git a/src/components/SearchBar/index.ts b/src/components/SearchBar/index.ts
new file mode 100644
index 0000000..8c19331
--- /dev/null
+++ b/src/components/SearchBar/index.ts
@@ -0,0 +1 @@
+export { SearchBar } from './SearchBar';
diff --git a/src/main.tsx b/src/main.tsx
index 4f44b04..ca36fb3 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,12 +2,13 @@ import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.tsx';
-import ErrorBoundary from '@/components/ErrorBoundary.tsx';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { FallBack } from '@/components/Fallback';
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
createRoot(document.getElementById('root')!).render(