Skip to content

Commit

Permalink
Add a single Playwright test (#4)
Browse files Browse the repository at this point in the history
* Add a single Playwright test

* Update qa.yml

* so dumb

* Update qa.yml

* Update settings.py

* Update settings.py

* Update package-lock.json

* Revert "Update package-lock.json"

This reverts commit 71491f9.

* don't run e2e on CI for now
  • Loading branch information
IndrajeetPatil authored Oct 12, 2024
1 parent 957926f commit 246e832
Show file tree
Hide file tree
Showing 13 changed files with 278 additions and 58 deletions.
11 changes: 7 additions & 4 deletions .github/workflows/qa.yml
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,18 @@ jobs:
.venv/bin/pip install --upgrade pip
pip install uv
uv sync --frozen
shell: bash
- name: Install frontend dependencies
working-directory: ./frontend
run: npm install
shell: bash
run: |
npm install
npx playwright install --with-deps
- name: Run QA checks
run: make qa
shell: bash

#- name: Run end-to-end tests
# run: make e2e-test

- name: Upload coverage reports
uses: actions/upload-artifact@v3
Expand All @@ -53,3 +55,4 @@ jobs:
path: |
server/htmlcov
frontend/coverage
frontend/playwright-report
39 changes: 24 additions & 15 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,21 @@ MYPY=mypy
ISORT=isort
PYTEST=pytest chatgptserver
PYCOVERAGE=coverage run -m pytest chatgptserver && coverage report --fail-under=95 && coverage html
DJANGO_MANAGE=chatgptserver/manage.py
DJANGO_RUNSERVER=chatgptserver/manage.py runserver
OPENAPI_SCHEMA=chatgptserver/manage.py spectacular --color --validate --file schema.yml

# Frontend tools
ESLINT=npm run lint:fix
PRETTIER=npm run format
TSC=npm run build
JEST=npm run test
START=npm start
NEXT_START=npm run start
PLAYWRIGHT=npm run test:e2e

# Targets
.PHONY: all lint format type-check backend-lint backend-format \
backend-type-check frontend-lint frontend-format backend-validate-api-schema \
frontend-type-check test backend-test frontend-test qa \
frontend-type-check test backend-test frontend-test e2e-test qa \
run-backend run-frontend run

# Run linters for both backend and frontend
Expand Down Expand Up @@ -97,29 +98,37 @@ lint-markdown:
@echo "$(COLOR_BLUE_BG)Linting markdown files...$(COLOR_RESET)"
markdownlint README.md

# Run all QA tools
qa-frontend: frontend-lint frontend-format frontend-type-check frontend-test
qa-backend: backend-lint backend-format backend-type-check backend-test
qa: format lint type-check backend-validate-api-schema test

# Run backend server
run-backend:
@echo "$(COLOR_BLUE_BG)Running backend server...$(COLOR_RESET)"
cd $(SERVER_DIR) && $(VENV_ACTIVATE) && $(DJANGO_MANAGE) runserver
cd $(SERVER_DIR) && $(VENV_ACTIVATE) && $(DJANGO_RUNSERVER) & echo $$! > backend.pid

# Run frontend server
run-frontend:
@echo "$(COLOR_BLUE_BG)Running frontend server...$(COLOR_RESET)"
cd $(FRONTEND_DIR) && $(START)
cd $(FRONTEND_DIR) && $(NEXT_START) & echo $$! > frontend.pid

# Run backend and frontend servers
run:
@$(MAKE) run-backend &
# Run QA checks
qa-frontend: frontend-lint frontend-format frontend-type-check frontend-test
qa-backend: backend-lint backend-format backend-type-check backend-test
qa: format lint type-check backend-validate-api-schema test

# End-to-end testing with backend and frontend running
e2e-test:
@echo "$(COLOR_BLUE_BG)Starting backend and frontend services...$(COLOR_RESET)"
@$(MAKE) run-backend
@$(MAKE) run-frontend
@sleep 10 # Wait for services to start (adjust this as necessary)
@echo "$(COLOR_BLUE_BG)Running end-to-end tests...$(COLOR_RESET)"
cd $(FRONTEND_DIR) && $(PLAYWRIGHT)

all: qa run

# Run all services
run-services:
docker-up:
@echo "$(COLOR_BLUE_BG)Running containerized services...$(COLOR_RESET)"
docker-compose up --build --force-recreate

# Stop all services
docker-down:
@echo "$(COLOR_BLUE_BG)Stopping containerized services...$(COLOR_RESET)"
docker-compose down
5 changes: 5 additions & 0 deletions frontend/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,8 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
node_modules/
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
19 changes: 19 additions & 0 deletions frontend/client/helpers.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { AssistantModel, AssistantTemperature } from "./types/assistant";

const getModelDisplay = (model: AssistantModel) =>
model === AssistantModel.FULL ? "GPT-4o" : "GPT-4o Mini";

const getTemperatureDisplay = (temperature: AssistantTemperature) => {
switch (temperature) {
case AssistantTemperature.DETERMINISTIC:
return "0.2 - More Deterministic";
case AssistantTemperature.BALANCED:
return "0.7 - Balanced";
case AssistantTemperature.CREATIVE:
return "0.9 - More Creative";
default:
return "";
}
};

export { getModelDisplay, getTemperatureDisplay };
6 changes: 2 additions & 4 deletions frontend/components/parameters/AssistantModelParameter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Bot, ChevronDown } from "lucide-react";
import React, { useState } from "react";

