Launch Week Day 5: Introducing Reachability for PHP.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

css-chain-test

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

css-chain-test - npm Package Compare versions

Comparing version
1.0.8
 to
1.0.9
+1
-1
coverage/lcov-report/ApiChain.js.html

@@ -277,3 +277,3 @@

<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
at Sat Dec 18 2021 23:09:34 GMT-0800 (Pacific Standard Time)
at Mon Dec 20 2021 23:21:32 GMT-0800 (Pacific Standard Time)
</div>

@@ -280,0 +280,0 @@ </div>

+1
-1
coverage/lcov-report/css-chain-element.js.html

@@ -82,3 +82,3 @@

<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
at Sat Dec 18 2021 23:09:34 GMT-0800 (Pacific Standard Time)
at Mon Dec 20 2021 23:21:32 GMT-0800 (Pacific Standard Time)
</div>

@@ -85,0 +85,0 @@ </div>

+105
-30
coverage/lcov-report/CssChain.js.html

@@ -28,3 +28,3 @@

<span class="quiet">Statements</span>
<span class='fraction'>169/169</span>
<span class='fraction'>194/194</span>
</div>

@@ -36,3 +36,3 @@

<span class="quiet">Branches</span>
<span class='fraction'>104/104</span>
<span class='fraction'>131/131</span>
</div>

@@ -44,3 +44,3 @@

<span class="quiet">Functions</span>
<span class='fraction'>49/49</span>
<span class='fraction'>58/58</span>
</div>

@@ -52,3 +52,3 @@

<span class="quiet">Lines</span>
<span class='fraction'>169/169</span>
<span class='fraction'>194/194</span>
</div>

@@ -233,3 +233,28 @@

<a name='L169'></a><a href='#L169'>169</a>
<a name='L170'></a><a href='#L170'>170</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">5x</span>
<a name='L170'></a><a href='#L170'>170</a>
<a name='L171'></a><a href='#L171'>171</a>
<a name='L172'></a><a href='#L172'>172</a>
<a name='L173'></a><a href='#L173'>173</a>
<a name='L174'></a><a href='#L174'>174</a>
<a name='L175'></a><a href='#L175'>175</a>
<a name='L176'></a><a href='#L176'>176</a>
<a name='L177'></a><a href='#L177'>177</a>
<a name='L178'></a><a href='#L178'>178</a>
<a name='L179'></a><a href='#L179'>179</a>
<a name='L180'></a><a href='#L180'>180</a>
<a name='L181'></a><a href='#L181'>181</a>
<a name='L182'></a><a href='#L182'>182</a>
<a name='L183'></a><a href='#L183'>183</a>
<a name='L184'></a><a href='#L184'>184</a>
<a name='L185'></a><a href='#L185'>185</a>
<a name='L186'></a><a href='#L186'>186</a>
<a name='L187'></a><a href='#L187'>187</a>
<a name='L188'></a><a href='#L188'>188</a>
<a name='L189'></a><a href='#L189'>189</a>
<a name='L190'></a><a href='#L190'>190</a>
<a name='L191'></a><a href='#L191'>191</a>
<a name='L192'></a><a href='#L192'>192</a>
<a name='L193'></a><a href='#L193'>193</a>
<a name='L194'></a><a href='#L194'>194</a>
<a name='L195'></a><a href='#L195'>195</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>

@@ -247,2 +272,3 @@ <span class="cline-any cline-yes">5x</span>

<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">4x</span>

@@ -275,2 +301,9 @@ <span class="cline-any cline-yes">5x</span>

<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-yes">5x</span>

@@ -323,3 +356,2 @@ <span class="cline-any cline-yes">5x</span>

<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">5x</span>

@@ -347,4 +379,13 @@ <span class="cline-any cline-yes">5x</span>

<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">1x</span>
<span class="cline-any cline-yes">5x</span>

@@ -354,3 +395,6 @@ <span class="cline-any cline-yes">5x</span>

<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">3x</span>
<span class="cline-any cline-yes">5x</span>

@@ -400,2 +444,8 @@ <span class="cline-any cline-yes">5x</span>

<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">5x</span>
<span class="cline-any cline-yes">1x</span>

@@ -418,2 +468,3 @@ <span class="cline-any cline-yes">5x</span>

