59b7a39ce1
* Fix sheet insertion Restore skip duration Use virtualStyleRulesMap to re-populate stylesheet on Flush event Clear virtualStyleRulesMap after flush applied * Support rule deletion in virtual processing * Simply restoreNodeSheet with early aborts * Encountered a bug where firstFullSnapshot was played twice because timer was immediately started and reached the snapshot before the setTimeout returned * Ignoring a FullSnapshot needs to be a one-time only thing, as otherwise we'll ignore it after scrubbing (restarting play head at a particular time). This is a problem if mutations have altered the player state, and we try to replay those mutations, so we e.g. try to remove an element that has already been removed because we haven't reset the FullSnapshot state * Some `npm run typings` related fixups * add basic html snapshot functionality * move restoreNodeSheet to it's own module * Refactor virtual style rules to buffer changes. Only applies changes on flush. `virtualStyleRulesMap` now works with strings instead of CSSRules. CSSRules can only be via made `.insertRule` on CSSStyleSheet in most browsers. And `new CSSStyleSheet()` only works in Chrome currently. * remove unused code * move VirtualStyleRules from CSSRule to string in tests * correct paths for tests * naming * create and restore style snapshots for virtual nodes * update replayer snapshot * move storeCSSRules to virtual-styles.ts * try/catch access to .sheet in case of access errors * clean up tests Co-authored-by: Vladimir Milenko <vladimir.milenko@uber.com> Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
114 lines
3.4 KiB
TypeScript
114 lines
3.4 KiB
TypeScript
import { expect } from 'chai';
|
|
import { JSDOM } from 'jsdom';
|
|
import {
|
|
applyVirtualStyleRulesToNode,
|
|
StyleRuleType,
|
|
VirtualStyleRules,
|
|
} from '../../src/replay/virtual-styles';
|
|
|
|
describe('virtual styles', () => {
|
|
describe('applyVirtualStyleRulesToNode', () => {
|
|
it('should insert rule at index 0 in empty sheet', () => {
|
|
const dom = new JSDOM(`
|
|
<style></style>
|
|
`);
|
|
const styleEl = dom.window.document.getElementsByTagName('style')[0];
|
|
|
|
const cssText = '.added-rule {border: 1px solid yellow;}';
|
|
|
|
const virtualStyleRules: VirtualStyleRules = [
|
|
{ cssText, index: 0, type: StyleRuleType.Insert },
|
|
];
|
|
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
|
|
|
|
expect(styleEl.sheet?.cssRules?.length).to.equal(1);
|
|
expect(styleEl.sheet?.cssRules[0].cssText).to.equal(cssText);
|
|
});
|
|
|
|
it('should insert rule at index 0 and keep exsisting rules', () => {
|
|
const dom = new JSDOM(`
|
|
<style>
|
|
a {color: blue}
|
|
div {color: black}
|
|
</style>
|
|
`);
|
|
const styleEl = dom.window.document.getElementsByTagName('style')[0];
|
|
|
|
const cssText = '.added-rule {border: 1px solid yellow;}';
|
|
const virtualStyleRules: VirtualStyleRules = [
|
|
{ cssText, index: 0, type: StyleRuleType.Insert },
|
|
];
|
|
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
|
|
|
|
expect(styleEl.sheet?.cssRules?.length).to.equal(3);
|
|
expect(styleEl.sheet?.cssRules[0].cssText).to.equal(cssText);
|
|
});
|
|
|
|
it('should delete rule at index 1', () => {
|
|
const dom = new JSDOM(`
|
|
<style>
|
|
a {color: blue;}
|
|
div {color: black;}
|
|
</style>
|
|
`);
|
|
const styleEl = dom.window.document.getElementsByTagName('style')[0];
|
|
|
|
const virtualStyleRules: VirtualStyleRules = [
|
|
{ index: 0, type: StyleRuleType.Remove },
|
|
];
|
|
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
|
|
|
|
expect(styleEl.sheet?.cssRules?.length).to.equal(1);
|
|
expect(styleEl.sheet?.cssRules[0].cssText).to.equal(
|
|
'div {color: black;}',
|
|
);
|
|
});
|
|
|
|
it('should restore a snapshot by inserting missing rules', () => {
|
|
const dom = new JSDOM(`
|
|
<style>
|
|
a {color: blue;}
|
|
.deleted-rule {color: pink;}
|
|
div {color: black;}
|
|
</style>
|
|
`);
|
|
const styleEl = dom.window.document.getElementsByTagName('style')[0];
|
|
|
|
const virtualStyleRules: VirtualStyleRules = [
|
|
{
|
|
cssTexts: ['a {color: blue;}', 'div {color: black;}'],
|
|
type: StyleRuleType.Snapshot,
|
|
},
|
|
];
|
|
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
|
|
|
|
expect(styleEl.sheet?.cssRules?.length).to.equal(2);
|
|
});
|
|
|
|
it('should restore a snapshot by fixing order of rules', () => {
|
|
const dom = new JSDOM(`
|
|
<style>
|
|
div {color: black;}
|
|
a {color: blue;}
|
|
</style>
|
|
`);
|
|
const styleEl = dom.window.document.getElementsByTagName('style')[0];
|
|
|
|
const cssTexts = ['a {color: blue;}', 'div {color: black;}'];
|
|
|
|
const virtualStyleRules: VirtualStyleRules = [
|
|
{
|
|
cssTexts,
|
|
type: StyleRuleType.Snapshot,
|
|
},
|
|
];
|
|
applyVirtualStyleRulesToNode(virtualStyleRules, styleEl);
|
|
|
|
expect(styleEl.sheet?.cssRules?.length).to.equal(2);
|
|
expect(
|
|
Array.from(styleEl.sheet?.cssRules || []).map((rule) => rule.cssText),
|
|
).to.have.ordered.members(cssTexts);
|
|
});
|
|
});
|
|
});
|