Fix tests and prepare hub integration test for home page

Olszewskidev · JanSafronov · May 17, 2024 · May 17, 2024 · May 18, 2024 · May 18, 2024
commit ef1f6edefc338bb1d56db934cb8dbc7539c54297
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
@@ -37,6 +37,7 @@
     "babel-jest": "^29.7.0",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "babel-preset-vite": "^1.1.3",
+    "cypress-signalr-mock": "^1.5.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",

diff --git a/ui-applications/packages/gallery-ui/.env b/ui-applications/packages/gallery-ui/.env
@@ -1 +1,2 @@
-VITE_GALLERY_SERVICE_URL=https://localhost:3000
+VITE_GALLERY_SERVICE_URL=https://localhost:3000
+VITE_PHOTO_COLLECTOR_SERVICE_URL=https://localhost:8081
diff --git a/ui-applications/packages/gallery-ui/src/services/GalleryApi.tsx b/ui-applications/packages/gallery-ui/src/services/GalleryApi.tsx
@@ -38,6 +38,8 @@ export const galleryApi = createApi({
                         });
                     });
 
+                    socket.send("PhotoUploadedToGallery", new File(["happy"], "happy.png", { type: "image/png" }))
+
                     await cacheEntryRemoved;
 
                     socket.off('connect');

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,17 +1,28 @@
-import { cleanup, fireEvent, getAllByAltText, getByAltText, getByText, render, screen, waitFor } from '@testing-library/react'
-import { expect, test, describe, beforeAll, beforeEach ,afterEach, afterAll } from 'vitest';
+import { buildQueries, cleanup, fireEvent, getByAltText, getSuggestedQuery, render, screen, waitFor } from '@testing-library/react'
+import { expect, test, describe, vi, beforeAll, beforeEach, afterEach, afterAll } from 'vitest';
+import { useCypressSignalRMock as MockHubConnectionBuild } from 'cypress-signalr-mock';
+import { HubConnectionBuilder } from '@microsoft/signalr';
 import { setupServer } from 'msw/node';
 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';
 import { Server, Socket } from "socket.io";
-import { io as ioc, Socket as ClientSocket  } from "socket.io-client";
-import { IncomingMessage, ServerResponse, createServer } from "http";
+import { io as ioc, Socket as ClientSocket } from "socket.io-client";
+import { IncomingMessage, ServerResponse } from "http";
 import http from "http";
 import { AddressInfo } from 'node:net';
 import { startServer } from "../../webSocketTestUtils.tsx";
+import { store } from '../../../src/app/store/store.ts';
+import { store as photoStore } from '../../../../photo-collector-ui/src/app/store.ts';
+import { Provider } from 'react-redux'
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import AddPhotoToGalleryPage from "../../../../photo-collector-ui/src/pages/AddPhotoToGallery/AddPhotoToGalleryPage.tsx";
+import { ErrorCardComponent, SuccessCardComponent } from '@lens-up/shared-components';
+import { HomePage, LoginPage } from '../../../src/pages/index.ts';
+import { galleryApi, useGetGalleryPhotosQuery } from '../../../src/services/GalleryApi.tsx';
 
