chore: replace eslint & prettier w/ biomejs (#21)
* chore: replace eslint & prettier w/ biomejs * fix syntax error in ci.yml workflow * ensure that build CI jobs only run if check job succeeds to save resources
This commit is contained in:
parent
d67e4c81ad
commit
e319626a1a
44 changed files with 2408 additions and 5691 deletions
|
|
@ -3,151 +3,150 @@
|
|||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Component, createElement, Fragment } from "../../dist";
|
||||
import { type Component, Fragment, createElement } from "../../dist";
|
||||
import { renderPage } from "../../dist/render";
|
||||
import { testSuite } from "../lib";
|
||||
|
||||
testSuite("renderPage", ({ test, expect }) => {
|
||||
test("throws an Error when root elem is not html tag", () => {
|
||||
expect(() => renderPage(<div />)).toThrowErrorMatching(
|
||||
"attempted to render page with non-HTML root element div",
|
||||
);
|
||||
});
|
||||
test("throws an Error when root elem is not html tag", () => {
|
||||
expect(() => renderPage(<div />)).toThrowErrorMatching(
|
||||
"attempted to render page with non-HTML root element div",
|
||||
);
|
||||
});
|
||||
|
||||
test("outputs a HTML5 DOCTYPE declaration", () => {
|
||||
const html = renderPage(<html />);
|
||||
expect(html).toStartWith("<!DOCTYPE html>");
|
||||
});
|
||||
test("outputs a HTML5 DOCTYPE declaration", () => {
|
||||
const html = renderPage(<html />);
|
||||
expect(html).toStartWith("<!DOCTYPE html>");
|
||||
});
|
||||
|
||||
test("escapes HTML in tag names", () => {
|
||||
const html = renderPage(
|
||||
<html>{createElement("div></div", null)}</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html><div></div></div></div></html>",
|
||||
);
|
||||
});
|
||||
test("escapes HTML in tag names", () => {
|
||||
const html = renderPage(<html>{createElement("div></div", null)}</html>);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html><div></div></div></div></html>",
|
||||
);
|
||||
});
|
||||
|
||||
test("renders html attributes", () => {
|
||||
const html = renderPage(
|
||||
<html>
|
||||
<div className="test" id="1" />
|
||||
</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
'<!DOCTYPE html><html><div class="test" id="1"></div></html>',
|
||||
);
|
||||
});
|
||||
test("renders html attributes", () => {
|
||||
const html = renderPage(
|
||||
<html>
|
||||
<div className="test" id="1" />
|
||||
</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
'<!DOCTYPE html><html><div class="test" id="1"></div></html>',
|
||||
);
|
||||
});
|
||||
|
||||
test("renders common html tags", () => {
|
||||
const html = renderPage(
|
||||
<html>
|
||||
<head>
|
||||
<title />
|
||||
</head>
|
||||
<body>
|
||||
<div />
|
||||
</body>
|
||||
</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html><head><title></title></head><body><div></div></body></html>",
|
||||
);
|
||||
});
|
||||
test("renders common html tags", () => {
|
||||
const html = renderPage(
|
||||
<html>
|
||||
<head>
|
||||
<title />
|
||||
</head>
|
||||
<body>
|
||||
<div />
|
||||
</body>
|
||||
</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html><head><title></title></head><body><div></div></body></html>",
|
||||
);
|
||||
});
|
||||
|
||||
test("renders text nodes", () => {
|
||||
const html = renderPage(<html>There are three lights!</html>);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html>There are three lights!</html>",
|
||||
);
|
||||
});
|
||||
test("renders text nodes", () => {
|
||||
const html = renderPage(<html>There are three lights!</html>);
|
||||
expect(html).toEqual("<!DOCTYPE html><html>There are three lights!</html>");
|
||||
});
|
||||
|
||||
test("renders spliced number nodes", () => {
|
||||
const nLights = 3;
|
||||
const html = renderPage(<html>There are {nLights} lights!</html>);
|
||||
expect(html).toEqual("<!DOCTYPE html><html>There are 3 lights!</html>");
|
||||
});
|
||||
test("renders spliced number nodes", () => {
|
||||
const nLights = 3;
|
||||
const html = renderPage(<html>There are {nLights} lights!</html>);
|
||||
expect(html).toEqual("<!DOCTYPE html><html>There are 3 lights!</html>");
|
||||
});
|
||||
|
||||
test("renders spliced arrays", () => {
|
||||
const Light: Component<{ lightN: number }> = ({ lightN }) => (
|
||||
<div>{lightN}</div>
|
||||
);
|
||||
const lights = [1, 2, 3];
|
||||
const html = renderPage(
|
||||
<html>
|
||||
There are{" "}
|
||||
{lights.map((lightN) => (
|
||||
<Light lightN={lightN} />
|
||||
))}{" "}
|
||||
lights!
|
||||
</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html>There are <div>1</div><div>2</div><div>3</div> lights!</html>",
|
||||
);
|
||||
});
|
||||
test("renders spliced arrays", () => {
|
||||
const Light: Component<{ lightN: number }> = ({ lightN }) => (
|
||||
<div>{lightN}</div>
|
||||
);
|
||||
const lights = [1, 2, 3];
|
||||
const html = renderPage(
|
||||
<html>
|
||||
There are{" "}
|
||||
{lights.map((lightN) => (
|
||||
<Light lightN={lightN} />
|
||||
))}{" "}
|
||||
lights!
|
||||
</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html>There are <div>1</div><div>2</div><div>3</div> lights!</html>",
|
||||
);
|
||||
});
|
||||
|
||||
test("renders components w/ custom properties", () => {
|
||||
interface LightProps {
|
||||
nLights: number;
|
||||
}
|
||||
const Light: Component<LightProps> = ({ nLights }) => (
|
||||
<div>{nLights} lights</div>
|
||||
);
|
||||
const html = renderPage(
|
||||
<html>
|
||||
There are <Light nLights={3} />!
|
||||
</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html>There are <div>3 lights</div>!</html>",
|
||||
);
|
||||
});
|
||||
test("renders components w/ custom properties", () => {
|
||||
interface LightProps {
|
||||
nLights: number;
|
||||
}
|
||||
const Light: Component<LightProps> = ({ nLights }) => (
|
||||
<div>{nLights} lights</div>
|
||||
);
|
||||
const html = renderPage(
|
||||
<html>
|
||||
There are <Light nLights={3} />!
|
||||
</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html>There are <div>3 lights</div>!</html>",
|
||||
);
|
||||
});
|
||||
|
||||
test("renders fragment children only", () => {
|
||||
const html = renderPage(
|
||||
<html>
|
||||
<Fragment>
|
||||
<div>test of</div>
|
||||
<div>fragments</div>
|
||||
</Fragment>
|
||||
</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html><div>test of</div><div>fragments</div></html>",
|
||||
);
|
||||
});
|
||||
test("renders fragment children only", () => {
|
||||
const html = renderPage(
|
||||
<html>
|
||||
<Fragment>
|
||||
<div>test of</div>
|
||||
<div>fragments</div>
|
||||
</Fragment>
|
||||
</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html><div>test of</div><div>fragments</div></html>",
|
||||
);
|
||||
});
|
||||
|
||||
test("renders unescaped HTML via dangerouslySetInnerHTML", () => {
|
||||
const html = renderPage(
|
||||
<html>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: "<div>red alert!</div>",
|
||||
}}
|
||||
/>
|
||||
</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html><div><div>red alert!</div></div></html>",
|
||||
);
|
||||
});
|
||||
test("renders unescaped HTML via dangerouslySetInnerHTML", () => {
|
||||
const html = renderPage(
|
||||
<html>
|
||||
<div
|
||||
// biome-ignore lint/security/noDangerouslySetInnerHtml: explicit test
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: "<div>red alert!</div>",
|
||||
}}
|
||||
/>
|
||||
</html>,
|
||||
);
|
||||
expect(html).toEqual(
|
||||
"<!DOCTYPE html><html><div><div>red alert!</div></div></html>",
|
||||
);
|
||||
});
|
||||
|
||||
test("throws error when both dangerouslySetInnerHTML and children prop present", () => {
|
||||
expect(() =>
|
||||
renderPage(
|
||||
<html>
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: "<div>set phasers to kill</div>",
|
||||
}}
|
||||
>
|
||||
<div>set phasers to stun</div>
|
||||
</div>
|
||||
</html>,
|
||||
),
|
||||
).toThrowErrorMatching(
|
||||
'An element with children may not have a "dangerouslySetInnerHTML" prop since children would be overriden',
|
||||
);
|
||||
});
|
||||
test("throws error when both dangerouslySetInnerHTML and children prop present", () => {
|
||||
expect(() =>
|
||||
renderPage(
|
||||
<html>
|
||||
<div
|
||||
// biome-ignore lint/security/noDangerouslySetInnerHtml: explicit test
|
||||
// biome-ignore lint/security/noDangerouslySetInnerHtmlWithChildren: explicit test
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: "<div>set phasers to kill</div>",
|
||||
}}
|
||||
>
|
||||
<div>set phasers to stun</div>
|
||||
</div>
|
||||
</html>,
|
||||
),
|
||||
).toThrowErrorMatching(
|
||||
'An element with children may not have a "dangerouslySetInnerHTML" prop since children would be overriden',
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue