test case fixed and start tour preview window fix

Signed-off-by: nitro56565 <nitro56565@gmail.com>

Author: nitro56565

package-lock.json

@@ -28,6 +28,7 @@
     "core-js": "^3.37.1",
     "highlight.js": "^11.10.0",
     "immer": "^10.1.1",
+    "jest-canvas-mock": "^2.5.2",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.50.0",
     "node-stdlib-browser": "^1.2.0",

package.json

@@ -16,7 +16,7 @@ function AgreementHtml({
 
   return (
     <div
-      className="column"
+      className="column preview-component"
       style={{
         border: "1px solid #d9d9d9",
         borderRadius: "8px",

src/AgreementHtml.tsx

@@ -63,7 +63,7 @@ tour.addStep({
   id: "preview",
   text: "This section shows the live preview of your template. View the results of your edits and see how your template renders.",
   attachTo: {
-    element: ".anticon-fullscreen",
+    element: ".preview-component",
     on: "bottom",
   },
   buttons: [

src/components/Tour.ts

@@ -2,6 +2,11 @@ import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import Navbar from "../../components/Navbar";
 import { MemoryRouter } from "react-router-dom";
+import { vi } from "vitest";
+
+vi.mock("../../components/ToggleDarkMode", () => ({
+  default: () => <div data-testid="toggle-dark-mode">Dark Mode Toggle</div>,
+}));
 
 const renderNavbar = () => {
   render(
@@ -40,4 +45,10 @@ describe("Navbar", () => {
       backgroundColor: "rgba(255, 255, 255, 0.1)",
     });
   });
+
+  it("renders Dark Mode Toggle button", () => {
+    renderNavbar();
+    const toggleDarkMode = screen.getByTestId("toggle-dark-mode");
+    expect(toggleDarkMode).toBeInTheDocument();
+  });
 });