npm install -D @coca-cola/kos-test-utils@canary

// src/mockHandlers.ts

import {
  initHandlers,
  createHttpResponse,
  sendToTopic,
} from "@coca-cola/kos-test-utils";

/**
 * this is just for demonstration purposes to show continual updates that can be
 * received by topic handlers for a model.
 *
 * The sendToTopic function can be used to simulate web socket responses from the backend.
 */
let even = true;
setInterval(() => {
  const indx = even ? 2 : 1;
  sendToTopic(`/demo/update/demo${indx}`, {
    headers: {},
    body: { update: Date.now() },
  });
  even = !even;
}, 1000);

setInterval(() => {
  sendToTopic(`/demo/update`, {
    headers: {},
    body: { update: Date.now() },
  });
}, 1000);

setInterval(() => {
  const randomColor = Math.floor(Math.random() * 16777215).toString(16);
  sendToTopic("/dependent/update", {
    headers: {},
    body: { color: "#" + randomColor },
  });
}, 5500);

const handlers = {
  "/dependent": (requestId: string) => {
    const randomColor = Math.floor(Math.random() * 16777215).toString(16);
    const body = {
      color: "#" + randomColor,
    };
    const response = createHttpResponse({
      body,
      headers: { "response-id": requestId },
    });
    return response;
  },
  "/foo/demo1": (requestId: string) => {
    const body = {
      id: "demo1",
      name: "My Demo Name",
    };
    const response = createHttpResponse({
      body,
      headers: { "response-id": requestId },
    });
    return response;
  },
  "/foo/demo2": (requestId: string) => {
    const body = {
      id: "demo1",
      name: "My Other Name",
    };
    const response = createHttpResponse({
      body,
      headers: { "response-id": requestId },
    });
    return response;
  },
};

initHandlers(handlers);

// src/index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// Import mock handlers
import "./mockHandlers";
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);