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

machine.js

  const LevelCarouselMachine = Machine({
    id: 'LevelCarousel',
    initial: 'default',
    states: {
      default: {
        on: {
          RERENDER_EMPTY: 'empty',
          RERENDER_SUCCESS: 'success',
        },
        meta: {
          test: ({ getByTestId }) => {
            expect(getByTestId(LEVEL_CAROUSEL_LIST.ID)).toBeInTheDocument()
          },
        },
      },
      empty: {
        meta: {
          test: ({ getByTestId }) => {
            expect(getByTestId(LEVEL_CAROUSEL_LIST.ID)).toBeInTheDocument()
          },
        },
      },
      success: {
        meta: {
          test: ({ baseElement }) => {
            const currentLevel = 0
            const {
              data: { level: totalLevel },
            } = GET_USER_LEVEL

            const list = baseElement.querySelector(LEVEL_CAROUSEL_LIST.VAL)
            expect(list.children).toHaveLength(totalLevel.length)

            totalLevel.forEach((data, index) => {
              const expectedSrc = currentLevel >= index ? data.satisfy_img : data.not_satisfy_img
              const item = baseElement.querySelector(LEVEL_CAROUSEL_ITEM.VAL.replace('{INDEX}', index))
              const icon = baseElement.querySelector(LEVEL_CAROUSEL_ITEM_ICON.VAL.replace('{INDEX}', index))

              expect(item).toBeInTheDocument()
              expect(icon).toHaveAttribute('src', expectedSrc)
            })
          },
        },
      },
    },
  })