62 lines
2.7 KiB
JavaScript
62 lines
2.7 KiB
JavaScript
import { render } from "@cerxes/csx";
|
|
import { testContainer } from "../utils/test-container";
|
|
|
|
describe("SVG-rendering test", () => {
|
|
test("Simple", async () => {
|
|
let makeSpec = (stroke, strokeWidth) => (
|
|
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"
|
|
stroke={stroke}>
|
|
<g fill="none" fill-rule="evenodd">
|
|
<g transform="translate(1 1)" stroke-width={strokeWidth}>
|
|
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
|
|
<path d="M36 18c0-9.94-8.06-18-18-18">
|
|
<animateTransform
|
|
attributeName="transform"
|
|
type="rotate"
|
|
from="0 18 18"
|
|
to="360 18 18"
|
|
dur="1s"
|
|
repeatCount="indefinite"/>
|
|
</path>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
)
|
|
let initialVSpec = makeSpec("#000", 2);
|
|
let rendered = render(initialVSpec);
|
|
let container = testContainer(rendered);
|
|
|
|
expect(container.innerHTML).toBe([
|
|
`<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000">`,
|
|
`<g fill="none" fill-rule="evenodd">`,
|
|
`<g transform="translate(1 1)" stroke-width="2">`,
|
|
`<circle stroke-opacity=".5" cx="18" cy="18" r="18">`,
|
|
`</circle>`,
|
|
`<path d="M36 18c0-9.94-8.06-18-18-18">`,
|
|
`<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite">`,
|
|
`</animateTransform>`,
|
|
`</path>`,
|
|
`</g>`,
|
|
`</g>`,
|
|
`</svg>`
|
|
].join(''));
|
|
|
|
let updatedVSpec = makeSpec("#FFF", 4);
|
|
render(updatedVSpec, { host: rendered, old: initialVSpec });
|
|
|
|
expect(container.innerHTML).toBe([
|
|
`<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#FFF">`,
|
|
`<g fill="none" fill-rule="evenodd">`,
|
|
`<g transform="translate(1 1)" stroke-width="4">`,
|
|
`<circle stroke-opacity=".5" cx="18" cy="18" r="18">`,
|
|
`</circle>`,
|
|
`<path d="M36 18c0-9.94-8.06-18-18-18">`,
|
|
`<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite">`,
|
|
`</animateTransform>`,
|
|
`</path>`,
|
|
`</g>`,
|
|
`</g>`,
|
|
`</svg>`
|
|
].join(''));
|
|
});
|
|
}); |