fix(vdom): support multiple spaces and line breaks in class (#1762)

fixes #1757
ionic-team · Jul 25, 2019 · fb85af1 · fb85af1
1 parent 467a966
commit fb85af1
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/src/runtime/test/render-vdom.spec.tsx b/src/runtime/test/render-vdom.spec.tsx
@@ -97,6 +97,28 @@ describe('render-vdom', () => {
     `);
   });
 
+  it('should add classes', async () => {
+    @Component({ tag: 'cmp-a'})
+    class CmpA {
+      render() {
+        return <div class={
+          ` class1
+              class2
+              class3 `}
+        >Hello VDOM</div>;
+      }
+    }
+
+    const { body, waitForChanges } = await newSpecPage({
+      components: [CmpA],
+      html: `<cmp-a></cmp-a>`
+    });
+
+    expect(body).toEqualHtml(`
+      <cmp-a><div class="class1 class2 class3">Hello VDOM</div></cmp-a>
+    `);
+  });
+
   it('should error when reusing vnodes', async () => {
 
     @Component({ tag: 'cmp-a' })

diff --git a/src/runtime/vdom/set-accessor.ts b/src/runtime/vdom/set-accessor.ts
@@ -121,4 +121,4 @@ export const setAccessor = (elm: HTMLElement, memberName: string, oldValue: any,
 };
 
 const parseClassList = (value: string | undefined | null): string[] =>
-  (!value) ? [] : value.split(' ').filter(c => c);
+  (!value) ? [] : value.split(/\s+/).filter(c => c);
diff --git a/src/runtime/vdom/test/set-accessor.spec.ts b/src/runtime/vdom/test/set-accessor.spec.ts
@@ -660,6 +660,11 @@ describe('setAccessor for standard html elements', () => {
         '  class1 class2',
         'new class4', false, 0);
       expect(elm).toHaveClasses(['class3', 'new', 'class4']);
+
+      setAccessor(elm, 'class', undefined, `class1
+              class2
+       class3  `, false, 0);
+      expect(elm).toHaveClasses(['class1', 'class2', 'class3']);
     });
 
     it('should not add any classes', () => {
@@ -675,6 +680,9 @@ describe('setAccessor for standard html elements', () => {
 
       setAccessor(elm, 'class', undefined, undefined, false, 0);
       expect(elm).toHaveClasses([]);
+
+      setAccessor(elm, 'class', '', `\n      \n      \n     `, false, 0);
+      expect(elm).toHaveClasses([]);
     });
 
     it('should remove classes', () => {
@@ -683,6 +691,10 @@ describe('setAccessor for standard html elements', () => {
 
       setAccessor(elm, 'class', 'icon', 'icon2', false, 0);
       expect(elm).toHaveClasses(['ion-color', 'icon2']);
+
+      setAccessor(elm, 'class', `icon
+           ion-color`, 'icon2', false, 0);
+      expect(elm).toHaveClasses(['icon2']);
     });
 
     it('should not have duplicated classes', () => {