xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chore: Migrate build to vite (#1033)

Browse Source 
* Chore: Add move most types from rrweb to @rrweb/types package

* Split off type imports

* Split off type import to its own line

* Get vite to generate type definitions

* Apply formatting changes

* noEmit not allowed in tsconfig, moved it to build step

* Migrate rrdom-nodejs build to vite

* Apply formatting changes

* Migrate rrweb-snapshot to vite

* Unify configs

* Chore: Migrate rrdom to vite

Turns out what we where doing by overwriting `public textContent: string | undefined` as a getter in a subclass is something that isn't allowed in typescript. Because we where using `// @ts-ignore`  to hide this error our bundler chose to allow the overwrite. Vite choses to disallow the overwrite making all subclasses' `textContent` undefined.
To mitigate this we're using an abstract class, which does allow sub classes to decide if they wan't to use getters or not.

* Chore: Migrate rrweb to vite WIP

* build:browser was removed (for now)

* BREAKING: moved rrweb-plugin-console to its own npm module

This removes console from rrweb-all.js

* Support cjs files in startServer

* Move canvas-webrtc plugin to its own package

* Chore: move sequential-id plugin to its own package

* Chore: Configure rrweb's vite bundling

* `Id` had lowercase `d` before, making it lowercase again

* Test: Move console tests to their own package

* remove unused utils from rrdom

* pull in latest version of master
something when wrong earlier when resolving merge conflicts, this should be correct

* Fix type casting issue in diff.ts

* Fix typo

* Fix duplicate entries in package.json and tsconfig.json

* Apply formatting changes

* Update dependencies in package.json files

* Update dependencies to use Vite 5.2.8 in package.json files

* Get tests passing for rrdom

`apply virtual style rules to node` tests need to be moved to rrweb to avoid circular dependencies

* Fix image loading issue in integration tests

* Move pack/unpack to its own @rrweb/packer module

* Get tests to work in rrdom-nodejs

* Port tests in rrweb-snapshot to vitest and fix them

* Fix tests for rrweb-plugin-console-record

* Add @rrweb/all package

* Fix publint and attw errors for rrdom and @rrweb/types

* Use shared vitest.config.ts in rrweb-snapshot package

* Fix publint and attw issues for rrweb-snapshot

* Export `ReplayPlugin` type directly from rrweb

* Fix publint and attw issues for packages

* Fix publint & attw issue.

I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md

And had to choose one of these three methods described here:
https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility
And I ended up going for the method described here:
1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects)

The redirect method seemed the least invasive and most effective.

* Fix publint & attw issue.

I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md

And had to choose one of these three methods described here:
https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility
And I ended up going for the method described here:
1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects)

The redirect method seemed the least invasive and most effective.

* move some rrdom tests that require rrweb to rrweb package

* Use pre-jest 29 syntax for snapshotting

* get rrweb passing publint and attw

* const enum does not work with isolated modules flag

* Fix script tag type in webgl.test.ts.snap and update rrweb.umd.cjs path in webgl.test.ts

* Fix paths

* Move tests for console record plugin and fix bundle path

* Fix tests for rrweb

* pack integration tests were moved to @rrweb/all

* Update rrweb bundle path in test files

* Fix flaky scroll emit from test

* Migrate rrweb's tests over to vitest and make them pass

* Make sure benchmarks & updating tests work

* Remove jest from rrweb

* Fix paths

* always use rrweb's own cssom

* Update tsconfig.json for rrweb-plugin-sequential-id-record

Fixes this error:
Error: @rrweb/rrweb-plugin-sequential-id-record:prepublish: tsconfig.json(9,5): error TS6377: Cannot write file '/home/runner/work/rrweb/rrweb/tsconfig.tsbuildinfo' because it will overwrite '.tsbuildinfo' file generated by referenced project '/home/runner/work/rrweb/rrweb/packages/rrweb'

* Add tsbuildinfo config to extended tsconfig files

