merge/merge_css.test.js at master · zerocorebeta/merge · 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
const { mergeCSS } = require("./merge_css"); // adjust path if needed

describe("mergeCSS tests", () => {
    test("inserts new property into existing selector", () => {
        const original = `p { color: red; }`;
        const ai = `p { font-size: 16px; }`;
        const merged = mergeCSS(original, ai);
        expect(merged).toContain("color: red");
        expect(merged).toContain("font-size: 16px");
    });

    test("overwrites existing property", () => {
        const original = `p { color: red; }`;
        const ai = `p { color: blue; }`;
        const merged = mergeCSS(original, ai);
        expect(merged).toContain("color: blue");
        expect(merged).not.toContain("color: red");
    });

    test("deletes a property with DELETE_THIS", () => {
        const original = `p { color: red; font-size: 16px; }`;
        const ai = `p { color: DELETE_THIS; }`;
        const merged = mergeCSS(original, ai);
        expect(merged).not.toContain("color: red");
        expect(merged).toContain("font-size: 16px");
    });

    test("deletes entire rule with DELETE_THIS", () => {
        const original = `p { color: red; } h1 { font-size: 24px; }`;
        const ai = `p { DELETE_THIS: DELETE_THIS; }`;
        const merged = mergeCSS(original, ai);
        expect(merged).not.toContain("p {");
        expect(merged).toContain("h1 {");
    });

    test("merges media query rules", () => {
        const original = `
      @media screen and (min-width: 600px) {
        p { color: red; }
      }
    `;
        const ai = `
      @media screen and (min-width: 600px) {
        p { font-size: 16px; }
      }
    `;
        const merged = mergeCSS(original, ai);
        expect(merged).toContain("color: red");
        expect(merged).toContain("font-size: 16px");
    });

    describe("mergeCSS explicit-only rule", () => {
  test("edits existing selector (allowed)", () => {
    const original = `p { color: red; }`;
    const ai = `p { color: blue; }`;
    const merged = mergeCSS(original, ai);
    expect(merged.replace(/\s/g, "")).toContain("p{color:blue;}");
  });

  test("adds new selector without prefix (throws error)", () => {
    const original = `p { color: red; }`;
    const ai = `h1 { font-size: 32px; }`;
    expect(() => mergeCSS(original, ai)).toThrow(
      /Selector "h1" not found in file/
    );
  });

  test("adds new selector with explicit NEW_SELECTOR prefix (allowed)", () => {
    const original = `p { color: red; }`;
    const ai = `NEW_SELECTOR: h1 { font-size: 32px; }`;
    const merged = mergeCSS(original, ai);
    expect(merged.replace(/\s/g, "")).toContain("p{color:red;}");
    expect(merged.replace(/\s/g, "")).toContain("h1{font-size:32px;}");
  });

  test("deletes existing property (allowed)", () => {
    const original = `p { color: red; font-size: 12px; }`;
    const ai = `p { font-size: DELETE_THIS; }`;
    const merged = mergeCSS(original, ai);
    expect(merged.replace(/\s/g, "")).toContain("p{color:red;}");
    expect(merged.replace(/\s/g, "")).not.toContain("font-size");
  });

  test("tries to delete non-existent property (throws error)", () => {
    const original = `p { color: red; }`;
    const ai = `p { font-size: DELETE_THIS; }`;
    expect(() => mergeCSS(original, ai)).toThrow(
      /Tried to delete property "font-size" but it does not exist/
    );
  });

  test("deletes entire rule with DELETE_THIS", () => {
    const original = `p { color: red; }`;
    const ai = `p { DELETE_THIS: DELETE_THIS; }`;
    const merged = mergeCSS(original, ai);
    expect(merged.replace(/\s/g, "")).not.toContain("p{color:red;}");
  });

  test("throws error on ambiguity (same selector twice)", () => {
    const original = `
      p { color: red; }
      p { font-size: 12px; }
    `;
    const ai = `p { color: blue; }`;
    expect(() => mergeCSS(original, ai)).toThrow(
      /Ambiguity: Selector "p" found multiple times/
    );
  });
});

});