blob: 12e50be9e9be8b1179b08ef8246acbc6ceeea6b0 [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.
4
5import {assert} from 'chai';
6import sinon from 'sinon';
7import {ChopsCheckbox} from './chops-checkbox.js';
8
9let element;
10
11describe('chops-checkbox', () => {
12 beforeEach(() => {
13 element = document.createElement('chops-checkbox');
14 document.body.appendChild(element);
15 });
16
17 afterEach(() => {
18 document.body.removeChild(element);
19 });
20
21 it('initializes', () => {
22 assert.instanceOf(element, ChopsCheckbox);
23 });
24
25 it('clicking checkbox dispatches checked-change event', async () => {
26 element.checked = false;
27 sinon.stub(window, 'CustomEvent');
28 sinon.stub(element, 'dispatchEvent');
29
30 await element.updateComplete;
31
32 element.shadowRoot.querySelector('#checkbox').click();
33
34 assert.deepEqual(window.CustomEvent.args[0][0], 'checked-change');
35 assert.deepEqual(window.CustomEvent.args[0][1], {
36 detail: {checked: true},
37 });
38
39 assert.isTrue(window.CustomEvent.calledOnce);
40 assert.isTrue(element.dispatchEvent.calledOnce);
41
42 window.CustomEvent.restore();
43 element.dispatchEvent.restore();
44 });
45
46 it('updating checked property updates native <input>', async () => {
47 element.checked = false;
48
49 await element.updateComplete;
50
51 assert.isFalse(element.checked);
52 assert.isFalse(element.shadowRoot.querySelector('input').checked);
53
54 element.checked = true;
55
56 await element.updateComplete;
57
58 assert.isTrue(element.checked);
59 assert.isTrue(element.shadowRoot.querySelector('input').checked);
60 });
61
62 it('updating checked attribute updates native <input>', async () => {
63 element.setAttribute('checked', true);
64 await element.updateComplete;
65
66 assert.equal(element.getAttribute('checked'), 'true');
67 assert.isTrue(element.shadowRoot.querySelector('input').checked);
68
69 element.click();
70 await element.updateComplete;
71
72 // We expect the 'checked' attribute to remain the same even as the
73 // corresponding property changes when the user clicks the checkbox.
74 assert.equal(element.getAttribute('checked'), 'true');
75 assert.isFalse(element.shadowRoot.querySelector('input').checked);
76
77 element.click();
78 await element.updateComplete;
79 assert.isTrue(element.shadowRoot.querySelector('input').checked);
80
81 element.removeAttribute('checked');
82 await element.updateComplete;
83 assert.isNotTrue(element.getAttribute('checked'));
84 assert.isFalse(element.shadowRoot.querySelector('input').checked);
85 });
86});