musicblocks/js/__tests__/palette-search.test.js at 821cccfb0b19e911f0438229a115a93fff824004 · sugarlabs/musicblocks · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

describe("Palette Search Functionality", () => {
    let palette;
    let mockActivity;
    let mockPalettes;

    beforeEach(() => {
        document.body.innerHTML = `
            <div id="palette">
                <div></div>
            </div>
        `;

        mockActivity = {
            cellSize: 55,
            blocksContainer: { x: 0, y: 0 }
        };

        mockPalettes = {
            activity: mockActivity,
            cellSize: 27,
            top: 75,
            mobile: false
        };

        const Palette = require("../palette.js").Palette;
        palette = new Palette(mockPalettes, "rhythm");
    });

    test("fuzzyMatch should return high score for exact matches", () => {
        const score = palette._fuzzyMatch("note", "note");
        expect(score).toBeGreaterThan(90);
    });

    test("fuzzyMatch should return positive score for fuzzy matches", () => {
        const score = palette._fuzzyMatch("nt", "note");
        expect(score).toBeGreaterThan(0);
    });

    test("fuzzyMatch should return -1 for no match", () => {
        const score = palette._fuzzyMatch("xyz", "note");
        expect(score).toBe(-1);
    });

    test("fuzzyMatch should be case insensitive", () => {
        const score1 = palette._fuzzyMatch("NOTE", "note");
        const score2 = palette._fuzzyMatch("note", "NOTE");
        expect(score1).toBeGreaterThan(0);
        expect(score2).toBeGreaterThan(0);
    });

    test("fuzzyMatch should handle empty pattern", () => {
        const score = palette._fuzzyMatch("", "note");
        expect(score).toBe(100);
    });

    test("fuzzyMatch should prefer substring matches", () => {
        const exactScore = palette._fuzzyMatch("drum", "start drum");
        const fuzzyScore = palette._fuzzyMatch("drm", "start drum");
        expect(exactScore).toBeGreaterThan(fuzzyScore);
    });

    test("filterBlocks should show all blocks when query is empty", () => {
        document.body.innerHTML = `
            <table id="PaletteBody_items">
                <tr>
                    <td data-block-name="note">Block 1</td>
                </tr>
                <tr>
                    <td data-block-name="drum">Block 2</td>
                </tr>
            </table>
        `;

        palette._filterBlocks("");

        const rows = document.querySelectorAll("#PaletteBody_items tr");
        expect(rows[0].style.display).not.toBe("none");
        expect(rows[1].style.display).not.toBe("none");
    });

    test("filterBlocks should hide non-matching blocks", () => {
        document.body.innerHTML = `
            <table id="PaletteBody_items">
                <tr>
                    <td data-block-name="note">Block 1</td>
                </tr>
                <tr>
                    <td data-block-name="drum">Block 2</td>
                </tr>
            </table>
        `;

        palette._filterBlocks("note");

        const rows = document.querySelectorAll("#PaletteBody_items tr");
        expect(rows[0].style.display).not.toBe("none");
        expect(rows[1].style.display).toBe("none");
    });

    test("filterBlocks should show no results message when no matches found", () => {
        document.body.innerHTML = `
            <table id="PaletteBody_items">
                <tr>
                    <td data-block-name="note">Block 1</td>
                </tr>
            </table>
        `;

        palette._filterBlocks("xyz");

        const noResultsMsg = document.getElementById("noResultsMessage");
        expect(noResultsMsg).toBeTruthy();
    });

    test("filterBlocks should remove no results message when matches are found", () => {
        document.body.innerHTML = `
            <table id="PaletteBody_items">
                <tr>
                    <td data-block-name="note">Block 1</td>
                </tr>
                <tr id="noResultsMessage">
                    <td>No results</td>
                </tr>
            </table>
        `;

        palette._filterBlocks("note");

        const noResultsMsg = document.getElementById("noResultsMessage");
        expect(noResultsMsg).toBeFalsy();
    });

    test("fuzzyMatch should handle consecutive character matches", () => {
        const consecutiveScore = palette._fuzzyMatch("drum", "start drum");
        const nonConsecutiveScore = palette._fuzzyMatch("drm", "start drum");
        expect(consecutiveScore).toBeGreaterThan(nonConsecutiveScore);
    });
});