ES-1011: test cases covering verification screen

signup-service/src/main/java/io/mosip/signup/controllers/WebSocketController.java

@@ -23,6 +23,7 @@
 
 import javax.validation.Valid;
 import java.util.Objects;
+import java.util.Optional;
 
 import static io.mosip.signup.api.util.ErrorConstants.PLUGIN_NOT_FOUND;
 import static io.mosip.signup.util.SignUpConstants.SOCKET_USERNAME_SEPARATOR;

signup-ui/package.json

@@ -58,9 +58,11 @@
     "react-webcam": "^7.2.0",
     "rooks": "^7.14.1",
     "socket.io-client": "^4.7.5",
+    "stomp-broker-js": "^1.3.0",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^4.9.5",
+    "uuid": "^10.0.0",
     "web-vitals": "^2.1.4",
     "yup": "^1.3.2",
     "zustand": "^4.4.6"
@@ -105,6 +107,8 @@
     "@types/lodash": "^4.14.200",
     "@types/platform": "^1.3.6",
     "@types/react-google-recaptcha": "^2.1.7",
+    "@types/text-encoding": "^0.0.39",
+    "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.16",
     "craco-alias": "^3.0.1",
     "eslint": "^8.52.0",
@@ -121,6 +125,7 @@
     "storybook": "^7.6.0",
     "tailwindcss": "^3.4.1",
     "tailwindcss-dir": "^4.0.0",
+    "text-encoding": "^0.7.0",
     "ts-jest": "^29.1.4",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "type-fest": "^4.6.0",

signup-ui/src/global.d.ts

@@ -1 +1,37 @@
 /// <reference types="jest-extended" />
+
+declare module "mock-stomp-broker" {
+  interface Config {
+    port?: number;
+    portRange?: [number, number];
+    endpoint?: string;
+  }
+
+  class MockStompBroker {
+    private static PORTS_IN_USE;
+    private static BASE_SESSION;
+    private static getRandomInt;
+    private static getPort;
+    private readonly port;
+    private readonly httpServer;
+    private readonly stompServer;
+    private readonly sentMessageIds;
+    private queriedSessionIds;
+    private sessions;
+    private thereAreNewSessions;
+    private setMiddleware;
+    private registerMiddlewares;
+
+    constructor({ port, portRange, endpoint }?: Config);
+
+    public newSessionsConnected(): Promise<string[]>;
+    public subscribed(sessionId: string): Promise<void>;
+    public scheduleMessage(topic: string, payload: any, headers?: {}): string;
+    public messageSent(messageId: string): Promise<void>;
+    public disconnected(sessionId: string): Promise<void>;
+    public kill(): void;
+    public getPort(): number;
+  }
+
+  export default MockStompBroker;
+}

signup-ui/src/index.tsx

@@ -6,9 +6,14 @@ import App from "./App";
 import "./services/i18n.service";
 import "react-tooltip/dist/react-tooltip.css";
 
