From c621ec25056a3dec75a73d40cdacb9dc2f7b5927 Mon Sep 17 00:00:00 2001 From: Sergo Date: Mon, 8 Apr 2024 15:21:31 +0200 Subject: [PATCH] FEAT: Improve tests (#46) # FEAT(QA): Replace AVA test-runner with Vitest # FEAT(UI): Improve the "Select Wallet" button behaviour --- .nvmrc | 2 +- packages/app/package.json | 1 - packages/app/src/app/layout.tsx | 4 +- packages/app/src/features/header.tsx | 8 +- packages/app/src/shared/input.tsx | 7 +- packages/ui/Anchor.toml | 2 +- packages/ui/package.json | 14 +- .../widgets/token-upgrade.stories.tsx | 2 +- .../ui/src/__tests__/entities/token.test.ts | 18 +- .../__tests__/entities/transaction.test.ts | 10 +- packages/ui/src/features/upgrade-button.tsx | 40 +- .../features/upgrade-button/wallet-button.tsx | 4 +- packages/ui/src/shared/button.tsx | 4 +- packages/ui/src/widgets/token-upgrade.tsx | 6 +- .../ui/src/widgets/token-upgrade/amount.tsx | 9 +- .../ui/src/widgets/token-upgrade/checkbox.tsx | 4 +- .../src/widgets/token-upgrade/container.tsx | 4 +- packages/ui/tests/e2e.test.ts | 95 +- pnpm-lock.yaml | 1054 ++++++++--------- scripts/issue-tokens.mts | 3 +- scripts/utils.mts | 4 +- 21 files changed, 609 insertions(+), 686 deletions(-) diff --git a/.nvmrc b/.nvmrc index 860cc50..60495ee 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18.17.1 +v18.19.1 diff --git a/packages/app/package.json b/packages/app/package.json index 21e6627..2a4ae21 100644 --- 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 index 77fd57f..8426339 100644 --- 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 ( - +
{children}
diff --git a/packages/app/src/features/header.tsx b/packages/app/src/features/header.tsx index 92580e3..20933e1 100644 --- 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 (
> = 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 index 2edb9bb..18ea732 100644 --- 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 index 54ea1ee..68c5fa6 100644 --- 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 index 1023864..3f95f0b 100644 --- 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 (
{connected ? ( - ) : noWallet ? ( - <> - - + ) : ( diff --git a/packages/ui/src/widgets/token-upgrade/amount.tsx b/packages/ui/src/widgets/token-upgrade/amount.tsx index e1866b3..54a847b 100644 --- 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}
{hasBalance && (