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

  • 相关阅读:
    ABC065D Built[最小生成树]
    loj2718 「NOI2018」归程[Kruskal重构树+最短路]
    BZOJ1821 部落划分[最小生成树]
    BZOJ4777 [Usaco2017 Open]Switch Grass[最小生成树+权值线段树套平衡树]
    CF888G Xor-MST[最小生成树+01trie]
    Atcoder CODE FESTIVAL 2016 Final G
    BZOJ4883 [Lydsy1705月赛]棋盘上的守卫[最小基环树森林]
    BZOJ3714 [PA2014]Kuglarz[最小生成树]
    BZOJ1601 [Usaco2008 Oct]灌水[最小生成树]
    CF892E Envy[最小生成树]
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8337938.html
Copyright © 2011-2022 走看看