blob: 58407f1eaa0489b3764793e526862313b33b6b68 [file] [log] [blame]
Adrià Vilanova Martínezf19ea432024-01-23 20:20:52 +01001// Copyright 2019 The Chromium Authors
Copybara854996b2021-09-07 19:36:02 +00002// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4import {assert} from 'chai';
5import sinon from 'sinon';
6import {ChopsChoiceButtons} from './chops-choice-buttons';
7
8let element;
9
10describe('chops-choice-buttons', () => {
11 beforeEach(() => {
12 element = document.createElement('chops-choice-buttons');
13 document.body.appendChild(element);
14 });
15
16 afterEach(() => {
17 document.body.removeChild(element);
18 });
19
20 it('initializes', () => {
21 assert.instanceOf(element, ChopsChoiceButtons);
22 });
23
24 it('clicking option fires change event', async () => {
25 element.options = [{value: 'test', text: 'click me'}];
26 element.value = '';
27
28 await element.updateComplete;
29
30 const changeStub = sinon.stub();
31 element.addEventListener('change', changeStub);
32
33 const option = element.shadowRoot.querySelector('button');
34 option.click();
35
36 sinon.assert.calledOnce(changeStub);
37 });
38
39 it('clicking selected value does not fire change event', async () => {
40 element.options = [{value: 'test', text: 'click me'}];
41 element.value = 'test';
42
43 await element.updateComplete;
44
45 const changeStub = sinon.stub();
46 element.addEventListener('change', changeStub);
47
48 const option = element.shadowRoot.querySelector('button');
49 option.click();
50
51 sinon.assert.notCalled(changeStub);
52 });
53
54 it('selected value highlighted and has aria-current="true"', async () => {
55 element.options = [
56 {value: 'test', text: 'test'},
57 {value: 'selected', text: 'highlighted!'},
58 ];
59 element.value = 'selected';
60
61 await element.updateComplete;
62
63 const options = element.shadowRoot.querySelectorAll('button');
64
65 assert.isFalse(options[0].hasAttribute('selected'));
66 assert.isTrue(options[1].hasAttribute('selected'));
67
68 assert.equal(options[0].getAttribute('aria-current'), 'false');
69 assert.equal(options[1].getAttribute('aria-current'), 'true');
70 });
71
72 it('renders <a> tags when url set', async () => {
73 element.options = [
74 {value: 'test', text: 'test', url: 'http://google.com/'},
75 ];
76
77 await element.updateComplete;
78
79 const options = element.shadowRoot.querySelectorAll('a');
80
81 assert.equal(options[0].textContent.trim(), 'test');
82 assert.equal(options[0].href, 'http://google.com/');
83 });
84
85 it('selected value highlighted for <a> tags', async () => {
86 element.options = [
87 {value: 'test', text: 'test', url: 'http://google.com/'},
88 {value: 'selected', text: 'highlighted!', url: 'http://localhost/'},
89 ];
90 element.value = 'selected';
91
92 await element.updateComplete;
93
94 const options = element.shadowRoot.querySelectorAll('a');
95
96 assert.isFalse(options[0].hasAttribute('selected'));
97 assert.isTrue(options[1].hasAttribute('selected'));
98 });
99});