Add camel case named property test (#2239)

* Add camelCase property to shared web component

* Fix typo in update-goldens command

* Update expected tests to 32

* Add Svelte test

* Add Angular test

* Add AngularJS test

* Add Dio test

* Add Dojo test

* Add Hybrids test

* Add Hyperapp test

* Add hyperHTML test

* Add Lit test

* Add Mithril test

* Add Omi test

* Add Polymer test

* Add Preact test

* Add React test

* Add React experimental test

* Add Riot test

* Add Skate test

* Add Solid test

* Add Stencil test

* Add Surplus test

* Add Vue test

* Format expected results

Author: justinfagnani

libraries/__shared__/webcomponents/src/ce-with-properties.js

@@ -46,6 +46,12 @@ class CEWithProperties extends HTMLElement {
   get obj() {
     return this._obj;
   }
+  set camelCaseObj(value) {
+    this._camelCaseObj = value;
+  }
+  get camelCaseObj() {
+    return this._camelCaseObj;
+  }
 }
 
 customElements.define('ce-with-properties', CEWithProperties);

libraries/angular/meta/expectedResults.json

@@ -1,5 +1,5 @@
 {
-  "success": 30,
+  "success": 32,
   "failed": 0,
   "skipped": 0,
   "error": false,
@@ -12,8 +12,8 @@
     "passed": 16
   },
   "advancedSupport": {
-    "total": 14,
+    "total": 16,
     "failed": 0,
-    "passed": 14
+    "passed": 16
   }
 }

libraries/angular/src/advanced-tests.js

@@ -68,6 +68,16 @@ describe("advanced support", function() {
       let data = wc.obj;
       expect(data).to.eql({ org: "angular", repo: "angular" });
     });
+
+    it("will pass object data to a camelCase-named property", function() {
+      this.weight = 2;
+      let fixture = TestBed.createComponent(ComponentWithProperties);
+      fixture.detectChanges();
+      let root = fixture.debugElement.nativeElement;
+      let wc = root.querySelector("#wc");
+      let data = wc.camelCaseObj;
+      expect(data).to.eql({ label: "passed" });
+    });
   });
 
   describe("events", function() {

libraries/angular/src/components.ts

@@ -89,6 +89,7 @@ export class ComponentWithDifferentViews {
         [str]="data.str"
         [arr]="data.arr"
         [obj]="data.obj"
+        [camelCaseObj]="data.camelCaseObj"
       ></ce-with-properties>
     </div>
   `
@@ -99,7 +100,8 @@ export class ComponentWithProperties {
     num: 42,
     str: 'Angular',
     arr: ['A', 'n', 'g', 'u', 'l', 'a', 'r'],
-    obj: { org: 'angular', repo: 'angular' }
+    obj: { org: 'angular', repo: 'angular' },
+    camelCaseObj: { label: "passed" }
   }
 }
 

libraries/angularjs/meta/expectedResults.json

@@ -1,19 +1,19 @@
 {
   "success": 30,
-  "failed": 0,
+  "failed": 2,
   "skipped": 0,
   "error": false,
   "disconnected": false,
-  "exitCode": 0,
-  "score": 100,
+  "exitCode": 1,
+  "score": 94,
   "basicSupport": {
     "total": 16,
     "failed": 0,
     "passed": 16
   },
   "advancedSupport": {
-    "total": 14,
-    "failed": 0,
+    "total": 16,
+    "failed": 2,
     "passed": 14
   }
 }

libraries/angularjs/package.json

@@ -35,7 +35,7 @@
       "output": [
         "results"
       ],
-      "command": "cross-env LIBRARY_NAME=angular karma start"
+      "command": "cross-env LIBRARY_NAME=angular karma start || echo ''"
     },
     "build": {
       "dependencies": [

libraries/angularjs/src/advanced-tests.js

@@ -38,6 +38,15 @@ describe("advanced support", () => {
       let data = wc.obj;
       expect(data).to.eql({ org: "angular", repo: "angular" });
     });
+
+    it("will pass object data to a camelCase-named property", function() {
+      this.weight = 2;
+      let root = prep("<comp-with-props>")
+      scope.$digest()
+      let wc = root.querySelector('#wc')
+      let data = wc.camelCaseObj;
+      expect(data).to.eql({ label: "passed" });
+    });
   });
 
   describe("events", () => {

libraries/angularjs/src/components.js

@@ -62,6 +62,7 @@ const ComponentWithProps = {
         ng-prop-str="$ctrl.str"
         ng-prop-arr="$ctrl.arr"
         ng-prop-obj="$ctrl.obj"
+        ng-prop-camel-case-obj="$ctrl.camelCaseObj"
       ></ce-with-properties>
     </div>
   `,
@@ -73,7 +74,8 @@ const ComponentWithProps = {
         num: 42,
         str: 'Angular',
         arr: ['A', 'n', 'g', 'u', 'l', 'a', 'r'],
-        obj: { org: 'angular', repo: 'angular' }
+        obj: { org: 'angular', repo: 'angular' },
+        camelCaseObj: { label: "passed" }
       });
     }
   }

