抛硬币游戏(二):编写测试和UI

October 3, 2019

在之前的文章 Substrate应用 - 抛硬币游戏(一),我们完成了runtime的开发,从而实现了一个自定义功能(即抛硬币游戏)的区块链网络。现在让我们来看一下如何编写测试代码和UI,你也可以直接看最终的模块代码UI代码

测试

重要性

为功能模块编写测试,是软件开发过程中不可缺省的一个环节,完备的测试能够:

  • 确保代码的执行符合预期;
  • 增强重构时的信心;
  • 从代码的使用角度,提升代码的设计等。

通常情况下,测试可以分为以下几种:

  • 单元测试,mock实现代码中的依赖如其它功能模块,仅测试当前函数的功能;
  • 集成测试,不mock实现代码中的依赖,对多个功能模块整体考虑,进行测试;
  • End to End 测试,是面向当前系统与依赖的第三方服务之间的测试。

当我们在使用Substrate进行开发时,主要会使用到单元测试和集成测试的方法,对于不同的场景,可以按需选择。一个最佳实践是,确保自定义的runtime模块有良好的测试覆盖

Rust 测试代码

Rust测试代码通常会和实现代码放在同一个文件或相同的目录下,取决于测试代码的数量,更多内容可以参考Rust book。下面是一个简单的测试用例:

pub fn add_two(a: i32) -> i32 {
    a + 2
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn test_add_two() {
        assert_eq!(4, add_two(2));
    }
}

一些需要注意的点包括:

  • 测试代码使用属性#[cfg(test)]进行标识
  • use super::*用来引入当前模块的功能代码
  • 测试函数通过属性#[test]进行标识
  • 断言方式有:
    • 表达式的值为true:assert!(expression)
    • 表达式的值是期望的值:assert_eq!(expected, expression)
    • 表达式的值不是其它不相关的值:assert_ne!(other, expression)
    • 异常发生:#[should_panic]
    • Substrate提供了自定义的断言:
    • 结果为Ok(())assert_ok!(expreesion)
    • 结果为Err(error_info)assert_err!(expression, error_info)
    • 结果为Err(error_info),并且不修改存储状态assert_noop!(expression, error_info)

运行测试

// 运行当前目录下的src目录和tests目录下的所有测试
cargo test

// 运行当前工作空间的所有package下的测试
cargo test --all

// 运行runtime路径下的所有测试,由cargo.toml的`[dependencies.demo-node-runtime]`标识
cargo test -p demo-node-runtime

// 运行runtime路径下单个模块的测试
cargo test -p demo-node-runtime mymodule

// 获取更多帮助信息
cargo test --help

运行结果大致如下:

running 5 tests
test mymodule::tests::it_works_for_default_value ... ok
test mymodule::tests::play_should_work_for_lose ... ok
test mymodule::tests::set_payment_should_work ... ok
test mymodule::tests::play_should_work_for_win ... ok
test mymodule::tests::play_security_check_should_work ... ok

test result: ok. 5 passed; 0 failed; 0 ignored; 0 measured; 1 filtered out

Runtime 测试

为了测试我们的runtime模块,需要首先引入相关的实现代码和依赖,

use super::*;

use runtime_io::with_externalities;
use primitives::{H256, Blake2Hasher};
// --snip--

Runtime模块的功能被封装在一个结构体中,这里我们定义了一个mock的Test runtime结构体:

pub struct Test;

Test runtime需要实现被测模块以及所依赖的runtime模块的配置接口,回忆一下我们的模块接口定义,自定义的模块接口继承balances的接口,而 balances模块又继承了system的接口

pub trait Trait: balances::Trait {
    type Event: From<Event<Self>> + Into<<Self as system::Trait>::Event>;
}

一些不关心的类型如Event可以用unit代替,这是因为Substrate为unit类型提供了多数接口的默认实现。这样,接口的实现分别是:

impl system::Trait for Test {
    type Origin = Origin;
    // --snip--
}

impl balances::Trait for Test {
    type Balance = u64;
  	type OnFreeBalanceZero = ();
    // --snip--
}

impl Trait for Test {
    type Event = ();
}

我们还可以对用到的模块定义别名,方便后面的使用:

type System = system::Module<Test>;
type Balances = balances::Module<Test>;
type mymodule = Module<Test>;

