Merge pull request #50 from tryretool/bb/add-testing

Add testing framework

README.md

@@ -69,6 +69,10 @@ You will also see any lint errors in the console.
 3. Navigate to `/dst` directory.
 4. Publish to npm with `npm publish`
 
+## Testing
+
+Tests exist in the `/src/__tests__` directory. Running `yarn test` will run the test suite.
+
 ## Support
 
 Need help? Please report issues or requests to [email protected], through in app chat, or on https://community.retool.com/

package.json

@@ -68,8 +68,10 @@
     "@babel/cli": "^7.19.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
-    "react-scripts": "^5.0.1",
+    "@testing-library/react": "^13.4.0",
+    "jest": "^29.4.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1"
   }
 }

src/__tests__/retool.test.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Retool from "../components/Retool";
+
+describe("react-retool", () => {
+  it("has the correct src attribute", () => {
+    render(
+      <Retool url="https://support.retool.com/embedded/public/cb9e15f0-5d7c-43a7-a746-cdec870dde9a" />
+    );
+
+    const iframe = screen.getByTitle("retool");
+    expect(iframe.src).toBe(
+      "https://support.retool.com/embedded/public/cb9e15f0-5d7c-43a7-a746-cdec870dde9a"
+    );
+  });
+
+  it("has the correct height attribute", () => {
+    render(<Retool height="100%" />);
+
+    const iframe = screen.getByTitle("retool");
+    expect(iframe.height).toBe("100%");
+  });
+
+  it("has the correct width attribute", () => {
+    render(<Retool width="500px" />);
+
+    const iframe = screen.getByTitle("retool");
+    expect(iframe.width).toBe("500px");
+  });
+
+  it("has the correct sandbox attribute", () => {
+    render(<Retool sandbox="allow-popups" />);
+
+    const iframe = screen.getByTitle("retool");
+    expect(iframe.getAttribute("sandbox")).toBe(
+      "allow-scripts allow-same-origin allow-popups"
+    );
+  });
+
+  it("has the correct allow attribute", () => {
+    render(<Retool allow="fullscreen" />);
+
+    const iframe = screen.getByTitle("retool");
+    expect(iframe.getAttribute("allow")).toBe("fullscreen");
+  });
+});