Add test for selection behaviour

src/ui/RadioTileGroup/RadioTileGroup.spec.tsx

@@ -1,8 +1,19 @@
-import { render, screen } from '@testing-library/react'
+import {
+ render,
+ screen,
+ waitForElementToBeRemoved,
+} from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 
 import { RadioTileGroup } from './RadioTileGroup'
 
 describe('Card', () => {
+ function setup() {
+ return {
+ user: userEvent.setup(),
+ }
+ }
+
  it('renders', async () => {
  render(
  <RadioTileGroup>
@@ -31,4 +42,34 @@ describe('Card', () => {
  expect(description).toBeInTheDocument()
  })
  })
+
+ describe('when an item is clicked', () => {
+ it('toggles selected circle', async () => {
+ const { user } = setup()
+ render(
+ <RadioTileGroup>
+ <RadioTileGroup.Item value="asdf" label="Asdf" />
+ <RadioTileGroup.Item value="jkl;" label="Jkl;" />
+ </RadioTileGroup>
+ )
+ const tile = await screen.findByText('Asdf')
+ const tile2 = await screen.findByText('Jkl;')
+
+ user.click(tile)
+
+ const selected = await screen.findByTestId('radio-button-circle-selected')
+ expect(selected).toBeInTheDocument()
+
+ user.click(tile2)
+
+ await waitForElementToBeRemoved(selected)
+
+ expect(selected).not.toBeInTheDocument()
+
+ const otherSelected = await screen.findByTestId(
+ 'radio-button-circle-selected'
+ )
+ expect(otherSelected).toBeInTheDocument()
+ })
+ })
 })

src/ui/RadioTileGroup/RadioTileGroup.tsx

@@ -88,9 +88,15 @@ export const RadioTileGroup = Object.assign(Group, {
 function RadioButtonCircle({ selected = false }: { selected?: boolean }) {
  return selected ? (
  <div className="flex h-4 w-4 items-center justify-center rounded-full bg-ds-blue">
- <div className="h-1 w-1 rounded-full bg-white " />
+ <div
+ className="h-1 w-1 rounded-full bg-white "
+ data-testid="radio-button-circle-selected"
+ />
  </div>
  ) : (
- <div className="h-4 w-4 rounded-full border border-ds-gray-quaternary" />
+ <div
+ className="h-4 w-4 rounded-full border border-ds-gray-quaternary"
+ data-testid="radio-button-circle-unselected"
+ />
  )
 }