Fix gallery ui tests and start setting photo collector ui

Olszewskidev · JanSafronov · May 17, 2024 · May 17, 2024 · May 18, 2024 · May 18, 2024
commit 5e996066352d0516b9fa76e3a3cf30d458a7726f
diff --git a/ui-applications/package-lock.json b/ui-applications/package-lock.json
diff --git a/ui-applications/package.json b/ui-applications/package.json
@@ -40,7 +40,6 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lerna": "^8.1.2",
     "msw": "^2.3.0",

diff --git a/ui-applications/packages/gallery-ui/package.json b/ui-applications/packages/gallery-ui/package.json
@@ -32,7 +32,6 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "babel-jest": "^29.7.0",
     "chai": "^5.1.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -50,7 +49,6 @@
     "target": "",
     "esModuleInterop": true,
     "types": [
-      "jest",
       "vitest/globals"
     ]
   },

diff --git a/ui-applications/packages/gallery-ui/src/app/store/middlewares/GalleryApiMiddleware.ts b/ui-applications/packages/gallery-ui/src/app/store/middlewares/GalleryApiMiddleware.ts
@@ -1,7 +1,6 @@
 import { Middleware, isRejected } from '@reduxjs/toolkit';
 
 export const galleryApiMiddleware: Middleware = () => (next) => (action) => {
-    const hrefe = global.window.location.href;
     if (isRejected(action)) {
         console.error("API Failed!")
     }

diff --git a/ui-applications/packages/gallery-ui/src/pages/Login/LoginPage.tsx b/ui-applications/packages/gallery-ui/src/pages/Login/LoginPage.tsx
@@ -3,7 +3,6 @@ import LoginForm from "./components/LoginForm"
 import { useLoginToGalleryMutation } from "../../services/GalleryApi";
 import { useNavigate } from "react-router-dom";
 import { saveQRCode } from "../../utils/qRCodeHelper";
-import { handleLoginToGallery } from "../../utils/login";
 
 export const LoginPage = () => {
     const navigate = useNavigate();

diff --git a/ui-applications/packages/gallery-ui/tests/App.test.tsx b/ui-applications/packages/gallery-ui/tests/App.test.tsx
diff --git a/ui-applications/packages/gallery-ui/tests/AppMock.tsx b/ui-applications/packages/gallery-ui/tests/AppMock.tsx
diff --git a/...gallery-ui/tests/creteWebSocketServer.tsx → ...allery-ui/tests/createWebSocketServer.tsx b/...gallery-ui/tests/creteWebSocketServer.tsx → ...allery-ui/tests/createWebSocketServer.tsx
diff --git a/ui-applications/packages/gallery-ui/tests/pages/Home/Home.test.tsx b/ui-applications/packages/gallery-ui/tests/pages/Home/Home.test.tsx
@@ -1,7 +1,7 @@
 import { cleanup, fireEvent, getAllByAltText, getByAltText, getByText, render, screen, waitFor } from '@testing-library/react'
 import { expect, test, describe, beforeAll, beforeEach ,afterEach, afterAll } from 'vitest';
 import { setupServer } from 'msw/node';
-import { loginSubmit } from '../Login/Login.tsx';
+import { loginSubmit } from '../../utils/LoginEvents.tsx';
 import { getQRCodeUrl } from '../../../src/utils/qRCodeHelper.ts';
 import { HttpResponse, http as mswhttp } from 'msw';
 import { LoginToGalleryResponse } from '../../../src/types/GalleryApiTypes.ts';
@@ -54,7 +54,7 @@ describe("Home page with no photos", async () => {
     expect(firstRender).toMatchSnapshot();
   });
 
-  test("No photo hub must have qr-code url in image source", async () => {
+  test("No photo hub must have qr code url in image source", async () => {
     const firstRender = asFragment();
 
     expect(getByAltText(baseElement, "QR code").getAttribute("src")).toEqual(getQRCodeUrl());

diff --git a/ui-applications/packages/gallery-ui/tests/pages/Home/__snapshots__/Home.test.tsx.snap b/ui-applications/packages/gallery-ui/tests/pages/Home/__snapshots__/Home.test.tsx.snap
@@ -1 +1,51 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Home page with no photos > No photo hub must have qr-code url in image source 1`] = `
+<DocumentFragment>
+  <div
+    class="min-h-screen bg-black"
+  >
+    <div
+      class="absolute top-1/2 left-1/2 transform -translate-x-1/2"
+    >
+      <figure>
+        <img
+          alt="QR code"
+          class="rounded-lg w-64 h-64"
+          src="QRCodeUrl"
+        />
+        <figcaption
+          class="font-bold text-base mb-2 text-center text-white"
+        >
+          Scan this and join.
+        </figcaption>
+      </figure>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Home page with no photos > No photo hub must show qr code card in home page 1`] = `
+<DocumentFragment>
+  <div
+    class="min-h-screen bg-black"
+  >
+    <div
+      class="absolute top-1/2 left-1/2 transform -translate-x-1/2"
+    >
+      <figure>
+        <img
+          alt="QR code"
+          class="rounded-lg w-64 h-64"
+          src="QRCodeUrl"
+        />
+        <figcaption
+          class="font-bold text-base mb-2 text-center text-white"
+        >
+          Scan this and join.
+        </figcaption>
+      </figure>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/ui-applications/packages/gallery-ui/tests/pages/Login/Login.test.tsx b/ui-applications/packages/gallery-ui/tests/pages/Login/Login.test.tsx
@@ -2,9 +2,8 @@ import { fireEvent, getByText, render, screen } from '@testing-library/react'
 import { expect, test, describe } from 'vitest';
 import { LoginPage } from '../../../src/pages/Login/LoginPage';
 import { Provider } from 'react-redux'
-import { loginSubmit } from './Login.tsx';
+import { loginSubmit } from '../../utils/LoginEvents.tsx';
 import { BrowserRouter } from 'react-router-dom';
-import { JSX } from 'react/jsx-runtime';
 import { store } from '../../../src/app/store/store.ts';
 
 /**

diff --git a/ui-applications/packages/gallery-ui/tests/pages/Router.test.tsx b/ui-applications/packages/gallery-ui/tests/pages/Router.test.tsx
@@ -1,15 +1,15 @@
 import { render, waitFor, cleanup } from "@testing-library/react"
 import { expect, test, describe, vi, beforeAll, afterAll, afterEach } from 'vitest';
 import App from "../../src/App";
-import { loginSubmit } from "./Login/Login";
+import { loginSubmit } from '../utils/LoginEvents';
 import { HttpResponse, http } from "msw";
 import { setupServer } from "msw/node";
 import { LoginToGalleryResponse } from '../../src/types/GalleryApiTypes';
 
 /**
 * @vitest-environment jsdom
 */
-describe("Router test", () => {
+describe("Router path tests", () => {
     const server = setupServer(...handlers);
 
     beforeAll(() => {

diff --git a/ui-applications/packages/gallery-ui/tests/services/Gallery.test.tsx b/ui-applications/packages/gallery-ui/tests/services/Gallery.test.tsx
@@ -1,41 +1,93 @@
-import { fireEvent, render } from '@testing-library/react'
-import { expect, test } from 'vitest';
+import { waitFor, cleanup, fireEvent, getByTestId, render, screen } from '@testing-library/react';
+import { BrowserRouter, useNavigate } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { expect, test, beforeAll, afterEach, afterAll } from 'vitest';
 import { LoginPage } from '../../src/pages/Login/LoginPage';
-import { galleryApi } from '../../src/services/GalleryApi';
-import { LoginToGalleryPayload } from '../../src/types/GalleryApiTypes';
+import { galleryApi, useLoginToGalleryMutation } from '../../src/services/GalleryApi';
+import { LoginToGalleryPayload, LoginToGalleryResponse, PhotoItem } from '../../src/types/GalleryApiTypes';
+import { store } from '../../src/app/store/store';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { HttpResponse, http } from 'msw';
+import { setupServer } from 'msw/node';
+import { loginSubmit } from '../utils/LoginEvents';
 
-/**
-* @vitest-environment jsdom
-*/
-test("Login must be accepted for the gallery", () => {
-    const {getByText, asFragment} = render(
-        <LoginPage />,
-    );
+let response: LoginToGalleryResponse = { enterCode: '0', galleryId: '0', qrCodeUrl: 'QRCodeUrl' };
+let actual: LoginToGalleryResponse;
+
+const handlers = [
+  http.post(`${import.meta.env.VITE_GALLERY_SERVICE_URL}/login`, async () => {
+    let res = await HttpResponse.json(response);
+    return res;
+  }),
+  http.post(`${import.meta.env.VITE_GALLERY_SERVICE_URL}/gallery/0`, () => {
+    let photo: PhotoItem[] = [{ id: "0", url: "url", authorName: "Author", wishesText: "Best wishes"}];
+    return HttpResponse.json(photo);
+  } )
+]
+
+const LoginComponent = () => {
+  const [loginToGallery, { isLoading }] = useLoginToGalleryMutation();
+
+  const handleLoginTest = () => {
+      loginToGallery({ enterCode: '0' })
+          .unwrap()
+          .then((payload) => {
+              actual = payload;
+          });
+  }
 
-    let payload = { enterCode: "BCD" } as LoginToGalleryPayload;
+  return (
+      <div data-testid="test-component" onClick={(e) => { e.preventDefault(); handleLoginTest() }} />
+  )
+}
 
-    galleryApi.endpoints.loginToGallery.initiate(payload);
+const server = setupServer(...handlers);
 
-    const firstRender = asFragment();
+beforeAll(() => {
+  server.listen()
+})
+afterEach(cleanup);
+afterAll(() => {
+  server.close()
+})
 
-    fireEvent.change(getByText("Login to your gallery"));
+/**
+* @vitest-environment jsdom
+*/
+test("Login muttation must match login api request", async () => {
+  const {getByTestId} = render(
+    <Provider store={store}>
+      <BrowserRouter>
+        <LoginComponent />
+      </BrowserRouter>
+    </Provider>
+  );
 
-    expect(firstRender).toMatchSnapshot(asFragment());
+  fireEvent.click(getByTestId("test-component"));
+  await waitFor(() => {
+    expect(actual).toEqual(response);
   });
+});
 
 /**
  * @jest-environment jsdom
  */
-test("Gallery should show photos", () => {
-    const {getByText, asFragment} = render(
-        <LoginPage />,
-    );
-
-    galleryApi.endpoints.getGalleryPhotos.initiate("test");
+test("Gallery should show photos", async () => {
+  /*const { asFragment, baseElement } = */await loginSubmit();
+
+  /*const { getByText, asFragment } = render(
+    <Provider store={store}>
+      <BrowserRouter>
+        <LoginPage />
+      </BrowserRouter>
+    </Provider>
+  );*/
 
-    const firstRender = asFragment();
+  //galleryApi.endpoints.getGalleryPhotos.initiate("test");
 
-    fireEvent.change(getByText("Login to your gallery"));
-
-    expect(firstRender).toMatchSnapshot(asFragment());
-  });
+  //fireEvent.change(getByText("Login to your gallery"));
+
+  await waitFor(() => {
+    expect(0).toEqual(2);
+  })
+});
diff --git a/...es/gallery-ui/tests/pages/Login/Login.tsx → ...es/gallery-ui/tests/utils/LoginEvents.tsx b/...es/gallery-ui/tests/pages/Login/Login.tsx → ...es/gallery-ui/tests/utils/LoginEvents.tsx
@@ -1,5 +1,5 @@
 import { fireEvent, getByText, render, screen } from '@testing-library/react'
-import App from '../../../src/App.tsx';
+import App from '../../src/App';
 import userEvent from '@testing-library/user-event';
 
 export const loginInput = () => {

diff --git a/ui-applications/packages/gallery-ui/tests/webSocketTestUtils.tsx b/ui-applications/packages/gallery-ui/tests/webSocketTestUtils.tsx
@@ -1,5 +1,5 @@
 import http, { IncomingMessage, ServerResponse } from "http";
-import createWebSocketServer from "./creteWebSocketServer";
+import createWebSocketServer from "./createWebSocketServer";
 
 function startServer(port: any): Promise<http.Server<typeof IncomingMessage, typeof ServerResponse>> {
     const server = http.createServer();

diff --git a/ui-applications/packages/gallery-ui/tsconfig.json b/ui-applications/packages/gallery-ui/tsconfig.json
@@ -1,29 +1,6 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "es2020",
-    "useDefineForClassFields": true,
-    "lib": ["es2020", "DOM", "DOM.Iterable"],
-    "module": "esnext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "esModuleInterop": true,
-    "types": [
-      "jest", "vitest/globals"
-    ]
   },
   "include": ["vite-env.d.ts", "src/**/*", "src/**/*.vue", "tests", "**/*", "gallery-ui", "gallery-ui/tests", "gallery-ui/tests/app", "src/**/*", "src/**/*.vue", "src/**/*"],
   "exclude": ["node_modules"],

diff --git a/ui-applications/packages/photo-collector-ui/.eslintrc.cjs b/ui-applications/packages/photo-collector-ui/.eslintrc.cjs
@@ -1,5 +1,11 @@
 module.exports = {
-  extends: '../../eslint.cjs',
+  extends: ["react-app", "react-app/jest", '../../eslint.cjs'],
   rules: {
   },
+  module: "esnext",
+  globals: {
+    "ts-jest": {
+        "useESM": true
+    }
+  }
 };
diff --git a/ui-applications/packages/photo-collector-ui/tests/AddPhoto.test.tsx b/ui-applications/packages/photo-collector-ui/tests/AddPhoto.test.tsx
@@ -0,0 +1,67 @@
+import { render, waitFor, cleanup, screen, getByText, getByLabelText, fireEvent, getByPlaceholderText } from "@testing-library/react"
+import { expect, test, describe, vi, beforeAll, afterAll, afterEach } from 'vitest';
+import { HttpResponse, http } from "msw";
+import { setupServer } from "msw/node";
+import AddPhotoToGalleryPage from "../src/pages/AddPhotoToGallery/AddPhotoToGalleryPage"
+import { store } from "../src/app/store";
+import { Provider } from "react-redux";
+import { BrowserRouter, Navigate, Route, RouterProvider, Routes } from "react-router-dom";
+import userEvent from '@testing-library/user-event'
+import App from "../src/App";
+import AppRouter from "../src/pages/AppRouter";
+
+/**
+* @vitest-environment jsdom
+*/
+describe("Add photo to gallery page tests", () => {
+    //const server = setupServer(...handlers);
+
+    let file = new File(["happy"], "./happy.png", { type: "image/png" });
+
+    beforeAll(() => {
+        //server.listen()
+    })
+    afterEach(cleanup);
+    afterAll(() => {
+        //server.close()
+    })
+
+    test("Photo form should be uninitialized", async () => {
+        const { asFragment } = render(
+            <Provider store={store}>
+                <BrowserRouter>
+                    <AddPhotoToGalleryPage />
+                </BrowserRouter>
+            </Provider>);
+
+        expect(asFragment()).toMatchSnapshot();
+    })
+
+    test("Photo must upload", async () => {
+
+        const { container, baseElement, asFragment } = render(
+            <Provider store={store}>
+                <BrowserRouter>
+                    <Routes>
+                        <Route path="/upload-photo/:enterCode" element={<AddPhotoToGalleryPage />} />
+                    </Routes>
+                    <Navigate to="/upload-photo/0" replace={true} />
+                </BrowserRouter>
+            </Provider>
+        );
+
+        const element = container.querySelector("#dropzone-file") as HTMLElement;
+
+        fireEvent.change(element, { target: { files: [file] } });
+
+        fireEvent.change(screen.getByPlaceholderText("Your name"), { target: { value: "author" } });
+
+        fireEvent.change(screen.getByPlaceholderText("..."), { target: { value: "happy" } });
+
+        fireEvent.submit(screen.getByRole('button'));
+
+        await waitFor(() => {
+            expect(asFragment()).toMatchSnapshot();
+        });
+    })
+});