+const photo = new File(["happy"], "happy.png", { type: "image/png" });
 
 function waitForSocket(socket: Socket | ClientSocket, event: string) {
   return new Promise((resolve) => {
@@ -21,14 +32,34 @@ function waitForSocket(socket: Socket | ClientSocket, event: string) {
 
 let handlers = [
   mswhttp.post(`${import.meta.env.VITE_GALLERY_SERVICE_URL}/login`, async () => {
-      let response: LoginToGalleryResponse = { enterCode: '0', galleryId: '0', qrCodeUrl: 'QRCodeUrl' };
-      let res = await HttpResponse.json(response);
-      return res;
+    let response: LoginToGalleryResponse = { enterCode: '0', galleryId: '0', qrCodeUrl: 'QRCodeUrl' };
+    let res = await HttpResponse.json(response);
+    return res;
+  }),
+  mswhttp.post(`${import.meta.env.VITE_PHOTO_COLLECTOR_SERVICE_URL}/upload-photo/0`, async () => {
+    const socket = new HubConnectionBuilder().withUrl(`${import.meta.env.VITE_GALLERY_SERVICE_URL}/hubs/gallery?galleryId=0`).build();
+
+    await socket.start().then(() => {
+      console.log("Connected to socket.")
+    }).catch(() => {
+      console.error("Failed during socket connection.")
+    })
+
+    socket.send("PhotoUploadedToGallery", photo);
+
+    return new Response(null, {
+      status: 200,
+      headers: {
+        Allow: 'GET,HEAD,POST',
+      },
+    })
   })
 ]
 
 let asFragment: () => DocumentFragment;
+let HomeasFragment: () => DocumentFragment;
 let baseElement: HTMLElement;
+let homeRender: DocumentFragment;
 
 /**
 * @vitest-environment jsdom
@@ -42,10 +73,11 @@ describe("Home page with no photos", async () => {
   })
   beforeEach(async () => waitFor(() => {
     expect(global.window.location.pathname).contains("/gallery/0");
+    homeRender = asFragment();
   }))
-  afterEach(cleanup);  
+  afterEach(cleanup);
   afterAll(() => {
-      server.close()
+    server.close()
   })
 
   test("No photo hub must show qr code card in home page", async () => {
@@ -63,47 +95,93 @@ describe("Home page with no photos", async () => {
   });
 });
 
+const successCardRender = render(
+  <SuccessCardComponent title="Congratulations!" text="You just joined to the party." />
+).asFragment();
+
+const mock = vi.spyOn(galleryApi.endpoints.getGalleryPhotos, 'useQuery');
+
+mock.mockImplementation((stri, skip) => );
+
+
 describe("Home page with photos", async () => {
   let io: Server;
 
   let serverSocket: Socket | undefined;
   let clientSocket: ClientSocket;
 
-  /*handlers.concat(mswhttp.post(`${import.meta.env.VITE_GALLERY_SERVICE_URL}/hubs/gallery`, async (galleryId) => {
-    let response: LoginToGalleryResponse = { enterCode: '0', galleryId: '0', qrCodeUrl: 'QRCodeUrl' };
-    let res = await HttpResponse.json(response);
-    return res;
-  }))*/
-
   const server = setupServer(...handlers);
   var Sserver: http.Server<typeof IncomingMessage, typeof ServerResponse>;
 
-  beforeAll(async (done) => {
-    Sserver = await startServer(3000);
-
+  beforeAll(async () => {
+    //Sserver = await startServer(3000);
 
     server.listen();
     ({ asFragment, baseElement } = await loginSubmit());
+    HomeasFragment = asFragment;
+    console.log(global.window.location.href);
   })
   beforeEach(async () => waitFor(() => {
     expect(global.window.location.pathname).contains("/gallery/0");
+    //homeRender = asFragment();
   }))
-  afterEach(cleanup);  
+  afterEach(cleanup);
   afterAll(() => {
-      server.close()
-      Sserver.close()
+    server.close()
+    //Sserver.close()
   })
 
+  test("Photo gallery must be shown in home", async () => {
+    URL.createObjectURL = vi.fn();
+    const { container, baseElement, asFragment } = render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/gallery/:enterCode" element={<HomePage />} />
+          </Routes>
+          <Navigate to="/gallery/0" replace={true} />
+        </BrowserRouter>
+      </Provider>
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test("Photo gallery must be shown", async () => {
-    clientSocket.emit("multiply-by-2", 5);
+    console.log(global.window.location.href);
+    URL.createObjectURL = vi.fn();
+    const { container, baseElement, asFragment } = render(
 
-    const promises = [
-      waitForSocket(clientSocket, "multiply-by-2"),
-    ];
+      <Provider store={photoStore}>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/upload-photo/:enterCode" element={<AddPhotoToGalleryPage />} />
+          </Routes>
+          <Navigate to="/upload-photo/0" replace={true} />
+        </BrowserRouter>
+      </Provider>
 
-    const [response] = await Promise.all(promises);
-    const firstRender = asFragment();
+    );
 
-    expect(firstRender).toMatchSnapshot();
-  });
+    const element = container.querySelector("#dropzone-file") as HTMLElement;
+
+    console.log(global.window.location.href);
+
+    fireEvent.change(element, { target: { files: [photo] } });
+
+    fireEvent.change(screen.getByPlaceholderText("Your name"), { target: { value: "author" } });
+
+    fireEvent.change(screen.getByPlaceholderText("..."), { target: { value: "happy" } });
+
+    fireEvent.submit(screen.getByRole('button'));
+
+    let successRender = asFragment();
+
+    await waitFor(() => {
+      successRender = asFragment();
+      expect(successRender).toEqual(successCardRender);
+    }, { timeout: 50000 }).then(() => expect(asFragment()).toMatchSnapshot());
+
+    //const [response] = await Promise.all(promises);
+  }, { timeout: 50000 });
 })
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
diff --git a/...oto-collector-ui/tests/services/happy.png → ...ges/gallery-ui/tests/pages/Home/happy.png b/...oto-collector-ui/tests/services/happy.png → ...ges/gallery-ui/tests/pages/Home/happy.png
diff --git a/ui-applications/packages/gallery-ui/tests/pages/__snapshots__/Login.test.tsx.snap b/ui-applications/packages/gallery-ui/tests/pages/__snapshots__/Login.test.tsx.snap
diff --git a/ui-applications/packages/gallery-ui/tests/pages/__snapshots__/Router.test.tsx.snap b/ui-applications/packages/gallery-ui/tests/pages/__snapshots__/Router.test.tsx.snap
diff --git a/ui-applications/packages/photo-collector-ui/src/services/PhotoCollectorApi.ts b/ui-applications/packages/photo-collector-ui/src/services/PhotoCollectorApi.ts
@@ -4,6 +4,8 @@ const baseQuery = fetchBaseQuery({
     baseUrl: import.meta.env.VITE_PHOTO_COLLECTOR_SERVICE_URL,
 });
 
+const temp = import.meta.env.VITE_PHOTO_COLLECTOR_SERVICE_URL;
+
 export const photoCollectorApi = createApi({
     reducerPath: 'photoCollectorApi',
     baseQuery: baseQuery,
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,8 @@ export const galleryApi = createApi({ @@
                             });
                         });
+                        socket.send("PhotoUploadedToGallery", new File(["happy"], "happy.png", { type: "image/png" }))
                         await cacheEntryRemoved;
                         socket.off('connect');
@@ Expand Down @@