ApiAlert test

README.md

@@ -6,6 +6,7 @@
 - dark mode
 
 ### To show
+ - Cards with SSE and arch drawings
  - GitHub Actions - tests
  - mobile view
  - 0 effort dark them thank to MUI (on dev)?
@@ -71,6 +72,7 @@ A todo item has three possible interactions:
 
 2. Double-clicking input activates editing mode  
 `Normally I would discuss any changes with PO berofe implementing. Here I a bit change UX so Edit have action button similar to Delete action`
+`Why I changed it? We need to consider what is primary action/functionality and build around this. Imho checking items is primary action, edit/delete secondary`
 
 3. Hovering over the todo shows the remove button
 

src/App.test.tsx

@@ -1,10 +1,12 @@
-import { render, screen, waitForElementToBeRemoved } from "@testing-library/react";
+import { render, screen, waitForElementToBeRemoved, within } from "@testing-library/react";
 import { afterAll, beforeAll, describe, expect, it, beforeEach, afterEach } from "vitest";
 import App from "./App.tsx";
 import { TestApiProvider } from "./components/TestApiProvider.tsx";
 import { setupServer } from 'msw/node'
-import { todosApiMock, resetTodosDB } from "./api/todos/mocks/todosApiMock.ts";
+import { todosApiMock, resetTodosDB, todos } from "./api/todos/mocks/todosApiMock.ts";
 import { userEvent, UserEvent } from "@testing-library/user-event";
+import { http, HttpResponse } from "msw";
+import { TODOS_URL } from "./api/todos/fetchTodos.ts";
 
 const getTodoItem = (todoId: number) => (screen.getByTestId(`todoItem-${todoId}`));
 const isTodoChecked = (todoId: number) => (getTodoItem(todoId).querySelector('input') as HTMLInputElement)?.checked;
@@ -28,7 +30,7 @@ describe("App integration suite", () => {
   beforeEach(() => {
     user = userEvent.setup();
     render(<TestApiProvider><App/></TestApiProvider>);
-  })
+  });
 
   it("should load and render todos", async () => {
     expect(await screen.findByText('Loading...')).toBeInTheDocument();
@@ -113,6 +115,21 @@ describe("App integration suite", () => {
       expect(screen.queryByText('Wax a chain')).not.toBeInTheDocument();
       expect(screen.queryByText('Call John')).not.toBeInTheDocument();
     });
+  });
+
+  it("should show and close error", async () => {
+    await waitTodosLoaded();
+
+    server.resetHandlers(
+      http.get(TODOS_URL, () => HttpResponse.json(todos)),
+      http.put(`${TODOS_URL}/clear-completed`, () => new HttpResponse(null, { status: 500 })),
+    )
+
+    await user.click(screen.getByText('Clear completed'));
+    expect(await screen.findByTestId('errorAlert')).toHaveTextContent('Clearing completed todos failed');
+
+    await user.click(within(screen.getByTestId('errorAlert')).getByTitle('Close'));
 
+    expect(screen.queryByTestId('errorAlert')).not.toBeInTheDocument();
   });
 });

src/api/todos/fetchTodos.ts

@@ -68,5 +68,5 @@ export const clearCompleted = () =>
   fetchTodosApi({
     url: '/clear-completed',
     method: 'PUT',
-    errorMessage: `Clearing all todos completion failed`
+    errorMessage: `Clearing completed todos failed`
   });

src/components/ApiErrorAlert.tsx

@@ -14,8 +14,15 @@ export const ApiErrorAlert = ({ mutations }: ApiErrorAlertProps) => {
   return mutations
     .filter(mutation => mutation.error)
     .map((mutation) => (
-      <Alert sx={{ m: -1, mb: 1, borderRadius: 0 }} variant="filled" severity="error" onClose={() => mutation.reset?.()}>
-        {mutation.error?.message}
+      mutation.error && <Alert
+        variant="filled"
+        severity="error"
+        onClose={() => mutation.reset?.()}
+        sx={{ m: -1, mb: 1, borderRadius: 0 }}
+        data-testid='errorAlert'
+        key={mutation.error.message}
+      >
+        {mutation.error.message}
       </Alert>
     ));
 }