From 193a47fc51d47708e1dc1dac251367972e089552 Mon Sep 17 00:00:00 2001
From: Luc Bergeron <10946843+lbergeron@users.noreply.github.com>
Date: Fri, 3 Jul 2020 14:49:40 -0400
Subject: [PATCH] feat(SFINT-3300): Ensure backward compatibility

---
 pages/toggle_action_button.html               | 12 +++++++++++
 .../ActionButton/ToggleActionButton.ts        |  8 +++----
 .../ActionButton/ToggleActionButton.spec.ts   | 21 +++++++++++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/pages/toggle_action_button.html b/pages/toggle_action_button.html
index 79ae3fbb..53fb5749 100644
--- a/pages/toggle_action_button.html
+++ b/pages/toggle_action_button.html
@@ -37,5 +37,17 @@ <h2>Toggle Button</h2>
                 data-deactivate-icon='&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.997 78.997" height="298.571" width="298.571"&gt;&lt;path d="M39.434 0A39.499 39.499 0 000 39.498a39.499 39.499 0 0039.498 39.5 39.499 39.499 0 0039.5-39.5A39.499 39.499 0 0039.497 0a39.499 39.499 0 00-.064 0zm.59 7.273a31.948 31.948 0 0131.948 31.949A31.948 31.948 0 0140.023 71.17 31.948 31.948 0 018.075 39.222 31.948 31.948 0 0140.023 7.273z"/&gt;&lt;/svg&gt;'
             ></button>
         </div>
+
+        <div>
+            <h2>Toggle Button (legacy options)</h2>
+            <br />
+            <button
+                class="CoveoToggleActionButton"
+                data-deactivated-icon='&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.997 78.997" height="298.571" width="298.571"&gt;&lt;circle r="39.499" cy="120.385" cx="84.1" transform="translate(-44.601 -80.887)"/&gt;&lt;/svg&gt;'
+                data-deactivated-tooltip="Activate feature"
+                data-activated-tooltip="Deactivate feature"
+                data-activated-icon='&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.997 78.997" height="298.571" width="298.571"&gt;&lt;path d="M39.434 0A39.499 39.499 0 000 39.498a39.499 39.499 0 0039.498 39.5 39.499 39.499 0 0039.5-39.5A39.499 39.499 0 0039.497 0a39.499 39.499 0 00-.064 0zm.59 7.273a31.948 31.948 0 0131.948 31.949A31.948 31.948 0 0140.023 71.17 31.948 31.948 0 018.075 39.222 31.948 31.948 0 0140.023 7.273z"/&gt;&lt;/svg&gt;'
+            ></button>
+        </div>
     </body>
 </html>
diff --git a/src/components/ActionButton/ToggleActionButton.ts b/src/components/ActionButton/ToggleActionButton.ts
index 1d47a1d5..1475d369 100644
--- a/src/components/ActionButton/ToggleActionButton.ts
+++ b/src/components/ActionButton/ToggleActionButton.ts
@@ -34,7 +34,7 @@ export class ToggleActionButton extends Component {
          * <button class='CoveoToggleActionButton' data-activate-icon='&lt;svg width=&quot;1em&quot; height=&quot;1em&quot;&gt;...&lt;/svg&gt;'></button>
          * ```
          */
-        activateIcon: ComponentOptions.buildStringOption(),
+        activateIcon: ComponentOptions.buildStringOption({ alias: 'deactivatedIcon' }),
 
         /**
          * Specifies the button tooltip text displayed to activate the button.
@@ -45,7 +45,7 @@ export class ToggleActionButton extends Component {
          * <button class='CoveoToggleActionButton' data-activate-tooltip='Activate the feature'></button>
          * ```
          */
-        activateTooltip: ComponentOptions.buildStringOption(),
+        activateTooltip: ComponentOptions.buildStringOption({ alias: 'deactivatedTooltip' }),
 
         /**
          * Specifies the button icon displayed to deactivate the button.
@@ -64,7 +64,7 @@ export class ToggleActionButton extends Component {
          * <button class='CoveoToggleActionButton' data-deactivate-icon='&lt;svg width=&quot;1em&quot; height=&quot;1em&quot;&gt;...&lt;/svg&gt;'></button>
          * ```
          */
-        deactivateIcon: ComponentOptions.buildStringOption(),
+        deactivateIcon: ComponentOptions.buildStringOption({ alias: 'activatedIcon' }),
 
         /**
          * Specifies the button tooltip displayed to deactivate the button.
@@ -75,7 +75,7 @@ export class ToggleActionButton extends Component {
          * <button class='CoveoToggleActionButton' data-deactivate-tooltip='Deactivate the feature'></button>
          * ```
          */
-        deactivateTooltip: ComponentOptions.buildStringOption(),
+        deactivateTooltip: ComponentOptions.buildStringOption({ alias: 'activatedTooltip' }),
 
         /**
          * Specifies the handler called when the button is clicked.
diff --git a/tests/components/ActionButton/ToggleActionButton.spec.ts b/tests/components/ActionButton/ToggleActionButton.spec.ts
index f8c61a3b..e9bc2721 100644
--- a/tests/components/ActionButton/ToggleActionButton.spec.ts
+++ b/tests/components/ActionButton/ToggleActionButton.spec.ts
@@ -3,6 +3,7 @@ import { Mock } from 'coveo-search-ui-tests';
 import { IToggleActionButtonOptions, ToggleActionButton } from '../../../src/components/ActionButton/ToggleActionButton';
 import * as icons from '../../../src/utils/icons';
 import { ActionButton } from '../../../src/components/ActionButton/ActionButton';
+import { IComponentOptions } from 'coveo-search-ui';
 
 describe('ToggleActionButton', () => {
     let sandbox: SinonSandbox;
@@ -52,6 +53,11 @@ describe('ToggleActionButton', () => {
         return componentSetup.cmp;
     }
 
+    function getOption(optionName: string): IComponentOptions<any> {
+        const dictOptions = ToggleActionButton.options as { [key: string]: any };
+        return dictOptions[optionName] as IComponentOptions<any>;
+    }
+
     describe('clicking the button', () => {
         beforeEach(() => {
             Coveo.$$(testSubject.element).trigger('click');
@@ -129,4 +135,19 @@ describe('ToggleActionButton', () => {
             expect(updateTooltipSpy.calledWith(options.activateTooltip)).toBeTrue();
         });
     });
+
+    describe('legacy options compatibility', () => {
+        [
+            { legacy: 'activatedIcon', current: 'deactivateIcon' },
+            { legacy: 'activatedTooltip', current: 'deactivateTooltip' },
+            { legacy: 'deactivatedIcon', current: 'activateIcon' },
+            { legacy: 'deactivatedTooltip', current: 'activateTooltip' }
+        ].forEach(({ legacy, current }) => {
+            it(`should support legacy '${legacy}' option through '${current}'`, () => {
+                const option = getOption(current);
+
+                expect(option.alias).toContain(legacy);
+            });
+        });
+    });
 });