todo.machine.js

import { Machine, assign } from 'xstate';

export const todoViewMachine = Machine({
  id: 'Todo',
  context: {
    todosFilter: 'All',
    title: '',
    index: 0,
  },
  on: {
    FILTER_CHANGE: {
      target: 'Unknown.hist',
      actions: assign({
        todosFilter: (_, event) => event.value,
      }),
    },
    'MARK.Completed': 'Unknown.Completed',
    'MARK.Active': 'Unknown.Active',
  },
  initial: 'Unknown',
  states: {
    Unknown: {
      initial: 'Active',
      states: {
        hist: {
          type: 'history',
          target: 'Active',
        },
        Completed: {
          on: {
            '': [
              {
                target: '#Todo.ShownCompleted',
                cond: ({ todosFilter }) => todosFilter !== 'Active',
              },
              { target: '#Todo.HiddenCompleted' },
            ],
          },
        },
        Active: {
          on: {
            '': [
              {
                target: '#Todo.ShownActive',
                cond: ({ todosFilter }) => todosFilter !== 'Completed',
              },
              { target: '#Todo.HiddenActive' },
            ],
          },
        },
      },
    },
    HiddenCompleted: {
      on: { CLEAR_COMPLETED: 'Deleted' },
      meta: {
        test: () => {
          cy.get('.todo-list li').should('not.exist');
          cy.get('.main').should('be.visible');
          cy.get('.footer').should('be.visible');
        },
      },
    },
    HiddenActive: {
      meta: {
        test: () => {
          cy.get('.todo-list li').should('not.exist');
          cy.get('.main').should('be.visible');
          cy.get('.footer').should('be.visible');
        },
      },
    },
    ShownCompleted: {
      on: {
        TODO_TOGGLE: 'Unknown.Active',
        TODO_EDIT: 'Editing',
        CLEAR_COMPLETED: 'Deleted',
				TODO_DELETE: 'Deleted',
      },
      meta: {
        test: () => {
          cy.get('.todo-list li').eq(0).should('have.class', 'completed');
          cy.get('.main').should('be.visible');
          cy.get('.footer').should('be.visible');
        },
      },
    },
    ShownActive: {
      on: {
        TODO_TOGGLE: 'Unknown.Completed',
        TODO_EDIT: 'Editing',
				TODO_DELETE: 'Deleted',
      },
      meta: {
        test: () => {
          cy.get('.todo-list li').eq(0).should('not.have.class', 'completed');
          cy.get('.main').should('be.visible');
          cy.get('.footer').should('be.visible');
        },
      },
    },
    Editing: {
      on: {
        CANCEL_EDIT: 'Unknown.hist',
        TODO_UPDATE: 'Unknown.hist',
      },
      meta: {
        test: () => {
          cy.get('.todo-list li').should('have.class', 'editing');
          cy.get('.main').should('be.visible');
          cy.get('.footer').should('be.visible');
        },
      },
    },
    Deleted: {
      type: 'final',
      meta: {
        test: () => {
          cy.get('.todo-list li').should('not.exist');
          cy.get('.main').should('not.exist');
          cy.get('.footer').should('not.exist');
        },
      },
    },
  },
});