You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
2.3 KiB
76 lines
2.3 KiB
// @vitest-environment jsdom
|
|
|
|
import { beforeEach, describe, expect, it } from 'vitest';
|
|
|
|
import { applyChange, removeAttrs } from '$libs/dom';
|
|
|
|
describe('apply', () => {
|
|
let target: HTMLElement;
|
|
|
|
beforeEach(() => {
|
|
document.body.innerHTML = '';
|
|
target = document.createElement('div');
|
|
document.body.appendChild(target);
|
|
});
|
|
|
|
it('writes string values via setAttribute', () => {
|
|
applyChange({ target, attrs: { 'data-state': 'open', role: 'dialog' } });
|
|
expect(target.getAttribute('data-state')).toBe('open');
|
|
expect(target.getAttribute('role')).toBe('dialog');
|
|
});
|
|
|
|
it('writes number values stringified', () => {
|
|
applyChange({ target, attrs: { 'aria-level': 2, tabindex: -1 } });
|
|
expect(target.getAttribute('aria-level')).toBe('2');
|
|
expect(target.getAttribute('tabindex')).toBe('-1');
|
|
});
|
|
|
|
it('writes true as empty string (presence flag)', () => {
|
|
applyChange({ target, attrs: { 'data-disabled': true } });
|
|
expect(target.hasAttribute('data-disabled')).toBe(true);
|
|
expect(target.getAttribute('data-disabled')).toBe('');
|
|
});
|
|
|
|
it('removes attribute on false / null / undefined', () => {
|
|
target.setAttribute('data-disabled', '');
|
|
target.setAttribute('aria-hidden', 'true');
|
|
target.setAttribute('data-loading', 'true');
|
|
|
|
applyChange({
|
|
target,
|
|
attrs: { 'data-disabled': false, 'aria-hidden': null, 'data-loading': undefined }
|
|
});
|
|
|
|
expect(target.hasAttribute('data-disabled')).toBe(false);
|
|
expect(target.hasAttribute('aria-hidden')).toBe(false);
|
|
expect(target.hasAttribute('data-loading')).toBe(false);
|
|
});
|
|
|
|
it('removes attrs by name', () => {
|
|
target.setAttribute('data-event', 'announce');
|
|
target.setAttribute('data-event-phase', 'active');
|
|
target.setAttribute('data-state', 'open');
|
|
|
|
removeAttrs(target, ['data-event', 'data-event-phase']);
|
|
|
|
expect(target.hasAttribute('data-event')).toBe(false);
|
|
expect(target.hasAttribute('data-event-phase')).toBe(false);
|
|
expect(target.getAttribute('data-state')).toBe('open');
|
|
});
|
|
|
|
it('mixes write and remove in a single change', () => {
|
|
target.setAttribute('data-loading', '');
|
|
|
|
applyChange({
|
|
target,
|
|
attrs: {
|
|
'data-state': 'open',
|
|
'data-loading': false
|
|
}
|
|
});
|
|
|
|
expect(target.getAttribute('data-state')).toBe('open');
|
|
expect(target.hasAttribute('data-loading')).toBe(false);
|
|
});
|
|
});
|