[FIX] action button: use nextProps instead of this.props

In the `onWillUpdateProps` of the action button component, we used
this.props instead of nextProps, which is very wrong.

closes #5308

Task: 0
X-original-commit: ad2ae1b
Signed-off-by: Vincent Schippefilt (vsc) <[email protected]>
Signed-off-by: Adrien Minne (adrm) <[email protected]>

src/components/action_button/action_button.ts

@@ -40,9 +40,9 @@ export class ActionButton extends Component<Props, SpreadsheetChildEnv> {
   private actionButton = createAction(this.props.action);
 
   setup() {
-    onWillUpdateProps((nextProps) => {
+    onWillUpdateProps((nextProps: Props) => {
       if (nextProps.action !== this.props.action) {
-        this.actionButton = createAction(this.props.action);
+        this.actionButton = createAction(nextProps.action);
       }
     });
   }

tests/action_button.test.ts

@@ -0,0 +1,28 @@
+import { Component, xml } from "@odoo/owl";
+import { ActionSpec } from "../src/actions/action";
+import { ActionButton } from "../src/components/action_button/action_button";
+import { SpreadsheetChildEnv } from "../src/types";
+import { mountComponent, nextTick } from "./test_helpers/helpers";
+
+interface ParentProps {
+  getAction: () => ActionSpec;
+}
+
+class Parent extends Component<ParentProps, SpreadsheetChildEnv> {
+  static components = { ActionButton };
+  static template = xml/*xml*/ `
+      <ActionButton action="props.getAction()"/>
+    `;
+}
+
+test("ActionButton is updated when its props are updated", async () => {
+  let action = { isActive: () => true, name: "TestAction" };
+  const { parent, fixture } = await mountComponent(Parent, { props: { getAction: () => action } });
+  const actionButton = fixture.querySelector(".o-menu-item-button")!;
+  expect(actionButton.classList).toContain("active");
+
+  action = { isActive: () => false, name: "TestAction" };
+  parent.render(true);
+  await nextTick();
+  expect(actionButton.classList).not.toContain("active");
+});