[FIX] blockdom: fix crash when class object key has leading spaces

Previously, having a leading or trailing space caused
HTMLElement.classList.add to be called with an empty string (because we
are splitting on whitespace), which is not allowed and caused a crash.
This commit fixes that by trimming the keys of the class object in the
same way that we already do it for class strings.
This commit is contained in:
Samuel Degueldre
2022-06-22 15:36:36 +02:00
committed by Géry Debongnie
parent 2e03332acd
commit e57e2ee378
3 changed files with 118 additions and 0 deletions
@@ -168,6 +168,48 @@ exports[`attributes dynamic class attribute evaluating to 0 1`] = `
}"
`;
exports[`attributes dynamic class attribute that starts and ends with a space 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = ctx['c'];
return block1([attr1]);
}
}"
`;
exports[`attributes dynamic class attribute which is only a space 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = ctx['c'];
return block1([attr1]);
}
}"
`;
exports[`attributes dynamic class attribute with multiple consecutive spaces 1`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = ctx['c'];
return block1([attr1]);
}
}"
`;
exports[`attributes dynamic empty class attribute 1`] = `
"function anonymous(app, bdom, helpers
) {
@@ -470,6 +512,20 @@ exports[`attributes t-att-class with multiple classes 2`] = `
}"
`;
exports[`attributes t-att-class with multiple classes 3`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = {'a b c':ctx['value']};
return block1([attr1]);
}
}"
`;
exports[`attributes t-att-class with multiple classes, some of which are duplicate 1`] = `
"function anonymous(app, bdom, helpers
) {
@@ -498,6 +554,34 @@ exports[`attributes t-att-class with object 1`] = `
}"
`;
exports[`attributes t-att-class with object 2`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = {' a ':ctx['value']};
return block1([attr1]);
}
}"
`;
exports[`attributes t-att-class with object 3`] = `
"function anonymous(app, bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
return function template(ctx, node, key = \\"\\") {
let attr1 = {' ':ctx['value']};
return block1([attr1]);
}
}"
`;
exports[`attributes t-attf-class 1`] = `
"function anonymous(app, bdom, helpers
) {
+30
View File
@@ -63,6 +63,24 @@ describe("attributes", () => {
expect(result).toBe(`<div></div>`);
});
test("dynamic class attribute which is only a space", () => {
const template = `<div t-att-class="c"/>`;
const result = renderToString(template, { c: " " });
expect(result).toBe(`<div></div>`);
});
test("dynamic class attribute with multiple consecutive spaces", () => {
const template = `<div t-att-class="c"/>`;
const result = renderToString(template, { c: "a b" });
expect(result).toBe(`<div class="a b"></div>`);
});
test("dynamic class attribute that starts and ends with a space", () => {
const template = `<div t-att-class="c"/>`;
const result = renderToString(template, { c: " a " });
expect(result).toBe(`<div class="a"></div>`);
});
test("dynamic undefined generic attribute", () => {
const template = `<div t-att-thing="c"/>`;
const result = renderToString(template, { c: undefined });
@@ -260,6 +278,14 @@ describe("attributes", () => {
const template = `<div class="static" t-att-class="{a: b, c: d, e: f}"/>`;
const result = renderToString(template, { b: true, d: false, f: true });
expect(result).toBe(`<div class="static a e"></div>`);
// leading and trailing space in the key
expect(renderToString(`<div t-att-class="{' a ': value}" />`, { value: true })).toBe(
'<div class="a"></div>'
);
// whitespace only key
expect(renderToString(`<div t-att-class="{' ': value}" />`, { value: true })).toBe(
"<div></div>"
);
});
test("t-att-class with multiple classes", () => {
@@ -269,6 +295,10 @@ describe("attributes", () => {
expect(renderToString(`<div t-att-class="{['a b c']: value}" />`, { value: true })).toBe(
'<div class="a b c"></div>'
);
// multiple spaces between classes
expect(renderToString(`<div t-att-class="{'a b c': value}" />`, { value: true })).toBe(
'<div class="a b c"></div>'
);
});
test("t-att-class with multiple classes, some of which are duplicate", () => {