Merge pull request #1509 from Py4Js/fix-tests

Added tests to PyBox

Author: kaurelia

source/library/components/py-box/__snapshots__/py-box.test.tsx.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PyBox check if match snapshots with alpha pyscript provider 1`] = `
+<div>
+  <py-box
+    widths="2/3;1/6;1/6"
+  >
+    <div
+      data-testid="first-element"
+    >
+      first
+    </div>
+    <div
+      data-testid="second-element"
+    >
+      second
+    </div>
+    <div
+      data-testid="third-element"
+    >
+      third
+    </div>
+  </py-box>
+</div>
+`;
+
+exports[`PyBox check if match snapshots with set width 1`] = `
+<div>
+  <py-box
+    widths="2/3;1/6;1/6"
+  >
+    <div
+      data-testid="first-element"
+    >
+      first
+    </div>
+    <div
+      data-testid="second-element"
+    >
+      second
+    </div>
+    <div
+      data-testid="third-element"
+    >
+      third
+    </div>
+  </py-box>
+</div>
+`;
+
+exports[`PyBox check if match snapshots without pyscript provider 1`] = `
+<div>
+  <py-box />
+</div>
+`;
+
+exports[`PyBox ensure that PyBox doesn't work with latest pyscript provider  1`] = `
+<div>
+  <py-box>
+    <div
+      data-testid="first-element"
+    >
+      first
+    </div>
+    <div
+      data-testid="second-element"
+    >
+      second
+    </div>
+    <div
+      data-testid="third-element"
+    >
+      third
+    </div>
+  </py-box>
+</div>
+`;

source/library/components/py-box/py-box.story.tsx

@@ -29,6 +29,7 @@ PyBoxWithMultipleElementsExample.args = {
     <div key="element-2">Second element</div>,
     <div key="element-3">Third element</div>,
   ],
+  widths: "2/3;1/6;1/6",
 };
 
 export const PyBoxWithSingleElementExample: StoryFn<typeof PyBox> =

source/library/components/py-box/py-box.test.tsx

@@ -0,0 +1,40 @@
+import { render } from "@testing-library/react";
+import PyScriptProvider from "../py-script-provider";
+import PyBox from "./py-box";
+
+const children = [
+  <div data-testid="first-element" key="first-element">
+    first
+  </div>,
+  <div data-testid="second-element" key="second-element">
+    second
+  </div>,
+  <div data-testid="third-element" key="third-element">
+    third
+  </div>,
+];
+describe("PyBox", () => {
+  it("check if match snapshots without pyscript provider", () => {
+    const { container } = render(<PyBox />);
+    expect(container).toMatchSnapshot();
+  });
+  it("check if match snapshots with alpha pyscript provider", () => {
+    const { container } = render(
+      <PyScriptProvider
+        jsSource="https://pyscript.net/alpha/pyscript.js"
+        cssSource="https://pyscript.net/alpha/pyscript.css"
+      >
+        <PyBox widths="2/3;1/6;1/6" children={children} />
+      </PyScriptProvider>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+  it("ensure that PyBox doesn't work with latest pyscript provider ", () => {
+    const { container } = render(
+      <PyScriptProvider>
+        <PyBox children={children} />
+      </PyScriptProvider>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});