Check change event value on Checkbox/Switch toggle

arnellebalane · Oct 10, 2023 · 6a48dd7 · 6a48dd7
1 parent b85a9e7
commit 6a48dd7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/src/components/Checkbox.spec.js b/src/components/Checkbox.spec.js
@@ -17,14 +17,29 @@ describe('Checkbox', () => {
         cy.get('input').should('be.checked');
     });
 
-    it('dispatches "change" event when checkbox is toggled', () => {
+    it('dispatches "change" event with false when unchecked checkbox is checked', () => {
         const onChange = cy.spy();
 
         cy.mount(Checkbox).then(({ component }) => {
             component.$on('change', onChange);
         });
 
         cy.get('label').click();
-        cy.wrap(onChange).should('have.been.called');
+        cy.wrap(onChange).should('have.been.calledWith', Cypress.sinon.match.has('detail', true));
+    });
+
+    it('dispatches "change" event with true when unchecked checkbox is checked', () => {
+        const onChange = cy.spy();
+
+        cy.mount(Checkbox, {
+            props: {
+                checked: true,
+            },
+        }).then(({ component }) => {
+            component.$on('change', onChange);
+        });
+
+        cy.get('label').click();
+        cy.wrap(onChange).should('have.been.calledWith', Cypress.sinon.match.has('detail', false));
     });
 });
diff --git a/src/components/Switch.spec.js b/src/components/Switch.spec.js
@@ -2,11 +2,7 @@ import Switch from './Switch.svelte';
 
 describe('Switch', () => {
     it('does not select the checkbox when value prop is false', () => {
-        cy.mount(Switch, {
-            props: {
-                value: false,
-            },
-        });
+        cy.mount(Switch);
 
         cy.get('input').should('not.be.checked');
     });
@@ -21,14 +17,29 @@ describe('Switch', () => {
         cy.get('input').should('be.checked');
     });
 
-    it('dispatches "change" event when switch is toggled', () => {
+    it('dispatches "change" event when unchecked switch is checked', () => {
         const onChange = cy.spy();
 
         cy.mount(Switch).then(({ component }) => {
             component.$on('change', onChange);
         });
 
         cy.get('label').click();
-        cy.wrap(onChange).should('have.been.called');
+        cy.wrap(onChange).should('have.been.calledWith', Cypress.sinon.match.hasNested('target.checked', true));
+    });
+
+    it('dispatches "change" event when checked switch is unchecked', () => {
+        const onChange = cy.spy();
+
+        cy.mount(Switch, {
+            props: {
+                value: true,
+            },
+        }).then(({ component }) => {
+            component.$on('change', onChange);
+        });
+
+        cy.get('label').click();
+        cy.wrap(onChange).should('have.been.calledWith', Cypress.sinon.match.hasNested('target.checked', false));
     });
 });