如何实现文档站搭建,与单元测试|青训营笔记

109 阅读2分钟

这是我参加青训营笔记伴学活动的第16天

介绍

vuepress-template是一个简单的VuePress案例模板,目的是让用户可以直接clone这个仓库,作为初始化一个VuePress网站启动项目,然后在这个项目的基础上新增自定义配置和功能。

主要内容(持续更新中) 项目中特别展示了一些小众模板、主题、插件,推荐大家关注和使用

1. 主题

社区已经开发了大量主题,这里列举一些不常见的,但是风格比较独特的主题。比如:vuepress-theme-blogplus 一款简洁的博客主题

2. 插件

插件列表列举了网站上已经安装有效的VuePress插件,包括官方插件、社区插件和小众插件。

我们组的文档站 使用了demo-container的插件,供我们对代码块进行封装,更好地展示,这是我强烈推荐的

image.png 第一步 下载 Vuepress Template 的仓库代码

git clone https://github.com/openHacking/vuepress-template.git

第二步 安装依赖

cd vuepress-template
yarn # 或者npm i

第三步 启动项目,随后即可根据自己的需求修改配置、编写文档内容

npm run docs:dev

第四步 打包项目

npm run docs:build

结果会在docs/.vuepress/目录下生成一个dist文件夹,里面就是打包后的代码

倡议 这些自定义开发的插件和主题,也是一个新的学习渠道。如果你有自己开发的插件或者主题,也欢迎提交项目网址到 VuePress Template 的 issues或者直接提交PR,维护者会考虑收录到插件列表里,作为官方awesome-vuepress列表的补充。

测试

我们使用 Vue Test Utilsjest 一同测试

测试类名

/**
 * @jest-environment jsdom
 */
import { shallowMount } from '@vue/test-utils'
import button from "@/components/Button";
describe('test ToDoList', done => {
    it('test type', () => {
        const wrapper = shallowMount(button, {
            propsData: {
                type: "primarygold"
            }
        })
        expect(wrapper.find('.emui-button--primarygold').exists()).toBe(true);
    }),
        it('test round', () => {
            const wrapper = shallowMount(button, {
                propsData: {
                    round: "round"
                }
            })
            expect(wrapper.find('.round').exists()).toBe(true);
        })

})

测试内容title

/**
 * @jest-environment jsdom
 */
import { shallowMount } from '@vue/test-utils'
import dialog from "@/components/dialog";
describe('test ToDoList', done => {
    it('test title', () => {
        const wrapper = shallowMount(dialog, {
            propsData: {
                title: "emui hello world"
            }
        })
        expect(wrapper.html()).toContain('emui hello world')
    })

})

测试参考文档

组件 | Vue Test Utils (vuejs.org)