80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
import "../setup.ts";
|
|
import {
|
|
assert,
|
|
assertEquals,
|
|
assertFalse,
|
|
assertStringIncludes,
|
|
} from "@std/assert";
|
|
import { EmailKit, esc } from "../../mail/layout.ts";
|
|
import { EMAIL_STYLES } from "../../mail/styles.ts";
|
|
import { STYLE_NAMES } from "../../../shared/theme.ts";
|
|
|
|
const doc = (kit: EmailKit) =>
|
|
kit.document({
|
|
subject: "S <1>",
|
|
preheader: "P & Q",
|
|
title: "T",
|
|
body: kit.para("body"),
|
|
footer: kit.footer("why", [["Settings", "https://x.test/?a=1&b=2"]]),
|
|
});
|
|
|
|
Deno.test("esc: user text never becomes markup", () => {
|
|
assertEquals(
|
|
esc(`<b a="1">'&'</b>`),
|
|
"<b a="1">'&'</b>",
|
|
);
|
|
});
|
|
|
|
Deno.test("EmailKit: auto inlines light and recolors in a dark media block", () => {
|
|
const html = doc(new EmailKit({ style: "smooth", scheme: "auto" }, "en"));
|
|
const { light, dark } = EMAIL_STYLES.smooth;
|
|
assertStringIncludes(html, `background-color:${light.card}`);
|
|
assertStringIncludes(html, "@media (prefers-color-scheme:dark)");
|
|
assertStringIncludes(
|
|
html,
|
|
`.b-card{background-color:${dark.card}!important}`,
|
|
);
|
|
assertStringIncludes(html, `content="light dark"`);
|
|
// The subject, preheader and link are escaped where they land.
|
|
assertStringIncludes(html, "<title>S <1></title>");
|
|
assertStringIncludes(html, "P & Q");
|
|
assertStringIncludes(html, `href="https://x.test/?a=1&b=2"`);
|
|
});
|
|
|
|
Deno.test("EmailKit: a chosen scheme is the only one sent", () => {
|
|
const { light, dark } = EMAIL_STYLES.kanagawa;
|
|
const darkHtml = doc(
|
|
new EmailKit({ style: "kanagawa", scheme: "dark" }, "en"),
|
|
);
|
|
assertStringIncludes(darkHtml, `background-color:${dark.card}`);
|
|
assertFalse(darkHtml.includes(light.card));
|
|
assertFalse(darkHtml.includes("prefers-color-scheme"));
|
|
assertStringIncludes(darkHtml, `content="dark"`);
|
|
const lightHtml = doc(
|
|
new EmailKit({ style: "kanagawa", scheme: "light" }, "fr"),
|
|
);
|
|
assertStringIncludes(lightHtml, `background-color:${light.card}`);
|
|
assertStringIncludes(lightHtml, `<html lang="fr">`);
|
|
assertFalse(lightHtml.includes("prefers-color-scheme"));
|
|
});
|
|
|
|
Deno.test("EmailKit: every style draws its own card and font", () => {
|
|
for (const name of STYLE_NAMES) {
|
|
const style = EMAIL_STYLES[name];
|
|
const html = doc(new EmailKit({ style: name, scheme: "light" }, "en"));
|
|
assertStringIncludes(html, `background-color:${style.light.card}`);
|
|
assertStringIncludes(html, `font-family:${style.font}`);
|
|
assertEquals(html.includes("fonts.googleapis.com"), !!style.webFont, name);
|
|
}
|
|
// The rainbow and the hard shadow are what GeoCities and Brutalist look like.
|
|
const geo = new EmailKit({ style: "geocities", scheme: "light" }, "en");
|
|
assertStringIncludes(
|
|
geo.section("A", "", false),
|
|
"linear-gradient(90deg,#ff004d",
|
|
);
|
|
const brutal = doc(
|
|
new EmailKit({ style: "brutalist", scheme: "light" }, "en"),
|
|
);
|
|
assert(brutal.includes("box-shadow:5px 5px 0"));
|
|
});
|