Deprecate the 2-way-binding setup in the AuToggleSwitch component

We already supported an `@onChange` handler so the 2-way-binding isn't needed.
appuniversum · Sep 15, 2023 · 362145e · 362145e
1 parent 01680ca
commit 362145e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 4 deletions.
diff --git a/addon/components/au-toggle-switch.js b/addon/components/au-toggle-switch.js
@@ -19,6 +19,19 @@ export default class AuToggleSwitch extends Component {
         },
       },
     );
+
+    deprecate(
+      '[AuToggleSwitch] The 2-way-binding setup has been deprecated. Use the `@onChange` argument to update the checked state.',
+      'checked' in this.args && 'onChange' in this.args,
+      {
+        id: '@appuniversum/ember-appuniversum.au-toggle-switch.2-way-binding',
+        until: '3.0.0',
+        for: '@appuniversum/ember-appuniversum',
+        since: {
+          enabled: '2.14.0',
+        },
+      },
+    );
   }
 
   get alignmentClass() {

diff --git a/stories/5-components/Forms/AuToggleSwitch.stories.js b/stories/5-components/Forms/AuToggleSwitch.stories.js
@@ -27,7 +27,7 @@ export default {
       description: 'Used to set/get checked state of component',
     },
     onChange: {
-      control: 'function',
+      action: 'change',
       description:
         'Expects a function that gets called when the toggle switch state changes. The function receives the toggle switch state & event context as parameters.',
     },
@@ -45,7 +45,7 @@ const Template = (args) => ({
       @disabled={{this.disabled}}
       @name={{this.name}}
       @checked={{this.checked}}
-      @onChange={{this.onchange}}
+      @onChange={{this.onChange}}
     >{{this.label}}</AuToggleSwitch>`,
   context: args,
 });
@@ -58,5 +58,4 @@ Component.args = {
   disabled: false,
   name: '',
   checked: false,
-  onChange: '',
 };
diff --git a/tests/integration/components/au-toggle-switch-test.js b/tests/integration/components/au-toggle-switch-test.js
@@ -22,7 +22,7 @@ module('Integration | Component | au-toggle-switch', function (hooks) {
     assert.dom(TOGGLE_SWITCH.INPUT).isChecked();
   });
 
-  test("it calls `@onChange` when it's state is modified by user input", async function (assert) {
+  test('it calls `@onChange` when its state is modified by user input', async function (assert) {
     this.isChecked = false;
     this.handleChange = (isChecked, event) => {
       this.set('isChecked', isChecked);
@@ -41,6 +41,36 @@ module('Integration | Component | au-toggle-switch', function (hooks) {
 
     await toggleSwitch();
     assert.false(this.isChecked);
+
+    assert.false(
+      hasDeprecationStartingWith(
+        '[AuToggleSwitch] The 2-way-binding setup has been deprecated.',
+      ),
+      '2-way-binding deprecation message is not shown if `@onChange` is set',
+    );
+  });
+
+  test('it updates the value with 2-way-binding', async function (assert) {
+    this.isChecked = false;
+
+    await render(hbs`
+      <AuToggleSwitch
+        @checked={{this.isChecked}}
+      />
+    `);
+
+    await toggleSwitch();
+    assert.true(this.isChecked);
+
+    await toggleSwitch();
+    assert.false(this.isChecked);
+
+    assert.true(
+      hasDeprecationStartingWith(
+        '[AuToggleSwitch] The 2-way-binding setup has been deprecated.',
+      ),
+      '2-way-binding is deprecated',
+    );
   });
 
   test('it shows the provided label text', async function (assert) {