added convenience methods style() and multiSelect()

DannyMoerkerke · DannyMoerkerke · commit ebfc72e3668c · 2019-09-11T12:23:26.000+02:00
diff --git a/readme.md b/readme.md
@@ -34,8 +34,9 @@ for multiple levels of data binding. This is because internally the `setState` m
 `CustomElement` also provides some convenience methods:
 - `show()`, show the element
 - `hide()`, hide the element
-- `select(selector: string)`, select and element from the component's Shadow DOM (calls `querySelector` internally)
+- `select(selector: string)`, select an element from the component's Shadow DOM (calls `querySelector` internally)
 - `selectAll(selector: string)`, select multiple elements from the component's Shadow DOM (calls `querySelectorAll` internally)
+- `style(element: HTMLElement, styles: Object)`, set multiple styles on an element at once
 
 ### Demo
 To run the demo, run `npm install` once and then `npm start` and view the demo on
diff --git a/src/custom-element.js b/src/custom-element.js
@@ -57,6 +57,12 @@ export class CustomElement extends HTMLElement {
     return this.shadowRoot.querySelectorAll(selector);
   }
 
+  multiSelect(config) {
+    Object.entries(config).forEach(([prop, selector]) => {
+      this[prop] = this.select(selector);
+    });
+  }
+
   show() {
     this.style.display = '';
     this.removeAttribute('hidden');
@@ -66,5 +72,9 @@ export class CustomElement extends HTMLElement {
     this.style.display = 'none';
     this.setAttribute('hidden', '');
   }
+
+  style(element, styles) {
+    Object.assign(element.style, styles);
+  }
 }
 
diff --git a/test/custom-element.test.js b/test/custom-element.test.js
@@ -31,7 +31,7 @@ describe('custom-element', () => {
       title: 'custom-element test'
     });
 
-    const actual = element.shadowRoot.querySelector('#title').textContent;
+    const actual = element.select('#title').textContent;
     const expected = state.title;
 
     assert.equal(actual, expected);
@@ -47,10 +47,10 @@ describe('custom-element', () => {
       }
     });
 
-    const actual1 = element.shadowRoot.querySelector('#name').textContent;
+    const actual1 = element.select('#name').textContent;
     const expected1 = state.user.name;
 
-    const actual2 = element.shadowRoot.querySelector('#city').textContent;
+    const actual2 = element.select('#city').textContent;
     const expected2 = state.user.address.city;
 
     assert.equal(actual1, expected1);
@@ -66,7 +66,7 @@ describe('custom-element', () => {
 
     element.setState(state);
 
-    const dataRepeater = element.shadowRoot.querySelector('data-repeater');
+    const dataRepeater = element.select('data-repeater');
     const items = dataRepeater.shadowRoot.querySelectorAll('li');
 
     assert.equal(dataRepeater.data, state.data.items);
@@ -85,10 +85,10 @@ describe('custom-element', () => {
       }
     });
 
-    const actual1 = element.shadowRoot.querySelector('#name').textContent;
+    const actual1 = element.select('#name').textContent;
     const expected1 = state.user.name;
 
-    const actual2 = element.shadowRoot.querySelector('#city').textContent;
+    const actual2 = element.select('#city').textContent;
     const expected2 = state.user.address.city;
 
     assert.equal(actual1, expected1);
@@ -102,9 +102,9 @@ describe('custom-element', () => {
 
     element.setState(newState);
 
-    const actual3 = element.shadowRoot.querySelector('#name').textContent;
+    const actual3 = element.select('#name').textContent;
     const expected3 = newState.user.name;
-    const actual4 = element.shadowRoot.querySelector('#city').textContent;
+    const actual4 = element.select('#city').textContent;
 
     assert.equal(actual3, expected3);
     assert.equal(actual4, expected2);
@@ -144,13 +144,13 @@ describe('custom-element', () => {
 
   it('should select the correct DOM element', () => {
     const actual = element.select('#name');
-    const expected = element.shadowRoot.querySelector('#name');
+    const expected = element.select('#name');
 
     assert.equal(actual, expected);
   });
 
   it('should select the correct collection of DOM elements', () => {
-    const actual = element.shadowRoot.querySelectorAll('p');
+    const actual = element.selectAll('p');
     const expected = element.selectAll('p');
 
     assert.deepEqual(actual, expected);
@@ -170,4 +170,41 @@ describe('custom-element', () => {
     assert.equal(element.style.display, '');
     assert.equal(element.hasAttribute('hidden'), false)
   });
+
+  it('should correctly set multiple styles on an element', () => {
+    element.setState({
+      title: 'custom-element test'
+    });
+
+    const heading = element.select('h3');
+    const styles = {
+      color: 'red',
+      textDecoration: 'underline',
+      textAlign: 'center'
+    };
+
+    element.style(heading, styles);
+
+    Object.entries(styles).forEach(([prop, style]) => {
+      assert.equal(heading.style[prop], style);
+    })
+  });
+
+  it('should correctly select multiple elements and set these as properties on the element', () => {
+    element.setState(state);
+
+    const title = element.select('#title');
+    const name = element.select('#name');
+    const city = element.select('#city');
+
+    element.multiSelect({
+      titleObj: '#title',
+      nameObj: '#name',
+      cityObj: '#city'
+    });
+
+    assert.deepEqual(element.titleObj, title);
+    assert.deepEqual(element.nameObj, name);
+    assert.deepEqual(element.cityObj, city);
+  });
 });
