Merge pull request #8 from gonta1026/feature/set_up

feat: prismaのsetup, e2eテストのsetup,

.env

@@ -0,0 +1,7 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+DATABASE_URL="postgresql://root:password@localhost:5434/next-template?schema=public"

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+## 以下追加分
+test-results

README.md

@@ -12,4 +12,6 @@ npm install -g git-cz
 
 ```
 git cz
-```
+```
+
+### db set up

docker-compose.yml

@@ -0,0 +1,15 @@
+version: "3.8"
+services:
+  dev-postgres:
+    image: postgres:16.3-alpine
+    ports:
+      - 5434:5432
+    environment:
+      POSTGRES_USER: root
+      POSTGRES_PASSWORD: password
+      POSTGRES_DB: next-template
+    restart: always
+    networks:
+      - lesson
+networks:
+  lesson:

lefthook.yml

@@ -10,7 +10,7 @@ pre-push:
       run: yarn tsc
     test:
       tags: test
-      run: yarn test run
+      run: yarn test:vitest
 
 pre-commit:
   parallel: true

package.json

@@ -8,25 +8,38 @@
     "start": "next start",
     "format": "biome format . --write",
     "lint": "biome lint ./src/**",
-    "test": "vitest"
+    "test:e2e": "playwright test",
+    "test:vitest": "vitest run",
+    "test": "npm-run-all --parallel --continue-on-error --print-name test:*",
+    "seed": "ts-node --compiler-options '{\"module\":\"CommonJS\"}' prisma/seed.ts",
+    "seed2": "ts-node prisma/seed.mjs",
+    "reset": "ts-node prisma/reset.ts"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.5",
+    "@prisma/client": "^5.16.2",
+    "date-fns": "^3.6.0",
     "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
+    "@playwright/test": "^1.45.1",
     "@testing-library/dom": "^10.3.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
-    "@types/node": "^20",
+    "@types/node": "^20.14.11",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@vitejs/plugin-react": "^4.3.1",
     "jsdom": "^24.1.0",
     "lefthook": "^1.7.2",
+    "npm-run-all2": "^6.2.2",
+    "prisma": "^5.16.2",
     "sass": "^1.77.8",
+    "ts-node": "^10.9.2",
     "typescript": "5.5.3",
     "vitest": "^2.0.2"
   }

playwright.config.ts

@@ -0,0 +1,33 @@
+import type { PlaywrightTestConfig } from '@playwright/test'
+// biome-ignore lint/style/useNodejsImportProtocol: <explanation>
+import path from 'path'
+
+const PORT = process.env.PORT || 3000
+const baseURL = `http://localhost:${PORT}`
+
+const config: PlaywrightTestConfig = {
+  timeout: 5 * 1000,
+  testDir: path.join(__dirname, 'src/e2e'),
+  retries: 0,
+  webServer: {
+    command: 'npm start',
+    url: baseURL,
+    timeout: 120 * 1000,
+    reuseExistingServer: true,
+  },
+  // globalSetup: './e2e/config/globalSetup.ts',
+  use: {
+    baseURL,
+    // storageState: './e2e/config/storageState.json',
+  },
+  // reporter: [['html', { open: 'always' }]],
+  // projects: [
+  //   {
+  //     name: 'Desktop Chrome',
+  //     use: {
+  //       ...devices['Desktop Chrome'],
+  //     },
+  //   },
+  // ],
+}
+export default config

prisma/migrations/20240720143513_init/migration.sql

@@ -0,0 +1,12 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" SERIAL NOT NULL,
+    "email" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "hashedPassword" TEXT NOT NULL,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

prisma/reset.ts

@@ -0,0 +1,5 @@
+import type { PrismaClient } from '@prisma/client'
+
+export const reset = async (prisma: PrismaClient) => {
+  await prisma.user.deleteMany({})
+}

prisma/schema/schema.prisma

@@ -0,0 +1,16 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
+// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
+
+generator client {
+  provider = "prisma-client-js"
+  previewFeatures = ["prismaSchemaFolder"]
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+

prisma/schema/user.prisma

@@ -0,0 +1,6 @@
+model User {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String
+  hashedPassword  String
+}

prisma/seed.ts

@@ -0,0 +1,26 @@
+import { PrismaClient } from '@prisma/client'
+import { reset } from './reset'
+
+const prisma = new PrismaClient()
+
+async function main() {
+  await reset(prisma)
+  await prisma.user.create({
+    data: {
+      id: 1,
+      name: '東京駅内の店',
+      email: 'test@example.com',
+      hashedPassword: 'ssss',
+    },
+  })
+}
+
+main()
+  .then(async () => {
+    await prisma.$disconnect()
+  })
+  .catch(async (e) => {
+    console.error(e)
+    await prisma.$disconnect()
+    process.exit(1)
+  })

src/app/page.tsx

@@ -2,9 +2,14 @@ import Image from 'next/image'
 import Link from 'next/link'
 import styles from './page.module.scss'
 
+export const metadata = {
+  title: 'e2e lesson',
+}
+
 export default function Home() {
   return (
     <main className={styles.main}>
+      <h1>Hello World🚀</h1>
       <div className={styles.description}>
         <p>
           Get started by editing&nbsp;

src/e2e/index-page.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('Shall render hello world', async ({ page }) => {
+  await page.goto('/')
+  await expect(page).toHaveTitle('e2e lesson')
+  await expect(page.locator('h1')).toHaveText('Hello World🚀')
+})

vitest.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
   test: {
     environment: 'jsdom',
     setupFiles: './vitest.setup.ts',
+    include: ['./src/**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
   },
   resolve: {
     alias: [{ find: '@', replacement: resolve(__dirname, './src') }],