, isStr = a =&gt; typeof a === 'string'
, isFn = a =&gt; typeof a === 'function'
, inWC = n =&gt; n.getRootNode().host

@@ -427,3 +478,3 @@ , hasAssigned = n=&gt; inWC(n) &amp;&amp; n.assignedElements

const node2text = { 1: n=&gt;n.assignedElements
? collectionText(n.assignedElements()) || n.innerText
? collectionText(n.assignedElements()) || collectionText(n.childNodes)
: ['SCRIPT','AUDIO','STYLE','CANVAS','DATALIST','EMBED','OBJECT','PICTURE','IFRAME','METER','NOSCRIPT'

@@ -450,3 +501,10 @@ ,'SELECT','OPTGROUP','PROGRESS','TEMPLATE','VIDEO']

n.innerHTML = html;
return [...n.childNodes].map(e=&gt;(e.remove(),e));
const wrapIfText = e=&gt;{
if( e.nodeType !== 3 )
return e;
const n = document.createElement('span');
n.append(e);
return n;
};
return [...n.childNodes].map(e=&gt;(e.remove(),e)).map(wrapIfText);
};

@@ -497,39 +555,56 @@ &nbsp;

{ this.forEach(el=&gt;el.remove()); return new CssChainLocal() }
const p = args[0], t = typeof args[1];
return 'function' === t ? this.removeEventListener(...args) : this.map(el=&gt;el.matches(p)).filter(el=&gt;el) ;
return isFn(args[1]) ? this.removeEventListener(...args) : this.map(el=&gt;el.matches(args[0])).filter(el=&gt;el) ;
}
clear(){ this.innerHTML=''; return this }
slot(...arr)
{ return this.$( arr.length
? csv( arr
, name=&gt;
csv( name.split(',')
, n=&gt; ['""',"''"].includes(n) || !n
? `slot:not([name])`
: `slot[name="${n}"]`
)
{ const ret = this.$( arr.length
? csv( arr[0].split(',')
, n=&gt; ['""',"''"].includes(n) || !n
? `slot:not([name])`
: `slot[name="${n}"]`
)
: 'slot');
if( arr.length === 2 )
ret.html(arr[1])
return ret;
}
get innerText(){ return this.text() }
set innerText( val ){ return this.text( val ) }
text( val )
{ return val === undefined
? collectionText( this )
: this.forEach( typeof val === 'function'
? (n,i)=&gt;setNodeText(n,val(n,i,this))
: n=&gt;setNodeText(n,val) );
text( val, css=undefined )
{ const arr = css? this.$(css): this;
if( val === undefined )
return collectionText( arr );
arr.forEach( isFn(val)
? (n,i)=&gt;setNodeText(n,val(n,i,arr))
: n=&gt;setNodeText(n,val) );
return this
}
get outerHTML(){ return this.map( e=&gt;e.outerHTML ).join('') }
set outerHTML( val )
{ return this.forEach( (n,i,arr)=&gt;
{ const p = n.parentNode;
html2NodeArr(isFn(val) ? val(n,i,arr): val )
.forEach( e=&gt; p.insertBefore( (arr[i]=e), n));
n.remove();
})
}
get innerHTML(){ return this.html() }
set innerHTML( val ){ return this.html(val) }
html( val )
{ return val === undefined
? collectionHtml( this )
: this.forEach( typeof val === 'function'
? (n,i)=&gt;setNodeHtml(n,val(n,i,this))
html( val, css=undefined )
{ const arr = css? this.$(css): this;
if( val === undefined )
return collectionHtml( arr );
arr.forEach( isFn(val)
? (n,i)=&gt;setNodeHtml(n,val(n,i,arr))
: n=&gt;setNodeHtml(n,val) );
return this
}
assignedElements(){ return CssChain([].concat( ...this.map( el=&gt;el.assignedElements ? el.assignedElements():[] ) ) ) }
assignedNodes(){ return CssChain([].concat( ...this.map( el=&gt;el.assignedNodes ? el.assignedNodes():[] ) ) ) }
cloneNode(...args){ return this.map( el=&gt;el.cloneNode &amp;&amp; el.cloneNode(...args) ) }
clone(doc){ return this.map( el=&gt; doc? doc.importNode( el,true ): el.cloneNode ? el.cloneNode(true):Object.assign({},el) ) }
get firstElementChild(){ return CssChain(this.map( n=&gt;n.firstElementChild).filter(n=&gt;n)) }
get firstChild(){ return CssChain(this.map( n=&gt;n.firstChild).filter(n=&gt;n)) }
get childNodes(){ return CssChain([].concat( ...map( this, el=&gt;[...(el.childNodes || [] )] ) ) ) }
get children(){ return CssChain([].concat( ...map( this, el=&gt;[...(el.children || [] )] ) ) ) }
}

@@ -589,3 +664,3 @@ &nbsp;

<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
at Sat Dec 18 2021 23:09:34 GMT-0800 (Pacific Standard Time)
at Mon Dec 20 2021 23:21:32 GMT-0800 (Pacific Standard Time)
</div>

@@ -592,0 +667,0 @@ </div>

+1
-1
coverage/lcov-report/CssChainElement.js.html

@@ -172,3 +172,3 @@

<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
at Sat Dec 18 2021 23:09:34 GMT-0800 (Pacific Standard Time)
at Mon Dec 20 2021 23:21:32 GMT-0800 (Pacific Standard Time)
</div>

@@ -175,0 +175,0 @@ </div>

+9
-9
coverage/lcov-report/index.html

@@ -28,3 +28,3 @@

<span class="quiet">Statements</span>
<span class='fraction'>320/320</span>
<span class='fraction'>345/345</span>
</div>

@@ -36,3 +36,3 @@

<span class="quiet">Branches</span>
<span class='fraction'>125/125</span>
<span class='fraction'>152/152</span>
</div>

@@ -44,3 +44,3 @@

<span class="quiet">Functions</span>
<span class='fraction'>61/61</span>
<span class='fraction'>70/70</span>
</div>

@@ -52,3 +52,3 @@

<span class="quiet">Lines</span>
<span class='fraction'>320/320</span>
<span class='fraction'>345/345</span>
</div>

@@ -100,9 +100,9 @@

<td data-value="100" class="pct high">100%</td>
<td data-value="169" class="abs high">169/169</td>
<td data-value="194" class="abs high">194/194</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="104" class="abs high">104/104</td>
<td data-value="131" class="abs high">131/131</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="49" class="abs high">49/49</td>
<td data-value="58" class="abs high">58/58</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="169" class="abs high">169/169</td>
<td data-value="194" class="abs high">194/194</td>
</tr>

@@ -163,3 +163,3 @@

<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
at Sat Dec 18 2021 23:09:34 GMT-0800 (Pacific Standard Time)
at Mon Dec 20 2021 23:21:32 GMT-0800 (Pacific Standard Time)
</div>

@@ -166,0 +166,0 @@ </div>

+1
-1
coverage/lcov-report/slots-in-shadow.js.html

@@ -190,3 +190,3 @@

<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
at Sat Dec 18 2021 23:09:34 GMT-0800 (Pacific Standard Time)
at Mon Dec 20 2021 23:21:32 GMT-0800 (Pacific Standard Time)
</div>

@@ -193,0 +193,0 @@ </div>

+2
-2
package.json

@@ -10,3 +10,3 @@ {

},
"version": "1.0.8",
"version": "1.0.9",
"main": "index.js",

@@ -22,3 +22,3 @@ "module": "index.js",

"dependencies": {
"css-chain": "^1.0.8",
"css-chain": "^1.0.9",
"lit": "^2.0.0"

@@ -25,0 +25,0 @@ },

+5
-5
README.md

@@ -9,3 +9,3 @@ # CssChain & ApiChain test and \<css-chain> demo

## Live demo
https://unpkg.com/css-chain-test@1.0.8/dist/demo.html
https://unpkg.com/css-chain-test@1.0.9/dist/demo.html

@@ -158,5 +158,5 @@ # [CssChain](https://github.com/sashafirsov/css-chain/blob/main/CssChain.js)

[npm-url]: https://npmjs.org/package/css-chain-test
[coverage-image]: https://unpkg.com/css-chain-test@1.0.8/coverage/coverage.svg
[coverage-url]: https://unpkg.com/css-chain-test@1.0.8/coverage/lcov-report/index.html
[PokeApi-explorer-image]: https://unpkg.com/css-chain-test@1.0.8/src/PokeApi-Explorer.png
[PokeApi-explorer-url]: https://unpkg.com/css-chain-test@1.0.8/src/PokeApi-Explorer.html
[coverage-image]: https://unpkg.com/css-chain-test@1.0.9/coverage/coverage.svg
[coverage-url]: https://unpkg.com/css-chain-test@1.0.9/coverage/lcov-report/index.html
[PokeApi-explorer-image]: https://unpkg.com/css-chain-test@1.0.9/src/PokeApi-Explorer.png
[PokeApi-explorer-url]: https://unpkg.com/css-chain-test@1.0.9/src/PokeApi-Explorer.html
+2
-1
src/PokeApi-Explorer.html

@@ -13,2 +13,3 @@ <!doctype html>

body>h1,header{ width: 100%; display: flex; flex-wrap: wrap; gap: 1rem; }
pokemon-info-element { display: flex; flex-wrap: wrap; gap: 1rem; }
fieldset>slot{ display: flex; }

@@ -24,3 +25,3 @@ fieldset img{ height: 3rem; }

.vflex{ display: flex; flex-direction: column; flex: 1; align-items: stretch; }
.hiflex{ display: inline-flex; gap: 1rem; flex-wrap: wrap;}
.hiflex{ display: inline-flex; gap: 1rem; flex-wrap: wrap; align-content: flex-start; }

@@ -27,0 +28,0 @@ fieldset

+14
-7
src/PokeApi-Explorer.js
import FetchElement from 'https://unpkg.com/slotted-element@1.0.3/fetch-element.js';
import { CssChain as $$ } from "https://unpkg.com/css-chain@1.0.8/CssChain.js";
const $ = $$()
, arr2str = (arr,cb, separator='') => arr.map(cb).join(separator)
import { CssChain as $$ } from "https://unpkg.com/css-chain@1.0.9/CssChain.js";
// import { CssChain as $$ } from "./CssChain.js";
const arr2str = (arr,cb, separator='') => arr.map(cb).join(separator)
, isImg = url => url && url.endsWith && ['png','gif','svg'].find( x=>url.endsWith(x) );

@@ -11,10 +12,14 @@

connectedCallback()
{ const $this = $$(this)
{
const $this = $$(this)
, $ = x => $this.$(x)
, name = $this.attr('name')
, url = $this.attr('url');
if( isImg(url) )
return $.html(`<img title="${name}" src="${url}">`);
{
debugger;
return $this.html( `<img title="${ name }" src="${ url }">` );
}
$this.html(`<a href="${url}">${name}</a><dl></dl>`);

@@ -75,2 +80,4 @@

});
window.customElements.define('pokemon-info-element',

@@ -121,2 +128,3 @@ class PokemonInfoElement extends FetchElement

).json()
, $ = $$()
, $t = $.slot('slot-select')

@@ -140,3 +148,2 @@ , $listContainer = $t.parent().$('dl')

$c.on('click', ()=>onSelected(p) )
$c.$('input').checked = !i;
i || onSelected(p);

@@ -143,0 +150,0 @@ $c.$('img').src=`https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/${id}.svg`;

+15
-5
test/CssChain-helpers.test.js

@@ -5,3 +5,4 @@ import { fixture, expect } from '@open-wc/testing';

import { CssChain as $$, map, csv, collectionText, getNodeText, setNodeText, setNodeHtml } from '../src/CssChain.js';
import { CssChain as $$, map, csv, collectionText, getNodeText, setNodeText, setNodeHtml, html2NodeArr }
from '../src/CssChain.js';

@@ -64,3 +65,3 @@ describe( 'CssChain internal helpers', () =>

el.$().slot('').innerText = 'B';
expect( collectionText(el.$().slot('','outer')) ).to.eq('BA');
expect( collectionText(el.$().slot(',outer')) ).to.eq('BA');
});

@@ -80,5 +81,5 @@ it( 'getNodeText(node) with slots', async ()=>

expect( el.$('style').textContent).to.include('padding');
expect( getNodeText( el.$('style'))).to.eq('');
expect( getNodeText( el.$('style')[0])).to.eq('');
expect( el.$('script').textContent).to.include('ignore it');
expect( getNodeText( el.$('script'))).to.eq('');
expect( getNodeText( el.$('script')[0])).to.eq('');
});

@@ -158,3 +159,4 @@ it( 'getNodeText(node) with text + CDATA', async ()=>

setNodeHtml( $$('s', el )[0], 7 );// number
expect($$('s',el)[0].innerHTML).to.eq('7');
expect($$('s',el)[0].innerText).to.eq('7');
expect($$('s',el)[0].innerHTML).to.eq('<span>7</span>');
});

@@ -171,3 +173,11 @@ it( 'setNodeHtml(node, text) slot', async ()=>

});
it( 'html2NodeArr(html) ', async ()=>
{
const arr = html2NodeArr(`Hello <i>World</i><b>!</b>`)
expect( arr.length).to.eq(3);
expect( arr[0].textContent).to.eq('Hello ');
expect( arr[1].outerHTML).to.eq('<i>World</i>');
expect( arr[2].outerHTML).to.eq('<b>!</b>');
});
} );
+132
-4
test/CssChain-methods.test.js

