@instructure/quiz-interactions/src/util/__tests__/withAsyncDeps.test.js

A React UI component Library for quiz interaction types.

import React, {Component} from 'react'
import {render, screen, act} from '@testing-library/react'

import withAsyncDeps from '../withAsyncDeps'

describe('withAsyncDeps', () => {
  const createMockClass = (depsAreLoaded, loadDeps) => {
    @withAsyncDeps(depsAreLoaded, loadDeps)
    class MockComponent extends Component {
      render() {
        return <div>hello world</div>
      }
    }

    return MockComponent
  }

  describe('dependencies are already loaded', () => {
    const depsAreLoaded = () => true
    const loadDeps = () => Promise.resolve()
    const Klass = createMockClass(depsAreLoaded, loadDeps)

    it('calls the original render method', () => {
      render(<Klass />)
      expect(screen.getByText('hello world')).toBeDefined()
    })
  })

  describe('dependencies are not yet loaded', () => {
    it('renders a spinner until the promise is fulfilled', async () => {
      let resolvePromise
      const depsAreLoaded = () => false
      const loadDeps = () => {
        return new Promise(resolve => {
          resolvePromise = resolve
        })
      }
      const Klass = createMockClass(depsAreLoaded, loadDeps)

      render(<Klass />)
      expect(screen.getByText('loading')).toBeDefined()

      await act(async () => {
        resolvePromise()
      })

      expect(screen.getByText('hello world')).toBeDefined()
    })
  })
})