Merge pull request #88 from kitcc-org/87-test-login-page

ログインページのテストを実装した

.github/workflows/vitest.yml → .github/workflows/backend_vitest.yml

@@ -1,4 +1,4 @@
-name: Vitest
+name: Backend Vitest
 
 on:
   push:

.github/workflows/frontend_vitest.yml

@@ -0,0 +1,24 @@
+name: Frontend Vitest
+
+on:
+  push:
+  workflow_dispatch:
+
+jobs:
+  vitest:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: frontend
+    steps:
+      - name: Checkout latest repo
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 9
+          run_install: true
+
+      - name: Run Vitest
+        run: pnpm run test

frontend/app/components/book-detail/BookDetailBorrower.tsx

@@ -1,39 +1,49 @@
-import { Badge, Blockquote, Group, Loader, rem, Stack, Text } from '@mantine/core'
-import { useGetLoans } from 'orval/client'
+import {
+  Badge,
+  Blockquote,
+  Group,
+  Loader,
+  rem,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { useGetLoans } from "client/client";
 import { MdError } from "react-icons/md";
 
 const BookDetailBorrower = () => {
-  const loans = useGetLoans()
+  const loans = useGetLoans();
 
   if (loans.isError) {
     return (
       <Blockquote color="red" icon={<MdError />} mt="xl">
         データの取得に失敗しました
       </Blockquote>
-    )
+    );
   }
   return (
-    <Stack
-      gap='sm'
-      align='stretch'
-      justify='flex-start'
-    >
+    <Stack gap="sm" align="stretch" justify="flex-start">
       <Text fz={rem(18)}>借りている人</Text>
-      {loans.isPending ? <Loader color='blue' type='dots' /> :
+      {loans.isPending ? (
+        <Loader color="blue" type="dots" />
+      ) : (
         <Group gap={rem(7)}>
-          {loans.data.data.loans.map((loan) => loan.users &&
-            <Badge key={`${loan.loans?.userId}-${loan.loans?.bookId}`}
-              variant="light"
-              color="rgba(0, 0, 0, 1)"
-              size='lg'
-            >
-              {loan.users.name}
-            </Badge>
+          {loans.data.data.loans.map(
+            (loan) =>
+              loan.users && (
+                <Badge
+                  key={`${loan.loans?.userId}-${loan.loans?.bookId}`}
+                  variant="light"
+                  color="rgba(0, 0, 0, 1)"
+                  size="lg"
+                >
+                  {loan.users.name}
+                </Badge>
+              )
           )}
         </Group>
-      }
+      )}
     </Stack>
-  )
-}
+  );
+};
 
-export default BookDetailBorrower
+export default BookDetailBorrower;

frontend/app/components/book-detail/BookDetailComponent.tsx

@@ -1,40 +1,39 @@
-import { Stack, Grid, rem } from '@mantine/core'
-import ErrorComponent from '~/components/common/ErrorComponent'
+import { Grid, rem, Stack } from "@mantine/core";
+import ErrorComponent from "~/components/common/ErrorComponent";
 
-import BookDetailContent from './BookDetailContent'
-import { getBookResponse } from 'orval/client'
-import BookDetailControlPanel from './BookDetailControlPanel'
+import { getBookResponse } from "client/client";
+import BookDetailContent from "./BookDetailContent";
+import BookDetailControlPanel from "./BookDetailControlPanel";
 
 interface BookDetailComponentProps {
-  bookResponse: getBookResponse
+  bookResponse: getBookResponse;
 }
 
 const BookDetailComponent = ({ bookResponse }: BookDetailComponentProps) => {
   switch (bookResponse.status) {
     case 400:
-      return <ErrorComponent message='リクエストが不正です' />
+      return <ErrorComponent message="リクエストが不正です" />;
     case 404:
-      return <ErrorComponent message='書籍が見つかりませんでした' />
+      return <ErrorComponent message="書籍が見つかりませんでした" />;
     case 500:
-      return <ErrorComponent message='サーバーエラーが発生しました' />
+      return <ErrorComponent message="サーバーエラーが発生しました" />;
   }
 
   return (
-    <Stack
-      bg="var(--mantine-color-body)"
-      align="stretch"
-      justify='flex-start'
-    >
+    <Stack bg="var(--mantine-color-body)" align="stretch" justify="flex-start">
       <Grid gutter={rem(50)}>
         <Grid.Col span={3}>
-          <BookDetailControlPanel id={bookResponse.data.id} thumbnail={bookResponse.data.thumbnail} />
+          <BookDetailControlPanel
+            id={bookResponse.data.id}
+            thumbnail={bookResponse.data.thumbnail}
+          />
         </Grid.Col>
         <Grid.Col span={9}>
           <BookDetailContent book={bookResponse.data} />
         </Grid.Col>
       </Grid>
     </Stack>
-  )
-}
+  );
+};
 
-export default BookDetailComponent
+export default BookDetailComponent;

frontend/app/components/book-detail/BookDetailContent.tsx

