feat(explorer): add data-testids to the identity part of the header.

.changeset/fuzzy-jeans-camp.md

@@ -0,0 +1,5 @@
+---
+'explorer': minor
+---
+
+Add test IDs to the app identity section of the header.

apps/explorer-e2e/src/specs/index.spec.ts

@@ -1,17 +1,14 @@
 import { test, expect } from '@playwright/test'
-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 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 page.goto('/block/60000')
+  await expect(page.getByRole('link').getByText('60,000')).toBeVisible()
+  await expect(page.getByText('11 transactions')).toBeVisible()
+  await expect(page.getByText('000000...fa54c1')).toBeVisible()
 })

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>