libraries/dio/meta/expectedResults.json

@@ -1,19 +1,19 @@
 {
-  "success": 24,
+  "success": 26,
   "failed": 6,
   "skipped": 0,
   "error": false,
   "disconnected": false,
   "exitCode": 1,
-  "score": 91,
+  "score": 92,
   "basicSupport": {
     "total": 16,
     "failed": 0,
     "passed": 16
   },
   "advancedSupport": {
-    "total": 14,
+    "total": 16,
     "failed": 6,
-    "passed": 8
+    "passed": 10
   }
 }

libraries/dio/src/advanced-tests.js

@@ -63,6 +63,15 @@ describe("advanced support", function() {
       let data = wc.obj;
       expect(data).to.eql({ org: "thysultan", repo: "dio.js" });
     });
+
+    it("will pass object data to a camelCase-named property", function() {
+      this.weight = 2;
+      render(<ComponentWithProperties />, scratch);
+      let wc = scratch.querySelector("#wc");
+      let data = wc.camelCaseObj;
+      expect(data).to.eql({ label: "passed" });
+    });
+
   });
 
   describe("events", function() {

libraries/dio/src/components.js

@@ -91,7 +91,8 @@ export class ComponentWithProperties extends Component {
       num: 42,
       str: 'DIO',
       arr: ['D', 'I', 'O'],
-      obj: { org: 'thysultan', repo: 'dio.js' }
+      obj: { org: 'thysultan', repo: 'dio.js' },
+      camelCaseObj: { label: "passed" }
     };
     return (
       <div>
@@ -101,6 +102,7 @@ export class ComponentWithProperties extends Component {
           str={data.str}
           arr={data.arr}
           obj={data.obj}
+          camelCaseObj={data.camelCaseObj}
         ></ce-with-properties>
       </div>
     );

libraries/dojo/meta/expectedResults.json

@@ -1,5 +1,5 @@
 {
-  "success": 30,
+  "success": 32,
   "failed": 0,
   "skipped": 0,
   "error": false,
@@ -12,8 +12,8 @@
     "passed": 16
   },
   "advancedSupport": {
-    "total": 14,
+    "total": 16,
     "failed": 0,
-    "passed": 14
+    "passed": 16
   }
 }

libraries/dojo/src/advanced-tests.ts

@@ -60,6 +60,16 @@ describe("advanced support", function() {
       const data = wc.obj;
       expect(data).to.eql({ org: "dojo", repo: "dojo" });
     });
+
+    it("will pass object data to a camelCase-named property", function() {
+      this.weight = 2;
+      const r = renderer(() => w(ComponentWithProperties, {}));
+      r.mount({ domNode: scratch, sync: true });
+      const wc: any = document.querySelector("ce-with-properties");
+      const data = wc.camelCaseObj;
+      expect(data).to.eql({ label: "passed" });
+    });
+
   });
 
   describe("events", function() {

libraries/dojo/src/components.ts

@@ -61,7 +61,8 @@ export const ComponentWithProperties = factory(() => {
     num: 42,
     str: 'Dojo',
     arr: ['d', 'o', 'j', 'o'],
-    obj: { org: 'dojo', repo: 'dojo' }
+    obj: { org: 'dojo', repo: 'dojo' },
+    camelCaseObj: { label: "passed" }
   };
   return v('ce-with-properties', data);
 });

libraries/hybrids/meta/expectedResults.json

@@ -1,19 +1,19 @@
 {
   "success": 30,
-  "failed": 0,
+  "failed": 2,
   "skipped": 0,
   "error": false,
   "disconnected": false,
-  "exitCode": 0,
-  "score": 100,
+  "exitCode": 1,
+  "score": 94,
   "basicSupport": {
     "total": 16,
     "failed": 0,
     "passed": 16
   },
   "advancedSupport": {
-    "total": 14,
-    "failed": 0,
+    "total": 16,
+    "failed": 2,
     "passed": 14
   }
 }

libraries/hybrids/package.json

@@ -34,7 +34,7 @@
       "output": [
         "results"
       ],
-      "command": "cross-env LIBRARY_NAME=hybrids karma start"
+      "command": "cross-env LIBRARY_NAME=hybrids karma start || echo ''"
     },
     "build": {
       "dependencies": [

libraries/hybrids/src/advanced-tests.js

@@ -67,6 +67,17 @@ describe("advanced support", function() {
         done();
       });
     });