* Move rrdom over to vitest

* Apply formatting changes

* Update rrweb imports to use the new package structure

* extend rrweb-snapshot's tsconfig from monorepo base config

* extend @rrweb/types's tsconfig from monorepo base config

* extend rrdom's tsconfig from monorepo base config

* extend rrdom-nodejs's tsconfig from monorepo base config

* extend web-extension's tsconfig from monorepo base config

* unify tsconfigs

* Continue when tests fail

* Add stricter type checking

* Add check-types global command

* remove jest

* Remove unused code

* Add check-types command to build script

* Fix linting issues

* Add setup Chrome action for CI/CD workflow

* Update puppeteer version in package.json for rrweb

* Update Chrome setup in CI/CD workflow

* Update Chrome setup in CI/CD workflow

* Add Chrome setup and test cache location

* Update CI/CD workflow to test chrome cache location

* Add chrome installation step to CI/CD workflow

* Update Puppeteer configuration for headless testing

* Update dependencies and workflow configuration

* Use same version of chrome on CI as is run locally

* Use version of chrome that seems to work with rrdom tests

* Try using puppeteerrc to define chrome version

* Add .cache directory to .gitignore

* Move global flag to vitest config

* Update puppeteer version to 20.9.0

* Update console log messages in rrweb-plugin-console-record for new puppeteer version

* Remove redundant Chrome setup from CI/CD workflow

* Add minification and umd for all built files

* Update import paths for rrweb dist files

* Add @rrweb/replay and @rrweb/record

* Add script to lint packages

* Apply formatting changes

* exclude styles export from typescript package type checking

* WIP Move rrweb-player over to vite

* Apply formatting changes

* chore: Update rrweb plugin import paths

* Remove rollup from rrweb-player

* Fix typing issues

* Fix typing issues

* chore: Update rrweb-player to use vite for build process

* Apply formatting changes

* chore: Export Player class in rrweb-player/src/main.ts

Makes attw happy

* Apply formatting changes

* Gets wiped by yarn workspaces-to-typescript-project-references

* Add .eslintignore and .eslintrc.cjs files for rrweb-player package

* Apply formatting changes

* Update dependencies in rrweb-player/package.json

* Apply formatting changes

* chore: Update eslint configuration for rrweb-player package

* Apply formatting changes

* chore: Remove unused files from rrweb-player package

* Apply formatting changes

* chore: Update rrweb-player import path to use rrweb-player.cjs

* chore: Update addEventListener signature in rrweb-player

* Apply formatting changes

* Add .eslintignore and update .gitignore files for to root

* Apply formatting changes

* Update documentation

* Update @rrweb/types package description

* Apply formatting changes

* Update build and run commands in CONTRIBUTING.md

* Apply formatting changes

* Update package versions to 2.0.0-alpha.13

* Apply formatting changes

* Apply formatting changes

* Fix import statement in media/index.ts

* Apply formatting changes

* chore: Update .gitignore to exclude build and dist directories

* Apply formatting changes

* Apply formatting changes

* Migrate setTimeout to vitest

* Apply formatting changes

* Apply formatting changes

* Fix isNativeShadowDom function signature in utils.ts

* try out jsr

* Apply formatting changes

* Update package versions to 2.0.0-alpha.14

* Apply formatting changes

* Fix name of rrwebSnapshot object

* Apply formatting changes

* Remove unused lock files

* Apply formatting changes

* Update rrweb bundle path to use umd.cjs format

* Apply formatting changes

* Trigger tests to run again

* Rename snapshots for vitest

* Apply formatting changes

* Ping CI

* Apply formatting changes

* Ping CI

* Apply formatting changes

* Ignore files generated by svelte-kit for prettier

