Advanced tests

Author: mrginglymus

libraries/__shared__/tests/advanced-tests.test.js

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {expect, test} from '@playwright/test';
+import {getProp} from "./util";
+
+test.beforeEach(async ({page}) => {
+  await page.goto('/react');
+})
+
+test.describe('advanced support', () => {
+  test.describe('attributes and properties', () => {
+    test('will pass array data as a property', async ({page}) => {
+      const ce = page.locator('#ce-with-properties');
+      expect(await getProp(ce, 'arr')).toEqual(['R', 'e', 'a', 'c', 't'])
+    })
+
+    test('will pass object data as a property', async ({page}) => {
+      const ce = page.locator('#ce-with-properties');
+      expect(await getProp(ce, 'obj')).toEqual({org: "facebook", repo: "react"})
+    })
+
+    test("will pass object data to a camelCase-named property", async ({page}) => {
+      const ce = page.locator('#ce-with-properties');
+      expect(await getProp(ce, 'camelCaseObj')).toEqual({label: "passed"})
+    })
+  });
+
+  test.describe('events', () => {
+
+    test("can declaratively listen to a lowercase DOM event dispatched by a Custom Element", async ({page}) => {
+      const ce = page.locator('#ce-with-declarative-event');
+      await expect(page.getByText(/lowercase:/)).toHaveText(/false/);
+      await ce.click();
+      await expect(page.getByText(/lowercase:/)).toHaveText(/true/);
+    })
+
+    test("can declaratively listen to a camelCase DOM event dispatched by a Custom Element", async ({page}) => {
+      const ce = page.locator('#ce-with-declarative-event');
+      await expect(page.getByText(/camelCase:/)).toHaveText(/false/);
+      await ce.click();
+      await expect(page.getByText(/camelCase:/)).toHaveText(/true/);
+    })
+    test("can declaratively listen to a kebab-case DOM event dispatched by a Custom Element", async ({page}) => {
+      const ce = page.locator('#ce-with-declarative-event');
+      await expect(page.getByText(/kebab-case:/)).toHaveText(/false/);
+      await ce.click();
+      await expect(page.getByText(/kebab-case:/)).toHaveText(/true/);
+    })
+    test("can declaratively listen to a CAPScase DOM event dispatched by a Custom Element", async ({page}) => {
+      const ce = page.locator('#ce-with-declarative-event');
+      await expect(page.getByText(/CAPScase:/)).toHaveText(/false/);
+      await ce.click();
+      await expect(page.getByText(/CAPScase:/)).toHaveText(/true/);
+    })
+    test("can declaratively listen to a PascalCase DOM event dispatched by a Custom Element", async ({page}) => {
+      const ce = page.locator('#ce-with-declarative-event');
+      await expect(page.getByText(/PascalCase:/)).toHaveText(/false/);
+      await ce.click();
+      await expect(page.getByText(/PascalCase:/)).toHaveText(/true/);
+    })
+  });
+})

libraries/__shared__/tests/basic-tests.test.js

@@ -16,6 +16,7 @@
  */
 
 import {expect, test} from '@playwright/test';
+import {getPropOrAttr} from './util';
 
 test.beforeEach(async ({page}) => {
   await page.goto('/react');
@@ -60,12 +61,6 @@ test.describe("basic support", () => {
   });
 
   test.describe('attributes and properties', () => {
-    const getPropOrAttr = async (ce, name) => {
-      const prop = await (await (await ce.elementHandle()).getProperty(name)).jsonValue()
-      const attr = ce.getAttribute(name);
-      return prop ?? attr;
-    }
-
     test("will pass boolean data as either an attribute or a property", async ({page}) => {
       const ce = page.locator('#ce-with-properties');
       expect(await getPropOrAttr(ce, 'bool')).toEqual(true)

libraries/__shared__/tests/util.js

@@ -0,0 +1,7 @@
+export const getProp = async (ce, name) => {
+  return await (await (await ce.elementHandle()).getProperty(name)).jsonValue()
+}
+
+export const getPropOrAttr = async (ce, name) => {
+  return await getProp(ce, name) ?? ce.getAttribute(name);
+}

libraries/react/src/advanced-tests.js

@@ -197,18 +197,18 @@ export class ComponentWithDeclarativeEvent extends Component {
     let state = this.state;
     return (
       <div>
-        <div ref={(el) => this.lowercase = el}>{state.lowercaseHandled.toString()}</div>
-        <div ref={(el) => this.kebab = el}>{state.kebabHandled.toString()}</div>
-        <div ref={(el) => this.camel = el}>{state.camelHandled.toString()}</div>
-        <div ref={(el) => this.caps = el}>{state.capsHandled.toString()}</div>
-        <div ref={(el) => this.pascal = el}>{state.pascalHandled.toString()}</div>
+        <div ref={(el) => this.lowercase = el}>lowercase: {state.lowercaseHandled.toString()}</div>
+        <div ref={(el) => this.kebab = el}>kebab-case: {state.kebabHandled.toString()}</div>
+        <div ref={(el) => this.camel = el}>camelCase: {state.camelHandled.toString()}</div>
+        <div ref={(el) => this.caps = el}>CAPScase: {state.capsHandled.toString()}</div>
+        <div ref={(el) => this.pascal = el}>PascalCase: {state.pascalHandled.toString()}</div>
         <ce-with-event id="ce-with-declarative-event"
           onlowercaseevent={this.handleLowercaseEvent}
           onkebab-event={this.handleKebabEvent}
           oncamelEvent={this.handleCamelEvent}
           onCAPSevent={this.handleCapsEvent}
           onPascalEvent={this.handlePascalEvent}
-        ></ce-with-event>
+        >Declarative</ce-with-event>
       </div>
     );
   }