# view-ui      React antd 组件库

**Repository Path**: dhc-cli-dev/view-ui

## Basic Information

- **Project Name**: view-ui      React antd 组件库
- **Description**: dumi+antd 搭建组件库，有相应的单元测试。将原有组件库重写，将原有组件库，重新封装成现有组件库，适用于antd  React 框架。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-06-18
- **Last Updated**: 2023-10-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## view-ui 搭建

### 步骤一： 初始化

```shell
mkdir view-ui && cd view-ui

npx create-dumi

npm install
```

### 操作
```shell
Pick template type: React Libray

Pick npm client: npm (我网速可以，用的npm)

Input NPM package name: view-ui

Input project description: dumi 快速搭建组件库模板库

Input project author (Name <email@example.com>): 作者名字
```

### 安装了一个插件(下载依赖包太慢)

```shell

npm i nrm -g

npm i nrm -g open@8.4.2 -S (由于这个包报错这原因)

npm ls 查看各种镜像

npm use 镜像名字

```
### .dumirc.ts (修改该配置)

```tsx
import { defineConfig } from 'dumi';

export default defineConfig({
  `.dumi-default-header-left { 
      width: 220px !important;
   }`,
  themeConfig: {// 配置模板
    name: 'dumi2-demo',
    nav: [
      { title: '介绍', link: '/guide' },
      { title: '组件', link: '/components/Foo' }, // components会默认自动对应到src文件夹
    ],
  },
}) 

```

### 步骤二：添加单元测试

```shell
npm i jest @testing-library/react @types/jest ts-jest jest-environment-jsdom jest-less-loader typescript@4 -D
```
> 1 touch jest.config.js

```js

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest', // 使用ts-jest预设，支持用ts写单元测试
  testEnvironment: 'jsdom', // 设置测试环境为jsdom环境
  roots: ['./src'], // 查找src目录中的文件
  collectCoverage: true, // 统计覆盖率
  coverageDirectory: 'coverage', // 覆盖率结果输出的文件夹
  transform: {
    '\.(less|css)$': 'jest-less-loader' // 支持less
  },
  // 单元覆盖率统计的文件
  collectCoverageFrom: ['src/**/*.tsx', 'src/**/*.ts', '!src/index.ts', '!src/**/demo/*'],
};

```

> 2、mkdir src/Button/__tests__ && touch src/Button/__tests__/index.test.tsx

```js
// src/Button/__tests__/index.test.tsx

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from '..';

describe('Button组件', () => {
  it('能够正确渲染按钮文字', () => {
    const buttonText = '按钮文字';
    const { getByRole } = render(<Button>{buttonText}</Button>);
    const buttonElement = getByRole('button');
    expect(buttonElement.innerHTML).toBe(buttonText);
  });

  it('能够正确渲染默认样式的按钮', () => {
    const { getByRole } = render(<Button >默认按钮</Button>);
    const buttonElement = getByRole('button');
    expect(buttonElement.classList.contains('dumi-btn')).toBe(true);
  });

  it('能够正确渲染主要样式的按钮', () => {
    const { getByRole } = render(<Button type="primary">主要按钮</Button>);
    const buttonElement = getByRole('button');
    expect(buttonElement.classList.contains('dumi-btn-primary')).toBe(true);
  });

  it('能够触发点击事件', () => {
    const handleClick = jest.fn();
    const { getByRole } = render(<Button type="primary" onClick={handleClick}>点击按钮</Button>);
    const buttonElement = getByRole('button');
    fireEvent.click(buttonElement);
    // 断言函数被调用了一次。
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});
```

>3、npx jest

### 步骤三：基于antd二次开发

```shell
npm i antd -D

mkdir src/ViewButton && touch src/ViewButton/index.tsx

```
```js
// src/ViewButton/index.tsx

import React, { memo } from "react";
import { Button, ButtonProps } from "antd";

type IViewButtonProps = Omit<ButtonProps, 'type'>

const ViewButton: React.FC<IViewButtonProps> = (props) => {

  const { children, ...rest } = props

  return (
    <Button {...rest} type='primary'>
      {children}
    </Button>
  );
};

export default memo(ViewButton);
```

#### src/index.ts 暴露下
```js
export { default as ViewButton } from './ViewButton';
```

#### 添加demo示例
```shell
mkdir src/ViewButton/demo && touch src/ViewButton/demo/base.tsx
```

```js
// src/Button/demo/base.tsx

import React from 'react';
import { ViewButton } from 'dumi2-demo';

export default () => {

  return (
    <ViewButton>默认按钮</ViewButton>
  );
}
```