feat(mock-doc): add dataset to element

Author: adamdbradley

src/mock-doc/dataset.ts

@@ -0,0 +1,41 @@
+import { MockElement } from './node';
+
+
+export function dataset(elm: MockElement) {
+  const ds: any = {};
+  const attributes = elm.attributes;
+  const attrLen = attributes.length;
+
+  for (let i = 0; i < attrLen; i++) {
+    const attr = attributes.item(i);
+    const nodeName = attr.nodeName;
+    if (nodeName.startsWith('data-')) {
+      ds[dashToPascalCase(nodeName)] = attr.nodeValue;
+    }
+  }
+
+  return new Proxy(ds, {
+    get(_obj, camelCaseProp: string) {
+      return ds[camelCaseProp];
+    },
+    set(_obj, camelCaseProp: string, value) {
+      const dataAttr = toDataAttribute(camelCaseProp);
+      elm.setAttribute(dataAttr, value);
+      return true;
+    }
+  });
+}
+
+function toDataAttribute(str: string) {
+  return 'data-' + String(str).replace(/([A-Z0-9])/g, g => ' ' + g[0]).trim().replace(/ /g, '-').toLowerCase();
+}
+
+function dashToPascalCase(str: string) {
+  str = String(str).substr(5);
+  return str.split('-').map((segment, index) => {
+    if (index === 0) {
+      return segment.charAt(0).toLowerCase() + segment.slice(1);
+    }
+    return segment.charAt(0).toUpperCase() + segment.slice(1);
+  }).join('');
+}

src/mock-doc/node.ts

@@ -1,6 +1,7 @@
 import { attributeChanged, checkAttributeChanged, connectNode, disconnectNode } from './custom-element-registry';
 import { closest, matches, selectAll, selectOne } from './selector';
 import { CSSStyleDeclaration, createCSSStyleDeclaration } from './css-style-declaration';
+import { dataset } from './dataset';
 import { MockAttr, MockAttributeMap, cloneAttributes } from './attribute';
 import { MockClassList } from './class-list';
 import { MockEvent, addEventListener, dispatchEvent, removeEventListener, resetEventListeners } from './event';
@@ -251,6 +252,10 @@ export class MockElement extends MockNode {
     return closest(selector, this);
   }
 
+  get dataset() {
+    return dataset(this);
+  }
+
   get dir() { return this.getAttributeNS(null, 'dir') || ''; }
   set dir(value: string) { this.setAttributeNS(null, 'dir', value); }
 

src/mock-doc/test/dataset.spec.ts

@@ -0,0 +1,52 @@
+import { createDocument } from '../document';
+
+
+describe('dataset', () => {
+  const doc = createDocument();
+  let elm: HTMLElement;
+
+  beforeEach(() => {
+    elm = doc.createElement('div');
+  });
+
+  it('get dataset object', () => {
+    elm.dataset.milesPerHour = '88';
+    expect(elm.dataset).toEqual({
+      milesPerHour: '88'
+    });
+  });
+
+  it('get dataset from attr set', () => {
+    elm.setAttribute('data-miles-per-hour', '88');
+    expect(elm.dataset.milesPerHour).toBe('88');
+  });
+
+  it('get dataset', () => {
+    elm.dataset.milesPerHour = 88 as any;
+    expect(elm.dataset.milesPerHour).toBe('88');
+  });
+
+  it('set data dash case attr with bracket notation', () => {
+    elm.dataset['milesPerHour'] = '88';
+    expect(elm.getAttribute('data-miles-per-hour')).toBe('88');
+  });
+
+  it('set data dash case attr', () => {
+    elm.dataset.milesPerHour = '88';
+    expect(elm.getAttribute('data-miles-per-hour')).toBe('88');
+    expect(elm.dataset).toEqual({
+      milesPerHour: '88'
+    });
+  });
+
+  it('set data attr', () => {
+    elm.dataset.mph = '88';
+    expect(elm.getAttribute('data-mph')).toBe('88');
+  });
+
+  it('set data attr with bracket notation', () => {
+    elm.dataset['mph'] = '88';
+    expect(elm.getAttribute('data-mph')).toBe('88');
+  });
+
+});