import * as React from 'react'
import * as api from './api'

function Course({ courseId }) {
	const [state, setState] = React.useState({
		loading: false,
		course: null,
		error: null,
	})

	const { loading, course, error } = state

	React.useEffect(() => {
		setState({ loading: true, course: null, error: null })
		api.getCourseInfo(courseId).then(
			(data) => setState({ loading: false, course: data, error: null }),
			(e) => setState({ loading: false, course: null, error: e }),
		)
	}, [courseId])

	return (
		<>
			<div role="alert" aria-live="polite">
				{loading ? 'Loading...' : error ? error.message : null}
			</div>
			{course ? <CourseInfo course={course} /> : null}
		</>
	)
}

function CourseInfo({ course }) {
	const { title, subtitle, topics } = course
	return (
		<div>
			<h1>{title}</h1>
			<strong>{subtitle}</strong>
			<ul>
				{topics.map((t) => (
					<li key={t}>{t}</li>
				))}
			</ul>
		</div>
	)
}

export default Course

// 🛑 이렇게 하지 마세요...
import * as React from 'react'
import { render, wait, cleanup } from '@testing-library/react/pure'
import { getCourseInfo } from '../api'
import Course from '../course'

jest.mock('../api')

function buildCourse(overrides) {
	return {
		title: 'TEST_COURSE_TITLE',
		subtitle: 'TEST_COURSE_SUBTITLE',
		topics: ['TEST_COURSE_TOPIC'],
		...overrides,
	}
}

describe('Course success', () => {
	const courseId = '123'
	const title = 'My Awesome Course'
	const subtitle = 'Learn super cool things'
	const topics = ['topic 1', 'topic 2']

	let utils
	beforeAll(() => {
		getCourseInfo.mockResolvedValueOnce(
			buildCourse({ title, subtitle, topics }),
		)
	})

	afterAll(() => {
		cleanup()
		jest.resetAllMocks()
	})

	it('should show a loading spinner', () => {
		utils = render(<Course courseId={courseId} />)
		expect(utils.getByRole('alert')).toHaveTextContent(/loading/i)
	})

	it('should call the getCourseInfo function properly', () => {
		expect(getCourseInfo).toHaveBeenCalledWith(courseId)
	})

	it('should render the title', async () => {
		expect(await utils.findByRole('heading')).toHaveTextContent(title)
	})

	it('should render the subtitle', () => {
		expect(utils.getByText(subtitle)).toBeInTheDocument()
	})

	it('should render the list of topics', () => {
		const topicElsText = utils
			.getAllByRole('listitem')
			.map((el) => el.textContent)
		expect(topicElsText).toEqual(topics)
	})
})

describe('Course failure', () => {
	const courseId = '321'
	const message = 'TEST_ERROR_MESSAGE'

	let utils, alert
	beforeAll(() => {
		getCourseInfo.mockRejectedValueOnce({ message })
	})

	afterAll(() => {
		cleanup()
		jest.resetAllMocks()
	})

	it('should show a loading spinner', () => {
		utils = render(<Course courseId={courseId} />)
		alert = utils.getByRole('alert')
		expect(alert).toHaveTextContent(/loading/i)
	})

	it('should call the getCourseInfo function properly', () => {
		expect(getCourseInfo).toHaveBeenCalledWith(courseId)
	})

	it('should render the error message', async () => {
		await wait(() => expect(alert).toHaveTextContent(message))
	})
})

// ✅ 이렇게 하세요
import { render, screen, wait } from '@testing-library/react'
import * as React from 'react'

import { getCourseInfo } from '../api'
import Course from '../course'

jest.mock('../api')

afterEach(() => {
	jest.resetAllMocks()
})

function buildCourse(overrides) {
	return {
		title: 'TEST_COURSE_TITLE',
		subtitle: 'TEST_COURSE_SUBTITLE',
		topics: ['TEST_COURSE_TOPIC'],
		...overrides,
	}
}

test('course loads and renders the course information', async () => {
	const courseId = '123'
	const title = 'My Awesome Course'
	const subtitle = 'Learn super cool things'
	const topics = ['topic 1', 'topic 2']

	getCourseInfo.mockResolvedValueOnce(buildCourse({ title, subtitle, topics }))

	render(<Course courseId={courseId} />)

	expect(getCourseInfo).toHaveBeenCalledWith(courseId)
	expect(getCourseInfo).toHaveBeenCalledTimes(1)

	const alert = screen.getByRole('alert')
	expect(alert).toHaveTextContent(/loading/i)

	const titleEl = await screen.findByRole('heading')
	expect(titleEl).toHaveTextContent(title)

	expect(screen.getByText(subtitle)).toBeInTheDocument()

	const topicElsText = screen
		.getAllByRole('listitem')
		.map((el) => el.textContent)
	expect(topicElsText).toEqual(topics)
})

test('an error is rendered if there is a problem getting course info', async () => {
	const message = 'TEST_ERROR_MESSAGE'
	const courseId = '321'

	getCourseInfo.mockRejectedValueOnce({ message })

	render(<Course courseId={courseId} />)

	expect(getCourseInfo).toHaveBeenCalledWith(courseId)
	expect(getCourseInfo).toHaveBeenCalledTimes(1)

	const alert = screen.getByRole('alert')
	expect(alert).toHaveTextContent(/loading/i)

	await wait(() => expect(alert).toHaveTextContent(message))
})

FAIL  src/__tests__/course-better.js
  ● course loads and renders the course information

    Unable to find an element with the text: Learn super cool things. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

    <body>
      <div>
        <div
          aria-live="polite"
          role="alert"
        />
        <div>
          <h1>
            My Awesome Course
          </h1>
          <ul>
            <li>
              topic 1
            </li>
            <li>
              topic 2
            </li>
          </ul>
        </div>
      </div>
    </body>

      40 |   expect(titleEl).toHaveTextContent(title)
      41 |
    > 42 |   expect(getByText(subtitle)).toBeInTheDocument()
         |          ^
      43 |
      44 |   const topicElsText = getAllByRole('listitem').map(el => el.textContent)
      45 |   expect(topicElsText).toEqual(topics)

      at getElementError (node_modules/@testing-library/dom/dist/query-helpers.js:22:10)
      at node_modules/@testing-library/dom/dist/query-helpers.js:76:13
      at node_modules/@testing-library/dom/dist/query-helpers.js:59:17
      at Object.getByText (src/__tests__/course-better.js:42:10)

// 🛑 이렇게 하지 마세요...
test('course shows loading screen', () => {
	getCourseInfo.mockResolvedValueOnce(buildCourse())
	render(<Course courseId="123" />)
	const alert = screen.getByRole('alert')
	expect(alert).toHaveTextContent(/loading/i)
})

// 1. 프로미스가 해결될 때까지 기다리기
// ⚠️ 이 방법도 문제를 해결하는 괜찮은 방법이지만, 더 좋은 방법이 있으니 계속 읽어보세요.
test('course shows loading screen', async () => {
	const promise = Promise.resolve(buildCourse())
	getCourseInfo.mockImplementationOnce(() => promise)
	render(<Course courseId="123" />)
	const alert = screen.getByRole('alert')
	expect(alert).toHaveTextContent(/loading/i)
	await act(() => promise)
})

// 2. React Testing Library의 `wait` 유틸리티 사용하기
test('course shows loading screen', async () => {
	getCourseInfo.mockResolvedValueOnce(buildCourse())
	render(<Course courseId="123" />)
	const alert = screen.getByRole('alert')
	expect(alert).toHaveTextContent(/loading/i)
	await wait()
})