ntms/src/__tests__/toHtml.test.ts

A dead simple way to add i18n to your Next.js app using the Notion API and Deepl

import { toHtml } from "../utils";
import { RichText } from "../types";
const testRichText = [
  {
    type: "text",
    plain_text: "NTMS",
    annotations: {
      bold: true,
      italic: false,
      strikethrough: false,
      underline: false,
      code: false,
      color: "default",
    },
    href: "https://ntms.dev",
  },
  {
    type: "text",
    plain_text: " IS AWESOME",
    annotations: {
      bold: false,
      italic: false,
      strikethrough: false,
      underline: true,
      code: false,
      color: "red",
    },
    href: null,
  },
] as RichText[];

const testRichText2 = [
  {
    type: "text",
    plain_text: "{{NTMS}}",
    annotations: {
      bold: true,
      italic: false,
      strikethrough: false,
      underline: false,
      code: true,
      color: "default",
    },
    href: null,
  },
  {
    type: "text",
    plain_text: "{{test}}",
    annotations: {
      bold: false,
      italic: false,
      strikethrough: false,
      underline: false,
      code: false,
      color: "default",
    },
    href: null,
  },
] as RichText[];

const testRichText3 = [
  {
    type: "text",
    plain_text: "I have {{number}}",
    annotations: {
      bold: true,
      italic: false,
      strikethrough: false,
      underline: false,
      code: false,
      color: "default",
    },
    href: null,
  },
  {
    type: "text",
    plain_text: "((message,messages))",
    annotations: {
      bold: false,
      italic: false,
      strikethrough: false,
      underline: false,
      code: false,
      color: "default",
    },
    href: null,
  },
] as RichText[];

describe("Testing html converter", () => {
  it("Should return HTML", () => {
    expect(toHtml(testRichText)).toEqual(
      '<span><a href="https://ntms.dev"><b>NTMS</b></a></span><span><mark data-color="red"><u> IS AWESOME</u></mark></span>'
    );
  });
  it("Should return HTML with protected markup for mustache", () => {
    expect(toHtml(testRichText2)).toEqual(
      "<span><pre><b><mustach>NTMS</mustach></b></pre></span><span><mustach>test</mustach></span>"
    );
  });
  it("Should return HTML with protected markup for mustache", () => {
    expect(toHtml(testRichText3)).toEqual(
      "<span><b>I have <mustach>number</mustach></b></span><span><plural>message,messages</plural></span>"
    );
  });
});