@@ -255,3 +255,2 @@ import { fixture, expect } from '@open-wc/testing';

const el = await fixture(html`<div>d<a>a1<hr/></a><a>a2<br/></a>D</div>`);
const doc = new Document();
const $X = $$('a',el );

@@ -265,3 +264,2 @@ const $Y = $X.append( '<b>B1</b>' );

const el = await fixture(html`<div>d<a>a1<hr/></a><a>a2<br/></a>D</div>`);
const doc = new Document();
const $X = $$('a',el );

@@ -275,3 +273,2 @@ const $Y = $X.append( ['<b>B1</b>','<i>I1</i>'] );

const el = await fixture(html`<div>d<a>a1</a><a>a2</a>D</div>`);
const doc = new Document();
const $X = $$('a',el );

@@ -285,3 +282,2 @@ const $Y = $X.append( [document.createElement('hr'),document.createElement('br')] );

const el = await fixture(html`<div>d<a>a1</a><a>a2</a>D</div>`);
const doc = new Document();
const $X = $$('a',el );

@@ -298,2 +294,134 @@ const $Y = $X.clear();

it( 'text( val )', async ()=>
{
const el = await fixture(html`<div>d <a>a1</a> - <a>a2</a> D</div>`);
const $X = $$('a',el ).text('Z');
expect( $X.length ).to.eq(2);
expect( $X.innerText ).to.eq("ZZ");
} );
it( 'text( cb(el,i,arr) )', async ()=>
{
const el = await fixture(html`<div>d <a title="A1">one</a> - <a title="A2">two</a> D</div>`);
const $X = $$('a',el ).text( (el,i,arr)=>`${el.title}:${el.innerText}:${i}:${arr.length}`);
expect( $X.length ).to.eq(2);
expect( $X.innerText ).to.eq("A1:one:0:2A2:two:1:2");
} );
it( 'text( val,css )', async ()=>
{
const el = await fixture(html`<div>d <a>a1</a> - <a>a2</a> D</div>`);
const $X = $$(el).text('Z','a');
expect( $X.length ).to.eq(1);
expect( $X[0].tagName ).to.eq('DIV');
expect( $X.$('a').innerText ).to.eq("ZZ");
} );
it( 'text( undefined,css )', async ()=>
{
const el = await fixture(html`<div>d <a>a1</a> - <a>a2</a> D</div>`);
const $X = $$(el).text(undefined,'a');
expect( $X ).to.eq('a1a2');
expect( $$(el).text(undefined) ).to.eq('d a1 - a2 D');
expect( $$(el).text() ).to.eq('d a1 - a2 D');
} );
it( 'text( cb(el,i,arr), css )', async ()=>
{
const el = await fixture(html`<div>d <a title="A1">one</a> - <a title="A2">two</a> D</div>`);
const $X = $$( el ).text( (el,i,arr)=>`${el.title}:${el.innerText}:${i}:${arr.length}`, 'a');
expect( $X.length ).to.eq(1);
expect( $X[0].tagName ).to.eq('DIV');
expect( $X.innerText ).to.eq("d A1:one:0:2 - A2:two:1:2 D");
} );
it( 'html( val )', async ()=>
{
const el = await fixture(html`<div>d <a>a1</a> - <a>a2</a> D</div>`);
const $X = $$('a',el ).html('Z');
expect( $X.length ).to.eq(2);
expect( $X.innerText ).to.eq("ZZ");
} );
it( 'html( cb(el,i,arr) )', async ()=>
{
const el = await fixture(html`<div>d <a title="A1">one</a> - <a title="A2">two</a> D</div>`);
const $X = $$('a',el ).html( (el,i,arr)=>`${el.title}:${el.innerText}:${i}:${arr.length}`);
expect( $X.length ).to.eq(2);
expect( $X.innerText ).to.eq("A1:one:0:2A2:two:1:2");
} );
it( 'html( val,css )', async ()=>
{
const el = await fixture(html`<div>d <a>a1</a> - <a>a2</a> D</div>`);
const $X = $$(el).html('Z','a');
expect( $X.length ).to.eq(1);
expect( $X[0].tagName ).to.eq('DIV');
expect( $X.$('a').innerText ).to.eq("ZZ");
} );
it( 'html( undefined,css )', async ()=>
{
const el = await fixture(html`<div>d <a>a1</a> - <a>a2</a> D</div>`);
const $X = $$(el).html(undefined,'a');
expect( $X ).to.eq('a1a2');
expect( $$(el).html(undefined) ).to.eq("d <a>a1</a> - <a>a2</a> D");
expect( $$(el).html() ).to.eq("d <a>a1</a> - <a>a2</a> D");
} );
it( 'html( cb(el,i,arr), css )', async ()=>
{
const el = await fixture(html`<div>d <a title="A1">one</a> - <a title="A2">two</a> D</div>`);
const $X = $$( el ).html( (el,i,arr)=>`${el.title}:${el.innerText}:${i}:${arr.length}`, 'a');
expect( $X.length ).to.eq(1);
expect( $X[0].tagName ).to.eq('DIV');
expect( $X.innerText ).to.eq("d A1:one:0:2 - A2:two:1:2 D");
} );
it( 'outerHTML', async ()=>
{
const el = await fixture(html`<div>d <a title="A1">one</a> - <a title="A2">two</a> D</div>`);
const txt = $$('a',el ).outerHTML;
expect( txt ).to.eq('<a title="A1">one</a><a title="A2">two</a>');
} );
it( 'outerHTML=html', async ()=>
{
const el = await fixture(html`<div>d <a title="A1">one</a> - <a title="A2">two</a> D</div>`);
$$('a',el ).outerHTML = `<b>Z</b>`;
expect( $$('a',el ).length ).to.eq(0);
expect( $$('b',el ).outerHTML ).to.eq('<b>Z</b><b>Z</b>');
} );
it( 'outerHTML=cb(e,i,arr)', async ()=>
{
const el = await fixture(html`<div>d <a title="A1">one</a> - <a title="A2">two</a> D</div>`);
expect( $$('a',el ).length ).to.eq(2);
$$('a',el ).outerHTML = (e,i,arr)=>`${i}.<b>${e.title}</b>:${arr.length}`;
expect( $$('a',el ).length ).to.eq(0);
expect( $$('b',el ).length ).to.eq(2);
expect( $$('b',el ).outerHTML ).to.eq('<b>A1</b><b>A2</b>');
expect( $$(el ).innerHTML ).to.eq('d <span>0.</span><b>A1</b><span>:2</span> - <span>1.</span><b>A2</b><span>:2</span> D');
} );
it( 'firstElementChild, firstChild', async ()=>
{
const el = await fixture(html`<div>d <a title="A1">one</a> - <a title="A2">two</a> D</div>`);
expect( $$(el).firstElementChild.innerText ).to.eq('one');
expect( $$('a',el).firstElementChild.innerText ).to.eq('');
expect( $$(el).firstChild.innerText ).to.eq('d ');
expect( $$('a',el).firstChild.innerText ).to.eq('onetwo');
} );
it( 'children, childElements', async ()=>
{
const el = await fixture(html`<div>d <a title="A1">one</a> - <a title="A2">two</a> D</div>`);
expect( $$(el).children.length ).to.eq(2);
expect( $$(el).children.innerText ).to.eq('onetwo');
expect( $$('a',el).children.length ).to.eq(0);
expect( $$('a',el).children.innerText ).to.eq('');
expect( $$(el).childNodes.length ).to.eq(5);
expect( $$(el).childNodes.innerText ).to.eq("d one - two D");
expect( $$('a',el).childNodes.length ).to.eq(2);
expect( $$('a',el).childNodes.innerText ).to.eq('onetwo');
} );
} );
+79
-4
test/CssChain-slots.test.js

