fix(vdom): classes with consecutive spaces

Author: manucorporat

src/mock-doc/class-list.ts

@@ -3,10 +3,12 @@ export class MockClassList {
 
   constructor(private elm: HTMLElement) {}
 
-  add(...className: string[]) {
+  add(...classNames: string[]) {
     const clsNames = getItems(this.elm);
     let updated = false;
-    className.forEach(className => {
+    classNames.forEach(className => {
+      className = String(className);
+      validateClass(className);
       if (clsNames.includes(className) === false) {
         clsNames.push(className);
         updated = true;
@@ -17,10 +19,12 @@ export class MockClassList {
     }
   }
 
-  remove(...className: string[]) {
+  remove(...classNames: string[]) {
     const clsNames = getItems(this.elm);
     let updated = false;
-    className.forEach(className => {
+    classNames.forEach(className => {
+      className = String(className);
+      validateClass(className);
       const index = clsNames.indexOf(className);
       if (index > -1) {
         clsNames.splice(index, 1);
@@ -33,10 +37,12 @@ export class MockClassList {
   }
 
   contains(className: string) {
+    className = String(className);
     return getItems(this.elm).includes(className);
   }
 
   toggle(className: string) {
+    className = String(className);
     if (this.contains(className) === true) {
       this.remove(className);
     } else {
@@ -59,6 +65,15 @@ export class MockClassList {
 }
 
 
+function validateClass(className: string) {
+  if (className === '') {
+    throw new Error('The token provided must not be empty.');
+  }
+  if (/\s/.test(className)) {
+    throw new Error(`The token provided ('${className}') contains HTML space characters, which are not valid in tokens.`);
+  }
+}
+
 function getItems(elm: HTMLElement) {
   const className = elm.getAttribute('class');
   if (typeof className === 'string' && className.length > 0) {

src/mock-doc/test/class-list.spec.ts

@@ -0,0 +1,57 @@
+import { MockDocument } from '../document';
+import { MockClassList } from '../class-list';
+import { MockElement } from '../node';
+
+
+describe('class-list', () => {
+  let classList: MockClassList;
+  beforeEach(() => {
+    const doc = new MockDocument();
+    const el = new MockElement(doc, 'div');
+    classList = new MockClassList(el as any);
+  });
+
+  it('add and remove classes', () => {
+    classList.add('one');
+    classList.add('two', 'three');
+    classList.add(null);
+    classList.add(undefined);
+    classList.add(1 as any, 2 as any);
+    expect(classList.toString()).toEqual('one two three null undefined 1 2');
+
+    expect(classList.contains('one')).toBe(true);
+    expect(classList.contains('two')).toBe(true);
+    expect(classList.contains('three')).toBe(true);
+    expect(classList.contains('null')).toBe(true);
+    expect(classList.contains(null)).toBe(true);
+    expect(classList.contains('undefined')).toBe(true);
+    expect(classList.contains('1')).toBe(true);
+    expect(classList.contains(2 as any)).toBe(true);
+
+    classList.remove('one');
+    classList.remove('two', 'three');
+    classList.remove(null);
+    classList.remove(undefined);
+    classList.remove(1 as any, 2 as any);
+
+    expect(classList.toString()).toEqual('');
+  });
+
+  it('should throw if empty', () => {
+    expect(() => {
+      classList.add('');
+    }).toThrow();
+    expect(() => {
+      classList.remove('');
+    }).toThrow();
+  });
+
+  it('should throw if has spaces', () => {
+    expect(() => {
+      classList.add('');
+    }).toThrow();
+    expect(() => {
+      classList.remove(' ');
+    }).toThrow();
+  });
+});

src/runtime/vdom/set-accessor.ts

@@ -122,4 +122,4 @@ export const setAccessor = (elm: HTMLElement, memberName: string, oldValue: any,
 };
 
 const parseClassList = (value: string | undefined | null): string[] =>
-  (!value) ? [] : value.split(' ');
+  (!value) ? [] : value.split(/ +/g);