Merge pull request #101 from BuidlerDAO/nig-669

feat: 数字展示组件新增快照

jest.config.js

@@ -4,6 +4,31 @@ module.exports = {
   moduleNameMapper: {
     '\\.(scss|sass|css)$': 'identity-obj-proxy',
     '^@/(.*)$': '<rootDir>/src/$1',
+    'lodash-es': 'lodash',
   },
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  globals: {
+    'ts-jest': {
+      diagnostics: {
+        ignoreCodes: [1343],
+      },
+      astTransformers: {
+        before: [
+          {
+            path: 'node_modules/ts-jest-mock-import-meta', // or, alternatively, 'ts-jest-mock-import-meta' directly, without node_modules.
+            options: {
+              metaObjectReplacement: {
+                env: {
+                  VITE_SOCKET_BASE_URL: 'wss://dev-chat-xfans-api.buidlerdao.xyz',
+                  VITE_ROOM_BASE_URL: 'https://dev-chat-xfans-api.buidlerdao.xyz',
+                  VITE_CONTRACT_BASE_URL: 'https://test-mpc-xfans-api.buidlerdao.xyz',
+                  VITE_BASE_URL: 'https://test-xfans-api.d.buidlerdao.xyz',
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
 };

package.json

@@ -107,6 +107,7 @@
     "stylelint-config-standard": "26.0.0",
     "tailwindcss": "3.1.8",
     "ts-jest": "28.0.7",
+    "ts-jest-mock-import-meta": "1.2.0",
     "ts-node": "10.9.1",
     "typescript": "4.7.4",
     "vite": "2.9.14"

src/components/NumberDisplayer.test.tsx

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/react';
+
+import { NumberDisplayer } from './NumberDisplayer';
+
+it('balance should display well', () => {
+  expect(render(<NumberDisplayer text="0.000000180813661601" />).container).toMatchSnapshot();
+});
+it('bignumber should be transform automatically', () => {
+  expect(render(<NumberDisplayer text="3368437500000000" />).container).toMatchSnapshot();
+});
+it('integer should be append two zero to tail', () => {
+  expect(render(<NumberDisplayer text="3" />).container).toMatchSnapshot();
+});
+it('if interger part great than 1, decimal part should have 2 decimals', () => {
+  expect(render(<NumberDisplayer text="3.145" />).container).toMatchSnapshot();
+});
+it('if interger part less than 1, decimal part should have 4 decimals', () => {
+  expect(render(<NumberDisplayer text="0.145" />).container).toMatchSnapshot();
+});
+it('if interger part great than 1, decimal part should round into 4 decimals', () => {
+  expect(render(<NumberDisplayer text="0.14235" />).container).toMatchSnapshot();
+});
+
+it('should throw error if text is not string', () => {
+  expect(() =>
+    render(<NumberDisplayer text={3.14 as unknown as string} />)
+  ).toThrowErrorMatchingSnapshot();
+});

src/components/NumberDisplayer.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
+import CircularProgress from '@mui/material/CircularProgress';
 import BigNumber from 'bignumber.js';
-import Loading from './Loading';
-import CircularProgress, { CircularProgressProps } from '@mui/material/CircularProgress';
 
 type NumberDisplayerProps = {
   text?: string;
   className?: string;
-  /**
-   * @default true
-   */
-  isBigNumber?: boolean;
   /**
    * @default false
    */
@@ -21,12 +16,10 @@ type NumberDisplayerProps = {
  *
  * eg. 0.0{4}5252
  */
-export function NumberDisplayer({
-  text = '0',
-  className,
-  isBigNumber = true,
-  loading = false,
-}: NumberDisplayerProps) {
+export function NumberDisplayer({ text = '0', className, loading = false }: NumberDisplayerProps) {
+  // 防止不会使用，或者错误传错类型，有助于开发阶段尽早发现问题
+  if (typeof text !== 'string') throw new Error('text should be string');
+  const isBigNumber = BigNumber.isBigNumber(text);
   // 转成处理过后的字符串形式
   const number = isBigNumber
     ? new BigNumber(text).dividedBy(new BigNumber(Math.pow(10, 18))).toFixed()

src/components/__snapshots__/NumberDisplayer.test.tsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`balance should display well 1`] = `
+<div>
+  <span>
+    0.0{6}1808
+  </span>
+</div>
+`;
+
+exports[`bignumber should be transform automatically 1`] = `
+<div>
+  <span>
+    3368437500000000.00
+  </span>
+</div>
+`;
+
+exports[`if interger part great than 1, decimal part should have 2 decimals 1`] = `
+<div>
+  <span>
+    3.15
+  </span>
+</div>
+`;
+
+exports[`if interger part great than 1, decimal part should round into 4 decimals 1`] = `
+<div>
+  <span>
+    0.1424
+  </span>
+</div>
+`;
+
+exports[`if interger part less than 1, decimal part should have 4 decimals 1`] = `
+<div>
+  <span>
+    0.1450
+  </span>
+</div>
+`;
+
+exports[`integer should be append two zero to tail 1`] = `
+<div>
+  <span>
+    3.00
+  </span>
+</div>
+`;
+
+exports[`should throw error if text is not string 1`] = `"text should be string"`;

src/welcome/Wallet/BuyModal.tsx

@@ -272,7 +272,7 @@ const BuyModal = ({ onClose }: BuyModalProps) => {
             <div className="flex items-center justify-center space-x-1 rounded-full bg-[#F5F5F5] px-5 py-1">
               <Icon1 />
               <span className="text-lg font-medium">
-                <NumberDisplayer text={balance} isBigNumber={false} loading={loadingBalance} />
+                <NumberDisplayer text={balance} loading={loadingBalance} />
               </span>
             </div>
           </div>

src/welcome/Wallet/SellModal.tsx

@@ -302,7 +302,7 @@ const SellModal = ({ onClose }: SellModalProps) => {
             <div className="flex items-center justify-center space-x-1 rounded-full bg-[#F5F5F5] px-5 py-1">
               <Icon1 />
               <span className="text-lg font-medium">
-                <NumberDisplayer text={balance} isBigNumber={false} loading={loadingBalance} />
+                <NumberDisplayer text={balance} loading={loadingBalance} />
               </span>
             </div>
           </div>

src/welcome/Wallet/WithDraw.tsx

@@ -122,7 +122,6 @@ const WithDraw = ({ onClose }: Props) => {
             <NumberDisplayer
               className="text-base font-bold text-[#9A6CF9]"
               text={balance.toString()}
-              isBigNumber={false}
             />
           </div>
         </div>

src/welcome/Wallet/index.tsx

@@ -109,11 +109,7 @@ const Wallet = (props: { back?: () => void; logout?: () => void }) => {
               <div className="flex items-center space-x-1">
                 <Icon />
 
-                <NumberDisplayer
-                  className="text-base font-bold text-[#9A6CF9]"
-                  text={balance}
-                  isBigNumber={false}
-                />
+                <NumberDisplayer className="text-base font-bold text-[#9A6CF9]" text={balance} />
               </div>
             </div>