Added gelbooru image endpoint and testing

bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+preload = './happydom.ts'

happydom.ts

@@ -0,0 +1,3 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+
+GlobalRegistrator.register();

package.json

@@ -14,11 +14,15 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^13.6.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "bun-types": "^1.0.29",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",

src/App.tsx

@@ -4,7 +4,7 @@ import ImageModerator from './components/ImageModerator/ImageModerator'
 function App() {
   return (
     <>
-      <ImageModerator url='https://picsum.photos/1000'/>
+      <ImageModerator apiEndpoint='"https://gelbooru.com/index.php?page=dapi&s=post&q=index&limit=1&json=1"' imageUrlProperty='post[0]' />
     </>
   )
 }

src/components/ImageModerator/ImageModerator.tsx

@@ -1,13 +1,14 @@
 import Button from "../Button/Button";
 
 export interface ImageModeratorProps {
-    url: string;
+    apiEndpoint: string;
+    imageUrlProperty: string;
 }
 
-export default function ImageModerator(props: ImageModeratorProps) {
+export default function ImageModerator({apiEndpoint, imageUrlProperty}: ImageModeratorProps) {
     return <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr",
     gridTemplateRows: "1fr 50px", gridTemplateAreas: "'. .' '. .'", width: "100vw", height: "100vh" }}>
-        <img src={props.url} style={{ width: "100%", height: "100%", gridColumnStart: 1, gridColumnEnd: 3, display: "block", objectFit: "contain" }} />
+        <img src={imageUrlProperty} style={{ width: "100%", height: "100%", gridColumnStart: 1, gridColumnEnd: 3, display: "block", objectFit: "contain" }} />
         <Button label="Discard" />
         <Button label="Accept" />
     </div>

test/ImageModerator.test.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { describe, it } from "bun:test";
+import ImageModerator from '../src/components/ImageModerator/ImageModerator';
+
+it("should render without crashing", () => {
+    render(<ImageModerator apiEndpoint='"https://gelbooru.com/index.php?page=dapi&s=post&q=index&limit=1&json=1"' imageUrlProperty='post[0]' />);
+});