还记得runtime模块中callable function的第一个参数是Origin枚举类型吗?在实现代码中,construct_runtime!宏通过调用impl_outer_origin!自动为我们添加了Origin的定义。但是在测试代码中,我们需要自己调用impl_outer_origin!帮我们生成runtime所依赖的Origin类型,宏解析后的相关代码可以参考这里

impl_outer_origin! {
		pub enum Origin for Test {}
}

初始化GenesisConfig

GenesisConfig存储了链上的原始状态,通常可以用来初始化:

  • 预置的账户
  • ROOT key
  • 账户的余额等。

这里首先初始化了system模块的GenesisConfig为所需的默认值,接着初始化balances模块,将Account ID为1的账户余额设置为10,Account ID为2的账户余额设置为20,其它的如交易费用等设置为0,方便我们计算测试结果。

fn new_test_ext() -> runtime_io::TestExternalities<Blake2Hasher> {
    let (mut t, mut c) = system::GenesisConfig::<Test>::default().build_storage().unwrap();

    let _ = balances::GenesisConfig::<Test>{
        balances: vec![
            (1, 10),
            (2, 20),
        ],
        transaction_base_fee: 0,
        transaction_byte_fee: 0,
        existential_deposit: 0,
        transfer_fee: 0,
        creation_fee: 0,
        vesting: vec![],
    }.assimilate_storage(&mut t, &mut c).unwrap();

    t.into()
}

测试set_payment函数

我们通过属性#[test]标识了我们的测试函数为set_payment_should_work。当payment值为None时,设置payment为参数传入的值,当payment有值时,不做修改。

#[test]
fn set_payment_should_work() {
    with_externalities(&mut new_test_ext(), || {
        // Set payment when payment is none
        assert_ok!(mymodule::set_payment(Origin::signed(1), 100));
        assert_eq!(mymodule::payment(), Some(100));
        assert_eq!(mymodule::pot(), 100);

        // Set payment when payment is not none
        assert_ok!(mymodule::set_payment(Origin::signed(1), 200));
        assert_eq!(mymodule::payment(), Some(100));
        assert_eq!(mymodule::pot(), 100);
    });
}

测试play函数

前置校验条件测试

  • 函数调用应当是经过签名的
  • Payment中存储的值不应为空
  • 当用户的余额小于Payment中的值时,应返回错误
  • 当用户的余额多于Payment中的值是,应返回正常

    #[test]
    fn play_security_check_should_work() {
    with_externalities(&mut new_test_ext(), || {
        // Test ensure_signed
        assert_noop!(mymodule::play(Origin::ROOT), "bad origin: expected to be a signed origin");
    
        // Test payment must be set
        assert_noop!(mymodule::play(Origin::signed(2)), "Must have payment amount set");
    
        // Check the balances in genesis config
        assert_eq!(Balances::total_balance(&2), 20);
    
        // set payment and pot, higher than the balances
        <Payment<Test>>::put(30);
        <Pot<Test>>::put(30);
    
        assert_noop!(mymodule::play(Origin::signed(2)), "too few free funds in account");
    
        // set payment and pot, lower than the balances
        <Payment<Test>>::put(10);
        <Pot<Test>>::put(10);
        assert_ok!(mymodule::play(Origin::signed(2)));
    })
    }
    

获胜情景测试

  • 首先初始化所需的存储状态
  • 设定随机种子
  • 断言用户获胜后的数据状态

    #[test]
    fn play_should_work_for_win() {
    with_externalities(&mut new_test_ext(), || {
        <Payment<Test>>::put(10);
        <Pot<Test>>::put(30);
        <Nonce<Test>>::put(1);
        System::set_random_seed(H256::from_low_u64_be(100));
    
        assert_ok!(mymodule::play(Origin::signed(2)));
        assert_eq!(mymodule::payment(), Some(10));
        assert_eq!(mymodule::pot(), 10);
        assert_eq!(Balances::total_balance(&2), 40); // 20 - 10 (payment) + 30 (reward)
        assert_eq!(mymodule::nonce(), 2);
    })
    }
    

失败情景测试:

和获胜情景类似,不过我们选用了不同的随机种子,从而使用户失败:

#[test]
fn play_should_work_for_lose() {
    with_externalities(&mut new_test_ext(), || {
        <Payment<Test>>::put(10);
        <Pot<Test>>::put(30);
        <Nonce<Test>>::put(1);
        System::set_random_seed(H256::from_low_u64_be(10));

        assert_ok!(mymodule::play(Origin::signed(2)));
        assert_eq!(mymodule::payment(), Some(10));
        assert_eq!(mymodule::pot(), 40);
        assert_eq!(Balances::total_balance(&2), 10);
        assert_eq!(mymodule::nonce(), 2);
    })
}

