css-chain-test - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

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 @@ },

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

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`;

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>');
+    });
 
 } );

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');
+    } );
+
 } );

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);
+    });
 } );

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

316155

4.35%

Lines of code

2038

10.82%

Dependency changes

• Updated

  css-chain@^1.0.9