1 files changed, 138 insertions, 0 deletions
diff --git a/addons/web/static/tests/component_extension_tests.js b/addons/web/static/tests/component_extension_tests.js
index c9fd5906a9f..f0b33db655c 100644
--- a/addons/web/static/tests/component_extension_tests.js
+++ b/addons/web/static/tests/component_extension_tests.js
@@ -6,6 +6,7 @@ odoo.define('web.component_extension_tests', function (require) {
 
     const { Component, tags } = owl;
     const { xml } = tags;
+    const { useListener } = require('web.custom_hooks');
 
     QUnit.module("web", function () {
         QUnit.module("Component Extension");
@@ -43,5 +44,142 @@ odoo.define('web.component_extension_tests', function (require) {
 
             assert.ok(true, "Promise should still be pending");
         });
+
+        QUnit.module("Custom Hooks");
+
+        QUnit.test("useListener handler type", async function (assert) {
+            assert.expect(1);
+
+            class Parent extends Component {
+                constructor() {
+                    super();
+                    useListener('custom1', '_onCustom1');
+                }
+            }
+            Parent.env = makeTestEnvironment({}, () => Promise.reject());
+            Parent.template = xml`<div/>`;
+
+            assert.throws(() => new Parent(null), 'The handler must be a function');
+        });
+
+        QUnit.test("useListener in inheritance setting", async function (assert) {
+            assert.expect(12);
+            const fixture = document.body.querySelector('#qunit-fixture');
+
+            class Parent extends Component {
+                constructor() {
+                    super();
+                    useListener('custom1', this._onCustom1);
+                    useListener('custom2', this._onCustom2);
+                }
+                _onCustom1() {
+                    assert.step(`${this.constructor.name} custom1`);
+                }
+                _onCustom2() {
+                    assert.step('parent custom2');
+                }
+            }
+            Parent.env = makeTestEnvironment({}, () => Promise.reject());
+            Parent.template = xml`<div/>`;
+
+            class Child extends Parent {
+                constructor() {
+                    super();
+                    useListener('custom2', this._onCustom2);
+                    useListener('custom3', this._onCustom3);
+                }
+                _onCustom2() {
+                    assert.step('overriden custom2');
+                }
+                _onCustom3() {
+                    assert.step('child custom3');
+                }
+            }
+
+            const parent = new Parent(null);
+            const child = new Child(null);
+            await parent.mount(fixture);
+            await child.mount(fixture);
+
+            parent.trigger('custom1');
+            assert.verifySteps(['Parent custom1']);
+            parent.trigger('custom2');
+            assert.verifySteps(['parent custom2']);
+            parent.trigger('custom3');
+            assert.verifySteps([]);
+
+            child.trigger('custom1');
+            assert.verifySteps(['Child custom1']);
+            // There are two handlers for that one (Parent and Child)
+            // Although the handler is overriden in Child
+            child.trigger('custom2');
+            assert.verifySteps(['overriden custom2', 'overriden custom2']);
+            child.trigger('custom3');
+            assert.verifySteps(['child custom3']);
+            parent.destroy();
+            child.destroy();
+        });
+
+        QUnit.test("useListener with native JS selector", async function (assert) {
+            assert.expect(3);
+            const fixture = document.body.querySelector('#qunit-fixture');
+
+            class Parent extends Component {
+                constructor() {
+                    super();
+                    useListener('custom1', 'div .custom-class', this._onCustom1);
+                }
+                _onCustom1() {
+                    assert.step(`custom1`);
+                }
+            }
+            Parent.env = makeTestEnvironment({}, () => Promise.reject());
+            Parent.template = xml`
+                <div>
+                    <p>no trigger</p>
+                    <h1 class="custom-class">triggers</h1>
+                </div>`;
+
+            const parent = new Parent(null);
+            await parent.mount(fixture);
+
+            parent.el.querySelector('p').dispatchEvent(new Event('custom1', {bubbles: true}));
+            assert.verifySteps([]);
+            parent.el.querySelector('h1').dispatchEvent(new Event('custom1', {bubbles: true}));
+            assert.verifySteps(['custom1']);
+            parent.destroy();
+        });
+
+        QUnit.test("useListener with native JS selector delegation", async function (assert) {
+            assert.expect(3);
+            const fixture = document.body.querySelector('#qunit-fixture');
+
+            class Parent extends Component {
+                constructor() {
+                    super();
+                    useListener('custom1', '.custom-class', this._onCustom1);
+                }
+                _onCustom1() {
+                    assert.step(`custom1`);
+                }
+            }
+            Parent.env = makeTestEnvironment({}, () => Promise.reject());
+            Parent.template = xml`
+                <div>
+                    <p>no trigger</p>
+                    <h1 class="custom-class"><h2>triggers</h2></h1>
+                </div>`;
+
+            fixture.classList.add('custom-class');
+            const parent = new Parent(null);
+            await parent.mount(fixture);
+
+            parent.el.querySelector('p').dispatchEvent(new Event('custom1', {bubbles: true}));
+            assert.verifySteps([]);
+            parent.el.querySelector('h2').dispatchEvent(new Event('custom1', {bubbles: true}));
+            assert.verifySteps(['custom1']);
+            parent.destroy();
+            fixture.classList.remove('custom-class');
+        });
     });
 });