fix(engine): closes #486 to lowercase tag names (#494)

* fix(engine): closes #486 to lowercase tag names * fix(engine): PR 494 feedback
salesforce · Jul 11, 2018 · 704422f · 704422f
1 parent 17133c6
commit 704422f
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/packages/lwc-engine/src/3rdparty/polymer/outer-html.ts b/packages/lwc-engine/src/3rdparty/polymer/outer-html.ts
@@ -15,7 +15,7 @@ import { getInnerHTML } from "./inner-html";
 // http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#escapingString
 const escapeAttrRegExp = /[&\u00A0"]/g;
 const escapeDataRegExp = /[&\u00A0<>]/g;
-const replace = String.prototype.replace;
+const { replace, toLowerCase } = String.prototype;
 
 function escapeReplace(c) {
     switch (c) {
@@ -75,15 +75,15 @@ export function getOuterHTML(node: Node): string {
     switch (node.nodeType) {
         case Node.ELEMENT_NODE: {
             const { tagName, attributes: attrs } = node as Element;
-            let s = '<' + tagName;
+            let s = '<' + toLowerCase.call(tagName);
             for (let i = 0, attr; (attr = attrs[i]); i++) {
                 s += ' ' + attr.name + '="' + escapeAttr(attr.value) + '"';
             }
             s += '>';
             if (voidElements.has(tagName)) {
                 return s;
             }
-            return s + getInnerHTML(node) + '</' + tagName + '>';
+            return s + getInnerHTML(node) + '</' + toLowerCase.call(tagName) + '>';
         }
         case Node.TEXT_NODE: {
             const { data, parentNode } = node as Text;

diff --git a/packages/lwc-engine/src/faux-shadow/__tests__/dom-inspection.spec.ts b/packages/lwc-engine/src/faux-shadow/__tests__/dom-inspection.spec.ts
@@ -70,16 +70,16 @@ describe('DOM inspection', () => {
     describe('#innerHTML', () => {
         it('should implement elm.innerHTML shadow dom semantics', () => {
             const p = getHostShadowRoot(element).querySelector('x-parent');
-            expect(p.innerHTML).toBe('<DIV class=\"first\">Passed Text</DIV>');
-            expect(getHostShadowRoot(p).querySelector('div').innerHTML).toBe('Before[<SLOT name=\"\"></SLOT>]After');
+            expect(p.innerHTML).toBe('<div class=\"first\">Passed Text</div>');
+            expect(getHostShadowRoot(p).querySelector('div').innerHTML).toBe('Before[<slot name=\"\"></slot>]After');
         });
     });
 
     describe('#outerHTML', () => {
         it('should implement elm.outerHTML shadow dom semantics', () => {
             const p = getHostShadowRoot(element).querySelector('x-parent');
-            expect(p.outerHTML).toBe('<X-PARENT><DIV class=\"first\">Passed Text</DIV></X-PARENT>');
-            expect(getHostShadowRoot(p).querySelector('div').outerHTML).toBe('<DIV class=\"portal\">Before[<SLOT name=\"\"></SLOT>]After</DIV>');
+            expect(p.outerHTML).toBe('<x-parent><div class=\"first\">Passed Text</div></x-parent>');
+            expect(getHostShadowRoot(p).querySelector('div').outerHTML).toBe('<div class=\"portal\">Before[<slot name=\"\"></slot>]After</div>');
         });
     });
 

diff --git a/packages/lwc-integration/src/components/dom/test-element-innerhtml/element-innerhtml.spec.js b/packages/lwc-integration/src/components/dom/test-element-innerhtml/element-innerhtml.spec.js
@@ -8,6 +8,6 @@ describe('custom element text content', () => {
     });
 
     it('should return correct innerHTML', function () {
-        assert.equal(browser.getText('p'), '<DIV>Slot</DIV>');
+        assert.equal(browser.getText('p'), '<div>Slot</div>');
     });
 });
diff --git a/packages/lwc-integration/src/components/dom/test-element-outerhtml/element-outerhtml.spec.js b/packages/lwc-integration/src/components/dom/test-element-outerhtml/element-outerhtml.spec.js
@@ -8,6 +8,6 @@ describe('custom element text content', () => {
     });
 
     it('should return correct innerHTML', function () {
-        assert.equal(browser.getText('p'), '<X-CHILD><DIV>Slot</DIV></X-CHILD>');
+        assert.equal(browser.getText('p'), '<x-child><div>Slot</div></x-child>');
     });
 });