test: markdown renderer

Author: brianrodri

src/lib/obsidian/__mocks__/types.ts

@@ -0,0 +1,6 @@
+import { vi } from "vitest";
+
+export const App = vi.fn();
+export const Component = vi.fn();
+export const MarkdownRenderer = { render: vi.fn() };
+export const Plugin = vi.fn();

src/lib/obsidian/types.ts

@@ -1,2 +1,2 @@
-export { MarkdownRenderer, Plugin } from "obsidian";
-export type { App, Component, EventRef, MetadataCache, TAbstractFile, TFile } from "obsidian";
+export { App, Component, MarkdownRenderer, Plugin } from "obsidian";
+export type { EventRef, MetadataCache, TAbstractFile, TFile } from "obsidian";

src/render/preact/lib/__tests__/obsidian.test.tsx

@@ -0,0 +1,60 @@
+import { render, waitFor } from "@testing-library/preact";
+import { Duration } from "luxon";
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+
+import { App, Component, MarkdownRenderer } from "@/lib/obsidian/types";
+
+import { ObsidianMarkdown, ObsidianMarkdownProps } from "../obsidian";
+
+vi.mock("@/lib/obsidian/types");
+
+describe(`${ObsidianMarkdown.name}`, () => {
+    const app = new App();
+    const component = new Component();
+    const markdown = "Hello World";
+    const sourcePath = "/vault/diary.md";
+    const tagName = "span";
+    const delay = Duration.fromMillis(500);
+
+    beforeAll(() => vi.useFakeTimers());
+    afterEach(() => vi.resetAllMocks());
+    afterAll(() => vi.useRealTimers());
+
+    it("should invoke render with the provided props", async () => {
+        const props: ObsidianMarkdownProps = { app, component, markdown, sourcePath, tagName, delay };
+
+        render(<ObsidianMarkdown {...props} />);
+
+        await vi.runAllTimersAsync();
+
+        await waitFor(() =>
+            expect(MarkdownRenderer.render).toHaveBeenCalledWith(
+                app,
+                markdown,
+                expect.any(HTMLSpanElement),
+                sourcePath,
+                component,
+            ),
+        );
+    });
+
+    it("should rerender after a delay when the markdown value changes", async () => {
+        const delay = Duration.fromMillis(300);
+        const props: ObsidianMarkdownProps = { markdown: "Hello, World!", app, component, sourcePath, tagName, delay };
+
+        const { rerender } = render(<ObsidianMarkdown {...props} />);
+        await vi.runAllTimersAsync();
+
+        expect(MarkdownRenderer.render).toHaveBeenCalledTimes(1);
+
+        rerender(<ObsidianMarkdown {...{ ...props, markdown: "Hello, Planet" }} />);
+        await vi.advanceTimersByTimeAsync(299);
+
+        expect(MarkdownRenderer.render).toHaveBeenCalledTimes(1);
+
+        rerender(<ObsidianMarkdown {...{ ...props, markdown: "Hello, Planet" }} />);
+        await vi.advanceTimersByTimeAsync(1);
+
+        expect(MarkdownRenderer.render).toHaveBeenCalledTimes(2);
+    });
+});