chore: Update ui/TokenWrapper tests to vitest

src/ui/CopyClipboard/CopyClipboard.tsx

@@ -44,11 +44,11 @@ const CopyClipboard = React.forwardRef<HTMLButtonElement, CopyClipboardProps>(
       >
         {showSuccess ? (
           <div className="text-ds-primary-green">
-            <Icon name="check" />
+            <Icon name="check" label="check" />
           </div>
         ) : (
           <div className={cn(copyClipboard({ className, variant }))}>
-            <Icon name="clipboardCopy" />
+            <Icon name="clipboardCopy" label="clipboardCopy" />
           </div>
         )}
       </button>

src/ui/TokenWrapper/TokenWrapper.stories.tsx

@@ -0,0 +1,29 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import TokenWrapper from './TokenWrapper'
+
+const meta: Meta<typeof TokenWrapper> = {
+  title: 'Components/TokenWrapper',
+  component: TokenWrapper,
+  argTypes: {
+    truncate: {
+      description: 'Truncate the token',
+      control: 'boolean',
+    },
+    token: {
+      description: 'The token to be displayed',
+      control: 'text',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof TokenWrapper>
+
+export const Default: Story = {
+  render: (args) => <TokenWrapper {...args} />,
+  args: {
+    token: 'randomTokenCopyMe',
+  },
+}

src/ui/TokenWrapper/TokenWrapper.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+
+import TokenWrapper from './TokenWrapper'
+
+describe('TokenWrapper', () => {
+  describe('public scope', () => {
+    it('renders the token', () => {
+      render(<TokenWrapper token="randomToken" />)
+
+      const token = screen.getByText(/randomToken/)
+      expect(token).toBeInTheDocument()
+    })
+
+    it('renders a copy button', () => {
+      render(<TokenWrapper token="randomToken" />)
+
+      const copyButton = screen.getByTestId('clipboardCopy')
+      expect(copyButton).toBeInTheDocument()
+    })
+  })
+
+  describe('public scope with truncated token', () => {
+    it('renders truncated token', () => {
+      const token =
+        'Nostrud tempor irure id consequat cupidatat exercitation ex mollit.'
+      render(<TokenWrapper token={token} truncate={true} />)
+
+      const text = screen.getByText(/Nostrud tempor .../)
+      expect(text).toBeInTheDocument()
+    })
+  })
+})

src/ui/TokenWrapper/TokenWrapper.jsx → src/ui/TokenWrapper/TokenWrapper.tsx

@@ -1,17 +1,27 @@
-import cs from 'classnames'
 import PropTypes from 'prop-types'
 
+import { cn } from 'shared/utils/cn'
 import { CopyClipboard } from 'ui/CopyClipboard'
 
-const TokenWrapper = ({ token, onClick, truncate = false, encodedToken }) => {
+interface TokenWrapperProps {
+  token: string
+  onClick?: React.ComponentProps<typeof CopyClipboard>['onClick']
+  truncate?: boolean
+  encodedToken?: string
+}
+
+const TokenWrapper = ({
+  token,
+  onClick,
+  truncate = false,
+  encodedToken,
+}: TokenWrapperProps) => {
   return (
     <div className="flex flex-row gap-1 overflow-auto">
       <pre
-        className={cs(
-          'font-mono bg-ds-gray-secondary text-ds-gray-octonary h-auto whitespace-pre-line',
-          {
-            'line-clamp-1': truncate,
-          }
+        className={cn(
+          'h-auto whitespace-pre-line bg-ds-gray-secondary font-mono text-ds-gray-octonary',
+          truncate && 'line-clamp-1'
         )}
       >
         {encodedToken ? encodedToken : token}