完成人生的第一次代码贡献 - 新手村任务

3,959 阅读3分钟

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

任务列表

  • 任务一: 做一个合格的代码贡献者
    • 如何下载代码?
    • 如何运行代码?
    • 如何给天天造轮子提交代码贡献?
  • 任务二: 编写一个符合TDD标准的代码
  • 如何使用TDD(测试驱动方式)开发一个Helloworld?

最近然叔的天天造轮子栏目得到了大家的欢迎,但是吃瓜的多,真正加进来的少呀,

为了不做那种只看球,不踢球的中国球迷。

Snip20210723_12.png

然叔特意给打大家带来了,天天造轮子新手村任务

任务一:做一个合格的代码贡献者

Snip20210804_2.png

下载和提交代码

首先我们说说, 如何下载和提交代码 这个主要都是git相关操作。

fork代码

登陆github

github.com/su37josephx…

image.png

image.png

image.png

image.png

image.png

clone代码

然后你就可以在自己的github中下载你的代码了。

注意 不是su37josephxia/wheel-awesome

注意 不是su37josephxia/wheel-awesome

注意 不是su37josephxia/wheel-awesome

git clone git@github.com:youname/wheel-awesome.git

image.png

同步最新代码

首先说一下为什么要这么做,这是因为在你开发的时候,其他人也在做,很有可能你fork的代码已经不是最新代码了 这时候你就需要不断更新你的代码 至少保证 push前 更新一次,这样才能确保不和主版本库代码冲突。

首先 建立一个新的origin(源)

添加新远程分支

这个只需要做一次

git remote add upstream git@github.com:su37josephxia/wheel-awesome.git

拉去合并远程分支到master分支

这个需要随时做 保持你的master分支永远是官方最新成果。

# 抓取源仓库修改 master分支
git fetch upstream master
# 切换分支
git checkout master
# 合并远程分支
git merge upstream/master
复制代码

image.png

编写代码

后面的章节我们会讲如何跟新代码 这里面我们就做一个基础的代码更新练习。 大家可以作为练习把自己的名字更新到天才榜中。

image.png

commit代码

git add .
git commit -am 'add ranshu to helloworld '

image.png

push代码

git push

image.png

提交PullRequest到造轮子项目

image.png

image.png

image.png

image.png

后面就等然叔给你commit了 , 以下然叔我的动作,你那里没有 看看就行了

image.png

任务二:编写一个符合TDD标准的代码

开源代码,自动化测试试标配。主要用于回归测试。 比如你提交了一行代码,代码管理者需要在最短时间分析出他对以前功能的影响。最有效的方法就是跑一遍原来已经编写好的测试用例。

反过来你的代码也一定要由自动化测试case才可以。

运行和测试代码

安装依赖

image.png

运行测试用例

image.png

编写Helloworld代码

module.exports = (callback) => {
    callback && callback('hi')
    return 'hello world'
}

编写测试用例

describe("Helloworld", () => {
  test("返回参数正确", () => {
    const hello = require("../index");

    const fn = jest.fn();
    hello();
    expect(hello(fn)).toBe("hello world");
  });

  test("回调函数被正确调用", () => {
    const hello = require("../index");

    const fn = jest.fn();
    hello(fn);

    const calls = fn.mock.calls;
    expect(calls.length).toBe(1);
    expect(calls[0][0]).toBe("hi");
  });
});

image.png

往期文章

【Vue3官方教程】🎄万字笔记 | 同步导学视频

[Vue官方教程笔记]- 尤雨溪手写mini-vue

如何参加开源项目-如何给Vue3.0提PR

做了一夜动画,让大家十分钟搞懂Webpack