// Fetch all of the link's urls
let links = dom.a.href;
// Set the targets to a new page
dom.a.target = '_blank';
// Manipulate the buttons without loops
dom.class.cta.html = 'Click me!';// Fetch all of the link's urls
let links = dom.a.href;
// Set the targets to a new page
dom.a.target = '_blank';
// Manipulate the buttons without loops
dom.class.cta.html = 'Click me!';Lorem ipsum
'; }); afterEach(() => { document.body.innerHTML = ''; }); it('Can set an attribute of one element', () => { dom.a.href = link; expect(dom.a[0].getAttribute('href')).toBe(link); }); it('handles non-existing elements just fine', () => { expect(dom.a.bla[0]).toBe(''); }); it('Can set an attribute of all matched', () => { document.body.innerHTML = 'Link1Link2'; dom.a.href = link; expect(dom.a[0].getAttribute('href')).toBe(link); expect(dom.a[1].getAttribute('href')).toBe(link); }); it('Can set the attribute dynamically', () => { document.body.innerHTML = 'Link1Link2'; dom.a.href = link; dom.a.href = (prev, i) => prev + i; expect(dom.a[0].getAttribute('href')).toBe(link + '0'); expect(dom.a[1].getAttribute('href')).toBe(link + '1'); }); it('receives the correct parameters', () => { dom.a.target = (prev, i, all) => { expect(prev).toBe('_blank'); expect(i).toBe(0); expect(all).toHaveLength(1); return 'invalid'; } dom.a.target = prev => expect(prev).toBe('invalid'); }); it('Only sets the attribute where it should', () => { document.body.innerHTML = 'Link1Link2'; dom.class.cta.target = '_blank'; expect(dom.class.cta[0].getAttribute('target')).toBe('_blank'); expect(dom['a:not(.cta)'][0].getAttribute('target')).not.toBe('_blank'); }); // Delete it('Does not actually remove the attribute, just make it empty', () => { dom.a.target = ''; expect(dom.a[0].getAttribute('target')).toBe(''); }); it('Delete an attribute', () => { delete dom.a.target; expect(dom.a.target[0]).toBe(''); expect(dom.a[0].getAttribute('target')).toBe(null); }); // EVENTS it('can handle events', done => { dom.a.on.click = e => { expect(e.target.nodeName).toBe('A'); done(); } dom.a.trigger.click; }); it('can handle multiple events', done => { document.body.innerHTML = 'Hello'; let counter = 0; dom.a.on['click, hover'] = e => { counter++; expect(e.target.nodeName).toBe('A'); if (counter === 2) { done(); } else { dom.a.trigger.hover; } } dom.a.trigger.click; }); ================================================ FILE: src/plugins/helpers.js ================================================ dom.api.helpers = {}; dom.api.helpers.args = val => val.split(/[\s,]+/); ================================================ FILE: src/plugins/navigate.js ================================================ // Change the current node selection dom.api.navigate = {}; dom.api.navigate.parent = node => node.parentNode || false; dom.api.navigate.children = node => node.children; ================================================ FILE: src/plugins/navigate.test.js ================================================ // DOM navigation. Parents, children, etc const dom = require('../../superdom'); beforeEach(() => { document.body.innerHTML = ''; }); afterEach(() => { document.body.innerHTML = ''; }); describe('DOM navigation', () => { it('can retrieve the parent', () => { expect(dom.li.parent[0].nodeName).toBe('UL'); }); it('can retrieve the parent parent', () => { expect(dom.a.parent.parent[0].nodeName).toBe('UL'); }); it('keeps the special attrs with get', () => { expect(dom.a.parent.parent.class._text).toBe('list'); }); it('keeps the special attrs with set', () => { dom.a.parent.parent.class = 'good'; expect(dom.ul.class._text).toBe('list good'); }); it('keeps the special attrs with delete', () => { dom.a.parent.parent.class = 'good'; delete dom.a.parent.parent.class.list; expect(dom.ul.class._text).toBe('good'); }); }); ================================================ FILE: src/plugins/nodes.js ================================================ // dom.a.each = a => {} dom.api.nodes = {}; dom.api.nodes.each = (cb, node, i, all) => cb(node, i, all); dom.api.nodes.html = { get: node => node.innerHTML, set: (cb, node, i, all) => node.innerHTML = cb(node.innerHTML, i, all) || '', del: node => node.innerHTML = '' }; dom.api.nodes.text = { get: node => node.textContent, set: (cb, node, i, all) => node.textContent = cb(node.textContent, i, all) || '', del: node => node.textContent = '' }; // dom.a.class; dom.a.class = classes => newClasses; delete dom.a.class dom.api.nodes.class = { get: node => Array.from(node.classList), set: (cb, node, i, all) => { let val = cb(Array.from(node.classList), i, all); val = typeof val === 'string' ? dom.api.helpers.args(val) : val; val.forEach(one => node.classList.add(one)); } }; ================================================ FILE: src/plugins/nodes.test.js ================================================ const dom = require('../../superdom'); const initial = 'Hello world
'; beforeEach(() => { document.body.innerHTML = initial; }); afterEach(() => { document.body.innerHTML = ''; }); it('can read html', () => { expect(dom.body.html[0]).toBe(initial); }); it('can write html', () => { dom.body.html = 'Hello world'; expect(document.body.innerHTML).toBe('Hello world'); }); it('can append to html by setting a cb', () => { dom.body.html = html => html + 'abc'; expect(document.body.innerHTML).toBe(initial + 'abc'); }); it('passes correct arguments to the setter', () => { dom.body.html = (html, i, all) => { expect(html).toBe(initial); expect(i).toBe(0); expect(all).toHaveLength(1); expect(all[0]).toBe(document.body); } }); it('can delete it', () => { delete dom.body.html; expect(document.body.innerHTML).toBe(''); }); ================================================ FILE: src/plugins/selectors.js ================================================ // Selector-level extensible // Choose which method to use dom.api.selectors = (sel = []) => typeof sel === 'string' ? /^\s* dom(el)).reduce((all, one) => all.concat(one), []); // The one to generate a chunk of html dom.api.selectors.generate = html => { let type = /^\s*