Odoo18-Base/addons/web/static/tests/core/checkbox.test.js
2025-01-06 10:57:38 +07:00

136 lines
3.7 KiB
JavaScript

import { expect, test } from "@odoo/hoot";
import { check, uncheck } from "@odoo/hoot-dom";
import { Component, useState, xml } from "@odoo/owl";
import { contains, defineParams, mountWithCleanup } from "@web/../tests/web_test_helpers";
import { CheckBox } from "@web/core/checkbox/checkbox";
test("can be rendered", async () => {
await mountWithCleanup(CheckBox);
expect(`.o-checkbox input[type=checkbox]`).toHaveCount(1);
expect(`.o-checkbox input[type=checkbox]`).toBeEnabled();
});
test("has a slot for translatable text", async () => {
defineParams({ translations: { ragabadabadaba: "rugubudubudubu" } });
class Parent extends Component {
static components = { CheckBox };
static props = {};
static template = xml`<CheckBox>ragabadabadaba</CheckBox>`;
}
await mountWithCleanup(Parent);
expect(`.form-check`).toHaveCount(1);
expect(`.form-check`).toHaveText("rugubudubudubu", { exact: true });
});
test("call onChange prop when some change occurs", async () => {
let value = false;
class Parent extends Component {
static components = { CheckBox };
static props = {};
static template = xml`<CheckBox onChange="onChange" />`;
onChange(checked) {
value = checked;
}
}
await mountWithCleanup(Parent);
expect(`.o-checkbox input`).toHaveCount(1);
await check("input");
expect(value).toBe(true);
await uncheck("input");
expect(value).toBe(false);
});
test("checkbox with props disabled", async () => {
class Parent extends Component {
static components = { CheckBox };
static props = {};
static template = xml`<CheckBox disabled="true" />`;
}
await mountWithCleanup(Parent);
expect(`.o-checkbox input`).toHaveCount(1);
expect(`.o-checkbox input`).not.toBeEnabled();
});
test.tags("desktop");
test("can toggle value by pressing ENTER", async () => {
class Parent extends Component {
static components = { CheckBox };
static props = {};
static template = xml`<CheckBox onChange.bind="onChange" value="state.value" />`;
setup() {
this.state = useState({ value: false });
}
onChange(checked) {
this.state.value = checked;
}
}
await mountWithCleanup(Parent);
expect(`.o-checkbox input`).toHaveCount(1);
expect(`.o-checkbox input`).not.toBeChecked();
await contains(".o-checkbox input").press("Enter");
expect(`.o-checkbox input`).toBeChecked();
await contains(".o-checkbox input").press("Enter");
expect(`.o-checkbox input`).not.toBeChecked();
});
test.tags("desktop");
test("toggling through multiple ways", async () => {
class Parent extends Component {
static components = { CheckBox };
static props = {};
static template = xml`<CheckBox onChange.bind="onChange" value="state.value" />`;
setup() {
this.state = useState({ value: false });
}
onChange(checked) {
this.state.value = checked;
expect.step(String(checked));
}
}
await mountWithCleanup(Parent);
expect(`.o-checkbox input`).toHaveCount(1);
expect(`.o-checkbox input`).not.toBeChecked();
await contains(".o-checkbox").click();
expect(`.o-checkbox input`).toBeChecked();
await contains(".o-checkbox > .form-check-label", { visible: false }).uncheck();
expect(`.o-checkbox input`).not.toBeChecked();
await contains(".o-checkbox input").press("Enter");
expect(`.o-checkbox input`).toBeChecked();
await contains(".o-checkbox input").press(" ");
expect(`.o-checkbox input`).not.toBeChecked();
expect.verifySteps(["true", "false", "true", "false"]);
});