Replace deprecated template-action (#988)

Author: dmytro-krekota

addon/templates/components/attach-popover.hbs

@@ -16,7 +16,7 @@
       ...attributes
     >
       <div class={{this._class}} style={{this._style}}>
-        {{yield (hash hide=(action 'hide'))}}
+        {{yield (hash hide=this.hide)}}
         {{#if this.arrow}}
           <div x-arrow {{did-insert this.didInsertArrow}}></div>
         {{/if}}

tests/dummy/app/templates/components/attachment-example.hbs

@@ -18,7 +18,7 @@
         @hideOn={{this.tooltipData.hideOn}}
         @interactive={{this.tooltipData.interactive}}
         @isShown={{this.tooltipData.isShown}}
-        @onChange={{action (mut this.tooltipData.isShown)}}
+        @onChange={{fn (mut this.tooltipData.isShown)}}
         @placement={{this.tooltipData.placement}}
         @renderInPlace={{this.tooltipData.renderInPlace}}
         @showDelay={{this.tooltipData.showDelay}}
@@ -44,7 +44,7 @@
         @interactive={{this.popoverData.interactive}}
         @isShown={{this.popoverData.isShown}}
         @lazyRender={{this.popoverData.lazyRender}}
-        @onChange={{action (mut this.popoverData.isShown)}}
+        @onChange={{fn (mut this.popoverData.isShown)}}
         @placement={{this.popoverData.placement}}
         @renderInPlace={{this.popoverData.renderInPlace}}
         @showDelay={{this.popoverData.showDelay}}
@@ -54,7 +54,7 @@
       >
         <p>Popovers and tooltips, oh my!</p>
 
-        <button {{action emberAttacher.hide}}>Close</button>
+        <button {{on 'click' emberAttacher.hide}}>Close</button>
       </AttachPopover>
     </button>
   </div>
@@ -74,10 +74,10 @@
 <div data-element-centered class="edit-section">
   <div data-element-vbox class="fit-lm">
     <div data-element-hbox class="nav-bar">
-      <div data-element-centered class="col-xs-12 nav{{if this.isConfiguringTooltip ' active'}}" {{action 'setIsConfiguringTooltip' true}}>
+      <div data-element-centered class="col-xs-12 nav{{if this.isConfiguringTooltip ' active'}}" {{on 'click' (fn this.setIsConfiguringTooltip true)}}>
         <code>&lt;AttachTooltip&gt;</code>
       </div>
-      <div data-element-centered  class="col-xs-12 nav{{unless this.isConfiguringTooltip ' active'}}" {{action 'setIsConfiguringTooltip' false}}>
+      <div data-element-centered  class="col-xs-12 nav{{unless this.isConfiguringTooltip ' active'}}" {{on 'click' (fn this.setIsConfiguringTooltip false)}}>
         <code>&lt;AttachPopover&gt;</code>
       </div>
     </div>
@@ -131,7 +131,7 @@
     <div data-element-hbox>
       &nbsp;&nbsp;&nbsp;&nbsp;<div data-element-box class="flexi-fit horizontal-lm">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
       <div data-element-centered class="flexi-fit">
-        @arrow=<button class="button medium" {{action "toggleArrow"}}>{{this.service.arrow}}</button>
+        @arrow=<button class="button medium" {{on 'click' this.toggleArrow}}>{{this.service.arrow}}</button>
       </div>
     </div>
     <div data-element-hbox>
@@ -198,7 +198,7 @@
           {{/attach-tooltip}}
         </span>
         =
-        <button class="button medium" {{action "toggleInteractive"}}>
+        <button class="button medium" {{on 'click' this.toggleInteractive}}>
           {{this.service.interactive}}
         </button>
       </div>
@@ -214,7 +214,7 @@
           {{/attach-tooltip}}
         </span>
         =
-        <button class="button medium" {{action "toggleIsShown"}}>{{this.service.isShown}}</button>
+        <button class="button medium" {{on 'click' this.toggleIsShown}}>{{this.service.isShown}}</button>
       </div>
     </div>
     <div data-element-hbox>
@@ -229,7 +229,7 @@
           {{/attach-tooltip}}
         </span>
         =
-        <button class="button medium" {{action "toggleLazyRender"}}>{{this.service.lazyRender}}</button>
+        <button class="button medium" {{on 'click' this.toggleLazyRender}}>{{this.service.lazyRender}}</button>
       </div>
     </div>
     <div data-element-hbox>
@@ -270,7 +270,7 @@
           {{/attach-tooltip}}
         </span>
         =
-        <button class="button medium" {{action "toggleAutoUpdate"}}>
+        <button class="button medium" {{on 'click' this.toggleAutoUpdate}}>
           {{this.service.autoUpdate}}
         </button>
       </div>
@@ -292,7 +292,7 @@
           {{/attach-tooltip}}
         </span>
         =
-        <button class="button medium" {{action "toggleRenderInPlace"}}>
+        <button class="button medium" {{on 'click' this.toggleRenderInPlace}}>
           {{this.service.renderInPlace}}
         </button>
       </div>
@@ -386,7 +386,7 @@
         <div data-element-hbox>
           &nbsp;&nbsp;&nbsp;&nbsp;
           <div data-element-centered class="flexi-fit">
-            &lt;button \{{action attacher.hide}}>
+            &lt;button \{{on 'click' attacher.hide}}>
           </div>
         </div>
         <div data-element-hbox>

tests/integration/components/ember-attacher/hide-on-mouseleave-test.js

@@ -87,10 +87,10 @@ module('Integration | Component | hideOn "mouseleave"', function(hooks) {
                           hideOn='mouseleave'
                           interactive=true
                           isShown=this.isShown
-                          onChange=(action (mut this.isShown)) as |attacher|}}
+                          onChange=(fn (mut this.isShown)) as |attacher|}}
           hideOn mouseleave
 
-          <button id="manual-hide" {{action attacher.hide}}>hide</button>
+          <button id="manual-hide" {{on 'click' attacher.hide}}>hide</button>
         {{/attach-popover}}
       </div>
 

tests/integration/components/ember-attacher/is-shown-test.js

@@ -7,11 +7,6 @@ import { render, click, find, settled, waitFor } from '@ember/test-helpers';
 module('Integration | Component | isShown', function(hooks) {
   setupRenderingTest(hooks);
 
-  hooks.beforeEach(function() {
-    this.actions = {};
-    this.send = (actionName, ...args) => this.actions[actionName].apply(this, args);
-  });
-
   test('isShown works with showOn/hideOn set to "click"', async function(assert) {
     assert.expect(3);
 
@@ -44,11 +39,11 @@ module('Integration | Component | isShown', function(hooks) {
   test('isShown works with showOn/hideOn set to `null`', async function(assert) {
     assert.expect(3);
 
-    this.actions.closePopover = () => {
+    this.closePopover = () => {
       this.set('isShown', false);
     };
 
-    this.actions.openPopover = () => {
+    this.openPopover = () => {
       this.set('isShown', true);
     };
 
@@ -58,7 +53,7 @@ module('Integration | Component | isShown', function(hooks) {
     this.set('showOn', null);
 
     await render(hbs`
-      <button id="open" {{action 'openPopover'}}>
+      <button id="open" {{on 'click' this.openPopover}}>
         Click me, captain!
 
         {{#attach-popover id='attachment'
@@ -67,7 +62,7 @@ module('Integration | Component | isShown', function(hooks) {
                           showOn=this.showOn}}
           isShown w/ hideOn/ShowOn of 'none'
 
-          <button id="close" {{action 'closePopover'}}>
+          <button id="close" {{on 'click' this.closePopover}}>
             Close
           </button>
 
@@ -91,11 +86,11 @@ module('Integration | Component | isShown', function(hooks) {
   test('isShown works with showOn/hideOn set to `null` with lazyRender', async function(assert) {
     assert.expect(3);
 
-    this.actions.closePopover = () => {
+    this.closePopover = () => {
       this.set('isShown', false);
     };
 
-    this.actions.openPopover = () => {
+    this.openPopover = () => {
       this.set('isShown', true);
     };
 
@@ -105,7 +100,7 @@ module('Integration | Component | isShown', function(hooks) {
     this.set('showOn', null);
 
     await render(hbs`
-      <button id="open" {{action 'openPopover'}}>
+      <button id="open" {{on 'click' this.openPopover}}>
         Click me, captain!
 
         {{#attach-popover id='attachment'
@@ -115,7 +110,7 @@ module('Integration | Component | isShown', function(hooks) {
                           showOn=this.showOn}}
           isShown w/ hideOn/ShowOn of 'none'
 
-          <button id="close" {{action 'closePopover'}}>
+          <button id="close" {{on 'click' this.closePopover}}>
             Close
           </button>
 
@@ -141,15 +136,15 @@ module('Integration | Component | isShown', function(hooks) {
   test('nested attachers open and close as expected', async function(assert) {
     assert.expect(7);
 
-    this.actions.openParentPopover = () => {
+    this.openParentPopover = () => {
       this.set('parentIsShown', true);
     };
 
-    this.actions.closeChildPopover = () => {
+    this.closeChildPopover = () => {
       this.set('childIsShown', false);
     };
 
-    this.actions.openChildPopover = () => {
+    this.openChildPopover = () => {
       this.set('childIsShown', true);
     };
 
@@ -162,23 +157,23 @@ module('Integration | Component | isShown', function(hooks) {
     });
 
     await render(hbs`
-      <button id="openParent" {{action 'openParentPopover'}}>
+      <button id="openParent" {{on 'click' this.openParentPopover}}>
         Open parent
 
         {{#attach-popover hideOn=this.hideOn
                           id='parent'
                           isShown=this.parentIsShown
                           showOn=this.showOn
                           interactive=true}}
-          <button id="openChild" {{action 'openChildPopover'}}>
+          <button id="openChild" {{on 'click' this.openChildPopover}}>
             Open child
 
             {{#attach-popover hideDuration=0
                               hideOn='none'
                               id='child'
                               isShown=this.childIsShown
                               showOn='none'}}
-              <button id="closeChild" {{action 'closeChildPopover'}}>
+              <button id="closeChild" {{on 'click' this.closeChildPopover}}>
                 Close child
               </button>
             {{/attach-popover}}

tests/integration/components/ember-attacher/use-capture-test.js

@@ -11,7 +11,7 @@ module('Integration | Component | useCapture "true"', function(hooks) {
     assert.expect(2);
 
     await render(hbs`
-      <div id="click-out-target" {{action (mut this.unusedVar) bubbles=false}}>
+      <div id="click-out-target" {{on 'click' (fn (mut this.unusedVar) bubbles=false)}}>
       </div>
 
       <button>