diff --git a/.env.test b/.env.test new file mode 100644 index 000000000..6978ee21b --- /dev/null +++ b/.env.test @@ -0,0 +1,2 @@ +DATABASE_URL="postgresql://postgres:postgres@localhost:5432/cms?schema=public" + diff --git a/package.json b/package.json index 46108eda3..6b2c419f5 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,9 @@ "dev": "next dev", "build": "next build", "start": "next start", + "test": "vitest -c ./vitest.config.unit.ts", + "test:integration": "./scripts/run-integration.sh", + "coverage": "vitest run -c ./vitest.config.unit.ts --coverage", "lint:check": "eslint --max-warnings 0 --config .eslintrc .", "lint:fix": "eslint --max-warnings 0 --config .eslintrc . --fix", "format:fix": "prettier --write \"**/*.{ts,tsx,json}\"", @@ -95,19 +98,26 @@ "@storybook/nextjs": "^8.0.8", "@storybook/react": "^8.0.8", "@storybook/test": "^8.0.8", + "@testing-library/jest-dom": "^6.4.5", + "@testing-library/react": "^15.0.7", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "@typescript-eslint/eslint-plugin": "^6.20.0", "@typescript-eslint/parser": "^6.20.0", + "@vitejs/plugin-react": "^4.3.0", + "@vitest/coverage-v8": "^1.6.0", "autoprefixer": "^10.0.1", "eslint": "^8.56.0", "eslint-plugin-storybook": "^0.8.0", "husky": "^9.0.7", + "jsdom": "^24.0.0", "postcss": "^8", "prettier": "^3.2.4", "prisma": "^5.13.0", "tailwindcss": "^3.3.0", - "ts-node": "^10.9.2" + "ts-node": "^10.9.2", + "vitest": "^1.6.0", + "vitest-mock-extended": "^1.3.1" } } diff --git a/scripts/run-integration.sh b/scripts/run-integration.sh new file mode 100755 index 000000000..6ef9b6f6c --- /dev/null +++ b/scripts/run-integration.sh @@ -0,0 +1,16 @@ +DIR="$(cd "$(dirname "$0")" && pwd)" +export $(grep -v '^#' .env.test | xargs) + docker run -d \ + --name db \ + -e POSTGRES_USER=postgres \ + -e POSTGRES_PASSWORD=postgres \ + -e POSTGRES_DB=cms \ + -p 5432:5432 \ + postgres +echo '🟡 - Waiting for database to be ready...' +$DIR/wait-for-it.sh "${DATABASE_URL}" -- echo '🟢 - Database is ready!' +echo $DATABASE_URL +npx prisma migrate dev --name init +vitest -c ./vitest.config.integration.ts +docker stop db && docker rm db + diff --git a/scripts/wait-for-it.sh b/scripts/wait-for-it.sh new file mode 100755 index 000000000..d990e0d36 --- /dev/null +++ b/scripts/wait-for-it.sh @@ -0,0 +1,182 @@ +#!/usr/bin/env bash +# Use this script to test if a given TCP host/port are available + +WAITFORIT_cmdname=${0##*/} + +echoerr() { if [[ $WAITFORIT_QUIET -ne 1 ]]; then echo "$@" 1>&2; fi } + +usage() +{ + cat << USAGE >&2 +Usage: + $WAITFORIT_cmdname host:port [-s] [-t timeout] [-- command args] + -h HOST | --host=HOST Host or IP under test + -p PORT | --port=PORT TCP port under test + Alternatively, you specify the host and port as host:port + -s | --strict Only execute subcommand if the test succeeds + -q | --quiet Don't output any status messages + -t TIMEOUT | --timeout=TIMEOUT + Timeout in seconds, zero for no timeout + -- COMMAND ARGS Execute command with args after the test finishes +USAGE + exit 1 +} + +wait_for() +{ + if [[ $WAITFORIT_TIMEOUT -gt 0 ]]; then + echoerr "$WAITFORIT_cmdname: waiting $WAITFORIT_TIMEOUT seconds for $WAITFORIT_HOST:$WAITFORIT_PORT" + else + echoerr "$WAITFORIT_cmdname: waiting for $WAITFORIT_HOST:$WAITFORIT_PORT without a timeout" + fi + WAITFORIT_start_ts=$(date +%s) + while : + do + if [[ $WAITFORIT_ISBUSY -eq 1 ]]; then + nc -z $WAITFORIT_HOST $WAITFORIT_PORT + WAITFORIT_result=$? + else + (echo -n > /dev/tcp/$WAITFORIT_HOST/$WAITFORIT_PORT) >/dev/null 2>&1 + WAITFORIT_result=$? + fi + if [[ $WAITFORIT_result -eq 0 ]]; then + WAITFORIT_end_ts=$(date +%s) + echoerr "$WAITFORIT_cmdname: $WAITFORIT_HOST:$WAITFORIT_PORT is available after $((WAITFORIT_end_ts - WAITFORIT_start_ts)) seconds" + break + fi + sleep 1 + done + return $WAITFORIT_result +} + +wait_for_wrapper() +{ + # In order to support SIGINT during timeout: http://unix.stackexchange.com/a/57692 + if [[ $WAITFORIT_QUIET -eq 1 ]]; then + timeout $WAITFORIT_BUSYTIMEFLAG $WAITFORIT_TIMEOUT $0 --quiet --child --host=$WAITFORIT_HOST --port=$WAITFORIT_PORT --timeout=$WAITFORIT_TIMEOUT & + else + timeout $WAITFORIT_BUSYTIMEFLAG $WAITFORIT_TIMEOUT $0 --child --host=$WAITFORIT_HOST --port=$WAITFORIT_PORT --timeout=$WAITFORIT_TIMEOUT & + fi + WAITFORIT_PID=$! + trap "kill -INT -$WAITFORIT_PID" INT + wait $WAITFORIT_PID + WAITFORIT_RESULT=$? + if [[ $WAITFORIT_RESULT -ne 0 ]]; then + echoerr "$WAITFORIT_cmdname: timeout occurred after waiting $WAITFORIT_TIMEOUT seconds for $WAITFORIT_HOST:$WAITFORIT_PORT" + fi + return $WAITFORIT_RESULT +} + +# process arguments +while [[ $# -gt 0 ]] +do + case "$1" in + *:* ) + WAITFORIT_hostport=(${1//:/ }) + WAITFORIT_HOST=${WAITFORIT_hostport[0]} + WAITFORIT_PORT=${WAITFORIT_hostport[1]} + shift 1 + ;; + --child) + WAITFORIT_CHILD=1 + shift 1 + ;; + -q | --quiet) + WAITFORIT_QUIET=1 + shift 1 + ;; + -s | --strict) + WAITFORIT_STRICT=1 + shift 1 + ;; + -h) + WAITFORIT_HOST="$2" + if [[ $WAITFORIT_HOST == "" ]]; then break; fi + shift 2 + ;; + --host=*) + WAITFORIT_HOST="${1#*=}" + shift 1 + ;; + -p) + WAITFORIT_PORT="$2" + if [[ $WAITFORIT_PORT == "" ]]; then break; fi + shift 2 + ;; + --port=*) + WAITFORIT_PORT="${1#*=}" + shift 1 + ;; + -t) + WAITFORIT_TIMEOUT="$2" + if [[ $WAITFORIT_TIMEOUT == "" ]]; then break; fi + shift 2 + ;; + --timeout=*) + WAITFORIT_TIMEOUT="${1#*=}" + shift 1 + ;; + --) + shift + WAITFORIT_CLI=("$@") + break + ;; + --help) + usage + ;; + *) + echoerr "Unknown argument: $1" + usage + ;; + esac +done + +if [[ "$WAITFORIT_HOST" == "" || "$WAITFORIT_PORT" == "" ]]; then + echoerr "Error: you need to provide a host and port to test." + usage +fi + +WAITFORIT_TIMEOUT=${WAITFORIT_TIMEOUT:-15} +WAITFORIT_STRICT=${WAITFORIT_STRICT:-0} +WAITFORIT_CHILD=${WAITFORIT_CHILD:-0} +WAITFORIT_QUIET=${WAITFORIT_QUIET:-0} + +# Check to see if timeout is from busybox? +WAITFORIT_TIMEOUT_PATH=$(type -p timeout) +WAITFORIT_TIMEOUT_PATH=$(realpath $WAITFORIT_TIMEOUT_PATH 2>/dev/null || readlink -f $WAITFORIT_TIMEOUT_PATH) + +WAITFORIT_BUSYTIMEFLAG="" +if [[ $WAITFORIT_TIMEOUT_PATH =~ "busybox" ]]; then + WAITFORIT_ISBUSY=1 + # Check if busybox timeout uses -t flag + # (recent Alpine versions don't support -t anymore) + if timeout &>/dev/stdout | grep -q -e '-t '; then + WAITFORIT_BUSYTIMEFLAG="-t" + fi +else + WAITFORIT_ISBUSY=0 +fi + +if [[ $WAITFORIT_CHILD -gt 0 ]]; then + wait_for + WAITFORIT_RESULT=$? + exit $WAITFORIT_RESULT +else + if [[ $WAITFORIT_TIMEOUT -gt 0 ]]; then + wait_for_wrapper + WAITFORIT_RESULT=$? + else + wait_for + WAITFORIT_RESULT=$? + fi +fi + +if [[ $WAITFORIT_CLI != "" ]]; then + if [[ $WAITFORIT_RESULT -ne 0 && $WAITFORIT_STRICT -eq 1 ]]; then + echoerr "$WAITFORIT_cmdname: strict mode, refusing to execute subprocess" + exit $WAITFORIT_RESULT + fi + exec "${WAITFORIT_CLI[@]}" +else + exit $WAITFORIT_RESULT +fi diff --git a/src/app/certificate/verify/[id]/id.test.tsx b/src/app/certificate/verify/[id]/id.test.tsx new file mode 100644 index 000000000..c3afaf839 --- /dev/null +++ b/src/app/certificate/verify/[id]/id.test.tsx @@ -0,0 +1,45 @@ +import { render, screen } from '@testing-library/react'; +import VerifyPage from './page'; +import { describe, expect, it, vi } from 'vitest'; +import db from '@/db/__mocks__'; + +vi.mock('@/db'); + +describe('VerifyPage', () => { + const mockCertificate = { + id: '1', + slug: 'valid-certificate', + userId: 'user1', + courseId: 1, + user: { + id: 'user1', + name: 'John Doe', + }, + course: { + id: 1, + title: 'React Course', + }, + }; + + it('renders the CertificateVerify component when the certificate is found', async () => { + db.certificate.findFirst.mockResolvedValueOnce(mockCertificate); + + const { params } = { params: { id: 'valid-certificate' } }; + render(await VerifyPage({ params })); + + expect( + screen.getByText( + 'This Certificate was issued to John Doe for completing React Course', + ), + ).toBeInTheDocument(); + }); + + it('renders "Not Found" when the certificate is not found', async () => { + db.certificate.findFirst.mockResolvedValueOnce(null); + + const { params } = { params: { id: 'invalid-certificate' } }; + render(await VerifyPage({ params })); + + expect(screen.getByText('Not Found')).toBeInTheDocument(); + }); +}); diff --git a/src/app/page.test.tsx b/src/app/page.test.tsx new file mode 100644 index 000000000..7cb91d0e8 --- /dev/null +++ b/src/app/page.test.tsx @@ -0,0 +1,11 @@ +import { expect, test } from 'vitest'; +import { render, screen } from '@testing-library/react'; +import Page from '../app/page'; + +test('Page', async () => { + const ui = await Page(); + render(ui); + expect( + screen.getByRole('heading', { level: 1, name: '100xdevs' }), + ).toBeDefined(); +}); diff --git a/src/db/__mocks__/index.ts b/src/db/__mocks__/index.ts new file mode 100644 index 000000000..35044fcb4 --- /dev/null +++ b/src/db/__mocks__/index.ts @@ -0,0 +1,10 @@ +import { PrismaClient } from '@prisma/client'; +import { beforeEach } from 'vitest'; +import { mockDeep, mockReset } from 'vitest-mock-extended'; + +beforeEach(() => { + mockReset(prisma); +}); + +const prisma = mockDeep(); +export default prisma; diff --git a/src/tests/helpers/reset-db.ts b/src/tests/helpers/reset-db.ts new file mode 100644 index 000000000..ef956d53c --- /dev/null +++ b/src/tests/helpers/reset-db.ts @@ -0,0 +1,25 @@ +import { PrismaClient } from '@prisma/client'; + +const prisma = new PrismaClient(); + +export default async function resetDb() { + await prisma.$transaction([ + prisma.videoMetadata.deleteMany(), + prisma.notionMetadata.deleteMany(), + prisma.bookmark.deleteMany(), + prisma.comment.deleteMany(), + prisma.videoProgress.deleteMany(), + prisma.courseContent.deleteMany(), + prisma.content.deleteMany(), + prisma.certificate.deleteMany(), + prisma.userPurchases.deleteMany(), + prisma.course.deleteMany(), + prisma.session.deleteMany(), + prisma.discordConnect.deleteMany(), + prisma.discordConnectBulk.deleteMany(), + prisma.vote.deleteMany(), + prisma.answer.deleteMany(), + prisma.question.deleteMany(), + prisma.user.deleteMany(), + ]); +} diff --git a/src/tests/helpers/setup.ts b/src/tests/helpers/setup.ts new file mode 100644 index 000000000..27d27a283 --- /dev/null +++ b/src/tests/helpers/setup.ts @@ -0,0 +1,23 @@ +import { PrismaClient } from '@prisma/client'; +import '@testing-library/jest-dom'; +import { beforeAll, beforeEach, afterAll, afterEach } from 'vitest'; + +const prisma = new PrismaClient(); + +beforeAll(async () => { + await prisma.$connect(); +}); + +afterAll(async () => { + await prisma.$disconnect(); +}); + +beforeEach(async () => { + // Optional: Reset the database state before each test +}); + +afterEach(async () => { + // Optional: Clean up after each test +}); + +export { prisma }; diff --git a/src/tests/integration.test.tsx b/src/tests/integration.test.tsx new file mode 100644 index 000000000..9b21ece33 --- /dev/null +++ b/src/tests/integration.test.tsx @@ -0,0 +1,40 @@ +import { render, screen } from '@testing-library/react'; +import SigninPage from '@/app/signin/page'; +import { getServerSession } from 'next-auth'; +import { redirect } from 'next/navigation'; +import { vi } from 'vitest'; + +// Mock getServerSession +vi.mock('next-auth', () => ({ + getServerSession: vi.fn(), +})); + +// Mock redirect +vi.mock('next/navigation', () => ({ + redirect: vi.fn(), + useRouter: vi.fn(), +})); + +describe('SigninPage', () => { + it('redirects to the homepage if the user is authenticated', async () => { + (getServerSession as jest.Mock).mockResolvedValueOnce({ + user: { name: 'Test User' }, + }); + + // Render the component + render(await SigninPage()); + + // Check if redirect was called + expect(redirect).toHaveBeenCalledWith('/'); + }); + + it('renders the Signin component if the user is not authenticated', async () => { + (getServerSession as jest.Mock).mockResolvedValueOnce(null); + + // Render the component + render(await SigninPage()); + + // Check if Signin component is rendered + expect(screen.getByText('Signin to your Account')).toBeInTheDocument(); + }); +}); diff --git a/vitest.config.integration.ts b/vitest.config.integration.ts new file mode 100644 index 000000000..1f846c8e7 --- /dev/null +++ b/vitest.config.integration.ts @@ -0,0 +1,16 @@ +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + test: { + globals: true, + environment: 'jsdom', + include: ['src/tests/**/*.test.tsx'], + setupFiles: ['src/tests/helpers/setup.ts'], + }, + resolve: { + alias: { + '@': '/src', + '@public': '/public', + }, + }, +}); diff --git a/vitest.config.unit.ts b/vitest.config.unit.ts new file mode 100644 index 000000000..8f0b71bca --- /dev/null +++ b/vitest.config.unit.ts @@ -0,0 +1,22 @@ +import { defineConfig } from 'vitest/config'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + test: { + globals: true, + environment: 'jsdom', + include: ['src/**/*.test.tsx'], + exclude: ['src/tests/**/*.test.tsx'], + setupFiles: ['./vitest.setup.ts'], + coverage: { + provider: 'v8', + }, + }, + resolve: { + alias: { + '@': '/src', + '@public': '/public', + }, + }, +}); diff --git a/vitest.setup.ts b/vitest.setup.ts new file mode 100644 index 000000000..1ec0ac592 --- /dev/null +++ b/vitest.setup.ts @@ -0,0 +1,18 @@ +import { vi } from 'vitest'; +import '@testing-library/jest-dom'; + +vi.mock('next/font/local', () => ({ + default: () => ({ + className: 'mocked-font-class', + }), +})); + +vi.mock('next/font/google', () => ({ + Poppins: () => ({ + className: 'mocked-google-font-class', + }), +})); + +vi.mock('next-auth', () => ({ + getServerSession: vi.fn(), +}));