import React, { useState } from 'react'
import { render, screen } from '../utilities/test-utils'
import SelectableCard from './_selectable_card'
import { Body, Title, Image } from '../'
const SelectableCardMultiSelect = () => {
const [selected, setSelected] = useState(true)
const [unselected, setUnselected] = useState(false)
const [disabled, setDisabled] = useState(false)
return (
<>
setSelected(!selected)}
value="selected"
>
{'Selected'}
setUnselected(!unselected)}
value="unselected"
>
{'Unselected'}
setDisabled(!disabled)}
value="disabled"
>
{'Disabled'}
)
}
const SelectableCardSingleSelect = () => {
const [selected, setSelected] = useState(null)
const handleSelect = (event) => {
setSelected(event.target.value)
}
return (
<>
{'Male'}
{'Female'}
{'Other'}
)
}
test('should start with a checked item', () => {
render()
const kit = screen.getByLabelText('Selected')
expect(kit).toBeChecked()
})
test('should start with a disabled item', () => {
render()
const kit = screen.getByLabelText('Disabled')
expect(kit).toBeDisabled()
})
test('should click and check an item', () => {
render()
const kit = screen.getByLabelText('Unselected')
expect(kit).not.toBeChecked()
kit.click()
expect(kit).toBeChecked()
})
test('should check multiple items', () => {
render()
const checkedItem = screen.getByLabelText('Selected')
expect(checkedItem).toBeChecked()
const uncheckedItem = screen.getByLabelText('Unselected')
expect(uncheckedItem).not.toBeChecked()
uncheckedItem.click()
expect(checkedItem).toBeChecked
expect(uncheckedItem).toBeChecked
})
test('should check only single item', () => {
render()
const male = screen.getByLabelText('Male')
expect(male).not.toBeChecked
const female = screen.getByLabelText('Female')
expect(female).not.toBeChecked
const other = screen.getByLabelText('Other')
expect(other).not.toBeChecked
male.click()
other.click()
expect(male).not.toBeChecked
expect(female).not.toBeChecked
expect(other).toBeChecked
})
test('should have text passed through the text prop', () => {
render ()
expect(screen.getByText("This passes text through the tag")).toBeInTheDocument()
})
test('should pass block content', () => {
render (
{'This uses block'}
)
expect(screen.getByText("This uses block")).toBeInTheDocument()
})
test('should pass image inside card content', () => {
render (
)
const dispalyedImg = document.querySelector("img")
expect(dispalyedImg.src).toContain("image=634")
})