@@ -1,31 +1,31 @@
-import { Stack } from '@mantine/core'
-import { Book } from 'orval/client.schemas'
-import BookDetailTitle from './BookDetailTitle'
-import BookDetailContentTable from './BookDetailContentTable'
-import BookDetailDescription from './BookDetailDescription'
-import { useAtom } from 'jotai'
-import { userAtom } from '~/stores/userAtom'
-import BookDetailBorrower from './BookDetailBorrower'
+import { Stack } from "@mantine/core";
+import { Book } from "client/client.schemas";
+import { useAtom } from "jotai";
+import { userAtom } from "~/stores/userAtom";
+import BookDetailBorrower from "./BookDetailBorrower";
+import BookDetailContentTable from "./BookDetailContentTable";
+import BookDetailDescription from "./BookDetailDescription";
+import BookDetailTitle from "./BookDetailTitle";
 
 interface BookDetailComponentProps {
-  book: Book
+  book: Book;
 }
 
 const BookDetailContent = ({ book }: BookDetailComponentProps) => {
-  const [user] = useAtom(userAtom)
+  const [user] = useAtom(userAtom);
   return (
     <Stack
       bg="var(--mantine-color-body)"
       align="stretch"
-      justify='flex-start'
-      gap='xl'
+      justify="flex-start"
+      gap="xl"
     >
       <BookDetailTitle title={book.title} />
       <BookDetailContentTable book={book} />
       <BookDetailDescription description={book.description} />
       {!!user && <BookDetailBorrower />}
     </Stack>
-  )
-}
+  );
+};
 
-export default BookDetailContent
+export default BookDetailContent;

frontend/app/components/book-detail/BookDetailContentTable.tsx

@@ -1,23 +1,25 @@
-import { Group, rem, Stack, Table, Text } from '@mantine/core'
-import { Book } from 'orval/client.schemas'
-import BookDetailAuthorBadge from './BookDetailAuthorBadge'
+import { Group, rem, Stack, Table, Text } from "@mantine/core";
+import { Book } from "client/client.schemas";
+import BookDetailAuthorBadge from "./BookDetailAuthorBadge";
 
 interface BookDetailContentTableProps {
-  book: Book
+  book: Book;
 }
 
 const BookDetailContentTable = ({ book }: BookDetailContentTableProps) => {
   return (
-    <Stack
-      gap='sm'
-      align='stretch'
-      justify='flex-start'
-    >
+    <Stack gap="sm" align="stretch" justify="flex-start">
       <Text fz={rem(22)}>書籍情報</Text>
       <Table fz={rem(17)}>
         <Table.Tr key={"author"}>
-          <Table.Th >著者</Table.Th>
-          <Table.Td><Group gap={rem(7)}>{book.authors.map((author, id) => <BookDetailAuthorBadge key={id} name={author} />)}</Group></Table.Td>
+          <Table.Th>著者</Table.Th>
+          <Table.Td>
+            <Group gap={rem(7)}>
+              {book.authors.map((author, id) => (
+                <BookDetailAuthorBadge key={id} name={author} />
+              ))}
+            </Group>
+          </Table.Td>
         </Table.Tr>
         <Table.Tr key={"publisher"}>
           <Table.Th>出版社</Table.Th>
@@ -37,7 +39,7 @@ const BookDetailContentTable = ({ book }: BookDetailContentTableProps) => {
         </Table.Tr>
       </Table>
     </Stack>
-  )
-}
+  );
+};
 
-export default BookDetailContentTable
+export default BookDetailContentTable;

frontend/app/components/book-search/BookSearchAuthorForm.tsx

@@ -1,20 +1,23 @@
-import { TextInput } from '@mantine/core'
-import type { UseFormReturnType } from '@mantine/form'
-import type { GetBooksParams } from 'orval/client.schemas'
+import { TextInput } from "@mantine/core";
+import type { UseFormReturnType } from "@mantine/form";
+import type { GetBooksParams } from "client/client.schemas";
 
 interface BookSearchAuthorFormProps {
-  form: UseFormReturnType<GetBooksParams, (values: GetBooksParams) => GetBooksParams>
+  form: UseFormReturnType<
+    GetBooksParams,
+    (values: GetBooksParams) => GetBooksParams
+  >;
 }
 
 const BookSearchAuthorForm = ({ form }: BookSearchAuthorFormProps) => {
   return (
     <TextInput
       label="筆者"
       placeholder="竹岡尚三"
-      key={form.key('author')}
-      {...form.getInputProps('author')}
+      key={form.key("author")}
+      {...form.getInputProps("author")}
     />
-  )
-}
+  );
+};
 
-export default BookSearchAuthorForm
+export default BookSearchAuthorForm;

frontend/app/components/book-search/BookSearchComponent.tsx

@@ -1,29 +1,32 @@
-import BookSearchModeButton from './BookSearchModeButton'
-import type { UseFormReturnType } from '@mantine/form'
-import type { GetBooksParams } from 'orval/client.schemas'
-import BookSearchForm from './BookSearchForm'
+import type { UseFormReturnType } from "@mantine/form";
+import type { GetBooksParams } from "client/client.schemas";
+import BookSearchForm from "./BookSearchForm";
+import BookSearchModeButton from "./BookSearchModeButton";
 
 interface BookSearchComponentProps {
-  isOpen: boolean
-  open: () => void
-  close: () => void
-  form: UseFormReturnType<GetBooksParams, (values: GetBooksParams) => GetBooksParams>
-  handleSubmit: (props: GetBooksParams) => void
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  form: UseFormReturnType<
+    GetBooksParams,
+    (values: GetBooksParams) => GetBooksParams
+  >;
+  handleSubmit: (props: GetBooksParams) => void;
 }
 
 const BookSearchComponent = ({
   isOpen,
   open,
   close,
   form,
-  handleSubmit
+  handleSubmit,
 }: BookSearchComponentProps) => {
   return (
     <>
       <BookSearchModeButton isOpen={isOpen} open={open} close={close} />
       <BookSearchForm isOpen={isOpen} form={form} handleSubmit={handleSubmit} />
     </>
-  )
-}
+  );
+};
 
-export default BookSearchComponent
+export default BookSearchComponent;