zoukankan      html  css  js  c++  java
  • [XState] Using global actions prop for testing

    Let's say we have a State Machine Model:

    import { createMachine, interpret } from "xstate";
    
    const elBox = document.querySelector("#box");
    
    const setPoint = (context, event) => {
      // Set the data-point attribute of `elBox`
      // ...
      elBox.dataset.point = `${event.clientX} - ${event.clientY}`;
    };
    
    const machine = createMachine(
      {
        initial: "idle",
        states: {
          idle: {
            on: {
              mousedown: {
                // Add your action here
                // ...
                target: "dragging",
                actions: [setPoint],
              },
            },
          },
          dragging: {
            on: {
              mouseup: {
                target: "idle",
              },
            },
          },
        },
      }
    );
    
    const service = interpret(machine);
    
    service.onTransition((state) => {
      elBox.dataset.state = state.value;
    });
    
    service.start();
    
    elBox.addEventListener("mousedown", (event) => {
      service.send(event);
    });
    
    elBox.addEventListener("mouseup", (event) => {
      service.send(event);
    });

    We have inline action for 'idle' state when mousedown event happen, it call 'setPoint' function.

    Question is how to test those actions get triggered in Unit testing?

    We can use global 'actions' prop to override existing inline function:

    const machine = createMachine(
      {
        initial: "idle",
        states: {
          idle: {
            on: {
              mousedown: {
                // Add your action here
                // ...
                target: "dragging",
                actions: [setPoint],
              },
            },
          },
          dragging: {
            on: {
              mouseup: {
                target: "idle",
              },
            },
          },
        },
      },
      {
        actions: {
          setPoint: () => {
            console.log("set point");
          },
        },
      }
    );

    Now it will only response with console log. That can be used in Unit testing with some ENV case switcher.

  • 相关阅读:
    ORM是什么?
    mysql 杂谈
    IO model之IO多路复用的触发方式
    IO model之select poll epoll IO多路复用介绍
    IO model
    事件驱动模型介绍
    函数
    商品程序
    随机生成密码
    import radom 和import string
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13348168.html
Copyright © 2011-2022 走看看