* Correct Player object
This commit is contained in:
Justin Halsall
2024-06-07 11:07:36 +02:00
committed by GitHub
parent 609b7fac79
commit 7261c43f60
266 changed files with 11616 additions and 9614 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/rrdom/test/__snapshots__/virtual-dom.test.ts.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`RRDocument for browser environment create a RRDocument from a html document can build from a common html 1`] = `
exports[`RRDocument for browser environment > create a RRDocument from a html document > can build from a common html 1`] = `
"-2 RRDocument
-3 RRDocumentType
-4 HTML lang=\\"en\\"
@@ -54,7 +54,7 @@ exports[`RRDocument for browser environment create a RRDocument from a html docu
"
`;
exports[`RRDocument for browser environment create a RRDocument from a html document can build from a html containing nested shadow doms 1`] = `
exports[`RRDocument for browser environment > create a RRDocument from a html document > can build from a html containing nested shadow doms 1`] = `
"-2 RRDocument
-3 RRDocumentType
-4 HTML lang=\\"en\\"
@@ -89,14 +89,14 @@ exports[`RRDocument for browser environment create a RRDocument from a html docu
"
`;
exports[`RRDocument for browser environment create a RRDocument from a html document can build from a xml page 1`] = `
exports[`RRDocument for browser environment > create a RRDocument from a html document > can build from a xml page 1`] = `
"-2 RRDocument
-3 XML
-4 RRCDATASection data=\\"Some <CDATA> data & then some\\"
"
`;
exports[`RRDocument for browser environment create a RRDocument from a html document can build from an iframe html 1`] = `
exports[`RRDocument for browser environment > create a RRDocument from a html document > can build from an iframe html 1`] = `
"-2 RRDocument
-3 RRDocumentType
-4 HTML lang=\\"en\\"

216
packages/rrdom/test/diff.test.ts
View File

@@ -1,13 +1,15 @@
/**
* @jest-environment jsdom
*/
import * as fs from 'fs';
import * as path from 'path';
import * as puppeteer from 'puppeteer';
import { vi, MockInstance } from 'vitest';
import {
NodeType as RRNodeType,
serializedNodeWithId,
createMirror,
Mirror as NodeMirror,
serializedNodeWithId,
} from 'rrweb-snapshot';
import {
buildFromDom,
@@ -25,15 +27,8 @@ import {
sameNodeType,
} from '../src/diff';
import type { IRRElement, IRRNode } from '../src/document';
import { Replayer } from 'rrweb';
import type {
eventWithTime,
canvasMutationData,
styleDeclarationData,
styleSheetRuleData,
} from '@rrweb/types';
import type { canvasMutationData, styleSheetRuleData } from '@rrweb/types';
import { EventType, IncrementalSource } from '@rrweb/types';
import { compileTSCode } from './utils';
const elementSn = {
type: RRNodeType.Element,
@@ -107,7 +102,7 @@ function shuffle(list: number[]) {
describe('diff algorithm for rrdom', () => {
let mirror: NodeMirror;
let replayer: ReplayerHandler;
let warn: jest.SpyInstance;
let warn: MockInstance;
beforeEach(() => {
mirror = createMirror();
@@ -121,7 +116,7 @@ describe('diff algorithm for rrdom', () => {
};
document.write('<!DOCTYPE html><html><head></head><body></body></html>');
// Mock the original console.warn function to make the test fail once console.warn is called.
warn = jest.spyOn(console, 'warn');
warn = vi.spyOn(console, 'warn');
});
afterEach(() => {
@@ -146,7 +141,7 @@ describe('diff algorithm for rrdom', () => {
x: 0,
y: 0,
};
const applyScrollFn = jest.spyOn(replayer, 'applyScroll');
const applyScrollFn = vi.spyOn(replayer, 'applyScroll');
diff(document, rrNode, replayer);
expect(document.childNodes.length).toEqual(1);
expect(document.childNodes[0]).toBeInstanceOf(DocumentType);
@@ -169,7 +164,7 @@ describe('diff algorithm for rrdom', () => {
x: 0,
y: 0,
};
const applyScrollFn = jest.spyOn(replayer, 'applyScroll');
const applyScrollFn = vi.spyOn(replayer, 'applyScroll');
diff(element, rrNode, replayer);
expect(applyScrollFn).toHaveBeenCalledTimes(1);
applyScrollFn.mockRestore();
@@ -185,7 +180,7 @@ describe('diff algorithm for rrdom', () => {
id: 0,
isChecked: false,
};
replayer.applyInput = jest.fn();
replayer.applyInput = vi.fn();
diff(element, rrNode, replayer);
expect(replayer.applyInput).toHaveBeenCalledTimes(1);
});
@@ -215,7 +210,7 @@ describe('diff algorithm for rrdom', () => {
],
};
rrStyle.rules = [styleData];
replayer.applyStyleSheetMutation = jest.fn();
replayer.applyStyleSheetMutation = vi.fn();
diff(element, rrStyle, replayer);
expect(replayer.applyStyleSheetMutation).toHaveBeenCalledTimes(1);
expect(replayer.applyStyleSheetMutation).toHaveBeenCalledWith(
@@ -245,7 +240,7 @@ describe('diff algorithm for rrdom', () => {
mutation: canvasMutation,
}),
);
replayer.applyCanvas = jest.fn();
replayer.applyCanvas = vi.fn();
diff(element, rrCanvas, replayer);
expect(replayer.applyCanvas).toHaveBeenCalledTimes(MutationNumber);
});
@@ -274,7 +269,9 @@ describe('diff algorithm for rrdom', () => {
expect(element.playbackRate).toEqual(1);
const rrDocument = new RRDocument();
const rrMedia = rrDocument.createElement(tagName) as RRMediaElement;
const rrMedia = rrDocument.createElement(
tagName,
) as unknown as RRMediaElement;
rrMedia.volume = 0.5;
rrMedia.currentTime = 100;
rrMedia.muted = true;
@@ -424,7 +421,7 @@ describe('diff algorithm for rrdom', () => {
const value = 'http://www.w3.org/2000/svg';
node.attributes.xmlns = value;
jest.spyOn(Element.prototype, 'setAttributeNS');
vi.spyOn(Element.prototype, 'setAttributeNS');
diff(element, node, replayer);
expect((element as Node as SVGElement).getAttribute('xmlns')).toBe(value);
expect(SVGElement.prototype.setAttributeNS).toHaveBeenCalledWith(
@@ -432,7 +429,7 @@ describe('diff algorithm for rrdom', () => {
'xmlns',
value,
);
jest.restoreAllMocks();
vi.restoreAllMocks();
});
it('can diff properties for canvas', async () => {
@@ -443,11 +440,11 @@ describe('diff algorithm for rrdom', () => {
rrDocument.mirror.add(rrCanvas, sn);
rrCanvas.attributes['rr_dataURL'] = 'data:image/png;base64,';
jest.spyOn(document, 'createElement');
vi.spyOn(document, 'createElement');
diff(element, rrCanvas, replayer);
expect(document.createElement).toHaveBeenCalledWith('img');
jest.restoreAllMocks();
vi.restoreAllMocks();
});
it('can omit srcdoc attribute of iframe element', () => {
@@ -1169,7 +1166,7 @@ describe('diff algorithm for rrdom', () => {
});
describe('diff iframe elements', () => {
jest.setTimeout(60_000);
vi.setConfig({ testTimeout: 60_000 });
it('should add an element to the contentDocument of an iframe element', () => {
document.write('<html></html>');
@@ -1329,7 +1326,7 @@ describe('diff algorithm for rrdom', () => {
* If not, the diff function will throw errors or warnings.
*/
// Mock the original console.warn function to make the test fail once console.warn is called.
const warn = jest.spyOn(global.console, 'warn');
const warn = vi.spyOn(global.console, 'warn');
document.write('<!DOCTYPE html><html><body></body></html>');
const rrdom = new RRDocument();
@@ -1392,8 +1389,9 @@ describe('diff algorithm for rrdom', () => {
await page.goto('about:blank');
try {
const code = await compileTSCode(
path.resolve(__dirname, '../src/index.ts'),
const code = fs.readFileSync(
path.resolve(__dirname, '../dist/rrdom.umd.cjs'),
'utf8',
);
await page.evaluate(code);
@@ -1473,7 +1471,7 @@ describe('diff algorithm for rrdom', () => {
describe('afterAppend callback', () => {
it('should call afterAppend callback', () => {
const afterAppendFn = jest.spyOn(replayer, 'afterAppend');
const afterAppendFn = vi.spyOn(replayer, 'afterAppend');
const node = createTree(
{
tagName: 'div',
@@ -1512,7 +1510,7 @@ describe('diff algorithm for rrdom', () => {
});
it('should call afterAppend callback in the post traversal order', () => {
const afterAppendFn = jest.spyOn(replayer, 'afterAppend');
const afterAppendFn = vi.spyOn(replayer, 'afterAppend');
document.open();
const rrdom = new RRDocument();
@@ -1585,7 +1583,7 @@ describe('diff algorithm for rrdom', () => {
});
it('should only call afterAppend for newly created nodes', () => {
const afterAppendFn = jest.spyOn(replayer, 'afterAppend');
const afterAppendFn = vi.spyOn(replayer, 'afterAppend');
const rrdom = buildFromDom(document, replayer.mirror) as RRDocument;
// Append 3 nodes to rrdom.
@@ -1663,9 +1661,7 @@ describe('diff algorithm for rrdom', () => {
rrDocument.mirror.add(rrNode, getDefaultSN(rrNode, 3));
expect(() =>
createOrGetNode(rrNode, mirror, rrDocument.mirror),
).toThrowErrorMatchingInlineSnapshot(
`"Cannot create CDATA sections in HTML documents"`,
);
).toThrowErrorMatchingInlineSnapshot(`DOMException {}`);
});
it('create a DocumentType from RRDocumentType', () => {
@@ -1705,164 +1701,6 @@ describe('diff algorithm for rrdom', () => {
});
});
describe('apply virtual style rules to node', () => {
beforeEach(() => {
const dummyReplayer = new Replayer([
{
type: EventType.DomContentLoaded,
timestamp: 0,
},
{
type: EventType.Meta,
data: {
with: 1920,
height: 1080,
},
timestamp: 0,
},
] as unknown as eventWithTime[]);
replayer.applyStyleSheetMutation = (
data: styleDeclarationData | styleSheetRuleData,
styleSheet: CSSStyleSheet,
) => {
if (data.source === IncrementalSource.StyleSheetRule)
// Disable the ts check here because these two functions are private methods.
// @ts-ignore
dummyReplayer.applyStyleSheetRule(data, styleSheet);
else if (data.source === IncrementalSource.StyleDeclaration)
// @ts-ignore
dummyReplayer.applyStyleDeclaration(data, styleSheet);
};
});
it('should insert rule at index 0 in empty sheet', () => {
document.write('<style></style>');
const styleEl = document.getElementsByTagName('style')[0];
const cssText = '.added-rule {border: 1px solid yellow;}';
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
adds: [
{
rule: cssText,
index: 0,
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(styleEl.sheet?.cssRules?.length).toEqual(1);
expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
});
it('should insert rule at index 0 and keep exsisting rules', () => {
document.write(`
<style>
a {color: blue}
div {color: black}
</style>
`);
const styleEl = document.getElementsByTagName('style')[0];
const cssText = '.added-rule {border: 1px solid yellow;}';
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
adds: [
{
rule: cssText,
index: 0,
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(styleEl.sheet?.cssRules?.length).toEqual(3);
expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
});
it('should delete rule at index 0', () => {
document.write(`
<style>
a {color: blue;}
div {color: black;}
</style>
`);
const styleEl = document.getElementsByTagName('style')[0];
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
removes: [
{
index: 0,
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(styleEl.sheet?.cssRules?.length).toEqual(1);
expect(styleEl.sheet?.cssRules[0].cssText).toEqual('div {color: black;}');
});
it('should insert rule at index [0,0] and keep existing rules', () => {
document.write(`
<style>
@media {
a {color: blue}
div {color: black}
}
</style>
`);
const styleEl = document.getElementsByTagName('style')[0];
const cssText = '.added-rule {border: 1px solid yellow;}';
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
adds: [
{
rule: cssText,
index: [0, 0],
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
).toEqual(3);
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
).toEqual(cssText);
});
it('should delete rule at index [0,1]', () => {
document.write(`
<style>
@media {
a {color: blue;}
div {color: black;}
}
</style>
`);
const styleEl = document.getElementsByTagName('style')[0];
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
removes: [
{
index: [0, 1],
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
).toEqual(1);
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
).toEqual('a {color: blue;}');
});
});
describe('test sameNodeType function', () => {
const rrdom = new RRDocument();
it('should return true when two elements have same tagNames', () => {

82
packages/rrdom/test/document.test.ts
View File

@@ -3,21 +3,21 @@
*/
import { NodeType as RRNodeType } from 'rrweb-snapshot';
import {
BaseRRDocumentImpl,
BaseRRDocumentTypeImpl,
BaseRRElementImpl,
BaseRRMediaElementImpl,
BaseRRDocument,
BaseRRDocumentType,
BaseRRMediaElement,
BaseRRNode,
IRRDocumentType,
IRRNode,
} from '../src/document';
describe('Basic RRDocument implementation', () => {
const RRNode = BaseRRNode;
const RRDocument = BaseRRDocumentImpl(RRNode);
const RRDocumentType = BaseRRDocumentTypeImpl(RRNode);
const RRElement = BaseRRElementImpl(RRNode);
class RRMediaElement extends BaseRRMediaElementImpl(RRElement) {}
const RRNode = class extends BaseRRNode {
public textContent: string | null;
};
const RRDocument = BaseRRDocument;
const RRDocumentType = BaseRRDocumentType;
class RRMediaElement extends BaseRRMediaElement {}
describe('Basic RRNode implementation', () => {
it('should have basic properties', () => {
@@ -146,30 +146,24 @@ describe('Basic RRDocument implementation', () => {
it('should not implement appendChild', () => {
const parentNode = new RRNode();
const childNode = new RRNode();
expect(() =>
parentNode.appendChild(childNode),
).toThrowErrorMatchingInlineSnapshot(
`"RRDomException: Failed to execute 'appendChild' on 'RRNode': This RRNode type does not support this method."`,
expect(() => parentNode.appendChild(childNode)).toThrowError(
`RRDomException: Failed to execute 'appendChild' on 'RRNode': This RRNode type does not support this method.`,
);
});
it('should not implement insertBefore', () => {
const parentNode = new RRNode();
const childNode = new RRNode();
expect(() =>
parentNode.insertBefore(childNode, null),
).toThrowErrorMatchingInlineSnapshot(
`"RRDomException: Failed to execute 'insertBefore' on 'RRNode': This RRNode type does not support this method."`,
expect(() => parentNode.insertBefore(childNode, null)).toThrowError(
`RRDomException: Failed to execute 'insertBefore' on 'RRNode': This RRNode type does not support this method.`,
);
});
it('should not implement removeChild', () => {
const parentNode = new RRNode();
const childNode = new RRNode();
expect(() =>
parentNode.removeChild(childNode),
).toThrowErrorMatchingInlineSnapshot(
`"RRDomException: Failed to execute 'removeChild' on 'RRNode': This RRNode type does not support this method."`,
expect(() => parentNode.removeChild(childNode)).toThrowError(
`RRDomException: Failed to execute 'removeChild' on 'RRNode': This RRNode type does not support this method.`,
);
});
});
@@ -266,10 +260,8 @@ describe('Basic RRDocument implementation', () => {
expect(node.childNodes[0]).toEqual(documentType);
expect(documentType.parentElement).toBeNull();
expect(documentType.parentNode).toBe(node);
expect(() =>
node.appendChild(documentType),
).toThrowErrorMatchingInlineSnapshot(
`"RRDomException: Failed to execute 'appendChild' on 'RRNode': Only one RRDoctype on RRDocument allowed."`,
expect(() => node.appendChild(documentType)).toThrowError(
`RRDomException: Failed to execute 'appendChild' on 'RRNode': Only one RRDoctype on RRDocument allowed.`,
);
const element = node.createElement('html');
@@ -278,38 +270,30 @@ describe('Basic RRDocument implementation', () => {
expect(element.parentElement).toBeNull();
expect(element.parentNode).toBe(node);
const div = node.createElement('div');
expect(() => node.appendChild(div)).toThrowErrorMatchingInlineSnapshot(
`"RRDomException: Failed to execute 'appendChild' on 'RRNode': Only one RRElement on RRDocument allowed."`,
expect(() => node.appendChild(div)).toThrowError(
`RRDomException: Failed to execute 'appendChild' on 'RRNode': Only one RRElement on RRDocument allowed.`,
);
});
it('can insert new child before an existing child', () => {
const node = new RRDocument();
const docType = node.createDocumentType('', '', '');
expect(() =>
node.insertBefore(node, docType),
).toThrowErrorMatchingInlineSnapshot(
`"Failed to execute 'insertBefore' on 'RRNode': The RRNode before which the new node is to be inserted is not a child of this RRNode."`,
expect(() => node.insertBefore(node, docType)).toThrowError(
`Failed to execute 'insertBefore' on 'RRNode': The RRNode before which the new node is to be inserted is not a child of this RRNode.`,
);
expect(node.insertBefore(docType, null)).toBe(docType);
expect(() =>
node.insertBefore(docType, null),
).toThrowErrorMatchingInlineSnapshot(
`"RRDomException: Failed to execute 'insertBefore' on 'RRNode': Only one RRDoctype on RRDocument allowed."`,
expect(() => node.insertBefore(docType, null)).toThrowError(
`RRDomException: Failed to execute 'insertBefore' on 'RRNode': Only one RRDoctype on RRDocument allowed.`,
);
node.removeChild(docType);
const documentElement = node.createElement('html');
expect(() =>
node.insertBefore(documentElement, docType),
).toThrowErrorMatchingInlineSnapshot(
`"Failed to execute 'insertBefore' on 'RRNode': The RRNode before which the new node is to be inserted is not a child of this RRNode."`,
expect(() => node.insertBefore(documentElement, docType)).toThrowError(
`Failed to execute 'insertBefore' on 'RRNode': The RRNode before which the new node is to be inserted is not a child of this RRNode.`,
);
expect(node.insertBefore(documentElement, null)).toBe(documentElement);
expect(() =>
node.insertBefore(documentElement, null),
).toThrowErrorMatchingInlineSnapshot(
`"RRDomException: Failed to execute 'insertBefore' on 'RRNode': Only one RRElement on RRDocument allowed."`,
expect(() => node.insertBefore(documentElement, null)).toThrowError(
`RRDomException: Failed to execute 'insertBefore' on 'RRNode': Only one RRElement on RRDocument allowed.`,
);
expect(node.insertBefore(docType, documentElement)).toBe(docType);
expect(node.childNodes[0]).toBe(docType);
@@ -332,7 +316,7 @@ describe('Basic RRDocument implementation', () => {
expect(() =>
node.removeChild(node.createElement('div')),
).toThrowErrorMatchingInlineSnapshot(
`"Failed to execute 'removeChild' on 'RRNode': The RRNode to be removed is not a child of this RRNode."`,
`[Error: Failed to execute 'removeChild' on 'RRNode': The RRNode to be removed is not a child of this RRNode.]`,
);
expect(node.removeChild(documentType)).toBe(documentType);
expect(documentType.parentNode).toBeNull();
@@ -790,7 +774,7 @@ describe('Basic RRDocument implementation', () => {
expect(() =>
node.insertBefore(node, child1),
).toThrowErrorMatchingInlineSnapshot(
`"Failed to execute 'insertBefore' on 'RRNode': The RRNode before which the new node is to be inserted is not a child of this RRNode."`,
`[Error: Failed to execute 'insertBefore' on 'RRNode': The RRNode before which the new node is to be inserted is not a child of this RRNode.]`,
);
expect(node.insertBefore(child1, null)).toBe(child1);
expect(node.childNodes[0]).toBe(child1);
@@ -868,7 +852,7 @@ describe('Basic RRDocument implementation', () => {
expect(() =>
node.removeChild(document.createElement('div')),
).toThrowErrorMatchingInlineSnapshot(
`"Failed to execute 'removeChild' on 'RRNode': The RRNode to be removed is not a child of this RRNode."`,
`[Error: Failed to execute 'removeChild' on 'RRNode': The RRNode to be removed is not a child of this RRNode.]`,
);
// Remove the middle child.
expect(node.removeChild(child2)).toBe(child2);
@@ -1098,10 +1082,8 @@ describe('Basic RRDocument implementation', () => {
it('should not support attachShadow function', () => {
const node = new RRMediaElement('video');
expect(() =>
node.attachShadow({ mode: 'open' }),
).toThrowErrorMatchingInlineSnapshot(
`"RRDomException: Failed to execute 'attachShadow' on 'RRElement': This RRElement does not support attachShadow"`,
expect(() => node.attachShadow({ mode: 'open' })).toThrowError(
`RRDomException: Failed to execute 'attachShadow' on 'RRElement': This RRElement does not support attachShadow`,
);
});
});

27
packages/rrdom/test/utils.ts
View File

@@ -1,27 +0,0 @@
import * as rollup from 'rollup';
import * as typescript from 'rollup-plugin-typescript2';
import resolve from '@rollup/plugin-node-resolve';
const _typescript = typescript as unknown as typeof typescript.default;
/**
* Use rollup to compile an input TS script into JS code string.
*/
export async function compileTSCode(inputFilePath: string) {
const bundle = await rollup.rollup({
input: inputFilePath,
plugins: [
resolve() as unknown as rollup.Plugin,
_typescript({
tsconfigOverride: { compilerOptions: { module: 'ESNext' } },
clean: true,
}) as unknown as rollup.Plugin,
],
});
const {
output: [{ code: _code }],
} = await bundle.generate({
name: 'rrdom',
format: 'iife',
});
return _code;
}

9
packages/rrdom/test/virtual-dom.test.ts
View File

@@ -4,6 +4,7 @@
import * as fs from 'fs';
import * as path from 'path';
import * as puppeteer from 'puppeteer';
import { vi } from 'vitest';
import { JSDOM } from 'jsdom';
import {
cdataNode,
@@ -26,7 +27,6 @@ import {
RRElement,
BaseRRNode as RRNode,
} from '../src';
import { compileTSCode } from './utils';
const printRRDomCode = `
/**
@@ -50,7 +50,7 @@ function walk(node, mirror, blankSpace) {
`;
describe('RRDocument for browser environment', () => {
jest.setTimeout(60_000);
vi.setConfig({ testTimeout: 60_000 });
let mirror: Mirror;
beforeEach(() => {
mirror = new Mirror();
@@ -216,7 +216,10 @@ describe('RRDocument for browser environment', () => {
beforeAll(async () => {
browser = await puppeteer.launch();
code = await compileTSCode(path.resolve(__dirname, '../src/index.ts'));
code = fs.readFileSync(
path.resolve(__dirname, '../dist/rrdom.umd.cjs'),
'utf8',
);
});
afterAll(async () => {
await browser.close();