Patterns/src/core/registry.test.js at 0e491938c56a84a46cbd04883bce2027843c0df1 · Patternslib/Patterns · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import Base from "./base";
import registry from "./registry";

describe("pat-registry: The registry for patterns", function () {
    const patterns = registry.patterns;

    beforeEach(function () {
        registry.clear();
    });

    afterEach(function () {
        registry.patterns = patterns;
    });

    it("Does initialize a simple pattern when scanning a DOM tree", function () {
        // Base extend also registers the pattern.
        Base.extend({
            name: "example",
            trigger: ".pat-example",
            init: function () {
                this.el.innerHTML = "initialized";
            },
        });

        const tree = document.createElement("div");
        tree.setAttribute("class", "pat-example");
        registry.scan(tree);
        expect(tree.textContent).toBe("initialized");
    });

    it("Does initialize a tree of simple patterns when scanning a DOM tree", function () {
        Base.extend({
            name: "example1",
            trigger: ".pat-example1",
            init: function () {
                this.el.innerHTML = "initialized1";
            },
        });

        Base.extend({
            name: "example2",
            trigger: ".pat-example2",
            init: function () {
                this.el.innerHTML = "initialized2";
            },
        });

        const tree = document.createElement("div");
        tree.innerHTML = `
            <div class="e1 pat-example1"></div>
            <div class="e2 pat-example2"></div>
            <div class="e3 pat-example1"></div>
            <div class="e4 pat-example2"></div>
        `;
        registry.scan(tree);
        expect(tree.querySelector(".e1").textContent).toBe("initialized1");
        expect(tree.querySelector(".e2").textContent).toBe("initialized2");
        expect(tree.querySelector(".e3").textContent).toBe("initialized1");
        expect(tree.querySelector(".e4").textContent).toBe("initialized2");
    });

    it("Does not initialize patterns matching a filter", function () {
        Base.extend({
            name: "example",
            trigger: ".pat-example",
            init: function () {
                this.el.innerHTML = "initialized";
            },
        });

        const tree = document.createElement("div");
        tree.innerHTML = `
            <div class="e1 pat-example"></div>
            <div class="e2 disable-patterns pat-example"></div>
            <div class="disable-patterns">
                <div class="e3 pat-example"></div>
            </div>
            <pre>
                <div>
                    <div class="e4 pat-example"></div>
                </div>
            </pre>
            <template class="e5">
                <div>
                    <div class="pat-example"></div>
                </div>
            </template>
        `;
        registry.scan(tree);

        expect(tree.querySelector(".e1").textContent).toBe("initialized");
        expect(tree.querySelector(".e2").textContent).toBe("");
        expect(tree.querySelector(".e3").textContent).toBe("");
        expect(tree.querySelector(".e4").textContent).toBe("");
        expect(
            tree
                .querySelector(".e5")
                .content.firstElementChild.querySelector(".pat-example").textContent
        ).toBe("");
    });

    it("Does not break when trying to scan undefined.", function (done) {
        expect(() => registry.scan(undefined, [], "")).not.toThrow(Error);

        done();
    });

    it("Does nothing with Patterns without a trigger.", function () {
        registry.register(
            {
                name: "pattern-without-trigger"
            }
        )

        const el = document.createElement("div");
        expect(() => { registry.scan(el) }).not.toThrow(DOMException);
    });

});