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.

  • 相关阅读:
    (一)lamp 环境搭建之编译安装apache
    ssl 原理和建立连接过程
    lamp 架构的理解
    diff 命令,防止遗忘
    关于云计算的一些概念理解
    lvs 四层负载相关
    Mac 安装Git
    Harbor镜像仓库v2.1.0_2安装与使用
    CentOS部署Harbor镜像仓库
    从harbor部署到在k8s中使用
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13348168.html
Copyright © 2011-2022 走看看