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() {