test(deployment): e2e testing create deployment

.gitignore

@@ -71,11 +71,14 @@ apps/provider-proxy/.env
 apps/stats-web/.env
 .env.*.local
 .env.local
+.env.test
 
 # IDE files
 .idea
 .vscode
 .vscode-test
 
 # Data Folder
-data
+data
+testdata
+test-results

apps/deploy-web/playwright.config.ts

@@ -1,11 +1,8 @@
 import { defineConfig, devices } from "@playwright/test";
+import dotenv from "dotenv";
+import path from "path";
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// import dotenv from 'dotenv';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
+dotenv.config({ path: path.resolve(__dirname, "env/.env.test") });
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -36,34 +33,16 @@ export default defineConfig({
     {
       name: "chromium",
       use: { ...devices["Desktop Chrome"] }
-    },
-
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] }
-    },
-
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] }
     }
 
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',
     //   use: { ...devices['Pixel 5'] },
     // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
 
     /* Test against branded browsers. */
     // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
     //   name: 'Google Chrome',
     //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
     // },

apps/deploy-web/src/components/deployments/DeploymentDepositModal.tsx

@@ -220,7 +220,8 @@ export const DeploymentDepositModal: React.FunctionComponent<DeploymentDepositMo
           side: "right",
           disabled: !amount || isCheckingDepositor || (useDepositor && validGrants.length === 0) || !walletBalance,
           isLoading: isCheckingDepositor,
-          onClick: onDepositClick
+          onClick: onDepositClick,
+          "data-testid": "deposit-modal-continue-button"
         }
       ]}
       onClose={onClose}

apps/deploy-web/src/components/deployments/DeploymentDetail.tsx

@@ -164,11 +164,27 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
 
           <Tabs value={activeTab} onValueChange={onChangeTab}>
             <TabsList className="grid w-full grid-cols-5">
-              <TabsTrigger value="LEASES">Leases</TabsTrigger>
-              {isActive && <TabsTrigger value="LOGS">Logs</TabsTrigger>}
-              {isActive && <TabsTrigger value="SHELL">Shell</TabsTrigger>}
-              {isActive && <TabsTrigger value="EVENTS">Events</TabsTrigger>}
-              <TabsTrigger value="EDIT">Update</TabsTrigger>
+              <TabsTrigger value="LEASES" data-testid="deployment-tab-leases">
+                Leases
+              </TabsTrigger>
+              {isActive && (
+                <TabsTrigger value="LOGS" data-testid="deployment-tab-logs">
+                  Logs
+                </TabsTrigger>
+              )}
+              {isActive && (
+                <TabsTrigger value="SHELL" data-testid="deployment-tab-shell">
+                  Shell
+                </TabsTrigger>
+              )}
+              {isActive && (
+                <TabsTrigger value="EVENTS" data-testid="deployment-tab-events">
+                  Events
+                </TabsTrigger>
+              )}
+              <TabsTrigger value="EDIT" data-testid="deployment-tab-update">
+                Update
+              </TabsTrigger>
             </TabsList>
 
             {activeTab === "EDIT" && deployment && leases && (
@@ -200,6 +216,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
                   leases.map((lease, i) => (
                     <LeaseRow
                       key={lease.id}
+                      index={i}
                       lease={lease}
                       setActiveTab={setActiveTab}
                       ref={leaseRefs[i]}

apps/deploy-web/src/components/deployments/DeploymentDetailTopBar.tsx

@@ -106,7 +106,7 @@ export const DeploymentDetailTopBar: React.FunctionComponent<Props> = ({ address
           <div className="flex items-center">
             <DropdownMenu modal={false}>
               <DropdownMenuTrigger asChild>
-                <Button size="icon" variant="ghost" className="rounded-full">
+                <Button size="icon" variant="ghost" className="rounded-full" data-testid="deployment-detail-dropdown">
                   <MoreHoriz />
                 </Button>
               </DropdownMenuTrigger>
@@ -119,7 +119,11 @@ export const DeploymentDetailTopBar: React.FunctionComponent<Props> = ({ address
                     Redeploy
                   </CustomDropdownLinkItem>
                 )}
-                <CustomDropdownLinkItem onClick={() => onCloseDeployment()} icon={<XmarkSquare fontSize="small" />}>
+                <CustomDropdownLinkItem
+                  onClick={() => onCloseDeployment()}
+                  icon={<XmarkSquare fontSize="small" />}
+                  data-testid="deployment-detail-close-button"
+                >
                   Close
                 </CustomDropdownLinkItem>
               </DropdownMenuContent>