diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8d8e988..adc101a 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,7 +9,7 @@ "version": "0.1.0", "dependencies": { "@ericblade/quagga2": "^1.8.4", - "@tanstack/react-query": "^5.52.1", + "@tanstack/react-query": "^5.59.15", "@tanstack/react-table": "^8.20.5", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", @@ -22,6 +22,7 @@ "date-fns": "^3.6.0", "fast-xml-parser": "^4.5.0", "history": "^5.3.0", + "jest-canvas-mock": "^2.5.2", "react": "^18.3.1", "react-bootstrap": "^2.10.4", "react-dom": "^18.3.1", @@ -3727,9 +3728,9 @@ } }, "node_modules/@tanstack/query-core": { - "version": "5.56.2", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.56.2.tgz", - "integrity": "sha512-gor0RI3/R5rVV3gXfddh1MM+hgl0Z4G7tj6Xxpq6p2I03NGPaJ8dITY9Gz05zYYb/EJq9vPas/T4wn9EaDPd4Q==", + "version": "5.59.13", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.13.tgz", + "integrity": "sha512-Oou0bBu/P8+oYjXsJQ11j+gcpLAMpqW42UlokQYEz4dE7+hOtVO9rVuolJKgEccqzvyFzqX4/zZWY+R/v1wVsQ==", "license": "MIT", "funding": { "type": "github", @@ -3737,12 +3738,12 @@ } }, "node_modules/@tanstack/react-query": { - "version": "5.56.2", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.56.2.tgz", - "integrity": "sha512-SR0GzHVo6yzhN72pnRhkEFRAHMsUo5ZPzAxfTMvUxFIDVS6W9LYUp6nXW3fcHVdg0ZJl8opSH85jqahvm6DSVg==", + "version": "5.59.15", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.15.tgz", + "integrity": "sha512-QbVlAkTI78wB4Mqgf2RDmgC0AOiJqer2c5k9STOOSXGv1S6ZkY37r/6UpE8DbQ2Du0ohsdoXgFNEyv+4eDoPEw==", "license": "MIT", "dependencies": { - "@tanstack/query-core": "5.56.2" + "@tanstack/query-core": "5.59.13" }, "funding": { "type": "github", @@ -6655,6 +6656,12 @@ "node": ">=4" } }, + "node_modules/cssfontparser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz", + "integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==", + "license": "MIT" + }, "node_modules/cssnano": { "version": "5.1.15", "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz", @@ -10610,6 +10617,16 @@ } } }, + "node_modules/jest-canvas-mock": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jest-canvas-mock/-/jest-canvas-mock-2.5.2.tgz", + "integrity": "sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==", + "license": "MIT", + "dependencies": { + "cssfontparser": "^1.2.1", + "moo-color": "^1.0.2" + } + }, "node_modules/jest-changed-files": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.5.1.tgz", @@ -12147,6 +12164,15 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moo-color": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.3.tgz", + "integrity": "sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==", + "license": "MIT", + "dependencies": { + "color-name": "^1.1.4" + } + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index c1ddcba..c201ae0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,7 +5,7 @@ "proxy": "http://localhost:3001", "dependencies": { "@ericblade/quagga2": "^1.8.4", - "@tanstack/react-query": "^5.52.1", + "@tanstack/react-query": "^5.59.15", "@tanstack/react-table": "^8.20.5", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", @@ -18,6 +18,7 @@ "date-fns": "^3.6.0", "fast-xml-parser": "^4.5.0", "history": "^5.3.0", + "jest-canvas-mock": "^2.5.2", "react": "^18.3.1", "react-bootstrap": "^2.10.4", "react-dom": "^18.3.1", @@ -31,7 +32,7 @@ "scripts": { "start": "react-scripts start", "build": "react-scripts build", - "test": "react-scripts test", + "test": "react-scripts test --testPathPattern='(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$'", "eject": "react-scripts eject" }, "eslintConfig": { diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx deleted file mode 100644 index 2a68616..0000000 --- a/frontend/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index cb17589..20e1772 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -50,7 +50,7 @@ function App() { height: "100vh", width: "100vw", fontFamily: "New Amsterdam", - overflow: "scroll", + overflow: "hidden", }} > diff --git a/frontend/src/index.css b/frontend/src/index.css index 319d517..898d521 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -19,7 +19,7 @@ body { .btn-primary { background-color: #5e6268; color: #f2f3f4; - border: 2px solid #5e6268; + border: 1px solid #5e6268; } form-control { @@ -91,6 +91,16 @@ body { border: 2px solid #f2f2e8; } + .form-select { + background-color: #f2f2e8 !important; + color: #5e6268 !important; + border: 2px solid #f2f2e8; + } + + .primary { + color: #5e6268 !important; + } + .danger { background-color: #f9a9ab !important; } @@ -123,7 +133,7 @@ body { .btn-primary { background-color: #f2f3f4; color: #5e6268; - border: 2px solid #5e6268; + border-left: 1px solid #5e6268; } .form-control { @@ -179,6 +189,16 @@ body { border: 2px solid #5e6268; } + .form-select { + background-color: #f2f2e8 !important; + color: #5e6268 !important; + border: 2px solid #f2f2e8; + } + + .primary { + color: #f2f2e8 !important; + } + .dropdown-item { color: #f2f2e8 !important; svg { diff --git a/frontend/src/pages/Library/Library.tsx b/frontend/src/pages/Library/Library.tsx index 0aaaae8..76f5101 100644 --- a/frontend/src/pages/Library/Library.tsx +++ b/frontend/src/pages/Library/Library.tsx @@ -232,7 +232,7 @@ export const Library = (): React.JSX.Element => {
+ ` + 1.11RDFxmlxml + + + + + + + (DE-101)962361321 + 9783898641227 + Pp. : DM 79.00, EUR 41.00 (ab 1.1.2002), sfr 70.00, S 577.00 + 3898641228 + Pp. : DM 79.00, EUR 41.00 (ab 1.1.2002), sfr 70.00, S 577.00 + (OCoLC)76300394 + + Gunter Saake ; Kai-Uwe Sattler + + mockedbook + + + + + 1. Aufl. + dpunkt-Verl. + Heidelberg + Heidelberg : dpunkt-Verl. + 25 cm + Ill. + Literaturverz. S. 483 - 486 + + + + + + + + + 2024-10-13T04:31:46.000 + + + + 2024 + + eine Einführung mit Java + XVI, 494 S. + + + 11.19783898641227`, +}; + +describe("tryDeutscheNationalBibliothekApi", () => { + it("should parse dnb response to book", async () => { + global.fetch = jest.fn(() => Promise.resolve(dnbBookMock)) as jest.Mock; + + const book = await tryDeutscheNationalBibliothekApi("mocked-isbn"); + + expect(book).toStrictEqual({ + published: 2024, + title: "mockedbook", + }); + }); + + afterAll(() => { + jest.clearAllMocks(); + cleanup(); + }); +}); diff --git a/frontend/src/pages/Main/utils/__tests__/tryGoogleBooksApi.test.ts b/frontend/src/pages/Main/utils/__tests__/tryGoogleBooksApi.test.ts new file mode 100644 index 0000000..5e93a95 --- /dev/null +++ b/frontend/src/pages/Main/utils/__tests__/tryGoogleBooksApi.test.ts @@ -0,0 +1,33 @@ +import { cleanup } from "@testing-library/react"; +import { tryGoogleBooksApi } from "../tryGoogleBooksApi"; + +const goolgeBooksMock = { + json: () => ({ + items: [ + { + volumeInfo: { + publishedDate: "2024-10-31", + title: "mockedbook", + }, + }, + ], + }), +}; + +describe("tryGoogleBooksApi", () => { + it("should parse google response to book", async () => { + global.fetch = jest.fn(() => Promise.resolve(goolgeBooksMock)) as jest.Mock; + + const book = await tryGoogleBooksApi("mocked-isbn"); + + expect(book).toStrictEqual({ + published: "2024", + title: "mockedbook", + }); + }); + + afterAll(() => { + jest.clearAllMocks(); + cleanup(); + }); +}); diff --git a/frontend/src/shared/components/modals/BookModal.tsx b/frontend/src/shared/components/modals/BookModal.tsx index 8ae20ce..0c7ced6 100644 --- a/frontend/src/shared/components/modals/BookModal.tsx +++ b/frontend/src/shared/components/modals/BookModal.tsx @@ -1,13 +1,14 @@ import React, { useCallback, useEffect, useState } from "react"; import { Button, Col, Form, Modal, Row } from "react-bootstrap"; -import { ImBook, ImCamera } from "react-icons/im"; +import { ImBook, ImCamera, ImCancelCircle } from "react-icons/im"; import { ModalHeader } from "./ModalHeader"; import { useForm, useWatch } from "react-hook-form"; -import { Book, bookShelfs } from "../../../types/Book"; +import { Book } from "../../../types/Book"; import { useScanner } from "../../utils/useScanner"; import { BookModalProps } from "./types"; import { tryGoogleBooksApi } from "../../../pages/Main/utils/tryGoogleBooksApi"; import { tryDeutscheNationalBibliothekApi } from "../../../pages/Main/utils/tryDeutscheNationalBibliothekApi"; +import { useQuery } from "@tanstack/react-query"; type BookForm = Pick; @@ -19,6 +20,19 @@ export const BookModal = ({ const isEdit = !!book; const [showScanner, setShowScanner] = useState(false); + const [addNew, setAddNew] = useState(false); + + const { data: shelves, isLoading } = useQuery({ + queryFn: async () => { + const response = await fetch(`/api/shelves/list`); + const data = await response.text(); + return data + .split(",") + .map((s) => s.replaceAll('"', "").replace("[", "").replace("]", "")); + }, + queryKey: ["shleves"], + }); + const { control, register, formState, setError, setValue, reset } = useForm({ mode: "onChange", @@ -84,7 +98,7 @@ export const BookModal = ({ } if (error) return; const createdBook = await fetch( - isEdit ? "api/books/edit" : "/api/books/create", + isEdit ? "/api/books/edit" : "/api/books/create", { method: "POST", body: JSON.stringify(data), @@ -213,22 +227,52 @@ export const BookModal = ({ Shelf - - {Object.keys(bookShelfs).map((key) => ( -
+ ) : ( + { + if (ev.target.value === "addNew") { + setAddNew(true); + } + }, + })} + isInvalid={!!formState.errors.shelf} > - {key} - + {shelves?.map((shelf) => ( + + ))} + + ))} - {!values.shelf - ? "Shelf is required" + ? "Target shelf is required" : formState.errors.shelf?.message} diff --git a/frontend/src/shared/components/modals/MoveShelfModal.tsx b/frontend/src/shared/components/modals/MoveShelfModal.tsx index 133c94a..fe58fbe 100644 --- a/frontend/src/shared/components/modals/MoveShelfModal.tsx +++ b/frontend/src/shared/components/modals/MoveShelfModal.tsx @@ -1,10 +1,10 @@ -import { useMutation } from "@tanstack/react-query"; +import { useMutation, useQuery } from "@tanstack/react-query"; import { Button, Col, Form, Modal, Row } from "react-bootstrap"; -import { ImBook } from "react-icons/im"; +import { ImBook, ImCancelCircle } from "react-icons/im"; import { ModalHeader } from "./ModalHeader"; import { MoveShelfAction, MoveShelfModalProps } from "./types"; import { useForm, useWatch } from "react-hook-form"; -import { bookShelfs } from "../../../types/Book"; +import { useState } from "react"; export const MoveShelfModal = ({ books, @@ -20,7 +20,7 @@ export const MoveShelfModal = ({ const { mutate: mv } = useMutation({ mutationFn: async () => { if (!values.target) { - setError("target", { message: "Taget shelf is required" }); + setError("target", { message: "Target shelf is required" }); return; } @@ -35,6 +35,19 @@ export const MoveShelfModal = ({ }, }); + const { data: shelves, isLoading } = useQuery({ + queryFn: async () => { + const response = await fetch(`/api/shelves/list`); + const data = await response.text(); + return data + .split(",") + .map((s) => s.replaceAll('"', "").replace("[", "").replace("]", "")); + }, + queryKey: ["shleves"], + }); + + const [addNew, setAddNew] = useState(false); + return ( - - Shelf + + Shelf - - {Object.keys(bookShelfs).map((key) => ( - + {shelves?.map((shelf) => ( + + ))} + + ))} - {!values.target ? "Target shelf is required" diff --git a/frontend/src/shared/components/modals/__tests__/AuthenticationModal.test.tsx b/frontend/src/shared/components/modals/__tests__/AuthenticationModal.test.tsx new file mode 100644 index 0000000..ad856f6 --- /dev/null +++ b/frontend/src/shared/components/modals/__tests__/AuthenticationModal.test.tsx @@ -0,0 +1,26 @@ +import { render } from "@testing-library/react"; +import { AuthenticationModal } from "../AuthenticationModal"; + +describe("AuthenticationModal", () => { + it("renders as admin verification correctly", () => { + const view = render( + undefined} + isUpdate={false} + /> + ); + expect(view.baseElement).toMatchSnapshot(); + }); + + it("renders as admin pw change correctly", () => { + const view = render( + undefined} + isUpdate={true} + /> + ); + expect(view.baseElement).toMatchSnapshot(); + }); +}); diff --git a/frontend/src/shared/components/modals/__tests__/BookModal.test.tsx b/frontend/src/shared/components/modals/__tests__/BookModal.test.tsx new file mode 100644 index 0000000..b6d8c2c --- /dev/null +++ b/frontend/src/shared/components/modals/__tests__/BookModal.test.tsx @@ -0,0 +1,45 @@ +import { render } from "@testing-library/react"; +import { BookModal } from "../BookModal"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; + +describe("BookModal", () => { + global.fetch = jest.fn(() => + Promise.resolve({ + json: () => Promise.resolve({ test: 100 }), + }) + ) as jest.Mock; + + const queryClient = new QueryClient(); + + it("renders without a book", () => { + const view = render( + + undefined} /> + + ); + expect(view.baseElement).toMatchSnapshot(); + }); + + it("sets book as default value", () => { + const view = render( + + undefined} + book={{ + id: 1, + uuid: "mockedbook", + isbn: "123", + title: "mockedbook", + published: 2024, + lastCheckoutDate: null, + checkoutBy: null, + shelf: "AVAILABLE", + contact: null, + }} + /> + + ); + expect(view.baseElement).toMatchSnapshot(); + }); +}); diff --git a/frontend/src/shared/components/modals/__tests__/__snapshots__/AuthenticationModal.test.tsx.snap b/frontend/src/shared/components/modals/__tests__/__snapshots__/AuthenticationModal.test.tsx.snap new file mode 100644 index 0000000..cb78b1d --- /dev/null +++ b/frontend/src/shared/components/modals/__tests__/__snapshots__/AuthenticationModal.test.tsx.snap @@ -0,0 +1,271 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AuthenticationModal renders as admin pw change correctly 1`] = ` + +
+