feat(crux-ui): fix table based tests

dyrector-io · Sep 28, 2023 · b44f8bf · b44f8bf
1 parent fb0888b
commit b44f8bf
Show file tree

Hide file tree

Showing 13 changed files with 42 additions and 66 deletions.
diff --git a/web/crux-ui/e2e/with-login/deployment/deployment-copy.spec.ts b/web/crux-ui/e2e/with-login/deployment/deployment-copy.spec.ts
@@ -39,8 +39,7 @@ const addSecretToImage = async (
 }
 
 const openContainerConfigByDeploymentTable = async (page: Page, containerName: string): Promise<void> => {
-  const instancesTabelBody = await page.locator('.table-row-group')
-  const instanceRows = await instancesTabelBody.locator('.table-row')
+  const instanceRows = await page.locator('table.w-full >> tbody >> tr')
   await expect(instanceRows).toHaveCount(1)
 
   await expect(page.locator(`div.table-cell:has-text("${containerName}")`).first()).toBeVisible()

diff --git a/web/crux-ui/e2e/with-login/deployment/deployment-protection.spec.ts b/web/crux-ui/e2e/with-login/deployment/deployment-protection.spec.ts
@@ -30,8 +30,7 @@ test('Protecting a deployment should fail while an incremental protected deploym
   await createVersion(page, projectId, '2.0.0', 'Incremental')
   await page.click('button:text-is("Deployments")')
 
-  const deploymentsTableBody = await page.locator('.table-row-group')
-  const deploymentsRows = await deploymentsTableBody.locator('.table-row')
+  const deploymentsRows = await page.locator('table.w-full >> tbody >> tr')
   await expect(deploymentsRows).toHaveCount(1)
 
   await deploymentsRows.first().click()

diff --git a/web/crux-ui/e2e/with-login/deployment/deployment.spec.ts b/web/crux-ui/e2e/with-login/deployment/deployment.spec.ts
@@ -133,8 +133,7 @@ test('Select specific instances to deploy', async ({ page }) => {
 
   const { id: deploymentId } = await addDeploymentToVersionlessProject(page, projectId, DAGENT_NODE, { prefix })
 
-  const instanceBody = await page.locator('.table-row-group')
-  const instanceRow = await instanceBody.locator('.table-row')
+  const instanceRow = await page.locator('table.w-full >> tbody >> tr')
 
   await instanceRow.locator('img[alt="check"]:left-of(div:text-is("busybox"))').click()
 
@@ -152,9 +151,7 @@ test('Select specific instances to deploy', async ({ page }) => {
   await page.waitForSelector('button:text-is("Containers")')
   await page.locator('input[placeholder="Search"]').type(prefix)
 
-  const containerBody = await page.locator('.table-row-group')
-  const nodeContainerRow = await containerBody.locator('.table-row')
-
+  const nodeContainerRow = await page.locator('table.w-full >> tbody >> tr')
   await expect(nodeContainerRow).toHaveCount(1)
 })
 

diff --git a/web/crux-ui/e2e/with-login/nodes-deploy.spec.ts b/web/crux-ui/e2e/with-login/nodes-deploy.spec.ts
@@ -47,8 +47,9 @@ test('Second successful deployment should make the first deployment obsolete', a
   await page.waitForSelector('h2:text-is("Versions")')
   await page.screenshot({ path: screenshotPath('deployment-should-be-obsolete'), fullPage: true })
 
-  const deploymentsTableBody = await page.locator('.table-row-group')
-  const deploymentsRows = await deploymentsTableBody.locator('.table-row')
+  await page.pause()
+
+  const deploymentsRows = await page.locator('table.w-full >> tbody >> tr')
 
   await expect(deploymentsRows).toHaveCount(2)
 
@@ -161,9 +162,7 @@ test('Container list should show containers on the node screen', async ({ page }
   const nodeButton = await page.locator(`h3:has-text("${DAGENT_NODE}")`)
   await nodeButton.click()
 
-  const tableBody = await page.locator('.table-row-group')
-
-  const nodeContainerRow = await tableBody.locator('.table-row')
+  const nodeContainerRow = await page.locator('table.w-full >> tbody >> tr')
   await nodeContainerRow.nth(0).waitFor()
 
   const containerRows = await nodeContainerRow.count()

diff --git a/web/crux-ui/e2e/with-login/nodes.spec.ts b/web/crux-ui/e2e/with-login/nodes.spec.ts
@@ -183,9 +183,7 @@ test('Logs should show agent events', async ({ page }) => {
 
   await page.locator('button:has-text("Logs")').click()
 
-  const tableBody = await page.locator('.table-row-group')
-
-  const nodeContainerRow = await tableBody.locator('.table-row')
+  const nodeContainerRow = await page.locator('table.w-full >> tbody >> tr')
   await nodeContainerRow.nth(0).waitFor()
 
   await expect(await nodeContainerRow.locator('div:has-text("Connected")')).toBeVisible()

diff --git a/web/crux-ui/e2e/with-login/project.spec.ts b/web/crux-ui/e2e/with-login/project.spec.ts
@@ -107,15 +107,15 @@ test.describe('Project', () => {
 
     const projNum: number = tileView
       ? await page.locator('div.card.w-full').count()
-      : await page.locator('div.table-row-group div.table-row').count()
+      : await page.locator('table.w-full >> tbody >> tr').count()
     versioned
       ? await page.locator('button:has-text("Versioned")').click()
       : await page.locator('button:has-text("Versionless")').click()
 
     expect(
       tileView
         ? await page.locator('div.card.w-full').count()
-        : await page.locator('div.table-row-group div.table-row').count(),
+        : await page.locator('table.w-full >> tbody >> tr').count(),
     ).toBeLessThan(projNum)
   }
 

diff --git a/web/crux-ui/e2e/with-login/registry.spec.ts b/web/crux-ui/e2e/with-login/registry.spec.ts
@@ -98,9 +98,7 @@ test("Unchecked registry shouldn't search images", async ({ page }) => {
 
   await page.locator('button:text-is("Add")').click()
 
-  const imagesTableBody = await page.locator('.table-row-group')
-  const imagesRows = await imagesTableBody.locator('.table-row')
-
+  const imagesRows = await page.locator('table.w-full >> tbody >> tr')
   await expect(imagesRows).toHaveCount(1)
 })
 

diff --git a/web/crux-ui/e2e/with-login/resource-copy.spec.ts b/web/crux-ui/e2e/with-login/resource-copy.spec.ts
@@ -39,8 +39,7 @@ test.describe('Deleting default version', () => {
     await page.goto(TEAM_ROUTES.project.versions(projectId).details(newVersionId))
     await page.waitForSelector('h2:text-is("Versions")')
 
-    const imagesTableBody = await page.locator('.table-row-group')
-    const imagesRows = await imagesTableBody.locator('.table-row')
+    const imagesRows = await page.locator('table.w-full >> tbody >> tr')
 
     await expect(imagesRows).toHaveCount(1)
     await expect(page.locator('div.table-cell:has-text("nginx")').first()).toBeVisible()
@@ -76,8 +75,7 @@ test.describe('Deleting default version', () => {
     await page.goto(TEAM_ROUTES.project.versions(projectId).details(newVersionId))
     await page.waitForSelector('h2:text-is("Versions")')
 
-    const imagesTableBody = await page.locator('.table-row-group')
-    const imagesRows = await imagesTableBody.locator('.table-row')
+    const imagesRows = await page.locator('table.w-full >> tbody >> tr')
 
     await expect(imagesRows).toHaveCount(1)
     await expect(page.locator('div.table-cell:has-text("nginx")').first()).toBeVisible()
@@ -121,8 +119,7 @@ test.describe('Deleting default version', () => {
 
     await page.locator('button:has-text("Deployments")').click()
 
-    const deploymentsTabelBody = await page.locator('.table-row-group')
-    const deploymentRows = await deploymentsTabelBody.locator('.table-row')
+    const deploymentRows = await page.locator('table.w-full >> tbody >> tr')
 
     await expect(deploymentRows).toHaveCount(1)
     await expect(page.locator(`div.table-cell:has-text("${prefix}")`)).toBeVisible()
@@ -155,16 +152,14 @@ test.describe('Deleting default version', () => {
 
     await page.locator('button:has-text("Deployments")').click()
 
-    const deploymentsTabelBody = await page.locator('.table-row-group')
-    const deploymentRows = await deploymentsTabelBody.locator('.table-row')
+    const deploymentRows = await page.locator('table.w-full >> tbody >> tr')
 
     await expect(deploymentRows).toHaveCount(1)
 
     const viewDeploymentButton = await page.waitForSelector(`[src="/eye.svg"]`)
     await viewDeploymentButton.click()
 
-    const instancesTabelBody = await page.locator('.table-row-group')
-    const instanceRows = await instancesTabelBody.locator('.table-row')
+    const instanceRows = await page.locator('table.w-full >> tbody >> tr')
     await expect(instanceRows).toHaveCount(1)
   })
 
@@ -185,8 +180,7 @@ test.describe('Deleting default version', () => {
     await page.waitForSelector('h2:text-is("Deployments")')
     const ws = await sock
 
-    const instancesTableBody = await page.locator('.table-row-group')
-    const instancesRows = await instancesTableBody.locator('.table-row')
+    const instancesRows = await page.locator('table.w-full >> tbody >> tr')
 
     await expect(instancesRows).toHaveCount(1)
     await expect(page.locator('div.table-cell:has-text("nginx")').first()).toBeVisible()
@@ -218,16 +212,14 @@ test.describe('Deleting default version', () => {
 
     await page.locator('button:has-text("Deployments")').click()
 
-    const deploymentsTabelBody = await page.locator('.table-row-group')
-    const deploymentRows = await deploymentsTabelBody.locator('.table-row')
+    const deploymentRows = await page.locator('table.w-full >> tbody >> tr')
 
     await expect(deploymentRows).toHaveCount(1)
 
     const viewDeploymentButton = await page.waitForSelector(`[src="/eye.svg"]`)
     await viewDeploymentButton.click()
 
-    const instancesTabelBody = await page.locator('.table-row-group')
-    const instanceRows = await instancesTabelBody.locator('.table-row')
+    const instanceRows = await page.locator('table.w-full >> tbody >> tr')
     await expect(instanceRows).toHaveCount(1)
 
     await expect(page.locator('div.table-cell:has-text("nginx")').first()).toBeVisible()
@@ -265,11 +257,11 @@ test.describe("Deleting copied deployment's parent", () => {
     await page.waitForSelector('h2:text-is("Versions")')
 
     await page.locator('button:has-text("Deployments")').click()
-    await expect(page.locator('.table-row-group .table-row')).toHaveCount(1)
+    await expect(page.locator('table.w-full >> tbody >> tr')).toHaveCount(1)
 
     await page.goto(TEAM_ROUTES.deployment.details(deploymentCopyId))
     await page.waitForSelector('h2:text-is("Deployments")')
-    await expect(page.locator('.table-row-group .table-row')).toHaveCount(1)
+    await expect(page.locator('table.w-full >> tbody >> tr')).toHaveCount(1)
   })
 
   test('should not affect the instance config of the child deployment', async ({ page }) => {
@@ -287,8 +279,7 @@ test.describe("Deleting copied deployment's parent", () => {
     await page.waitForSelector('h2:text-is("Deployments")')
     const ws = await sock
 
-    const instancesTableBody = await page.locator('.table-row-group')
-    const instancesRows = await instancesTableBody.locator('.table-row')
+    const instancesRows = await page.locator('table.w-full >> tbody >> tr')
 
     await expect(instancesRows).toHaveCount(1)
     await expect(page.locator('div.table-cell:has-text("nginx")').first()).toBeVisible()
@@ -317,7 +308,7 @@ test.describe("Deleting copied deployment's parent", () => {
     await page.locator('button:has-text("Copy")').click()
     await waitForURLExcept(page, { startsWith: `${TEAM_ROUTES.deployment.list()}/`, except: currentUrl })
     await page.waitForSelector('h2:text-is("Deployments")')
-    await expect(page.locator('.table-row-group')).toBeVisible()
+    await expect(page.locator('table.w-full >> tbody >> tr')).toBeVisible()
 
     await deleteDeployment(page, parentDeploymentId)
 
@@ -326,16 +317,14 @@ test.describe("Deleting copied deployment's parent", () => {
 
     await page.locator('button:has-text("Deployments")').click()
 
-    const deploymentsTabelBody = await page.locator('.table-row-group')
-    const deploymentRows = await deploymentsTabelBody.locator('.table-row')
+    const deploymentRows = await page.locator('table.w-full >> tbody >> tr')
 
     await expect(deploymentRows).toHaveCount(1)
 
     const viewDeploymentButton = await page.waitForSelector(`[src="/eye.svg"]`)
     await viewDeploymentButton.click()
 
-    const instancesTabelBody = await page.locator('.table-row-group')
-    const instanceRows = await instancesTabelBody.locator('.table-row')
+    const instanceRows = await page.locator('table.w-full >> tbody >> tr')
     await expect(instanceRows).toHaveCount(1)
 
     await expect(page.locator('div.table-cell:has-text("nginx")').first()).toBeVisible()

diff --git a/web/crux-ui/e2e/with-login/template.spec.ts b/web/crux-ui/e2e/with-login/template.spec.ts
@@ -39,9 +39,7 @@ const testVersionlessTemplate = async (
   const projectId = await createProjectFromTemplate(page, templateName, projectName, 'versionless')
 
   await expect(page).toHaveURL(TEAM_ROUTES.project.details(projectId))
-
-  const imageTableBody = await page.locator('.table-row-group')
-  const imageRows = await imageTableBody.locator('.table-row')
+  const imageRows = await page.locator('table.w-full >> tbody >> tr')
   await expect(imageRows).toHaveCount(expectedImages)
 
   return projectId
@@ -61,8 +59,7 @@ const testVersionedTemplate = async (
   await page.waitForURL(`${TEAM_ROUTES.project.details(projectId)}/versions/**`)
   await page.waitForSelector('h2:text-is("Versions")')
 
-  const imageTableBody = await page.locator('.table-row-group')
-  const imageRows = await imageTableBody.locator('.table-row')
+  const imageRows = await page.locator('table.w-full >> tbody >> tr')
   await expect(imageRows).toHaveCount(expectedImages)
 
   return projectId

diff --git a/web/crux-ui/e2e/with-login/version.spec.ts b/web/crux-ui/e2e/with-login/version.spec.ts
@@ -41,8 +41,7 @@ test("New version should get the default version's images and deployments", asyn
   await page.goto(TEAM_ROUTES.project.versions(projectId).details(childVersionId, { section: 'images' }))
   await page.waitForSelector('h2:text-is("Versions")')
 
-  const imagesTableBody = await page.locator('.table-row-group')
-  const imagesRows = await imagesTableBody.locator('.table-row')
+  const imagesRows = await page.locator('table.w-full >> tbody >> tr')
 
   await expect(imagesRows).toHaveCount(1)
 
@@ -74,8 +73,7 @@ test('Change default version should work', async ({ page }) => {
   await page.goto(TEAM_ROUTES.project.versions(projectId).details(versionThreeId, { section: 'images' }))
   await page.waitForSelector('h2:text-is("Versions")')
 
-  const imagesTableBody = await page.locator('.table-row-group')
-  const imagesRows = await imagesTableBody.locator('.table-row')
+  const imagesRows = await page.locator('table.w-full >> tbody >> tr')
 
   await expect(imagesRows).toHaveCount(1)
   await expect(await page.locator('.table-cell:has-text("redis")').first()).toBeVisible()
@@ -100,14 +98,12 @@ test('Increase version should work', async ({ page }) => {
   await page.waitForURL(`${TEAM_ROUTES.project.details(projectId)}/versions/**`)
   await page.waitForSelector('h2:text-is("Versions")')
 
-  const imagesTableBody = await page.locator('.table-row-group')
-  const imagesRows = await imagesTableBody.locator('.table-row')
+  const imagesRows = await page.locator('table.w-full >> tbody >> tr')
 
   await expect(imagesRows).toHaveCount(1)
   await expect(await page.locator('div.table-cell:has-text("nginx")').first()).toBeVisible()
 
-  const deploymentsTableBody = await page.locator('.table-row-group')
-  const deploymentsRow = await deploymentsTableBody.locator('.table-row')
+  const deploymentsRow = await page.locator('table.w-full >> tbody >> tr')
 
   await expect(deploymentsRow).toHaveCount(1)
 })
diff --git a/web/crux-ui/src/components/projects/versions/deployments/deployment-token-card.tsx b/web/crux-ui/src/components/projects/versions/deployments/deployment-token-card.tsx
@@ -40,11 +40,11 @@ const DeploymentTokenCard = (props: DeploymentTokenCardProps) => {
 
           <span>{t('created')}</span>
 
-          <span>{utcDateToLocale(token.createdAt)}</span>
+          <span suppressHydrationWarning>{utcDateToLocale(token.createdAt)}</span>
 
           <span>{t('tokens:expiresAt')}</span>
 
-          <span>{token.expiresAt ? utcDateToLocale(token.expiresAt) : t('common:never')}</span>
+          <span suppressHydrationWarning>{token.expiresAt ? utcDateToLocale(token.expiresAt) : t('common:never')}</span>
 
           <DyoButton className="col-span-2 px-6 ml-auto mt-2" secondary onClick={onRevoke}>
             {t('tokens:revoke')}

diff --git a/web/crux-ui/src/components/projects/versions/deployments/deployment-view-list.tsx b/web/crux-ui/src/components/projects/versions/deployments/deployment-view-list.tsx
@@ -59,6 +59,7 @@ const DeploymentViewList = (props: DeploymentViewListProps) => {
           sortable
           sortField="image.createdAt"
           sort={sortDate}
+          suppressHydrationWarning
           body={(it: Instance) => (it.image.createdAt ? utcDateToLocale(it.image.createdAt) : t('common:new'))}
         />
         <DyoColumn

diff --git a/web/crux-ui/src/elements/dyo-table.tsx b/web/crux-ui/src/elements/dyo-table.tsx
@@ -225,10 +225,13 @@ const DyoTable = <T,>(props: React.PropsWithChildren<DyoTableProps<T>>) => {
     setData(sorted)
   }, [propData, sort])
 
-  const pageItems = data.slice(
-    pagination.pageNumber * pagination.pageSize,
-    pagination.pageNumber * pagination.pageSize + pagination.pageSize,
-  )
+  const pageItems =
+    propPagination === 'client'
+      ? data.slice(
+          pagination.pageNumber * pagination.pageSize,
+          pagination.pageNumber * pagination.pageSize + pagination.pageSize,
+        )
+      : data
 
   return (
     <table className={clsx('table-fixed', className ?? 'w-full')}>