@@ -8,2 +8,4 @@ import { fixture, expect } from '@open-wc/testing';

hasEachLine( text, str ){ str.split('\n').forEach( s=>expect( text ).to.include(s.trim()) ) }
function
slotText( el ){ return el.assignedNodes().map(el=>(el.innerText||el.textContent).trim()).join('').trim() }

@@ -81,2 +83,10 @@ describe( 'CssChain slot methods', () =>

it( 'assignedNodes()', async ()=>
{
const el = await fixture(html`<slots-in-shadow>textnode<p>fallback</p></slots-in-shadow>`);
const $arr = el.$().slot('').assignedNodes();
expect( $arr.length).to.eq(2);
expect( $arr.innerText).to.eq('textnodefallback');
});
it( 'slot without name, innerText', async ()=>

@@ -144,3 +154,3 @@ {

el.$().slot('').innerText = 'B';
expect( el.$().slot('','outer').innerText).to.eq('BA');
expect( el.$().slot(',outer').innerText).to.eq('BA');

@@ -170,7 +180,72 @@ });

el.$().slot('').innerHTML = '<i>B</i>';
expect( el.$().slot('','outer').innerHTML).to.eq('<i slot="">B</i><i slot="outer">A</i>');
expect( el.$().slot(',outer').innerHTML).to.eq('<i slot="">B</i><i slot="outer">A</i>');
el.$().slot('outer','').html( (el,i)=>`<i>C${i}</i>`);
expect( el.$().slot('','outer').innerHTML).to.eq('<i slot="">C0</i><i slot="outer">C1</i>');
el.$().slot('outer,').html( (el,i)=>`<i>C${i}</i>`);
expect( el.$().slot(',outer').innerHTML).to.eq('<i slot="">C0</i><i slot="outer">C1</i>');
});
it( 'slots(csv)', async ()=>
{
const el = await fixture(
html`<slots-in-shadow>
<div slot="">default <s>slot</s> replacement</div>
<div slot="inner-1">S1</div>
<div slot="inner-2">S2</div>
<div slot="s3">S3</div>
</slots-in-shadow>`);
const $arr = el.$().slot('inner-1,inner-2');
expect( $arr.length).to.eq(2);
expect( $arr.innerText).to.eq('S1S2');
});
it( 'slots(csv,html)', async ()=>
{
const el = await fixture(
html`<slots-in-shadow>
<div slot="">DEFAULT</div>
<div slot="outer">OUTER</div>
</slots-in-shadow>`);
const $arr = el.$().slot('outer,','<i>B</i>');
expect( $arr.length).to.eq(2);
expect( $arr.innerText).to.eq('BB');
});
it( 'slots(csv,text)', async ()=>
{
const el = await fixture(
html`<slots-in-shadow>
<div slot="">DEFAULT</div>
<div slot="outer">OUTER</div>
</slots-in-shadow>`);
const $arr = el.$().slot('outer,','B');
expect( $arr.length).to.eq(2);
expect( $arr.innerText).to.eq('BB');
});
it( 'slots( csv, cb(el,i,arr) )', async ()=>
{
const el = await fixture(
html`<slots-in-shadow>
<div slot="">DEFAULT</div>
<div slot="outer">OUTER</div>
</slots-in-shadow>`);
expect( el.$().slot(',outer').innerText).to.eq('DEFAULTOUTER');
const $arr = el.$().slot(',outer',(el,i,arr)=> '<b>'+i+'-'+slotText( el )+'-'+arr.length+'</b>');
expect( $arr.length).to.eq(2);
expect( $arr.innerText).to.eq('0-DEFAULT-21-OUTER-2');
});
it( 'slots().clear()', async ()=>
{
const el = await fixture(
html`<slots-in-shadow>
<div slot="">DEFAULT</div>
<div slot="outer">OUTER</div>
</slots-in-shadow>`);
expect( el.$().slot(',outer').innerText).to.eq('DEFAULTOUTER');
el.$().slot().clear();
// clearing slots would reset to template values
expect( el.$().slot('outer').innerText).to.contain('outer slot');
expect( el.$().slot('').innerText).to.contain('default slot');
expect( el.$().slot(',outer').length).to.eq(2);
});
} );
ToDo.md→ToDo.md
coverage/lcov.info

Sorry, the diff of this file is not supported yet