Update mapping tests to playwright

change/design-to-code-react-2c7ac1cb-5316-4464-ba90-55dae76b3875.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Test updates",
+  "packageName": "design-to-code-react",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/design-to-code-react/app/app.tsx

@@ -8,6 +8,7 @@ import { WebComponentTestPage } from "./pages/web-components";
 import WebComponentViewerContent from "./pages/web-components/web-component-viewer-content";
 import { FormTestPage } from "./pages/form";
 import { IndexPage } from "./pages/index";
+import { UtilitiesPage } from "./pages/utilities";
 
 class App extends React.Component<{}, {}> {
     public render(): React.ReactNode {
@@ -28,6 +29,7 @@ class App extends React.Component<{}, {}> {
                         path={"/web-components/content"}
                         element={<WebComponentViewerContent />}
                     />
+                    <Route path={"/utilities"} element={<UtilitiesPage />} />
                     <Route path={"/"} element={<Navigate to={"/form"} />} />
                 </Routes>
             </BrowserRouter>

packages/design-to-code-react/app/pages/index.tsx

@@ -21,6 +21,9 @@ export function IndexPage() {
                     <li>
                         <Link to="/web-components">Web Components</Link>
                     </li>
+                    <li>
+                        <Link to="/utilities">Utilities</Link>
+                    </li>
                 </ul>
             </nav>
         );

packages/design-to-code-react/src/data-utilities/mapping.spec.tsx → packages/design-to-code-react/app/pages/utilities.tsx

@@ -1,34 +1,38 @@
-import React from "react";
-import "../__tests__/mocks/match-media";
+import React, { useEffect, useState } from "react";
 import {
     DataType,
-    dictionaryLink,
     linkedDataSchema,
     mapDataDictionary,
     pluginIdKeyword,
 } from "design-to-code";
-import { ComponentDictionary, reactMapper, reactResolver } from "./mapping";
+import {
+    ComponentDictionary,
+    reactMapper,
+    reactResolver,
+} from "../../src/data-utilities/mapping";
 
-class Foo extends React.Component<{}, {}> {
-    public render(): React.ReactNode {
-        return <div>{this.props.children}</div>;
-    }
+function Foo(props: { children: string; text: string; number: number }) {
+    return (
+        <div id="foo" data-text={props.text} data-number={props.number}>
+            {props.children}
+        </div>
+    );
 }
 
-class Bar extends React.Component<{}, {}> {
-    public render(): React.ReactNode {
-        return <div>{this.props.children}</div>;
-    }
+function Bar(props: { children: string }) {
+    return <div id="bar">{props.children}</div>;
 }
 
 const componentDictionary: ComponentDictionary = {
     foo: Foo,
     bar: Bar,
 };
 
-describe("reactMapper", () => {
-    test("should map data to a React component as props", () => {
-        const resolvedData: any = mapDataDictionary({
+export function UtilitiesPage() {
+    const [content, setContent] = useState(<div>Hello world</div>);
+
+    function mapDataAsProps() {
+        const resolvedData = mapDataDictionary({
             dataDictionary: [
                 {
                     foo: {
@@ -58,15 +62,11 @@ describe("reactMapper", () => {
                 },
             },
         });
-        const mappedData: any = mount(resolvedData);
-        const mappedComponent: any = mappedData.find("Foo");
+        setContent(resolvedData);
+    }
 
-        expect(mappedComponent).toHaveLength(1);
-        expect(mappedComponent.prop("text")).toEqual("Hello");
-        expect(mappedComponent.prop("number")).toEqual(42);
-    });
-    test("should map data to a React component as children", () => {
-        const resolvedData: any = mapDataDictionary({
+    function mapDataAsChildren() {
+        const resolvedData = mapDataDictionary({
             dataDictionary: [
                 {
                     foo: {
@@ -119,86 +119,80 @@ describe("reactMapper", () => {
                 },
             },
         });
-        const mappedData: any = mount(resolvedData);
+        setContent(resolvedData);
+    }
 
-        expect(mappedData.find("Foo")).toHaveLength(1);
-        expect(mappedData.text()).toEqual("FooHello world");
-    });
-    test("should map data to nested React components", () => {
-        const mappedData: any = mount(
-            mapDataDictionary({
-                dataDictionary: [
-                    {
-                        foo: {
-                            schemaId: "foo",
-                            data: {
-                                children: [
-                                    {
-                                        id: "bar",
-                                        dataLocation: "children",
-                                    },
-                                ],
-                            },
+    function mapDataNested() {
+        const resolvedData = mapDataDictionary({
+            dataDictionary: [
+                {
+                    foo: {
+                        schemaId: "foo",
+                        data: {
+                            children: [
+                                {
+                                    id: "bar",
+                                    dataLocation: "children",
+                                },
+                            ],
                         },
-                        bar: {
-                            schemaId: "bar",
-                            parent: {
-                                id: "foo",
-                                dataLocation: "children",
-                            },
-                            data: {
-                                children: [
-                                    {
-                                        id: "bat",
-                                    },
-                                ],
-                            },
+                    },
+                    bar: {
+                        schemaId: "bar",
+                        parent: {
+                            id: "foo",
+                            dataLocation: "children",
                         },
-                        bat: {
-                            schemaId: "bat",
-                            parent: {
-                                id: "bar",
-                                dataLocation: "children",
-                            },
-                            data: "Hello world",
+                        data: {
+                            children: [
+                                {
+                                    id: "bat",
+                                },
+                            ],
                         },
                     },
-                    "foo",
-                ],
-                mapper: reactMapper(componentDictionary),
-                resolver: reactResolver,
-                schemaDictionary: {
-                    foo: {
-                        $id: "foo",
-                        type: "object",
-                        properties: {
-                            children: {
-                                ...linkedDataSchema,
-                            },
+                    bat: {
+                        schemaId: "bat",
+                        parent: {
+                            id: "bar",
+                            dataLocation: "children",
                         },
+                        data: "Hello world",
                     },
-                    bar: {
-                        $id: "bar",
-                        type: "object",
-                        properties: {
-                            children: {
-                                ...linkedDataSchema,
-                            },
+                },
+                "foo",
+            ],
+            mapper: reactMapper(componentDictionary),
+            resolver: reactResolver,
+            schemaDictionary: {
+                foo: {
+                    $id: "foo",
+                    type: "object",
+                    properties: {
+                        children: {
+                            ...linkedDataSchema,
                         },
                     },
-                    bat: {
-                        $id: "bat",
-                        type: DataType.string,
+                },
+                bar: {
+                    $id: "bar",
+                    type: "object",
+                    properties: {
+                        children: {
+                            ...linkedDataSchema,
+                        },
                     },
                 },
-            })
-        );
+                bat: {
+                    $id: "bat",
+                    type: DataType.string,
+                },
+            },
+        });
+        setContent(resolvedData);
+    }
 
-        expect(mappedData.find("Foo")).toHaveLength(1);
-        expect(mappedData.find("Bar")).toHaveLength(1);
-        expect(mappedData.text()).toEqual("Hello world");
-    });
-    test("should map data with a plugin", () => {
+    function mapDataAsPlugin() {
         const pluginId: string = "foobarbat";
         function mapperPlugin(data: any): any {
             return "Hello world, " + data;
@@ -237,18 +231,14 @@ describe("reactMapper", () => {
                 {
                     ids: [pluginId],
                     mapper: mapperPlugin,
-                    resolver: undefined,
+                    resolver: () => {},
                 },
             ],
         });
-        const mappedData: any = mount(resolvedData);
-        const mappedComponent: any = mappedData.find("Foo");
+        setContent(resolvedData);
+    }
 
-        expect(mappedComponent).toHaveLength(1);
-        expect(mappedComponent.prop("text")).toEqual("Hello world, !");
-        expect(mappedComponent.prop("number")).toEqual(42);
-    });
-    test("should resolve data with a plugin", () => {
+    function resolveDataAsPlugin() {
         const pluginId: string = "foobarbat";
         function resolverPlugin(data: any): any {
             return "Hello world";
@@ -295,15 +285,45 @@ describe("reactMapper", () => {
             plugins: [
                 {
                     ids: [pluginId],
-                    mapper: undefined,
+                    mapper: () => {},
                     resolver: resolverPlugin,
                 },
             ],
         });
-        const mappedData: any = mount(resolvedData);
-        const mappedComponent: any = mappedData.find("Foo");
 
-        expect(mappedComponent).toHaveLength(1);
-        expect(mappedComponent.prop("children")).toEqual(["Hello world"]);
-    });
-});
+        setContent(resolvedData);
+    }
+
+    function detectTest(e) {
+        switch (e.detail) {
+            case "mapDataAsProps":
+                mapDataAsProps();
+                break;
+            case "mapDataAsChildren":
+                mapDataAsChildren();
+                break;
+            case "mapDataNested":
+                mapDataNested();
+                break;
+            case "mapDataAsPlugin":
+                mapDataAsPlugin();
+                break;
+            case "resolveDataAsPlugin":
+                resolveDataAsPlugin();
+                break;
+            default:
+                return null;
+        }
+    }
+
+    useEffect(() => {
+        // run on first load
+        window.addEventListener("test", detectTest);
+
+        return () => {
+            window.removeEventListener("test", detectTest);
+        };
+    }, []);
+
+    return content;
+}