End-to-End Testing Example

.github/workflows/playwright.yml

@@ -0,0 +1,33 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm install -g yarn && yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+      env:
+        NEXT_PUBLIC_RPC: https://o.pacmon.suijin.xyz/rpc/
+        NEXT_PUBLIC_EXPLORER: https://o.pacmon.suijin.xyz/explorer
+        NEXT_PUBLIC_API_URL: https://o.pacmon.suijin.xyz/api
+        NEXT_PUBLIC_PLAYWRIGHT_TESTING: 1
+        NEXT_PUBLIC_PLAYWRIGHT_PROJECT_ID: 1
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -37,3 +37,8 @@ next-env.d.ts
 # npm lock
 package-lock.json
 _static
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+.env

components/demo/DemoApp.tsx

@@ -200,40 +200,54 @@ const DemoTokenBox = ({
     <div className="w-full bg-white bg-opacity-[5%] rounded-xl overflow-hidden p-4 text-sm">
       <div className="text-lg font-bold mb-2">{bSymbol}</div>
       <table className="text-left mx-auto">
-        <tr>
-          <td className="pr-4">Oracle Price: </td>
-          <td>
-            <b>${formatBigInt(price, PRICE_PRECISION)}</b>
-          </td>
-        </tr>
-        <tr>
-          <td className="pr-4">AMM Price: </td>
-          <td>
-            <b>${formatBigInt(ammPrice * quotePrice, PRICE_PRECISION * 2)}</b>
-          </td>
-        </tr>
-        <tr>
-          <td className="pr-4">Deposited Balance: </td>
-          <td>
-            <b>
-              {formatBigInt(balance, Number(baseTokenInfo.decimals))} {bSymbol}
-            </b>
-          </td>
-        </tr>
-        <tr>
-          <td className="pr-4">Deposited Value: </td>
-          <td>
-            <b>${formatBigInt(value, PRICE_PRECISION)}</b>
-          </td>
-        </tr>
+        <tbody>
+          <tr>
+            <td className="pr-4">Oracle Price: </td>
+            <td>
+              <b data-testid={`oracle-price-${baseTokenInfo.symbol}`}>
+                ${formatBigInt(price, PRICE_PRECISION)}
+              </b>
+            </td>
+          </tr>
+          <tr>
+            <td className="pr-4">AMM Price: </td>
+            <td>
+              <b data-testid={`amm-price-${baseTokenInfo.symbol}`}>
+                ${formatBigInt(ammPrice * quotePrice, PRICE_PRECISION * 2)}
+              </b>
+            </td>
+          </tr>
+          <tr>
+            <td className="pr-4">Deposited Balance: </td>
+            <td>
+              <b data-testid={`deposited-balance-${baseTokenInfo.symbol}`}>
+                {formatBigInt(balance, Number(baseTokenInfo.decimals))}{" "}
+                {bSymbol}
+              </b>
+            </td>
+          </tr>
+          <tr>
+            <td className="pr-4">Deposited Value: </td>
+            <td>
+              <b data-testid={`deposited-value-${baseTokenInfo.symbol}`}>
+                ${formatBigInt(value, PRICE_PRECISION)}
+              </b>
+            </td>
+          </tr>
+        </tbody>
       </table>
       <Tabs
         className="w-full mt-4 [&>div]:w-full"
         size="sm"
         selectedKey={action}
         onSelectionChange={(act: any) => setAction(act)}
       >
-        <Tab key="deposit" title="Deposit" className="w-full">
+        <Tab
+          key="deposit"
+          title="Deposit"
+          className="w-full"
+          data-testid={`deposit-tab-${baseTokenInfo.symbol}`}
+        >
           <Input
             label={`Deposit ${bSymbol}`}
             className="text-right text-xs"
@@ -247,25 +261,33 @@ const DemoTokenBox = ({
             placeholder="0"
             type="number"
             size="md"
+            data-testid={`deposit-input-${baseTokenInfo.symbol}`}
           />
           <div className="flex gap-2 w-full mt-4">
             <Button
               className="w-full"
               isDisabled={!shouldApproveFirst}
               onPress={onPressApprove}
+              data-testid={`deposit-approve-${baseTokenInfo.symbol}`}
             >
               Approve
             </Button>
             <Button
               className="w-full"
               isDisabled={!canDeposit}
               onPress={onPressDeposit}
+              data-testid={`deposit-execute-${baseTokenInfo.symbol}`}
             >
               Deposit
             </Button>
           </div>
         </Tab>
-        <Tab key="withdraw" title="Withdraw" className="w-full">
+        <Tab
+          key="withdraw"
+          title="Withdraw"
+          className="w-full"
+          data-testid={`withdraw-tab-${baseTokenInfo.symbol}`}
+        >
           <Input
             label={`Withdraw ${bSymbol}`}
             className="text-right text-xs"
@@ -279,12 +301,14 @@ const DemoTokenBox = ({
             placeholder="0"
             type="number"
             size="md"
+            data-testid={`withdraw-input-${baseTokenInfo.symbol}`}
           />
           <div className="flex gap-2 w-full mt-4">
             <Button
               className="w-full"
               isDisabled={!canWithdraw}
               onPress={onPressWithdraw}
+              data-testid={`withdraw-execute-${baseTokenInfo.symbol}`}
             >
               Withdraw
             </Button>
@@ -408,7 +432,12 @@ const DemoInteraction = (props: DemoInteractionProps) => {
             />
           </div>
           <div>
-            <Button size="lg" color="primary" onPress={onPressBalance}>
+            <Button
+              size="lg"
+              color="primary"
+              onPress={onPressBalance}
+              data-testid="balance-token-button"
+            >
               Balance Token Value
             </Button>
           </div>
@@ -421,9 +450,7 @@ const DemoInteraction = (props: DemoInteractionProps) => {
 export default function DemoApp() {
   const [contractAddressTouched, setContractAddressTouched] =
     useState<boolean>(false);
-  const [contractAddress, setContractAddress] = useState<string>(
-    "0xa5dDBd1D4e7A680eB09dCd28bb21C86f910540B9"
-  );
+  const [contractAddress, setContractAddress] = useState<string>("");
 
   const account = useAccount();
   const blockNumber = useBlockNumber();

config/url.ts

@@ -1,6 +1,11 @@
 import { Chain } from "@rainbow-me/rainbowkit";
 
-export const BASE_API = "https://o.pacmon.suijin.xyz/api";
+const RPC = process.env.NEXT_PUBLIC_RPC || "https://o.pacmon.suijin.xyz/rpc/";
+const EXPLORER =
+  process.env.NEXT_PUBLIC_EXPLORER || "https://o.pacmon.suijin.xyz/explorer/";
+
+export const BASE_API =
+  process.env.NEXT_PUBLIC_API_URL || "https://o.pacmon.suijin.xyz/api";
 
 export const PACMON_CHAIN: Chain = {
   id: 1337,
@@ -14,21 +19,20 @@ export const PACMON_CHAIN: Chain = {
     symbol: "PAC",
   },
   rpcUrls: {
-    public: { http: ["https://o.pacmon.suijin.xyz/rpc/"] },
-    default: { http: ["https://o.pacmon.suijin.xyz/rpc/"] },
+    public: { http: [RPC] },
+    default: { http: [RPC] },
   },
   blockExplorers: {
-    default: { name: "PacmonScan", url: "https://etherscan.io" },
-    etherscan: { name: "PacmonScan", url: "https://etherscan.io" },
+    default: { name: "PacmonScan", url: EXPLORER },
+    etherscan: { name: "PacmonScan", url: EXPLORER },
   },
   contracts: {},
   testnet: true,
 };
 
 // export const BASE_API = "http://localhost:3033";
-
 // export const PACMON_CHAIN: Chain = {
-//   id: 31337,
+//   id: 1337,
 //   name: "Pacmon",
 //   network: "pacmon",
 //   iconUrl: "https://example.com/icon.svg",
@@ -39,12 +43,12 @@ export const PACMON_CHAIN: Chain = {
 //     symbol: "PAC",
 //   },
 //   rpcUrls: {
-//     public: { http: ["http://localhost:8545/"] },
-//     default: { http: ["http://localhost:8545/"] },
+//     public: { http: ["http://localhost:8545"] },
+//     default: { http: ["http://localhost:8545"] },
 //   },
 //   blockExplorers: {
-//     default: { name: "PacmonScan", url: "https://etherscan.io" },
-//     etherscan: { name: "PacmonScan", url: "https://etherscan.io" },
+//     default: { name: "PacmonScan", url: "http://localhost:5100" },
+//     etherscan: { name: "PacmonScan", url: "http://localhost:5100" },
 //   },
 //   contracts: {},
 //   testnet: true,