完整的测试代码可参考这里.

UI开发

用户体验差是限制区块链技术应用的一个重要方面,实用漂亮的UI可以显著的提升用户满意度。这里我们为开发的抛硬币游戏编写一个简单的前端页面。

这里我们使用的是Parity官方的前端应用模板 substrate-front-end-template,基于

初始化API和状态

根据项目的README文档可以快速启动这一模板应用,默认使用的是本地的节点WebSocket连接,即ws://127.0.0.1:9944,配置位于development.json。通过模板内置的useSubstrate功能函数来创建和Substrate节点交互的辅助组件,如api。

const { api } = useSubstrate();

新建一个自己的组件CoinFlipGame.js,初始化组件所需的state和设置对应state的函数,更多关于userState的解释参考 React官方文档

// The transaction submission status
const [status, setStatus] = useState("");
// The value stored in Payment
const [currentPayment, setCurrentPayment] = useState(0);
// The value stored in Pot
const [potReward, setPotReward] = useState(0);
// The value which will be set to Payment
const [formPayment, setFormPayment] = useState(0);

状态更新

我们使用useEffectapi.query.mymodule的值发生变化时,重新设置currentPayment和potReward状态,当需要清理状态时调用相应的unsubscribe函数。

useEffect(() => {
  let paymentUnsubscribe;
  let potUnsubscribe;
  api.query.mymodule.payment(newPayment => {
    // The Payemnt storage value is an Option<Balance>
    // So we have to check whether it is None first
    // There is also unwrapOr
    if (newPayment.isNone) {
      setCurrentPayment('<None>');
    } else {
      setCurrentPayment(newPayment.unwrap().toNumber());
      setStorePaymentDisabled(true);
    }
  }).then(unsub => {
    paymentUnsubscribe = unsub;
  }).catch(console.error);

  api.query.mymodule.pot(reward => {
    setPotReward(reward.toNumber());
  }).then(unsub => {
    potUnsubscribe = unsub;
  }).catch(console.error);

  return () => paymentUnsubscribe && potUnsubscribe &&
    paymentUnsubscribe() && potUnsubscribe();
}, [api.query.mymodule]);

UI组件

显示Payment和Pot的数据组件,如下:

<Statistic
  label="Current Payment"
  value={currentPayment}
/>
    
<Statistic
  label="Reward in Pot"
  value={potReward}
/>

我们还可以通过输入框设置Payment的初始值,通过Set Payment按钮发送请求到模块的set_payment可调用函数,一旦Payment的值被设置之后,该button的状态就会变成disable。现在,我们可以通过Play按钮玩游戏了,它会发送请求到runtime模块的play函数。这里用到的 TxButton 也是模板内置的一个组件,用来帮我们发送query或transaction请求,监控请求的状态。

<Form>
  <Form.Field>
    <Input
      type="number"
      id="new_payment"
      label="New Payment"
      onChange={(_, { value }) => setFormPayment(value)}
    />
  </Form.Field>
  <Form.Field>
    <TxButton
      accountPair={accountPair}
      label={'Set Payment'}
      disabled={storePaymentDisabled}
      setStatus={setStatus}
      type='TRANSACTION'
      attrs={{
        params: [formPayment],
        tx: api.tx.mymodule.setPayment
      }}
    />
    <TxButton
      accountPair={accountPair}
      label={'Play Game'}
      setStatus={setStatus}
      type='TRANSACTION'
      attrs={{
        params: [],
        tx: api.tx.mymodule.play
      }}
    />
  </Form.Field>
  <div style={{ overflowWrap: 'break-word' }}>{status}</div>
</Form

可调用函数play执行完成后,在Events结果中,可以看到我们定义的mymodule:PlayResult事件,及用户的地址和赢得的奖励,测试结果如下图所示。

coin_flip_play

总结

恭喜你,到这里你已经掌握了基于Substrate开发应用链的基本知识:

  • 实现runtime逻辑
  • 编写测试
  • 前端页面

如果你想学习更多前端开发的知识,请参考Substrate Front-End Tutorial,还可以通过不同的练习如substrate-collectables-workshop,甚至编写自己的业务runtime,来巩固这些知识并熟练应用。

Substrate开发者中心提供了很多学习资料,时常去逛一下,会有不同的收获。

comments powered by Disqus