zoukankan      html  css  js  c++  java
  • [MST] Test mobx-state-tree Models by Recording Snapshots or Patches

    Testing models is straightforward. Especially because MST provides powerful tools to track exactly how your state changes over time. Track snapshots, action invocations or even patches to verify the correctness of your actions!

    In this lesson you will learn:

    • To obtain immutable snapshots of the state using getSnapshot
    • To record snapshots using onSnapshot
    • To store and test modifications over time using onPatch
    • Using Jest's snapshot test feature to verify snapshots and patches
    • That MST can infer the type of a snapshot for you

    Instead of doing test like:

    it("can add new items", () => {
        const list = WishList.create()
        list.add(
            WishListItem.create({
                name: "Chesterton",
                price: 10
            })
        )
    
        expect(list.items.length).toBe(1)
        expect(list.items[0].name).toBe("Chesterton")
        list.items[0].changeName("Book of G.K. Chesterton")
        expect(list.items[0].name).toBe("Book of G.K. Chesterton")
    })

    We can use snapshot, a more powerful way to test state:

    Using 'getSnaphost' from 'mobx-state-tree' and 'toMatchSnapshot()' from the Jest:

    it("can add new items", () => {
        const list = WishList.create()
        list.add({
            name: "Chesterton",
            price: 10
        })
    
        expect(getSnapshot(list)).toMatchSnapshot()
    
        expect(states).toMatchSnapshot()
    })

    We can also use a listener to listen the state changes:

    it("can add new items", () => {
        const list = WishList.create()
        const states = []
        onSnapshot(list, snapshot => {
            states = [...state, snapshot]
        })
    
        list.add({
            name: "Chesterton",
            price: 10
        })
    
    
        expect(getSnapshot(list)).toMatchSnapshot()
    
        expect(states).toMatchSnapshot()
    })

    Sometimes we might don't need to check the whole state tree, we only change part of state, such as an object's name, then what we can use is 'onPatch' from 'mobx-state-tree':

    it("can add new items - 2", () => {
        const list = WishList.create()
        const patches = []
        onPatch(list, patch => {
            patches.push(patch)
        })
    
        list.add({
            name: "Chesterton",
            price: 10
        })
    
        list.items[0].changeName("Google")
    
        expect(patches).toMatchSnapshot()
    })

    In the code, we only change the name:

    list.items[0].changeName("Book of G.K. Chesterton")

    Patch snapshot looks like:

    exports[`can create a wishlist - onPatch toMatchSnapshot 1`] = `
    Array [
      Object {
        "op": "replace",
        "path": "/items/0/name",
        "value": "Google",
      },
    ]
    `;

    The 'path' prop tells which prop on the object has been changed to what.

    Therefore it is also easy to do undo redo.

    • onPatch(model, listener) attaches a patch listener to the provided model, which will be invoked whenever the model or any of its descendants is mutated
    • applyPatch(model, patch) applies a patch (or array of patches) to the provided model
    • revertPatch(model, patch) reverse applies a patch (or array of patches) to the provided model. This replays the inverse of a set of patches to a model, which can be used to bring it back to its original state

    Link

  • 相关阅读:
    安卓模拟器黑屏
    关系型数据库的1NF、2NF、3NF
    flowable数据库详解
    spring事务传播行为详解
    springboot整合activity
    各种java面试题目
    springCloud中增加gateway(超详细)
    mysql实现主从复制
    flowable整合springboot
    window安装linux系统
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8337938.html
Copyright © 2011-2022 走看看