blob: 6d1398f86de9d8cb74f82c993476d8860ea560f8 [file] [log] [blame]
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +02001// Copyright 2021 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import React from 'react';
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +02006import { render, screen, cleanup, fireEvent } from '@testing-library/react';
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +02007import { assert } from 'chai';
8import sinon from 'sinon';
9
10import { RadioDescription } from './RadioDescription.tsx';
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020011import {IssueWizardPersona} from '../IssueWizardTypes.tsx';
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020012
13describe('RadioDescription', () => {
14 afterEach(cleanup);
15
16 it('renders', () => {
17 render(<RadioDescription />);
18 // look for blue radios
19 const radioOne = screen.getByRole('radio', { name: /Web Developer/i });
20 assert.isNotNull(radioOne)
21
22 const radioTwo = screen.getByRole('radio', { name: /End User/i });
23 assert.isNotNull(radioTwo)
24
25 const radioThree = screen.getByRole('radio', { name: /Chromium Contributor/i });
26 assert.isNotNull(radioThree)
27 });
28
29 it('checks selected radio value', () => {
30 // We're passing in the "Web Developer" value here manually
31 // to tell our code that that radio button is selected.
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020032 render(<RadioDescription selectedRadio={IssueWizardPersona.Developer} />);
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020033
34 const checkedRadio = screen.getByRole('radio', { name: /Web Developer/i });
35 assert.isTrue(checkedRadio.checked);
36
37 // Extra check to make sure we haven't checked every single radio button.
38 const uncheckedRadio = screen.getByRole('radio', { name: /End User/i });
39 assert.isFalse(uncheckedRadio.checked);
40 });
41
42 it('sets radio value when radio button is clicked', () => {
43 // Using the sinon.js testing library to create a function for testing.
44 const setValue = sinon.stub();
45
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020046 render(<RadioDescription onClickRadio={setValue} />);
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020047
48 const radio = screen.getByRole('radio', { name: /Web Developer/i });
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020049 fireEvent.click(radio);
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020050
51 // Asserts that "Web Developer" was passed into our "setValue" function.
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020052 sinon.assert.calledWith(setValue, IssueWizardPersona.Developer);
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020053 });
54
55 it('sets radio value when any part of the parent RoleSelection is clicked', () => {
56 const setValue = sinon.stub();
57
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020058 render(<RadioDescription onClickRadio={setValue} />);
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020059
60 // Click text in the RoleSelection component
61 const p = screen.getByText('End User');
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020062 fireEvent.click(p);
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020063
64 // Asserts that "End User" was passed into our "setValue" function.
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020065 sinon.assert.calledWith(setValue, IssueWizardPersona.EndUser);
Adrià Vilanova Martínez535e7312021-10-17 00:48:12 +020066 });
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +020067});