import { AssistantModel } from "@/client/types/assistant";
import { getModelDisplay } from "@/client/helpers";
import { Box, IconButton, Menu, MenuItem, Tooltip } from "@mui/material";

interface AssistantModelParameterProps {
Expand All @@ -28,9 +29,6 @@ const AssistantModelParameter: React.FC<AssistantModelParameterProps> = ({
handleClose();
};

const getModelDisplay = () =>
model === AssistantModel.FULL ? "GPT-4o" : "GPT-4o Mini";

return (
<>
<Box>
Expand All @@ -39,7 +37,7 @@ const AssistantModelParameter: React.FC<AssistantModelParameterProps> = ({
<React.Fragment>
Choose Assistant Model
<br />
(Current: {getModelDisplay()})
(Current: {getModelDisplay(model)})
</React.Fragment>
}
>
Expand Down
17 changes: 3 additions & 14 deletions frontend/components/parameters/AssistantTemperatureParameter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { ChevronDown, Thermometer } from "lucide-react";
import React, { useState } from "react";

import { AssistantTemperature } from "@/client/types/assistant";
import { getTemperatureDisplay } from "@/client/helpers";

import { Box, IconButton, Menu, MenuItem, Tooltip } from "@mui/material";

interface AssistantTemperatureParameterProps {
Expand All @@ -27,19 +29,6 @@ const AssistantTemperatureParameter: React.FC<
handleClose();
};

const getTemperatureDisplay = () => {
switch (temperature) {
case AssistantTemperature.DETERMINISTIC:
return "0.2 - More Deterministic";
case AssistantTemperature.BALANCED:
return "0.7 - Balanced";
case AssistantTemperature.CREATIVE:
return "0.9 - More Creative";
default:
return "";
}
};

return (
<>
<Box>
Expand All @@ -48,7 +37,7 @@ const AssistantTemperatureParameter: React.FC<
<React.Fragment>
Choose Temperature
<br />
(Current: {getTemperatureDisplay()})
(Current: {getTemperatureDisplay(temperature)})
</React.Fragment>
}
>
Expand Down
3 changes: 3 additions & 0 deletions frontend/jest.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ const config: Config = {
// The test environment that will be used for testing
testEnvironment: "jsdom",

// Don't run Playwright e2e tests
testPathIgnorePatterns: ["tests"],

// Indicates whether each individual test should be reported during the run
verbose: true,

Expand Down
64 changes: 64 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
"format": "prettier --write .",
"format:check": "prettier --check .",
"test": "jest",
"test:update": "jest -u"
"test:update": "jest -u",
"test:e2e": "npx playwright test"
},
"dependencies": {
"@emotion/react": "^11.13.3",
Expand All @@ -30,6 +31,7 @@
"swr": "^2.2.5"
},
"devDependencies": {
"@playwright/test": "^1.48.0",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^16.0.1",
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
Expand Down
79 changes: 79 additions & 0 deletions frontend/playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { defineConfig, devices } from "@playwright/test";

/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });

/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: "./tests",
/* Run tests in files in parallel */
fullyParallel: false,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: 1,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: "html",
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: "http://localhost:3000",

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
},

/* Configure projects for major browsers */
projects: [
{
name: "chromium",
use: { ...devices["Desktop Chrome"] },
},

//{
// name: "firefox",
// use: { ...devices["Desktop Firefox"] },
//},

//{
// name: "webkit",
// use: { ...devices["Desktop Safari"] },
//},

///* Test against mobile viewports. */
//{
// name: "Mobile Chrome",
// use: { ...devices["Pixel 5"] },
//},
//{
// name: "Mobile Safari",
// use: { ...devices["iPhone 12"] },
//},

///* Test against branded browsers. */
//{
// name: "Microsoft Edge",
// use: { ...devices["Desktop Edge"], channel: "msedge" },
//},
//{
// name: "Google Chrome",
// use: { ...devices["Desktop Chrome"], channel: "chrome" },
//},
],

/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});
Loading

0 comments on commit 246e832

Please sign in to comment.