diff --git a/test/specs/issue_replications/checkbox-not-working.ts b/test/specs/issue_replications/checkbox-not-working.ts new file mode 100644 index 0000000000..1866f51f9b --- /dev/null +++ b/test/specs/issue_replications/checkbox-not-working.ts @@ -0,0 +1,59 @@ +import Editor from '../../../src/editor/model/Editor'; +import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper'; + +// https://github.com/GrapesJS/grapesjs/pull/6095 +describe('Checkbox Behaviour', () => { + let em: Editor; + let fixtures: HTMLElement; + let cmpRoot: ComponentWrapper; + + beforeEach(() => { + em = new Editor({ + mediaCondition: 'max-width', + avoidInlineStyle: true, + }); + document.body.innerHTML = '
'; + const { Pages, Components } = em; + Pages.onLoad(); + cmpRoot = Components.getWrapper()!; + const View = Components.getType('wrapper')!.view; + const wrapperEl = new View({ + model: cmpRoot, + config: { ...cmpRoot.config, em }, + }); + wrapperEl.render(); + fixtures = document.body.querySelector('#fixtures')!; + fixtures.appendChild(wrapperEl.el); + }); + + afterEach(() => { + em.destroy(); + }); + + test('init checkbox to true then change value and assert changes', () => { + const cmp = cmpRoot.append({ + type: 'checkbox', + tagName: 'input', + attributes: { type: 'checkbox', name: 'my-checkbox' }, + traits: [ + { + type: 'checkbox', + label: 'Checked', + name: 'checked', + value: 'true', + valueTrue: 'true', + valueFalse: 'false', + }, + ], + })[0]; + + const input = cmp.getEl() as HTMLInputElement; + expect(cmp.getAttributes().checked).toBe('true'); + expect(input?.checked).toBe(true); + expect(input?.getAttribute('checked')).toBe('true'); + + cmp.getTrait('checked').setValue(false); + + expect(input?.getAttribute('checked')).toBe('false'); + }); +});