display notifications in a declarative way

web/static/tests/store/store.test.ts

@@ -35,56 +35,44 @@ describe("rpc", () => {
 
 describe("notifications", () => {
   test("can subscribe and add notification", () => {
-    let n = 0;
     const store = makeTestStore();
-    store.on("notification_added", null, () => n++);
-    store.on("notification_closed", null, () => n--);
-    expect(n).toBe(0);
+    expect(store.state.notifications.length).toBe(0);
     const id = store.addNotification({
       title: "test",
       message: "message"
     });
-    expect(n).toBe(1);
+    expect(store.state.notifications.length).toBe(1);
     expect(id).toBeDefined();
   });
 
   test("can close a notification", () => {
-    let n = 0;
     const store = makeTestStore();
-    store.on("notification_added", null, () => n++);
-    store.on("notification_closed", null, () => n--);
 
     const id = store.addNotification({
       title: "test",
       message: "message"
     });
-    expect(n).toBe(1);
+    expect(store.state.notifications.length).toBe(1);
 
     store.closeNotification(id);
-    expect(n).toBe(0);
+    expect(store.state.notifications.length).toBe(0);
   });
 
   test("notifications closes themselves after a while", () => {
     jest.useFakeTimers();
-    let n = 0;
     const store = makeTestStore();
-    store.on("notification_added", null, () => n++);
-    store.on("notification_closed", null, () => n--);
 
     store.addNotification({ title: "test", message: "message" });
 
     expect(setTimeout).toHaveBeenCalledTimes(1);
-    expect(n).toBe(1);
+    expect(store.state.notifications.length).toBe(1);
     jest.runAllTimers();
-    expect(n).toBe(0);
+    expect(store.state.notifications.length).toBe(0);
   });
 
   test("sticky notifications do not close themselves after a while", () => {
     jest.useFakeTimers();
-    let n = 0;
     const store = makeTestStore();
-    store.on("notification_added", null, () => n++);
-    store.on("notification_closed", null, () => n--);
 
     store.addNotification({
       title: "test",
@@ -93,9 +81,9 @@ describe("notifications", () => {
     });
 
     expect(setTimeout).toHaveBeenCalledTimes(0);
-    expect(n).toBe(1);
+    expect(store.state.notifications.length).toBe(1);
     jest.runAllTimers();
-    expect(n).toBe(1);
+    expect(store.state.notifications.length).toBe(1);
   });
 });
 

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

@@ -27,7 +27,9 @@ exports[`can be rendered (in home menu) 1`] = `
     </div>
   </div>
     <div class=\\"o_content o_hidden\\"></div>
-    <div class=\\"o_notification_container\\"></div>
+    <div class=\\"o_notification_container\\">
+      
+    </div>
     <div class=\\"o_loading d-none\\">Loading</div>
   </div>"
 `;
@@ -74,7 +76,9 @@ exports[`if url has action_id, will render action and navigate to proper menu_id
     <button>Add notif</button>
     <button>Add sticky notif</button>
   </div></div>
-    <div class=\\"o_notification_container\\"></div>
+    <div class=\\"o_notification_container\\">
+      
+    </div>
     <div class=\\"o_loading d-none\\">Loading</div>
   </div>"
 `;
@@ -121,7 +125,9 @@ exports[`start with no action => clicks on client action => discuss is rendered
     <button>Add notif</button>
     <button>Add sticky notif</button>
   </div></div>
-    <div class=\\"o_notification_container\\"></div>
+    <div class=\\"o_notification_container\\">
+      
+    </div>
     <div class=\\"o_loading d-none\\">Loading</div>
   </div>"
 `;

web/static/tests/ui/notification.test.ts

@@ -1,5 +1,5 @@
 import { Env, makeEnv } from "../../src/ts/env";
-import { INotification, Store } from "../../src/ts/store/store";
+import { Notification as INotification, Store } from "../../src/ts/store/store";
 import { Notification } from "../../src/ts/ui/notification";
 import * as helpers from "../helpers";
 
@@ -50,23 +50,15 @@ test("can be rendered", async () => {
 });
 
 test("can be closed by clicking on it (if sticky)", async () => {
-  let n = 0;
-  let notif;
-  store.on("notification_added", null, _notif => {
-    n++;
-    notif = _notif;
-  });
-  store.on("notification_closed", null, () => n--);
-
   env.addNotification({
     title: "title",
     message: "message",
     sticky: true
   });
 
-  const navbar = new Notification(env, notif);
+  const navbar = new Notification(env, store.state.notifications[0]);
   await navbar.mount(fixture);
-  expect(n).toBe(1);
+  expect(store.state.notifications.length).toBe(1);
   (<any>fixture.getElementsByClassName("o_close")[0]).click();
-  expect(n).toBe(0);
+  expect(store.state.notifications.length).toBe(0);
 });