Merge branch 'develop' into fix/game-screen/typing

.github/workflows/build-app.yml

@@ -64,3 +64,39 @@ jobs:
 
       - name: Build Next.js Project
         run: yarn build
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Get yarn cache folder
+        id: get-yarn-cache-folder
+        shell: bash
+        # will fail if yarn version is 1
+        run: echo "folder=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        with:
+          path: |
+            ${{ steps.get-yarn-cache-folder.outputs.folder }}
+            ./typing-app/.next
+          key: yarn-cache-${{ runner.os }}-${{ hashFiles('typing-app/yarn.lock') }}
+          restore-keys: |
+            yarn-cache-${{ runner.os }}-${{ hashFiles('typing-app/yarn.lock') }}
+            yarn-cache-${{ runner.os }}-
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Run Tests
+        run: yarn test

typing-app/.env

@@ -1 +1 @@
-API_URL=http://localhost:8080
+NEXT_PUBLIC_API_URL=http://localhost:8080

typing-app/README.md

@@ -18,8 +18,6 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

typing-app/__test__/components/LoginModal.test.tsx

@@ -0,0 +1,74 @@
+import { LoginModalPresenter } from "@/components/molecules/LoginModal";
+import { describe, expect, it, jest } from "@jest/globals";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+describe("LoginModal", () => {
+  const mockDispatchAction = jest.fn();
+  const mockState = {};
+  const mockPending = false;
+
+  it("renders input form in LoginModal", () => {
+    const loginModal = render(
+      <LoginModalPresenter
+        isOpen={true}
+        onClose={() => {}}
+        state={mockState}
+        dispatchAction={mockDispatchAction}
+        pending={mockPending}
+      />
+    );
+
+    const textbox = screen.getByRole("textbox");
+    expect(textbox).toBeInTheDocument();
+  });
+
+  it("renders button in LoginModal", () => {
+    const loginModal = render(
+      <LoginModalPresenter
+        isOpen={true}
+        onClose={() => {}}
+        state={mockState}
+        dispatchAction={mockDispatchAction}
+        pending={mockPending}
+      />
+    );
+
+    const submitButton = screen.getByRole("submit");
+    expect(submitButton).toBeInTheDocument();
+  });
+
+  it("DO NOT calls dispatchAction when user input is empty", () => {
+    const loginModal = render(
+      <LoginModalPresenter
+        isOpen={true}
+        onClose={() => {}}
+        state={mockState}
+        dispatchAction={mockDispatchAction}
+        pending={mockPending}
+      />
+    );
+
+    const submitButton = screen.getByRole("submit");
+    fireEvent.click(submitButton);
+    expect(mockDispatchAction).not.toHaveBeenCalled();
+  });
+
+  it("DO NOT calls dispatchAction when user input is less than 8 characters", () => {
+    const loginModal = render(
+      <LoginModalPresenter
+        isOpen={true}
+        onClose={() => {}}
+        state={mockState}
+        dispatchAction={mockDispatchAction}
+        pending={mockPending}
+      />
+    );
+
+    const textbox = screen.getByRole("textbox");
+    fireEvent.change(textbox, { target: { value: "1111" } });
+    fireEvent.click(screen.getByRole("submit"));
+    expect(mockDispatchAction).not.toHaveBeenCalled();
+  });
+
+  //NOTE: 本来ならば、ここで正常系のテストを書きたいが、正常系はAPIリクエストを行うため、テストが困難である。
+});

typing-app/__test__/components/UserCard.test.tsx

