Merge pull request #14 from yun-cheng/test/unit-tests-and-integration…

…-tests

test: unit tests and integration tests

README.md

@@ -29,4 +29,3 @@ This project follows [these instructions](https://cronos-hq.notion.site/Front-En
 ## TODO
 
 - Error handling
-- Testing

src/components/__tests__/PricingCard.tsx

@@ -0,0 +1,54 @@
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import PricingCard from 'components/PricingCard/PricingCard'
+import renderWithProviders from 'testUtils'
+import { beforeAll } from 'vitest'
+
+describe('<PricingCardSlider />', () => {
+	beforeAll(() => {
+		window.HTMLElement.prototype.setPointerCapture = vi.fn()
+		window.HTMLElement.prototype.hasPointerCapture = vi.fn()
+	})
+
+	it('should render', async () => {
+		renderWithProviders(<PricingCard />)
+
+		expect(screen.getByText('100K PAGEVIEWS')).toBeInTheDocument()
+		expect(screen.getByText('$16.00')).toBeInTheDocument()
+		expect(await screen.findByText('or ~160 CRO')).toBeInTheDocument()
+	})
+
+	it('should apply a 25% discount on prices when the switch is on', async () => {
+		renderWithProviders(<PricingCard />)
+
+		const billingSwitch = screen.getByRole('switch')
+		await userEvent.click(billingSwitch)
+
+		expect(screen.getByText('$12.00')).toBeInTheDocument()
+		expect(await screen.findByText('or ~120 CRO')).toBeInTheDocument()
+	})
+
+	it('should increase pageviews and prices when the right arrow key is pressed', async () => {
+		renderWithProviders(<PricingCard />)
+
+		const [slider] = screen.getAllByRole('slider')
+		await userEvent.type(slider, '{arrowright}')
+
+		expect(screen.getByText('500K PAGEVIEWS')).toBeInTheDocument()
+		expect(screen.getByText('$24.00')).toBeInTheDocument()
+		expect(await screen.findByText('or ~240 CRO')).toBeInTheDocument()
+	})
+
+	it('should decrease pageviews and apply a 25% discount on prices when the switch is on and the left arrow key is pressed', async () => {
+		renderWithProviders(<PricingCard />)
+
+		const billingSwitch = screen.getByRole('switch')
+		await userEvent.click(billingSwitch)
+		const [slider] = screen.getAllByRole('slider')
+		await userEvent.type(slider, '{arrowleft}')
+
+		expect(screen.getByText('50K PAGEVIEWS')).toBeInTheDocument()
+		expect(screen.getByText('$9.00')).toBeInTheDocument()
+		expect(await screen.findByText('or ~90 CRO')).toBeInTheDocument()
+	})
+})

src/components/__tests__/PricingCardSlider.tsx

@@ -0,0 +1,42 @@
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import PricingCardSlider from 'components/PricingCard/PricingCardSlider'
+import renderWithProviders from 'testUtils'
+import { beforeAll } from 'vitest'
+
+describe('<PricingCardSlider />', () => {
+	beforeAll(() => {
+		window.HTMLElement.prototype.setPointerCapture = vi.fn()
+		window.HTMLElement.prototype.hasPointerCapture = vi.fn()
+	})
+
+	it('should render', async () => {
+		renderWithProviders(<PricingCardSlider />)
+
+		expect(screen.getByRole('slider')).toBeInTheDocument()
+	})
+
+	it('should increase the value when the right arrow key is pressed', async () => {
+		renderWithProviders(<PricingCardSlider />)
+
+		const slider = screen.getByRole('slider')
+
+		expect(slider.getAttribute('aria-valuenow')).toBe('2')
+
+		await userEvent.type(slider, '{arrowright}')
+
+		expect(slider.getAttribute('aria-valuenow')).toBe('3')
+	})
+
+	it('should decrease the value when the left arrow key is pressed', async () => {
+		renderWithProviders(<PricingCardSlider />)
+
+		const slider = screen.getByRole('slider')
+
+		expect(slider.getAttribute('aria-valuenow')).toBe('2')
+
+		await userEvent.type(slider, '{arrowleft}')
+
+		expect(slider.getAttribute('aria-valuenow')).toBe('1')
+	})
+})

src/components/__tests__/PricingCardSwitch.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import PricingCardSwitch from 'components/PricingCard/PricingCardSwitch'
+import { expect } from 'vitest'
+
+describe('<PricingCardSwitch />', () => {
+	it('should render', async () => {
+		render(<PricingCardSwitch />)
+
+		expect(screen.getByText('Monthly Billing')).toBeInTheDocument()
+		expect(screen.getByText('Yearly Billing')).toBeInTheDocument()
+		expect(screen.getByText('25% discount')).toBeInTheDocument()
+		expect(screen.getByRole('switch')).toBeInTheDocument()
+	})
+
+	it('should toggle the value when clicking on switch', async () => {
+		render(<PricingCardSwitch />)
+
+		const billingSwitch = screen.getByRole('switch')
+
+		expect(billingSwitch.dataset.state).toBe('unchecked')
+
+		await userEvent.click(billingSwitch)
+
+		expect(billingSwitch.dataset.state).toBe('checked')
+
+		await userEvent.click(billingSwitch)
+
+		expect(billingSwitch.dataset.state).toBe('unchecked')
+	})
+})

src/mocks/handlers.ts

@@ -1,5 +1,9 @@
-import type { HttpHandler } from 'msw'
+import { http, HttpResponse, type HttpHandler } from 'msw'
 
-const handlers: HttpHandler[] = []
+const handlers: HttpHandler[] = [
+	http.get('https://api.coingecko.com/api/v3/simple/price', () =>
+		HttpResponse.json({ 'crypto-com-chain': { usd: 0.1 } })
+	)
+]
 
 export default handlers

src/setupTests.ts

@@ -4,6 +4,12 @@ import server from 'mocks/server'
 import { DESKTOP_RESOLUTION_HEIGHT, DESKTOP_RESOLUTION_WIDTH } from 'testUtils'
 import 'whatwg-fetch'
 
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+	observe: vi.fn(),
+	unobserve: vi.fn(),
+	disconnect: vi.fn()
+}))
+
 beforeAll(() => {
 	server.listen({ onUnhandledRequest: 'error' })
 

src/testUtils.tsx

@@ -1,5 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render } from '@testing-library/react'
+import { Provider as JotaiProvider } from 'jotai'
 import type { PropsWithChildren, ReactElement } from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -18,15 +19,14 @@ export const DESKTOP_RESOLUTION_HEIGHT = 800
 export const MOBILE_RESOLUTION_WIDTH = 414
 export const MOBILE_RESOLUTION_HEIGHT = 896
 
-export default function renderWithProviders(
-	ui: ReactElement,
-	includeRouter = true
-): void {
+export default function renderWithProviders(ui: ReactElement): void {
 	render(ui, {
 		wrapper: ({ children }: PropsWithChildren): ReactElement => (
-			<QueryClientProvider client={queryClient}>
-				{includeRouter ? <BrowserRouter>{children}</BrowserRouter> : children}
-			</QueryClientProvider>
+			<JotaiProvider>
+				<QueryClientProvider client={queryClient}>
+					<BrowserRouter>{children}</BrowserRouter>
+				</QueryClientProvider>
+			</JotaiProvider>
 		)
 	})
 }