test(explorer): fix specificity issue with homepage test

SiaFoundation · Oct 22, 2024 · 5271e73 · 5271e73
1 parent 7fe865b
commit 5271e73
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -57,3 +57,6 @@ dist
 .nx/cache
 
 bin/
+
+# playwright
+/playwright-report
diff --git a/apps/explorer-e2e/src/specs/index.spec.ts b/apps/explorer-e2e/src/specs/index.spec.ts
@@ -3,15 +3,15 @@ import { fillTextInputByName } from '@siafoundation/e2e'
 
 test('homepage', async ({ page }) => {
   await page.goto('/')
-  await expect(page.getByText('siascan')).toBeVisible()
-  await expect(page.getByText('zen')).toBeVisible()
+  await expect(page.getByTestId('explorer-identity-appName')).toBeVisible()
+  await expect(page.getByTestId('explorer-identity-network')).toBeVisible()
 })
 
 test('look up and view a block by block number', async ({ page }) => {
   await page.goto('/')
-  await fillTextInputByName(page, 'query', '3000')
+  await fillTextInputByName(page, 'query', '60000')
   await page.keyboard.press('Enter')
-  await expect(page.getByRole('link').getByText('3,000')).toBeVisible()
-  await expect(page.getByText('1 transactions')).toBeVisible()
-  await expect(page.getByText('000000...647f7f')).toBeVisible()
+  await expect(page.getByRole('link').getByText('60,000')).toBeVisible()
+  await expect(page.getByText('11 transactions')).toBeVisible()
+  await expect(page.getByText('000000...fa54c1')).toBeVisible()
 })
diff --git a/apps/explorer/components/Layout/Navbar.tsx b/apps/explorer/components/Layout/Navbar.tsx
@@ -16,25 +16,32 @@ type Props = {
 
 export function Navbar({ appName, network, homeHref, children }: Props) {
   return (
-    <div className={cx("py-3 z-10 bg-white dark:bg-graydark-50 border-b border-gray-200 dark:border-graydark-200",
-      network === 'mainnet' ? (
-        "border-t-4  border-t-green-500 dark:border-t-green-400"
-      ) : '',
-      network === 'zen' ? (
-        "border-t-4  border-t-amber-500 dark:border-t-amber-400"
-      ) : '',
-    )}>
+    <div
+      className={cx(
+        'py-3 z-10 bg-white dark:bg-graydark-50 border-b border-gray-200 dark:border-graydark-200',
+        network === 'mainnet'
+          ? 'border-t-4  border-t-green-500 dark:border-t-green-400'
+          : '',
+        network === 'zen'
+          ? 'border-t-4  border-t-amber-500 dark:border-t-amber-400'
+          : ''
+      )}
+    >
       <Container size="4" className="relative">
         <div className="flex items-center justify-between gap-2">
           <div className="relative z-10 flex">
             <Link href={homeHref} underline="none">
-              <div className="flex items-center gap-1.5 mr-2">
+              <div
+                className="flex items-center gap-1.5 mr-2"
+                data-testid="explorer-identity"
+              >
                 <Logo size={35} />
                 {appName && (
                   <Heading
                     font="mono"
                     size="24"
                     className="hidden pl-0 pr-px md:block tracking-tight relative -top-px"
+                    data-testid="explorer-identity-appName"
                   >
                     {appName}
                   </Heading>
@@ -43,6 +50,7 @@ export function Navbar({ appName, network, homeHref, children }: Props) {
                   <Text
                     className="bg-amber-500 dark:bg-amber-400 rounded py-0 px-2 hidden sm:flex"
                     color="lo"
+                    data-testid="explorer-identity-network"
                   >
                     {network}
                   </Text>