fix issue with actioncontainer, add tests

web/static/src/ts/core/component.ts

@@ -286,9 +286,8 @@ export class PureComponent<T extends WEnv, Props, State> extends Component<
   async updateState(nextState: Partial<State>) {
     for (let k in nextState) {
       if (nextState[k] !== this.state[k]) {
-        return;
-      }
-    }
         return super.updateState(nextState);
       }
+    }
+  }
 }

web/static/src/ts/services/action_manager.ts

@@ -59,7 +59,6 @@ export class ActionManager extends EventBus implements IActionManager {
   }
 
   doAction(request: ActionRequest) {
-    console.log("doaction", request);
     if (typeof request === "number") {
       // this is an action ID
       let name = request === 131 ? "discuss" : "crm";

web/static/src/ts/widgets/action_container.ts

@@ -17,6 +17,17 @@ export class ActionContainer extends Widget<Props, {}> {
   template = "web.action_container";
   currentWidget: any;
 
+  willStart() {
+    return this.setContentWidget();
+  }
+
+  mounted() {
+    if (this.currentWidget && this.currentWidget.el) {
+      this.el!.appendChild(this.currentWidget.el);
+      this.currentWidget.__mount();
+    }
+  }
+
   shouldUpdate(nextProps: Props) {
     if (nextProps.stack !== this.props.stack) {
       this.props = nextProps;
@@ -30,7 +41,7 @@ export class ActionContainer extends Widget<Props, {}> {
     if (info && info.type === "client") {
       const Widget = info.Widget;
       let widget = new Widget(this, {});
-      await widget.mount(this.el!);
+      await widget.mount(this.el || document.createElement("div"));
       if (this.currentWidget) {
         this.currentWidget.destroy();
       }

web/static/tests/core/component.test.ts

@@ -1,5 +1,10 @@
 import { Component, WEnv } from "../../src/ts/core/component";
-import { makeTestFixture, makeTestWEnv, normalize } from "../helpers";
+import {
+  makeTestFixture,
+  makeTestWEnv,
+  nextMicroTick,
+  normalize
+} from "../helpers";
 
 //------------------------------------------------------------------------------
 // Setup and helpers
@@ -29,10 +34,6 @@ afterEach(() => {
   fixture.remove();
 });
 
-function nextTick(): Promise<void> {
-  return Promise.resolve();
-}
-
 class Widget extends Component<WEnv, {}, {}> {}
 
 function children(w: Widget): Widget[] {
@@ -85,7 +86,7 @@ describe("basic widget properties", () => {
     expect(target.innerHTML).toBe("<div>0<button>Inc</button></div>");
     const button = (<HTMLElement>counter.el).getElementsByTagName("button")[0];
     await button.click();
-    await nextTick();
+    await nextMicroTick();
     expect(target.innerHTML).toBe("<div>1<button>Inc</button></div>");
   });
 
@@ -470,9 +471,9 @@ describe("destroy method", () => {
     resolve();
     // Note: should we abandon await and not have to do this?
     // TODO: talk to vsc
-    await nextTick();
+    await nextMicroTick();
-    await nextTick();
+    await nextMicroTick();
-    await nextTick();
+    await nextMicroTick();
 
     expect(widget.__widget__.isStarted).toBe(false);
     expect(widget.__widget__.isMounted).toBe(false);
@@ -513,7 +514,7 @@ describe("composition", () => {
     );
     const button = fixture.getElementsByTagName("button")[0];
     await button.click();
-    await nextTick();
+    await nextMicroTick();
     expect(fixture.innerHTML).toBe(
       "<div><div>1<button>Inc</button></div></div>"
     );
@@ -548,7 +549,7 @@ describe("composition", () => {
     await widget.mount(fixture);
     const button = fixture.getElementsByTagName("button")[0];
     await button.click();
-    await nextTick();
+    await nextMicroTick();
     expect(fixture.innerHTML).toBe(
       "<div><div>1<button>Inc</button></div></div>"
     );
@@ -568,7 +569,7 @@ describe("composition", () => {
     await widget.mount(fixture);
     const button = fixture.getElementsByTagName("button")[0];
     await button.click();
-    await nextTick();
+    await nextMicroTick();
     expect(fixture.innerHTML).toBe(
       "<div><div>1<button>Inc</button></div></div>"
     );
@@ -590,7 +591,7 @@ describe("composition", () => {
     await widget.mount(fixture);
     const button = fixture.getElementsByTagName("button")[0];
     await button.click();
-    await nextTick();
+    await nextMicroTick();
     expect(fixture.innerHTML).toBe(
       "<div><div>1<button>Inc</button></div></div>"
     );

web/static/tests/helpers.ts

@@ -4,11 +4,11 @@ import { WEnv } from "../src/ts/core/component";
 import { Callback } from "../src/ts/core/event_bus";
 import { NotificationManager } from "../src/ts/core/notifications";
 import { QWeb } from "../src/ts/core/qweb_vdom";
-import { Registry } from "../src/ts/core/registry";
+import { actionRegistry } from "../src/ts/registries";
 import { IRouter, Query, RouterEvent } from "../src/ts/core/router";
 import { idGenerator } from "../src/ts/core/utils";
 import { getMenuInfo } from "../src/ts/init";
-import { ActionEvent, IActionManager } from "../src/ts/services/action_manager";
+import { ActionManager } from "../src/ts/services/action_manager";
 import { MenuInfo } from "../src/ts/widgets/root";
 import { Env } from "../src/ts/widgets/widget";
 
@@ -31,14 +31,14 @@ export interface MockEnv extends Env {
 
 export function makeTestEnv(): MockEnv {
   const ajax = new MockAjax();
-  const actionManager = new MockActionManager();
+  const actionManager = new ActionManager(actionRegistry);
   const router = new MockRouter();
   const notifications = new NotificationManager();
   let { qweb, getID } = makeTestWEnv();
   return {
     qweb,
     getID,
-    actionRegistry: new Registry(),
+    actionRegistry,
     ajax,
     actionManager,
     notifications,
@@ -55,15 +55,6 @@ class MockAjax implements IAjax {
   }
 }
 
-class MockActionManager implements IActionManager {
-  doAction(actionID: number) {}
-  on(event: ActionEvent, owner: any, callback: Callback) {}
-  activate() {}
-  getStack() {
-    return [];
-  }
-}
-
 class MockRouter implements IRouter {
   currentQuery: Query = {};
 
@@ -201,3 +192,11 @@ export function makeDemoMenuInfo(): MenuInfo {
     }
   ]);
 }
+
+export function nextMicroTick(): Promise<void> {
+  return Promise.resolve();
+}
+
+export function nextTick(): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve));
+}

web/static/tests/widgets/__snapshots__/action_container.test.ts.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`can be rendered with a non empty stack 1`] = `"<div class=\\"o_content\\"><div>some client action</div></div>"`;
+
+exports[`can be rendered with an empty stack 1`] = `"<div class=\\"o_content\\"></div>"`;
+
+exports[`content is updated properly when new props are given 1`] = `"<div class=\\"o_content\\"><div>some client action</div></div>"`;

web/static/tests/widgets/__snapshots__/root.test.ts.snap

@@ -108,3 +108,69 @@ exports[`if url has action_id, will render action and navigate to proper menu_id
     </div>
   </div>"
 `;
+
+exports[`start with no action => clicks on client action => discuss is rendered 1`] = `
+"<div class=\\"o_web_client\\">
+    <div class=\\"o_navbar\\">
+    <a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
+    
+      <a class=\\"o_menu_brand\\" href=\\"\\" role=\\"button\\">
+        Discuss
+      </a>
+      <ul class=\\"o_menu_sections\\">
+        <li>
+          
+            <a href=\\"#\\" role=\\"button\\" class=\\"dropdown-toggle o-no-caret\\" data-toggle=\\"dropdown\\">
+              <span>
+                Integrations
+              </span>
+            </a>
+            <div class=\\"dropdown-menu\\" role=\\"menu\\">
+              
+                <a href=\\"\\" data-toggle=\\"collapse\\" data-target=\\"#someid\\" role=\\"menuitem\\" class=\\"dropdown-item\\">
+                  <span>
+                    Github Repositories
+                  </span>
+                </a>
+              
+            </div>
+          
+        </li>
+        
+      </ul>
+    
+  </div>
+    
+      <div class=\\"o_content\\"><div class=\\"o_discuss\\">
+    <span>DISCUSS!!</span>
+    <button>Reset first counter</button>
+    <button>Reset counter 2 in 3s</button>
+    <button>Toggle  Clock/counters</button>
+    <button>Toggle Color</button>
+    <button>Rerender this widget</button>
+    <input>
+    
+      <div>
+      <button>-</button>
+      <span style=\\"font-weight:bold\\">Value: 4</span>
+      <button>+</button>
+    </div>
+      <div>
+      <button>-</button>
+      <span style=\\"font-weight:bold\\">Value: 400</span>
+      <button>+</button>
+    </div>
+    
+    <div>
+      <span>Current Color: </span>
+      red
+    </div>
+    <button>Add notif</button>
+    <button>Add sticky notif</button>
+  </div></div>
+    
+    <div class=\\"o_notification_container\\">
+      
+    </div>
+  </div>"
+`;

web/static/tests/widgets/action_container.test.ts

@@ -0,0 +1,69 @@
+import { ActionStack } from "../../src/ts/services/action_manager";
+import { ActionContainer, Props } from "../../src/ts/widgets/action_container";
+import { Widget } from "../../src/ts/widgets/widget";
+import * as helpers from "../helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+let env: ReturnType<typeof helpers.makeTestEnv>;
+let props: Props;
+let templates: string;
+
+beforeAll(async () => {
+  templates = await helpers.loadTemplates();
+});
+
+beforeEach(() => {
+  fixture = helpers.makeTestFixture();
+  env = helpers.makeTestEnv();
+  env.qweb.loadTemplates(templates);
+  props = { stack: [] };
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+class ClientAction extends Widget<{}, {}> {
+  inlineTemplate = "<div>some client action</div>";
+}
+
+const demoStack: ActionStack = [
+  {
+    id: 33,
+    context: {},
+    title: "some title",
+    target: "new",
+    type: "client",
+    name: "hey",
+    Widget: ClientAction
+  }
+];
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+test("can be rendered with an empty stack", async () => {
+  const container = new ActionContainer(env, props);
+  await container.mount(fixture);
+  expect(fixture.innerHTML).toMatchSnapshot();
+});
+
+test("can be rendered with a non empty stack", async () => {
+  props.stack = demoStack;
+  const container = new ActionContainer(env, props);
+  await container.mount(fixture);
+  expect(fixture.innerHTML).toMatchSnapshot();
+});
+
+test("content is updated properly when new props are given", async () => {
+  const container = new ActionContainer(env, props);
+  await container.mount(fixture);
+  await container.updateProps({ stack: demoStack });
+  await helpers.nextTick();
+  expect(fixture.innerHTML).toMatchSnapshot();
+});

web/static/tests/widgets/root.test.ts

@@ -30,16 +30,29 @@ afterEach(() => {
 //------------------------------------------------------------------------------
 
 test("can be rendered (in home menu)", async () => {
-  const navbar = new Root(env, props);
+  const root = new Root(env, props);
-  await navbar.mount(fixture);
+  await root.mount(fixture);
   expect(fixture.innerHTML).toMatchSnapshot();
 });
 
 test("if url has action_id, will render action and navigate to proper menu_id", async () => {
   env.router.setQuery({ action_id: "595" });
-  const navbar = new Root(env, props);
+  const root = new Root(env, props);
-  await navbar.mount(fixture);
+  await root.mount(fixture);
   expect(fixture.innerHTML).toMatchSnapshot();
   // we check here that the url was changed to set app id as menu_id
   expect(env.router.currentQuery).toEqual({ action_id: "595", menu_id: "409" });
 });
+
+test("start with no action => clicks on client action => discuss is rendered", async () => {
+  const root = new Root(env, props);
+  await root.mount(fixture);
+
+  expect(env.router.currentQuery).toEqual({});
+
+  // discuss menu item
+  await (<any>document.querySelector('[data-menu="96"]')).click();
+  await helpers.nextTick();
+  expect(fixture.innerHTML).toMatchSnapshot();
+  expect(env.router.currentQuery).toEqual({ action_id: "131", menu_id: "96" });
+});