Allow blocking elements by selector (#50)

* Extract method (isElementBlocked) and add tests

* Add blockSelector argument to snapshot

If blockSelector is passed, it will be matched against the element.

Reasoning: Mutating class names can get messy, so providing another hook
helps keep code clean by using data-attributes instead.
This commit is contained in:
Karl-Aksel Puulmann
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 65671be739
commit 0c62d31002
4 changed files with 61 additions and 13 deletions

View File

@@ -1,6 +1,7 @@
import 'mocha';
import { JSDOM } from 'jsdom';
import { expect } from 'chai';
import { absoluteToStylesheet } from '../src/snapshot';
import { absoluteToStylesheet, _isBlockedElement } from '../src/snapshot';
describe('absolute url to stylesheet', () => {
const href = 'http://localhost/css/style.css';
@@ -83,3 +84,27 @@ describe('absolute url to stylesheet', () => {
expect(absoluteToStylesheet(`url('')`, href)).to.equal(`url('')`);
});
});
describe('isBlockedElement()', () => {
const subject = (html: string, opt: any = {}) =>
_isBlockedElement(render(html), 'rr-block', opt.blockSelector)
const render = (html: string): HTMLElement =>
JSDOM.fragment(html).querySelector('div')!
it('can handle empty elements', () => {
expect(subject('<div />')).to.equal(false)
})
it('blocks prohibited className', () => {
expect(subject('<div class="foo rr-block bar" />')).to.equal(true)
})
it('does not block random data selector', () => {
expect(subject('<div data-rr-block />')).to.equal(false)
})
it('blocks blocked selector', () => {
expect(subject('<div data-rr-block />', { blockSelector: '[data-rr-block]' })).to.equal(true)
})
})