maint(pat-autofocus): Switch to class based patterns.

Author: thet

src/pat/autofocus/autofocus.js

@@ -1,11 +1,12 @@
-import Base from "../../core/base";
+import { BasePattern } from "../../core/basepattern";
 import dom from "../../core/dom";
+import registry from "../../core/registry";
 
 let scheduled_task = null;
 
-export default Base.extend({
-    name: "autofocus",
-    trigger: `
+class Pattern extends BasePattern {
+    static name = "autofocus";
+    static trigger = `
         input.pat-autofocus,
         input[autofocus],
         select.pat-autofocus,
@@ -14,15 +15,15 @@ export default Base.extend({
         textarea[autofocus],
         button.pat-autofocus,
         button[autofocus]
-    `,
+    `;
 
     init() {
         if (window.self !== window.top) {
             // Do not autofocus in iframes.
             return;
         }
         this.set_focus();
-    },
+    }
 
     set_focus() {
         if (dom.is_visible(this.el) && this.el.value === "") {
@@ -41,5 +42,10 @@ export default Base.extend({
                 scheduled_task = null;
             }, 100);
         }
-    },
-});
+    }
+}
+
+registry.register(Pattern);
+
+export default Pattern;
+export { Pattern };

src/pat/autofocus/autofocus.test.js

@@ -3,40 +3,43 @@ import registry from "../../core/registry";
 import utils from "../../core/utils";
 
 describe("pat-autofocus", function () {
-    it("Focus the first element.", async () => {
+    it("1 - Focus the first element.", async () => {
         document.body.innerHTML = `
             <input name="i1" type="text" class="pat-autofocus"/>
             <input name="i2" type="text" class="pat-autofocus"/>
             <input name="i3" type="text" class="pat-autofocus"/>
         `;
         registry.scan(document.body);
-        await utils.timeout(100);
+        await utils.timeout(1); // Wait for async pattern initialization.
+        await utils.timeout(100); // Wait for autofocus timeout.
 
         const should_be_active = document.querySelector("input[name=i1]");
         expect(document.activeElement).toBe(should_be_active);
     });
 
-    it("Focus the first empty element, if available.", async () => {
+    it("2 - Focus the first empty element, if available.", async () => {
         document.body.innerHTML = `
             <input name="i1" type="text" class="pat-autofocus" value="okay"/>
             <input name="i2" type="text" class="pat-autofocus"/>
             <input name="i3" type="text" class="pat-autofocus"/>
         `;
         registry.scan(document.body);
-        await utils.timeout(100);
+        await utils.timeout(1); // Wait for async pattern initialization.
+        await utils.timeout(100); // Wait for autofocus timeout.
 
         const should_be_active = document.querySelector("input[name=i2]");
         expect(document.activeElement).toBe(should_be_active);
     });
 
-    it("Don't focus hidden elements.", async () => {
+    it("3 - Don't focus hidden elements.", async () => {
         document.body.innerHTML = `
             <input name="i1" type="text" class="pat-autofocus" value="okay"/>
             <input name="i2" type="text" class="pat-autofocus" hidden/>
             <input name="i3" type="text" class="pat-autofocus"/>
         `;
         registry.scan(document.body);
-        await utils.timeout(100);
+        await utils.timeout(1); // Wait for async pattern initialization.
+        await utils.timeout(100); // Wait for autofocus timeout.
 
         const should_be_active = document.querySelector("input[name=i3]");
         expect(document.activeElement).toBe(should_be_active);