DEV: Add post-menu-toggle-like-action transformer (#31295)

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

app/assets/javascripts/discourse/app/components/post/menu.gjs

@@ -15,7 +15,10 @@ import SmallUserList, {
 import UserTip from "discourse/components/user-tip";
 import concatClass from "discourse/helpers/concat-class";
 import DAG from "discourse/lib/dag";
-import { applyMutableValueTransformer } from "discourse/lib/transformer";
+import {
+  applyBehaviorTransformer,
+  applyMutableValueTransformer,
+} from "discourse/lib/transformer";
 import { i18n } from "discourse-i18n";
 import PostMenuButtonConfig from "./menu/button-config";
 import PostMenuButtonWrapper from "./menu/button-wrapper";
@@ -442,26 +445,35 @@ export default class PostMenu extends Component {
 
   @action
   async toggleLike() {
-    if (!this.currentUser) {
-      this.keyValueStore &&
-        this.keyValueStore.set({
-          key: "likedPostId",
-          value: this.args.post.id,
-        });
+    await applyBehaviorTransformer(
+      "post-menu-toggle-like-action",
+      async () => {
+        if (!this.currentUser) {
+          this.keyValueStore &&
+            this.keyValueStore.set({
+              key: "likedPostId",
+              value: this.args.post.id,
+            });
 
-      this.args.showLogin();
-      return;
-    }
+          this.args.showLogin();
+          return;
+        }
 
-    if (this.capabilities.userHasBeenActive && this.capabilities.canVibrate) {
-      navigator.vibrate(VIBRATE_DURATION);
-    }
+        if (
+          this.capabilities.userHasBeenActive &&
+          this.capabilities.canVibrate
+        ) {
+          navigator.vibrate(VIBRATE_DURATION);
+        }
 
-    await this.args.toggleLike();
+        await this.args.toggleLike();
 
-    if (!this.collapsed) {
-      await this.#fetchWhoLiked();
-    }
+        if (!this.collapsed) {
+          await this.#fetchWhoLiked();
+        }
+      },
+      this.staticMethodsArgs
+    );
   }
 
   @action

app/assets/javascripts/discourse/app/lib/transformer/registry.js

@@ -3,6 +3,7 @@ export const BEHAVIOR_TRANSFORMERS = Object.freeze([
   "composer-position:editor-touch-move",
   "discovery-topic-list-load-more",
   "full-page-search-load-more",
+  "post-menu-toggle-like-action",
 ]);
 
 export const VALUE_TRANSFORMERS = Object.freeze([

app/assets/javascripts/discourse/tests/unit/components/post-menu-test.gjs

@@ -0,0 +1,42 @@
+import { getOwner } from "@ember/owner";
+import { click, render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import PostMenu from "discourse/components/post/menu";
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+
+module("Unit | Component | post-menu", function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.siteSettings.glimmer_post_menu_mode = "enabled";
+    this.siteSettings.post_menu_hidden_items = "";
+
+    const store = getOwner(this).lookup("service:store");
+    const topic = store.createRecord("topic", { id: 123 });
+    this.post = store.createRecord("post", {
+      id: 1,
+      post_number: 1,
+      topic,
+      like_count: 3,
+      actions_summary: [{ id: 2, count: 1, hidden: false, can_act: true }],
+    });
+  });
+
+  test("post-menu-toggle-like-action behavior transformer", async function (assert) {
+    withPluginApi("2.0.0", (api) => {
+      api.registerBehaviorTransformer("post-menu-toggle-like-action", () => {
+        assert.step("transformer called");
+      });
+    });
+
+    const post = this.post; // using this inside the template does not correspond to the test `this` context
+    await render(<template><PostMenu @post={{post}} /></template>);
+
+    await click(".post-action-menu__like");
+    assert.verifySteps(
+      ["transformer called"],
+      "behavior transformer was called"
+    );
+  });
+});