added data tests (#54)

* added data tests

* empty state

Author: Ellzer

packages/ui/src/components/header.tsx

@@ -1,5 +1,6 @@
 import type { Protocol } from '@protocols/shared';
 import { CheckIcon, ChevronsUpDownIcon, ExternalLinkIcon, PanelRightIcon } from 'lucide-react';
+import { DataTests } from '../lib/data-tests';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown-menu';
 import { Toggle } from './ui/toggle';
 
@@ -26,7 +27,10 @@ export const Header = ({
   return (
     <div className="flex items-center justify-between p-3 bg-background/30 backdrop-blur-2xl sticky top-0 z-50 border-b border-border">
       <DropdownMenu>
-        <DropdownMenuTrigger className="flex items-center text-xl gap-8 px-3 py-2">
+        <DropdownMenuTrigger
+          data-test={DataTests.protocol_dropdown_trigger}
+          className="flex items-center text-xl gap-8 px-3 py-2"
+        >
           <div className="flex items-center gap-1 leading-7 font-medium">
             {currentProtocol.icon && currentProtocol.icon} {currentProtocol.shortName || currentProtocol.name}
             <span className="text-xl text-muted-foreground">Minitel</span>

packages/ui/src/components/transaction-decoder.tsx

@@ -28,6 +28,7 @@ import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
 import { Textarea } from './ui/textarea';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+import { DataTests } from '../lib/data-tests';
 
 const MAX_TRANSACTION_SIZE = 1048576; // 1MB
 
@@ -99,10 +100,15 @@ export function TransactionDecoder<T>({
     <div className="relative flex flex-col gap-4 items-center justify-center px-4 w-full">
       <div className="flex flex-col items-center gap-y-8 py-8 w-full">
         <div className="gap-4 text-foreground flex flex-col items-center justify-center text-center">
-          <h1 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-semibold leading-tight tracking-tight">
+          <h1
+            data-test={DataTests.transaction_decoder_title}
+            className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-semibold leading-tight tracking-tight"
+          >
             {title}
           </h1>
-          <p className="text-muted-foreground">{subtitle}</p>
+          <p data-test={DataTests.transaction_decoder_subtitle} className="text-muted-foreground">
+            {subtitle}
+          </p>
         </div>
         <div className="flex flex-col gap-4 max-w-5xl w-full mx-auto">
           <Card>
@@ -113,7 +119,7 @@ export function TransactionDecoder<T>({
                 </span>
                 <div className="flex items-center gap-2">
                   <Dialog>
-                    <DialogTrigger asChild>
+                    <DialogTrigger data-test={DataTests.transaction_decoder_info_trigger} asChild>
                       <Button size="icon" variant="outline">
                         <InfoIcon />
                       </Button>
@@ -237,6 +243,7 @@ export function TransactionDecoder<T>({
                         (rawTxInvalid || rawTxTooLarge) && 'border-destructive focus-visible:ring-destructive',
                       )}
                       aria-invalid={rawTxInvalid || rawTxTooLarge}
+                      data-test={DataTests.transaction_decoder_textarea}
                       placeholder={placeholder}
                       id={textareaId}
                       value={rawTransaction}
@@ -280,6 +287,7 @@ export function TransactionDecoder<T>({
                 <span className="text-xl font-semibold">Output</span>
                 <div className="flex items-center justify-between gap-2 overflow-hidden">
                   <div
+                    data-test={DataTests.transaction_decoder_transaction_hash}
                     className={cn(
                       'flex items-center gap-2 bg-transparent dark:bg-input/30 rounded-md p-2 text-sm border border-input min-w-0',
                       hash ? 'text-foreground' : 'text-muted-foreground',
@@ -365,13 +373,21 @@ export function TransactionDecoderTabs<T>({
         </TabsList>
         {decodedTransaction ? (
           <>
-            <TabsContent className="space-y-6 overflow-y-auto" value="summary">
+            <TabsContent
+              data-test={DataTests.transaction_decoder_tab_content}
+              className="space-y-6 overflow-y-auto"
+              value="summary"
+            >
               <div className="space-y-3">
                 {decodedTransaction && renderSummary && renderSummary(decodedTransaction)}
               </div>
             </TabsContent>
 
-            <TabsContent value="json" className="max-h-96 overflow-y-auto border-border border rounded-md p-2 relative">
+            <TabsContent
+              data-test={DataTests.transaction_decoder_tab_content}
+              value="json"
+              className="max-h-96 overflow-y-auto border-border border rounded-md p-2 relative"
+            >
               <div className="flex items-center sticky right-0 top-0 justify-end gap-2 z-10">
                 <CopyButtonIcon
                   variant="outline"
@@ -401,7 +417,7 @@ export function TransactionDecoderTabs<T>({
             </TabsContent>
           </>
         ) : (
-          <TransactionDecoderEmptyState />
+          <TransactionDecoderEmptyState data-test={DataTests.transaction_decoder_empty_state} />
         )}
       </Tabs>
     </div>

packages/ui/src/index.ts

@@ -24,4 +24,5 @@ export * from './components/ui/tooltip';
 export * from './hooks/useIsDarkMode';
 export * from './hooks/useTransactionDecoder';
 export * from './hooks/useUrlParam';
+export * from './lib/data-tests';
 export * from './lib/utils';

packages/ui/src/lib/data-tests.ts

@@ -0,0 +1,10 @@
+export enum DataTests {
+  protocol_dropdown_trigger = 'protocol_dropdown_trigger',
+  transaction_decoder_title = 'transaction_decoder_title',
+  transaction_decoder_subtitle = 'transaction_decoder_subtitle',
+  transaction_decoder_info_trigger = 'transaction_decoder_info_trigger',
+  transaction_decoder_textarea = 'transaction_decoder_textarea',
+  transaction_decoder_transaction_hash = 'transaction_decoder_transaction_hash',
+  transaction_decoder_tab_content = 'transaction_decoder_tab_content',
+  transaction_decoder_empty_state = 'transaction_decoder_empty_state',
+}