Generated by XState Viz: https://xstate.js.org/viz

machine.js

const LevelModalMachine = Machine({
    id: 'LevelModal',
    initial: 'default',
    states: {
      default: {
        on: {
          RERENDER_EMPTY: 'empty',
          RERENDER_SUCCESS: 'success',
          CLICK_CLOSE_BUTTON: 'onClose',
        },
        meta: {
          test: ({ getByTestId }) => {
            expect(getByTestId(LEVEL_MODAL_CONTAINER.ID)).toBeInTheDocument()
          },
        },
      },
      empty: {
        meta: {
          test: ({ getByTestId }) => {
            expect(getByTestId(LEVEL_MODAL_CONTAINER.ID)).toBeInTheDocument()
            expect(getByTestId(LEVEL_MODAL_ICON.ID)).toBeInTheDocument()
            expect(getByTestId(LEVEL_MODAL_CLOSE_BUTTON.ID)).toBeInTheDocument()
          },
        },
      },
      success: {
        initial: 'complete',
        states: {
          complete: {
            meta: {
              test: ({ getByTestId }) => {
                const levelModalIndex = 0
                const {
                  data: { level },
                } = GET_USER_LEVEL
                const { satisfy_img: complete } = level[levelModalIndex]

                expect(getByTestId(LEVEL_MODAL_ICON.ID)).toHaveAttribute('src', complete)
              },
            },
          },
          incomplete: {
            meta: {
              test: ({ getByTestId }) => {
                const levelModalIndex = 0
                const {
                  data: { level },
                } = GET_USER_LEVEL
                const { not_satisfy_img: incomplete } = level[levelModalIndex]

                expect(getByTestId(LEVEL_MODAL_ICON.ID)).toHaveAttribute('src', incomplete)
              },
            },
          },
        },
        on: {
          RERENDER_SUCCESS_WITH_COMPLETE: 'success.complete',
          RERENDER_SUCCESS_WITH_INCOMPLETE: 'success.incomplete',
        },
        meta: {
          test: ({ getByTestId, baseElement }) => {
            const levelModalIndex = 0
            const {
              data: { level: totalLevel },
            } = GET_USER_LEVEL
            const { badge_name: name, title, task } = totalLevel[levelModalIndex]

            expect(getByTestId(LEVEL_MODAL_NAME.ID)).toHaveTextContent(name)
            expect(getByTestId(LEVEL_MODAL_RANK.ID)).toHaveTextContent(title)
            expect(getByTestId(LEVEL_MODAL_TASK_LIST.ID).children).toHaveLength(task.length)

            task.forEach(({ description }, index) => {
              const element = baseElement.querySelector(LEVEL_MODAL_TASK.VAL.replace('{INDEX}', index + 1))
              expect(element).toHaveTextContent(description)
            })
          },
        },
      },
      onClose: {
        meta: {
          test: () => {
            expect(handleCloseModal).toBeCalled()
          },
        },
      },
    },
  })