FEAT: Improve tests (#46)

# FEAT(QA): Replace AVA test-runner with Vitest # FEAT(UI): Improve the "Select Wallet" button behaviour
hoodieshq · Apr 8, 2024 · c621ec2 · c621ec2
1 parent e7f8479
commit c621ec2
Show file tree

Hide file tree

Showing 21 changed files with 609 additions and 686 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18.17.1
+v18.19.1
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -28,7 +28,6 @@
     "@solana/wallet-adapter-wallets": "^0.19.32",
     "@solana/web3.js": "^1.91.0",
     "@tailwindcss/typography": "^0.5.10",
-    "clsx": "^2.1.0",
     "framer-motion": "^11.0.8",
     "next": "14.1.0",
     "react": "^18.2.0",

diff --git a/packages/app/src/app/layout.tsx b/packages/app/src/app/layout.tsx
@@ -1,8 +1,8 @@
 import "./globals.css"
 import * as React from "react"
-import clsx from "clsx"
 import { Inter } from "next/font/google"
 import { Metadata } from "next"
+import { twMerge } from "tailwind-merge"
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })
 
@@ -15,7 +15,7 @@ export default function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en" className={clsx("h-full", inter.variable)}>
+    <html lang="en" className={twMerge("h-full", inter.variable)}>
       <body className="flex min-h-full bg-white antialiased dark:bg-zinc-900">
         <div className="w-full">{children}</div>
       </body>

diff --git a/packages/app/src/features/header.tsx b/packages/app/src/features/header.tsx
@@ -1,7 +1,7 @@
-import clsx from "clsx"
 import { cva } from "class-variance-authority"
 import { forwardRef } from "react"
 import { motion, useScroll, useTransform } from "framer-motion"
