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}