+if (process.env.NODE_ENV === "development") {
+  import("./mocks/msw-browser").then(({ mswWorker }) => mswWorker.start());
+}
+
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
+
 root.render(
   <React.StrictMode>
     <App />

signup-ui/src/mocks/handlers/index.ts

@@ -1,3 +1,9 @@
 import { checkSlotHandlers } from "./slot-checking";
+import { testConnectionHandlers } from "./test-connection";
 
-export const handlers = [...checkSlotHandlers];
+export const handlers = [
+  // intercept the "test connection" endpoint
+  ...testConnectionHandlers,
+  // intercept the "check slot" endpoint
+  ...checkSlotHandlers,
+];

signup-ui/src/mocks/handlers/test-connection.ts

@@ -0,0 +1,16 @@
+import { http, HttpResponse } from "msw";
+
+// endpoint to be intercepted
+const testConnectionEP = "http://localhost:8088/v1/signup/test";
+
+const testConnectionSuccess = http.get(testConnectionEP, async () => {
+  return HttpResponse.json({
+    responseTime: "2024-03-25T18:10:18.520Z",
+    response: {
+      connection: true,
+    },
+    errors: [],
+  });
+});
+
+export const testConnectionHandlers = [testConnectionSuccess];

signup-ui/src/mocks/msw-browser.ts

@@ -0,0 +1,5 @@
+import { setupWorker } from "msw/browser";
+
+import { handlers } from "./handlers";
+
+export const mswWorker = setupWorker(...handlers);

signup-ui/src/pages/EkycVerificationPage/VerificationScreen/__tests__/VerificationScreen.test.tsx

@@ -0,0 +1,134 @@
+import { QueryCache, QueryClient } from "@tanstack/react-query";
+import { screen } from "@testing-library/react";
+
+import { renderWithClient } from "~utils/test";
+
+import { VerificationScreen } from "../VerificationScreen";
+import { SettingsDto } from "~typings/types";
+
+describe("Web socket connection between the front end and back end", () => {
+  const queryCache = new QueryCache();
+  const queryClient = new QueryClient({ queryCache });
+
+  const settings = {
+    response: {
+      configs: {
+        "slot.request.limit": 2,
+        "slot.request.delay": 1,
+      },
+    },
+  } as SettingsDto;
+  const cancelPopup = jest.fn();
+
+  it("should be on", () => {
+    // TODO: will add the test implementation once some web socket structure is given
+
+    // Arrange
+
+    // Act
+    renderWithClient(queryClient, <VerificationScreen />);
+
+    // Assert
+    // the connection should be on
+  });
+});
+
+describe("VerificationScreen (vs)", () => {
+  const queryCache = new QueryCache();
+  const queryClient = new QueryClient({ queryCache });
+
+  it("should render correctly", () => {
+    // Arrange
+    renderWithClient(queryClient, <VerificationScreen />);
+
+    // Act
+
+    // Assert
+    const vs = screen.getByTestId("vs");
+    expect(vs).toBeInTheDocument();
+  });
+
+  it("should show onscreen instructions above the video frame sent from eKYC provider", () => {
+    // Arrange
+    // TODO: mock instruction of an eKYC provider
+
+    renderWithClient(queryClient, <VerificationScreen />);
+
+    // Act
+
+    // Assert
+    const vsOnScreenInstruction = screen.getByTestId("vs-onscreen-instruction");
+    expect(vsOnScreenInstruction).toBeInTheDocument();
+  });
+
+  it("should show liveliness verification screen", () => {
+    // Arrange
+    renderWithClient(queryClient, <VerificationScreen />);
+
+    // Act
+
+    // Assert
+    const vsLiveliness = screen.getByTestId("vs-liveliness");
+    expect(vsLiveliness).toBeInTheDocument();
+  });
+
+  it("should show solid colors across the full screen for color based frame verification", async () => {
+    // Arrange
+    renderWithClient(queryClient, <VerificationScreen />);
+
+    // Act
+    // TODO: add wait for x seconds
+
+    // Assert
+    const vsSolidColorScreen = screen.getByTestId("vs-solid-color-screen");
+    expect(vsSolidColorScreen).toBeInTheDocument();
+  });
+
+  it("should show NID verification screen", () => {
+    // Arrange
+    renderWithClient(queryClient, <VerificationScreen />);
+
+    // Act
+
+    // Assert
+    const vsNID = screen.getByTestId("vs-nid");
+    expect(vsNID).toBeInTheDocument();
+  });
+
+  it("should show feedback message when verification fails", () => {
+    // Arrange
+    // TODO: mock failed verification
+    renderWithClient(queryClient, <VerificationScreen />);
+
+    // Act
+
+    // Assert
+    const vsFailedVerification = screen.getByTestId("vs-failed-verification");
+    expect(vsFailedVerification).toBeInTheDocument();
+  });
+
+  it("should show warning message if there is any technical issue", () => {
+    // Arrange
+    // TODO: mock technical issue: internet connection lost, ...
+    renderWithClient(queryClient, <VerificationScreen />);
+
+    // Act
+
+    // Assert
+    const vsTechnicalIssueWarningMsg = screen.getByTestId(
+      "vs-technical-issue-warning-msg"
+    );
+    expect(vsTechnicalIssueWarningMsg).toBeInTheDocument();
+  });
+
+  it("should be redirected to the leading screen when the verification is successful", () => {
+    // Arrange
+    // TODO: mock successful verification
+    renderWithClient(queryClient, <VerificationScreen />);
+
+    // Act
+
+    // Assert
+    // to be redirected to and land on the leading screen
+  });
+});

signup-ui/src/setupTests.ts

@@ -4,7 +4,7 @@
 // learn more: https://github.com/testing-library/jest-dom
 import "@testing-library/jest-dom";
 
-import { mswServer } from "./mocks/msw-server";
+import { mswWorker } from "./mocks/msw-browser";
 
 require("whatwg-fetch");
 
@@ -26,7 +26,3 @@ jest.mock("react-i18next", () => ({
     };
   },
 }));
-
-beforeAll(() => mswServer.listen());
-afterEach(() => mswServer.resetHandlers());
-afterAll(() => mswServer.close());

signup-ui/src/typings/stompBroker.d.ts

@@ -0,0 +1 @@
+declare module 'stomp-broker-js';

signup-ui/src/utils/stompBroker/getStompClient.ts

@@ -0,0 +1,31 @@
+import { Message, Client } from "@stomp/stompjs";
+
+interface ClientArgs {
+  port: number;
+  topic?: string;
+  onMessage?: (message: Message) => void;
+  endpoint?: string;
+}
+
+const getStompClient = ({
+  port,
+  topic,
+  onMessage = jest.fn(),
+  endpoint = "/websocket"
+}: ClientArgs): Client => {
+  const client = new Client({
+    brokerURL: `ws://localhost:${port}${endpoint}`
+  });
+
+  if (topic) {
+    client.onConnect = () => {
+      client.subscribe(topic, onMessage);
+    };
+  }
+
+  client.activate();
+
+  return client;
+};
+
+export default getStompClient;