+import { twJoin, twMerge } from "tailwind-merge"
 import { WalletMultiButton } from "@solana/wallet-adapter-react-ui"
 
 const motionInner = cva(
@@ -21,7 +21,7 @@ const motionInner = cva(
 
 export const Header = forwardRef<
   React.ElementRef<"div">,
-  { className?: string }
+  React.ComponentPropsWithRef<"div">
 >(function Header({ className }, ref) {
   let { scrollY } = useScroll()
   let bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9])
@@ -30,7 +30,7 @@ export const Header = forwardRef<
   return (
     <motion.div
       ref={ref}
-      className={clsx(
+      className={twMerge(
         className,
         motionInner({ backdrop: "blur", bg: "opaque" }),
       )}
@@ -42,7 +42,7 @@ export const Header = forwardRef<
       }
     >
       <div
-        className={clsx(
+        className={twJoin(
           "absolute inset-x-0 top-full h-px transition",
           "bg-zinc-900/7.5 dark:bg-white/7.5",
         )}

diff --git a/packages/app/src/shared/input.tsx b/packages/app/src/shared/input.tsx
@@ -1,9 +1,6 @@
-import clsx from "clsx"
 import React from "react"
 import { cva, VariantProps } from "class-variance-authority"
-
-// TODO: finalize style
-//  block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm
+import { twMerge } from "tailwind-merge"
 
 const inputVariants = cva(
   "block w-full min-w-64 rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 ",
@@ -47,7 +44,7 @@ export default function Input({
       <div className="relative mt-2 rounded-md shadow-sm">
         <input
           aria-describedby={name}
-          className={clsx(inputVariants(variants), className)}
+          className={twMerge(inputVariants(variants), className)}
           defaultValue={defaultValue}
           id={name}
           name={name}

diff --git a/packages/ui/Anchor.toml b/packages/ui/Anchor.toml
@@ -12,4 +12,4 @@ cluster = "Localnet"
 wallet = "~/.config/solana/id.json"
 
 [scripts]
-test = "ava tests/ --timeout 99s"
+test = "vitest ./tests/e2e.test.ts --run --testTimeout 40000 --reporter=basic"
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -31,7 +31,8 @@
     "local:sb-test": "wait-on tcp:127.0.0.1:6006 && pnpm run test-sb && pnpm run local:sb-kill",
     "local:test-smoke": "concurrently --kill-others-on-fail -n \"SB,TEST\" \"pnpm run local:sb\" \"pnpm run local:sb-test\"",
     "storybook": "storybook dev -p 6006",
-    "test": "ava src --timeout 60s",
+    "test": "pnpm run test-unit --run",
+    "test-unit": "vitest ./src/__tests__/** --bail=1",
     "test-sb": "test-storybook"
   },
   "browserslist": "defaults, not ie <= 11",
@@ -55,6 +56,7 @@
     "debug": "^4.3.4",
     "next": "14.1.0",
     "react-error-boundary": "^4.0.13",
+    "tailwind-merge": "^2.2.2",
     "token-upgrade-ui-shared": "1.0.0"
   },
   "devDependencies": {
@@ -73,7 +75,6 @@
     "@storybook/test": "^7.6.17",
     "@storybook/test-runner": "^0.16.0",
     "@storybook/testing-library": "^0.2.2",
-    "ava": "^6.1.2",
     "axe-playwright": "^2.0.1",
     "concurrently": "^8.2.2",
     "eslint-plugin-storybook": "^0.8.0",
@@ -87,18 +88,11 @@
     "storybook": "^7.6.17",
     "tsup": "^8.0.2",
     "tsx": "^4.7.1",
+    "vitest": "^1.4.0",
     "wait-on": "^7.2.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
-  },
-  "ava": {
-    "extensions": {
-      "ts": "module"
-    },
-    "nodeArguments": [
-      "--loader=tsx"
-    ]
   }
 }
diff --git a/packages/ui/src/__stories__/widgets/token-upgrade.stories.tsx b/packages/ui/src/__stories__/widgets/token-upgrade.stories.tsx
@@ -56,7 +56,7 @@ export const Default: StoryObj<ComponentPropsWithTestId<typeof TokenUpgrade>> =
       const ctx = within(canvasElement)
 
       await step("should render", async () => {
-        await expect(ctx.getByLabelText("Select Wallet")).toBeDisabled()
+        await expect(ctx.getByLabelText("Select Wallet")).not.toBeDisabled()
         await expect(
           ctx.getByRole("spinbutton", { description: "Amount" }),
         ).toBeDisabled()

diff --git a/packages/ui/src/__tests__/entities/token.test.ts b/packages/ui/src/__tests__/entities/token.test.ts
@@ -1,15 +1,9 @@
 import { nativeToUiAmount } from "../../entities/token/index"
-import test from "ava"
+import { expect, test } from "vitest"
 
-test("should convert properly", (t) => {
-  t.deepEqual(nativeToUiAmount(1e9), {
-    uiAmount: 1,
-    uiAmountString: "1.000000000",
-  })
-  t.deepEqual(nativeToUiAmount(1283782348), {
-    uiAmount: 1.283782348,
-    uiAmountString: "1.283782348",
-  })
-
-  t.pass()
+test("should convert properly", () => {
+  expect(nativeToUiAmount(1e9).uiAmount).toEqual(1)
+  expect(nativeToUiAmount(1e9).uiAmountString).toEqual("1.000000000")
+  expect(nativeToUiAmount(1283782348).uiAmount).toEqual(1.283782348)
+  expect(nativeToUiAmount(1283782348).uiAmountString).toEqual("1.283782348")
 })
diff --git a/packages/ui/src/__tests__/entities/transaction.test.ts b/packages/ui/src/__tests__/entities/transaction.test.ts
@@ -1,9 +1,7 @@
 import { fromUiAmount } from "../../entities/transaction/index"
-import test from "ava"
+import { expect, test } from "vitest"
 
-test("should convert properly", (t) => {
-  t.is(fromUiAmount(0.0634524, 9), 63452400)
-  t.is(fromUiAmount(0.066834, 9), 66834000)
-
-  t.pass()
+test("should convert properly", () => {
+  expect(fromUiAmount(0.0634524, 9)).toEqual(63452400)
+  expect(fromUiAmount(0.066834, 9)).toEqual(66834000)
 })
diff --git a/packages/ui/src/features/upgrade-button.tsx b/packages/ui/src/features/upgrade-button.tsx
@@ -1,38 +1,44 @@
-import clsx from "clsx"
 import React from "react"
 import { BaseWalletConnectButton } from "./upgrade-button/base-wallet-connect-button"
 import { BaseWalletSelectButton } from "./upgrade-button/base-wallet-select-button"
-import { useWallet } from "@solana/wallet-adapter-react"
 import { Button } from "../shared/button"
+import { twMerge } from "tailwind-merge"
+import { useWallet } from "@solana/wallet-adapter-react"
 
-interface UpgradeButtonProps extends React.ComponentPropsWithoutRef<"button"> {}
+interface UpgradeButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+  isAllowedUpgrade?: boolean
+}
 
-export function UpgradeButton({ className, ...props }: UpgradeButtonProps) {
+export function UpgradeButton({
+  className,
+  isAllowedUpgrade,
+  ...props
+}: UpgradeButtonProps) {
   const { connected, wallet } = useWallet()
   const noWallet = !Boolean(wallet)
 
   return (
     <div
-      className={clsx(
-        {
-          "[&_.wallet-adapter-dropdown]:w-[100%]": noWallet,
-        },
+      className={twMerge(
         className,
+        noWallet && "[&_.wallet-adapter-dropdown]:w-[100%]",
       )}
     >
       {connected ? (
-        <Button className="h-[48px] w-[100%]" {...props}>
+        <Button
+          className="h-[48px] w-[100%]"
+          disabled={!isAllowedUpgrade}
+          {...props}
+        >
           Upgrade Token
         </Button>
       ) : noWallet ? (
-        <>
-          <BaseWalletSelectButton
-            aria-label="Select Wallet"
-            className="w-[100%] justify-center"
-            role="button"
-            {...props}
-          />
-        </>
+        <BaseWalletSelectButton
+          aria-label="Select Wallet"
+          className="w-[100%] justify-center"
+          role="button"
+          {...props}
+        />
       ) : (
         <BaseWalletConnectButton
           className="w-[100%] justify-center"

diff --git a/packages/ui/src/features/upgrade-button/wallet-button.tsx b/packages/ui/src/features/upgrade-button/wallet-button.tsx
@@ -1,7 +1,7 @@
-import clsx from "clsx"
 import React, { FC } from "react"
 import { Wallet } from "@solana/wallet-adapter-react"
 import { WalletName } from "@solana/wallet-adapter-base"
+import { twMerge } from "tailwind-merge"
 
 type ButtonProps = React.PropsWithChildren<{
   "aria-label"?: string
@@ -74,7 +74,7 @@ export function WalletButton({
   return (
     <Button
       {...props}
-      className={clsx("wallet-adapter-button-trigger", className)}
+      className={twMerge("wallet-adapter-button-trigger", className)}
       startIcon={
         walletIcon && walletName ? (
           <WalletIcon

diff --git a/packages/ui/src/shared/button.tsx b/packages/ui/src/shared/button.tsx
@@ -1,6 +1,6 @@
 import React from "react"
-import clsx from "clsx"
 import { cva, VariantProps } from "class-variance-authority"
+import { twMerge } from "tailwind-merge"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center outline-2 outline-offset-2 transition-colors rounded bg-indigo-600 px-3 py-2 font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:bg-gray-500",
@@ -24,7 +24,7 @@ export function Button({ className, size, ...props }: ButtonProps) {
 
   return (
     <button
-      className={clsx(className, cn)}
+      className={twMerge(className, cn)}
       role="button"
       type="button"
       {...props}

diff --git a/packages/ui/src/widgets/token-upgrade.tsx b/packages/ui/src/widgets/token-upgrade.tsx
@@ -1,12 +1,12 @@
 import "../styles/tailwind.css"
 import * as Form from "@radix-ui/react-form"
 import Amount from "./token-upgrade/amount"
-import clsx from "clsx"
 import Debug from "debug"
 import Destination from "./token-upgrade/destination"
 import React, { useCallback, useMemo } from "react"
 import useTokenAmount from "../entities/token/use-token-amount"
 import { Container } from "./token-upgrade/container"
+import { twMerge } from "tailwind-merge"
 import { UpgradeButton } from "../features/upgrade-button"
 import { useMint } from "../entities/token/use-mint"
 import { useTokenBalance } from "../entities/token/use-token-balance"
@@ -116,7 +116,7 @@ export function TokenUpgradeBase({
 
   return (
     <Form.Root
-      className={clsx(
+      className={twMerge(
         className,
         "flex min-w-80 flex-col overflow-hidden rounded-lg bg-white shadow",
       )}
@@ -145,7 +145,7 @@ export function TokenUpgradeBase({
           </Form.Field>
           <UpgradeButton
             className="pb-4 pt-3.5"
-            disabled={!isAllowedUpgrade}
+            isAllowedUpgrade={isAllowedUpgrade}
             onClick={onTokenUpgrade}
           />
         </Container>

diff --git a/packages/ui/src/widgets/token-upgrade/amount.tsx b/packages/ui/src/widgets/token-upgrade/amount.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react"
 import * as Form from "@radix-ui/react-form"
 import { cva, VariantProps } from "class-variance-authority"
-import clsx from "clsx"
+import { twJoin } from "tailwind-merge"
 
 // FEAT: adjust right padding according the symbol present
 const inputVariants = cva(
@@ -111,9 +111,10 @@ export default function Amount({
         {label}
       </label>
       <div
-        className={clsx("mt-2 flex rounded-md shadow-sm", {
-          "mb-[22px]": !hasBalance && !hasError,
-        })}
+        className={twJoin(
+          "mt-2 flex rounded-md shadow-sm",
+          !hasBalance && !hasError && "mb-[22px]",
+        )}
       >
         {hasBalance && (
           <button

diff --git a/packages/ui/src/widgets/token-upgrade/checkbox.tsx b/packages/ui/src/widgets/token-upgrade/checkbox.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react"
-import clsx from "clsx"
 import * as Checkbox from "@radix-ui/react-checkbox"
 import { CheckIcon } from "@radix-ui/react-icons"
+import { twMerge } from "tailwind-merge"
 
 interface CheckProps extends React.ComponentProps<typeof Checkbox.Root> {
   defaultChecked?: Checkbox.CheckedState
@@ -21,7 +21,7 @@ export default forwardRef<HTMLDivElement, CheckProps>(function Check(
   forwardRef,
 ) {
   return (
-    <div className={clsx(className, "flex items-center")} ref={forwardRef}>
+    <div className={twMerge(className, "flex items-center")} ref={forwardRef}>
       <div className="min-w-0 flex-1 text-sm leading-6">
         <label htmlFor={id} className="font-medium text-gray-900">
           {label}

diff --git a/packages/ui/src/widgets/token-upgrade/container.tsx b/packages/ui/src/widgets/token-upgrade/container.tsx
@@ -1,13 +1,13 @@
-import clsx from "clsx"
 import React from "react"
+import { twMerge } from "tailwind-merge"
 
 export function Container({
   className,
   ...props
 }: React.ComponentPropsWithoutRef<"div">) {
   return (
     <div
-      className={clsx("mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", className)}
+      className={twMerge("mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", className)}
       {...props}
     />
   )