build: add web test

Dockerfile

@@ -29,10 +29,11 @@ RUN poetry config virtualenvs.create false && poetry install --no-interaction --
 
 # Web build
 FROM node:17-alpine AS web-builder
+
 FROM web-builder as web-dev
 WORKDIR /app/frontend
+
 COPY ./frontend/package*.json ./
+
 RUN npm install
-COPY ./frontend/ ./
-# EXPOSE 3000
 CMD npm start

Makefile

@@ -2,7 +2,8 @@ TARGET_ENV ?= dev
 
 bootstrap: \
 	up \
-	migrate
+	migrate \
+	load-fixtures
 
 up:
 	docker compose up -d --no-deps --remove-orphans
@@ -11,7 +12,9 @@ up:
 	docker-compose up -d $$(echo $* | tr + " ")
 
 load-fixtures:
-	docker compose run --rm app bash -c "./manage.py loaddata backend/fixtures/users.json"
+	docker compose run --rm app bash -c "./manage.py loaddata backend/fixtures/users.json \
+																														backend/fixtures/conversations.json \
+																														backend/fixtures/messages.json"
 
 restart:
 	docker-compose restart
@@ -68,6 +71,13 @@ app-test:
 app-lint:
 	docker-compose run --rm app-test bash -c "poetry run pylint backend"
 
+web-test:
+	docker-compose run --rm web-test sh -c "npm run test"
+
+test: \
+	web-test \
+	app-test
+
 ps:
 	for i in $$(docker container ls --format "{{.ID}}"); do \
 		docker inspect -f '{{.State.Pid}} {{.Name}}' $$i; \

backend/api/chats/test_views.py

@@ -0,0 +1,2 @@
+def test_simple():
+    assert 1 + 1 == 2

backend/pyproject.toml

@@ -15,6 +15,7 @@ gunicorn = "~21.2.0"
 django-environ = "~0.11.2"
 psycopg2-binary = "~2.9.8"
 djangorestframework = "^3.14.0"
+channels = "^4.0.0"
 
 [tool.poetry.group.test]
 optional = true
@@ -28,6 +29,9 @@ pylint-django = "^2.5.5"
 requires = ["poetry-core"]
 build-backend = "poetry.core.masonry.api"
 
+[tool.pytest.ini_options]
+python_files = "test_*.py"
+
 [tool.pylint.MASTER]
 ignore = "migrations"
 load-plugins = "pylint_django"

docker-compose.yml

@@ -24,6 +24,7 @@ services:
     container_name: chat-web
     volumes:
       - ./frontend:/app/frontend
+      - node_modules:/app/frontend/node_modules
     ports:
       - "3000:3000"
     env_file:
@@ -62,6 +63,18 @@ services:
       - ./backend:/app/backend
     depends_on:
       - db
+
+  web-test:
+    image: web-test
+    build:
+      context: .
+      target: web-dev
+    profiles:
+      - test
+    volumes:
+      - ./frontend:/app/frontend
+      - node_modules:/app/frontend/node_modules
+
   # nginx:
   #   container_name: chat-nginx
   #   build: ./backend/services/nginx
@@ -73,6 +86,7 @@ services:
 volumes:
   pgdata:
   redis_data:
+  node_modules:
 # networks:
 #     chat-network:
 #         driver: bridge

frontend/package.json

@@ -13,6 +13,7 @@
     "@types/react-dom": "^18.2.7",
     "axios": "^1.5.0",
     "formik": "^2.4.5",
+    "jest": "^27.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
@@ -25,8 +26,13 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "test": "jest --coverage"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!<rootDir>/node_modules/"
+    ]
   },
   "eslintConfig": {
     "extends": [

frontend/src/components/ActiveConversations.test.jsx

@@ -0,0 +1,6 @@
+describe("<ActiveConversations />", () => {
+  it("simple test", () => {
+    const a = 1 + 1;
+    expect(a).toEqual(2);
+  });
+});

frontend/src/components/Chat.tsx

@@ -1,13 +1,11 @@
 import { useState, useContext, KeyboardEvent } from "react";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import { useParams } from "react-router-dom";
-import InfiniteScroll from "react-infinite-scroll-component";
 
 import { AuthContext } from '../context/AuthContext';
 import { MessageModel } from "../models/Message";
 import { ConversationModel } from "../models/Conversation";
 import { Message } from "./Message";
-import { ChatLoader } from "./ChatLoader";
 
 export function Chat() {
   const { user } = useContext(AuthContext);
@@ -17,8 +15,6 @@ export function Chat() {
   const [message, setMessage] = useState("");
   const { conversationName } = useParams();
 
-  console.log(participants);
-
   const { readyState, sendJsonMessage } = useWebSocket(user
     ? `ws://localhost:8000/ws/chat/${conversationName}`
     : null, {

frontend/src/context/AuthContext.tsx

@@ -25,7 +25,6 @@ export interface AuthProps {
 export const AuthContext = createContext<AuthProps>(DefaultProps);
 
 export const AuthContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-
   const navigate = useNavigate();
   const [user, setUser] = useState(() => AuthService.getCurrentUser());