+
+    it("will pass object data to a camelCase-named property", function(done) {
+      this.weight = 2;
+      requestAnimationFrame(() => {
+        const wc = root.firstElementChild.shadowRoot.querySelector('#wc');
+        const data = wc.camelCaseObj;
+        expect(data).to.eql({ label: "passed" });
+        done();
+      });
+    });
+
   });
 
   describe("events", function() {

libraries/hybrids/src/components.js

@@ -56,7 +56,8 @@ export const ComponentWithProperties = {
       num=${42}
       str=${"hybrids"}
       arr=${["h", "y", "b", "r", "i", "d", "s"]}
-      obj=${{ library: "hybrids" }}
+      obj=${{ library: "hybrids" }},
+      camelCaseObj=${{ label: "passed" }}
     ></ce-with-properties>
   `,
 };

libraries/hyperapp/meta/expectedResults.json

@@ -1,5 +1,5 @@
 {
-  "success": 30,
+  "success": 32,
   "failed": 0,
   "skipped": 0,
   "error": false,
@@ -12,8 +12,8 @@
     "passed": 16
   },
   "advancedSupport": {
-    "total": 14,
+    "total": 16,
     "failed": 0,
-    "passed": 14
+    "passed": 16
   }
 }

libraries/hyperapp/src/advanced-tests.js

@@ -52,14 +52,25 @@ describe("advanced support", function () {
       let wc = testContainer.querySelector("#wc");
       expect(wc.arr).to.eql(["H", "y", "p", "e", "r", "a", "p", "p"]);
     });
+
     it("will pass object data as a property", async function () {
       this.weight = 2;
       ComponentWithProperties(root);
       await new Promise(requestAnimationFrame);
       let wc = testContainer.querySelector("#wc");
       expect(wc.obj).to.eql({ org: "Hyperapp", repo: "hyperapp.js" });
     });
+
+    it("will pass object data to a camelCase-named property", async function () {
+      this.weight = 2;
+      ComponentWithProperties(root);
+      await new Promise(requestAnimationFrame);
+      let wc = testContainer.querySelector("#wc");
+      expect(wc.camelCaseObj).to.eql({ label: "passed" });
+    });
+
   });
+
   describe("events", function () {
     it("can declaratively listen to a lowercase DOM event dispatched by a Custom Element", async function () {
       this.weight = 2;

libraries/hyperapp/src/components.js

@@ -76,6 +76,7 @@ export const ComponentWithProperties = node =>
           str: "Hyperapp",
           arr: ["H", "y", "p", "e", "r", "a", "p", "p"],
           obj: { org: "Hyperapp", repo: "hyperapp.js" },
+          camelCaseObj: { label: "passed" },
         }),
       ]),
   })

libraries/hyperhtml/meta/expectedResults.json

@@ -1,5 +1,5 @@
 {
-  "success": 30,
+  "success": 32,
   "failed": 0,
   "skipped": 0,
   "error": false,
@@ -12,8 +12,8 @@
     "passed": 16
   },
   "advancedSupport": {
-    "total": 14,
+    "total": 16,
     "failed": 0,
-    "passed": 14
+    "passed": 16
   }
 }

libraries/hyperhtml/src/advanced-tests.js

@@ -62,6 +62,14 @@ describe("advanced support", function() {
       let wc = root.querySelector("#wc");
       expect(wc.obj).to.eql({ org: "viperHTML", repo: "hyperHTML" });
     });
+
+    it("will pass object data to a camelCase-named property", async function() {
+      this.weight = 2;
+      ComponentWithProperties(root);
+      let wc = root.querySelector("#wc");
+      expect(wc.camelCaseObj).to.eql({ label: "passed" });
+    });
+
   });
 
   describe("events", function() {

libraries/hyperhtml/src/components.js

@@ -75,6 +75,7 @@ export const ComponentWithProperties = (root) => hyper(root)`
       str=${'hyperHTML'}
       arr=${['h', 'y', 'p', 'e', 'r', 'H', 'T', 'M', 'L']}
       obj=${{org: 'viperHTML', repo: 'hyperHTML'}}
+      camelCaseObj=${{ label: "passed" }}
     ></ce-with-properties>
   </div>`;