@@ -0,0 +1,37 @@
+import { UserCardPresenter } from "@/components/molecules/UserCard";
+import { describe, expect, it } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import type { User } from "@/types/user";
+
+describe("UserCard", () => {
+  const mockUser: User = {
+    handleName: "しずっぴー",
+    studentNumber: "B1234567",
+    id: "1",
+  };
+
+  it("renders UserCard", () => {
+    const userCard = render(<UserCardPresenter user={mockUser} />);
+
+    const avatar = screen.getByRole("img");
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it("renders UserCard with user data", () => {
+    const userCard = render(<UserCardPresenter user={mockUser} />);
+
+    const name = screen.getByText(/名前:/);
+    const studentNumber = screen.getByText(/学籍番号:/);
+    expect(name).toHaveTextContent(mockUser.handleName);
+    expect(studentNumber).toHaveTextContent(mockUser.studentNumber);
+  });
+
+  it("renders UserCard with default data", () => {
+    const userCard = render(<UserCardPresenter user={null as any} />);
+
+    const name = screen.getByText(/名前:/);
+    const studentNumber = screen.getByText(/学籍番号:/);
+    expect(name).toHaveTextContent("ログインしていません");
+    expect(studentNumber).toHaveTextContent("未ログイン");
+  });
+});

typing-app/docs/game-page-wpm-logarithm.md

@@ -37,31 +37,30 @@
 | WPM | ゲージ上での値 |
 | ---- | ---- |
 | 0 | 0 |
+| 10 | 347 |
+| 20 | 440.6 |
+| 30 | 497 |
+| 40 | 537.5 |
 | 50 | 569 |
+| 60 | 595 |
+| 70 | 616.9 |
+| 80 | 636 |
+| 90 | 652.9 |
 | 100 | 668 |
-| 150 | 726.2 |
 | 200 | 767.6 |
-| 250 | 799.7 |
 | 300 | 826 |
-| 350 | 848.3 |
 | 400 | 867.6 |
-| 450 | 884.6 |
 | 500 | 899.8 |
-| 550 | 913.6 |
 | 600 | 926.1 |
-| 650 | 937.7 |
 | 700 | 948.4 |
-| 750 | 958.4 |
 | 800 | 967.7 |
-| 850 | 976.5 |
 | 900 | 984.8 |
-| 950 | 992.6 |
-| 1000 | 1000 |
+|1000 | 1000 |
 
 Excel 用計算式
 
 ```
-=(1000 / 3) _LOG10((999 / 1000) _ A1 + 1)
+=(1000 / 3) * LOG10((999 / 1000) * A2 + 1)
 ```
 
 ## その他
@@ -70,30 +69,30 @@ Excel 用計算式
 
 #### 記号定義
 
-$\log$の底は 10 とする（常用対数）．
-$w \in [0, 1000]$：WPM の値
-$v\in [0, 1000]$：ProgressBar 上での値
+$\log$ の底は 10 とする（常用対数）． <br>
+$w \in [0, 1000]$ : WPM の値 <br>
+$v\in [0, 1000]$ : ProgressBar 上での値 <br>
 $v=f(w)$として
 
-- $v$が$\log w$に比例する
+- $v$ が $\log w$ に比例する
 - $[0, 1000] \rightarrow [0, 1000]$
 
-の 2 つを満たす$f$を作る．
-
-$\log 0 : undefined$ なので$f(1000)$を先に考える．
-仮に
-$g(x) := a\log (x)$ ($a$: 任意定数, ただし$a\neq 0$)
-とすると，
-$g(1000) = 1000$から
-$g(1000)=a\log 1000 = 3a$
-$\therefore a = \frac{1000}{3}$
-つぎに$f(0)$について考える．
-ここで， $x:=h(w)$とし，$f(x)=g(h(w))$とすれば，
-$h(0) = 1, h(1000)=1000$を満たすとき
-$f(0) = 0, f(1000)=1000$を満たす．
-$w\in[0,1000]$を線形変換して$x\in[1,1000]$にすることを考えると
-$x=h(w)=\frac{999}{1000}x+1$
-$\therefore f(w) = \frac{1000}{3}\log (\frac{999}{1000}x+1)$
+の 2 つを満たす $f$ を作る．
+
+$\log 0 : undefined$ なので $f(1000)$ を先に考える．<br>
+仮に<br>
+$g(x) := a\log (x)$ ( $a$ : 任意定数, ただし $a\neq 0$ )<br>
+とすると，<br>
+$g(1000) = 1000$ から<br>
+$g(1000)=a\log 1000 = 3a$ <br>
+$\therefore a = \frac{1000}{3}$ <br>
+つぎに $f(0)$ について考える． <br>
+ここで， $x:=h(w)$ とし， $f(x)=g(h(w))$ とすれば，<br>
+$h(0) = 1, h(1000)=1000$ を満たすとき <br>
+$f(0) = 0, f(1000)=1000$ を満たす． <br>
+$w\in[0,1000]$ を線形変換して $x\in[1,1000]$ にすることを考えると <br>
+$x=h(w)=\frac{999}{1000}w+1$ <br>
+$\therefore f(w) = \frac{1000}{3}\log (\frac{999}{1000}w+1)$
 
 ### 採用しなかった対処
 

typing-app/jest.config.js

@@ -0,0 +1,18 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+const nextJest = require("next/jest");
+
+/** @type {import('jest').Config} */
+const config = {
+  coverageProvider: "v8",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  testEnvironment: "jsdom",
+};
+
+const createJestConfig = nextJest({
+  dir: "./",
+});
+
+module.exports = createJestConfig(config);

typing-app/jest.setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/jest-globals";

typing-app/package.json

@@ -8,7 +8,9 @@
     "start": "next start",
     "lint": "next lint",
     "format": "prettier . --write",
-    "format:ci": "prettier . --check"
+    "format:ci": "prettier . --check",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
@@ -25,17 +27,23 @@
     "prettier": "^3.2.5",
     "react": "^18",
     "react-dom": "^18",
+    "sharp": "^0.33.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "^9.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "openapi-typescript": "6.7.5",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",

typing-app/src/app/actions.ts

@@ -11,33 +11,35 @@ type LoginActionState = {
 export async function login(_: LoginActionState, formData: FormData): Promise<LoginActionState> {
   const studentNumber = formData.get("student-number")!.toString();
 
-  const { data, error } = await client.GET("/users", {
-    params: {
-      query: {
-        student_number: studentNumber,
+  try {
+    const { data, error } = await client.GET("/users", {
+      params: {
+        query: {
+          student_number: studentNumber,
+        },
       },
-    },
-  });
-
-  if (error) {
-    console.log(error);
-    if (/not found/.test(`${error}`.toLowerCase())) {
-      return { error: "見つかりませんでした" };
+    });
+    if (error) {
+      if (/not found/.test(`${error}`.toLowerCase())) {
+        return { error: "見つかりませんでした" };
+      }
+      return { error: "もう一度お試しください" };
     }
-    return { error: "もう一度お試しください" };
-  }
 
-  const expires = new Date(Date.now() + 3 * 60 * 60 * 1000);
+    const expires = new Date(Date.now() + 3 * 60 * 60 * 1000);
 
-  const user: User = {
-    id: data.id!,
-    handleName: data.handle_name!,
-    studentNumber: data.student_number!,
-  };
+    const user: User = {
+      id: data.id!,
+      handleName: data.handle_name!,
+      studentNumber: data.student_number!,
+    };
 
-  cookies().set("user", JSON.stringify(user), { expires, httpOnly: true });
+    cookies().set("user", JSON.stringify(user), { expires, httpOnly: true });
 
-  redirect("/game");
+    redirect("/game");
+  } catch (error) {
+    return { error: "通信に失敗しました" };
+  }
 }
 
 export async function logout() {
@@ -46,12 +48,12 @@ export async function logout() {
 
 export async function getCurrentUser() {
   const userStr = cookies().get("user")?.value;
-  if (!userStr) return null;
+  if (!userStr) return undefined;
 
   function isValidUser(o: any): o is User {
     return o && typeof o.id === "string" && typeof o.studentNumber === "string" && typeof o.handleName == "string";
   }
 
   const user = JSON.parse(userStr) as User;
-  return isValidUser(user) ? user : null;
+  return isValidUser(user) ? user : undefined;
 }