feat: add test and eslint

Author: paschal533

examples/helia-remix/.eslintrc.cjs

@@ -22,7 +22,7 @@ module.exports = {
   ignorePatterns: ["!**/.server", "!**/.client"],
 
   // Base config
-  extends: ["eslint:recommended"],
+  extends: ["eslint:recommended", "ipfs"],
 
   overrides: [
     // React
@@ -70,6 +70,7 @@ module.exports = {
         "plugin:@typescript-eslint/recommended",
         "plugin:import/recommended",
         "plugin:import/typescript",
+        "ipfs"
       ],
     },
 

examples/helia-remix/__mocks__/helia.ts

@@ -0,0 +1,6 @@
+export const createHelia = jest.fn().mockResolvedValue({
+    libp2p: {
+      peerId: { toString: () => 'mock-peer-id' },
+      status: 'started'
+    }
+  });

examples/helia-remix/__tests__/HeliaComponents.test.tsx

@@ -0,0 +1,24 @@
+import { initHelia } from "../components/helia";
+
+describe('initialize Helia', () => {
+  it('checks if HeliaNode has started', async () => {
+
+    const { heliaNode } = await initHelia();
+
+    expect(heliaNode.libp2p.status).toEqual('started');
+  })
+
+  it('checks if there is a nodeId', async () => {
+
+    const { nodeId } = await initHelia();
+
+    expect(nodeId).toEqual('mock-peer-id');
+  })
+
+  it('checks if nodeId is online', async () => {
+
+    const { nodeIsOnline } = await initHelia();
+
+    expect(nodeIsOnline).toBe(true);
+  })
+})

examples/helia-remix/app/entry.server.tsx

@@ -137,4 +137,4 @@ function handleBrowserRequest(
 
     setTimeout(abort, ABORT_DELAY);
   });
-}
+}

examples/helia-remix/app/routes/_index.tsx

@@ -1,5 +1,5 @@
 import type { MetaFunction } from "@remix-run/node";
-import IpfsComponent from "../../components/ipfs";
+import HeliaComponent from "../../components/helia";
 
 export const meta: MetaFunction = () => {
   return [
@@ -14,7 +14,7 @@ export default function Index() {
       <div className="flex flex-col items-center gap-16">
         <header className="flex flex-col items-center gap-9">
           <h1 className="leading text-2xl font-bold text-gray-800 dark:text-gray-100">
-            Welcome to <span className="sr-only">Remix</span>
+            Welcome to <span className="">Helia Remix</span>
           </h1>
           <div className="h-[144px] w-[434px]">
             <img
@@ -55,7 +55,7 @@ export default function Index() {
           </a>
 
 
-        <IpfsComponent />
+        <HeliaComponent />
         </div>
 
 

examples/helia-remix/components/helia.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react'
+import { createHelia } from 'helia'
+
+export const initHelia = async () => {
+
+  const heliaNode = await createHelia()
+
+  const nodeId = heliaNode.libp2p.peerId.toString()
+  const nodeIsOnline = heliaNode.libp2p.status === 'started'
+
+  return { heliaNode, nodeId, nodeIsOnline }
+}
+
+const HeliaComponent: React.FC = () => {
+  const [id, setId] = useState<string | null>(null)
+  //@ts-expect-error : Type 'null' is not assignable to type 'HeliaNode'.
+  const [helia, setHelia] = useState<HeliaNode | null>(null)
+  const [isOnline, setIsOnline] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (helia) return
+
+    const initHeliaNode = async () => {
+      const { heliaNode, nodeId, nodeIsOnline } = await initHelia()
+      setId(nodeId);
+      setHelia(heliaNode);
+      setIsOnline(nodeIsOnline);
+    }
+
+    initHeliaNode()
+  }, [helia])
+
+  if (!helia || !id) {
+    return <h4>Starting Helia...</h4>
+  }
+
+  return (
+    <div>
+      <h4 data-test="id">ID: {id}</h4>
+      <h4 data-test="status">Status: {isOnline ? 'Online' : 'Offline'}</h4>
+    </div>
+  )
+}
+
+export default HeliaComponent

examples/helia-remix/components/ipfs.tsx

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

examples/helia-remix/jest.setup.ts

@@ -8,19 +8,26 @@
     "dev": "remix vite:dev",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "remix-serve ./build/server/index.js",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
     "@remix-run/node": "^2.14.0",
     "@remix-run/react": "^2.14.0",
     "@remix-run/serve": "^2.14.0",
+    "eslint-config-ipfs": "^7.0.6",
     "helia": "^5.1.1",
     "isbot": "^4.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vitest": "^3.0.5"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.14.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/jest": "^29.5.14",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
@@ -32,13 +39,37 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.4",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.1.6",
     "vite": "^5.1.0",
     "vite-tsconfig-paths": "^4.2.1"
   },
   "engines": {
     "node": ">=20.0.0"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.(ts|tsx)$": "ts-jest"
+    },
+    "moduleNameMapper": {
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy",
+      "^helia$": "<rootDir>/node_modules/helia"
+    },
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.ts"
+    ],
+    "moduleDirectories": [
+      "node_modules"
+    ],
+    "testMatch": [
+      "**/__tests__/**/*.[jt]s?(x)",
+      "**/?(*.)+(spec|test).[jt]s?(x)"
+    ]
   }
 }

examples/helia-remix/package.json

@@ -5,11 +5,12 @@
     "**/.server/**/*.ts",
     "**/.server/**/*.tsx",
     "**/.client/**/*.ts",
-    "**/.client/**/*.tsx"
+    "**/.client/**/*.tsx",
+    "**/__tests__/**/*"
   ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "types": ["@remix-run/node", "vite/client"],
+    "types": ["@remix-run/node", "vite/client", "jest", "@testing-library/jest-dom", "node"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",