Page MenuHomeSealhub
Files F3010826

checkboxed-list-input.test.ts
No OneTemporary
Actions

checkboxed-list-input.test.ts
View Options

import Router from "@koa/router";
import getPort from "get-port";
import { Browser, Page } from "playwright";
import type { Context } from "koa";
import Koa from "koa";
import { mount } from "../../mount.js";
import { CheckboxedListField } from "../fields/checkboxed-list.js";
import { Form } from "../form.js";
import { CheckboxedListInput } from "./checkboxed-list-input.js";
import { getBrowser } from "../../utils/browser-creator.js";
import assert from "assert";
import { sleep } from "../../utils/sleep.js";
describe("checkboxed-list", () => {
describe("basic tests", async () => {
let server: ReturnType<Koa["listen"]>;
let browser: Browser;
let page: Page;
afterEach(() => {
server.close();
});
it("sends the values", async () => {
const port = await getPort();
console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
const app = new Koa();
const router = new Router();
const fields = {
syllables: new CheckboxedListField(true, async () => {
return ["sa", "mple", "co", "de"].map((s) => ({
value: s,
label: s.toLocaleUpperCase(),
}));
}),
};
let received_values: unknown;
mount(
router,
"/",
new (class extends Form<typeof fields, unknown> {
fields = fields;
controls = [new CheckboxedListInput(fields.syllables)];
async onSubmit(ctx: Context) {
received_values = await this.getParsedValues(ctx);
}
async canAccess(_: Context) {
return { canAccess: true, message: "" };
}
})(),
true
);
app.use(router.routes()).use(router.allowedMethods());
server = app.listen(port);
browser = await getBrowser();
const context = await browser.newContext();
page = await context.newPage();
await page.goto(`http://localhost:${port}`);
await page.getByLabel("CO").check();
await page.getByLabel("DE").check();
await page.getByRole("button", { name: "Wyślij" }).click();
assert.deepStrictEqual(received_values, { syllables: { co: "on", de: "on" } });
});
describe("behavior with (non)required", () => {
it("allows to send a form when no value is selected and fiels is not required", async () => {
const port = await getPort();
console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
const app = new Koa();
const router = new Router();
const fields = {
syllables: new CheckboxedListField(false, async () => {
await sleep(10);
return ["sa", "mple", "co", "de"].map((s) => ({
value: s,
label: s.toLocaleUpperCase(),
}));
}),
};
let submit_called = false;
mount(
router,
"/",
new (class extends Form<typeof fields, unknown> {
fields = fields;
controls = [new CheckboxedListInput(fields.syllables)];
async onSubmit(ctx: Context) {
submit_called = true;
}
async canAccess(_: Context) {
return { canAccess: true, message: "" };
}
})(),
true
);
app.use(router.routes()).use(router.allowedMethods());
server = app.listen(port);
browser = await getBrowser();
const context = await browser.newContext();
page = await context.newPage();
await page.goto(`http://localhost:${port}`);
await page.getByRole("button", { name: "Wyślij" }).click();
await sleep(100);
assert(submit_called);
});
it("does not allow to send a form when no value is selected and field IS required", async () => {
const port = await getPort();
console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
const app = new Koa();
const router = new Router();
const fields = {
syllables: new CheckboxedListField(true, async () => {
await sleep(10);
return ["sa", "mple", "co", "de"].map((s) => ({
value: s,
label: s.toLocaleUpperCase(),
}));
}),
};
let submit_called = false;
mount(
router,
"/",
new (class extends Form<typeof fields, unknown> {
fields = fields;
controls = [new CheckboxedListInput(fields.syllables)];
async onSubmit(ctx: Context) {
submit_called = true;
}
async canAccess(_: Context) {
return { canAccess: true, message: "" };
}
})(),
true
);
app.use(router.routes()).use(router.allowedMethods());
server = app.listen(port);
browser = await getBrowser();
const context = await browser.newContext();
page = await context.newPage();
await page.goto(`http://localhost:${port}`);
await page.getByRole("button", { name: "Wyślij" }).click();
await sleep(100);
assert(submit_called == false);
await page.getByText(/empty value/).click({ timeout: 500 }); // should display an error message for that field
});
it("allows to send a form when no value is selected and field IS required", async () => {
const port = await getPort();
console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
const app = new Koa();
const router = new Router();
const fields = {
syllables: new CheckboxedListField(true, async () => {
await sleep(10);
return ["sa", "mple", "co", "de"].map((s) => ({
value: s,
label: s.toLocaleUpperCase(),
}));
}),
};
let submit_called = false;
mount(
router,
"/",
new (class extends Form<typeof fields, unknown> {
fields = fields;
controls = [new CheckboxedListInput(fields.syllables)];
async onSubmit(ctx: Context) {
submit_called = true;
}
async canAccess(_: Context) {
return { canAccess: true, message: "" };
}
})(),
true
);
app.use(router.routes()).use(router.allowedMethods());
server = app.listen(port);
browser = await getBrowser();
const context = await browser.newContext();
page = await context.newPage();
await page.goto(`http://localhost:${port}`);
await page.getByLabel("DE").check();
await page.getByRole("button", { name: "Wyślij" }).click();
await sleep(100);
assert(submit_called);
});
});
it("renders the label", async () => {
const port = await getPort();
console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
const app = new Koa();
const router = new Router();
const fields = {
syllables: new CheckboxedListField(true, async () => {
return ["sa", "mple", "co", "de"].map((s) => ({
value: s,
label: s.toLocaleUpperCase(),
}));
}),
};
mount(
router,
"/",
new (class extends Form<typeof fields, unknown> {
fields = fields;
controls = [new CheckboxedListInput(fields.syllables, { label: "ABC" })];
async onSubmit(ctx: Context) {
// noop
}
async canAccess(_: Context) {
return { canAccess: true, message: "" };
}
})(),
true
);
app.use(router.routes()).use(router.allowedMethods());
server = app.listen(port);
browser = await getBrowser();
const context = await browser.newContext();
page = await context.newPage();
await page.goto(`http://localhost:${port}`);
await page.getByRole("button", { name: "Wyślij" }).click();
await page.getByText(/ABC/).click({ timeout: 500 }); // should display an error message for that field
});
it("groups checkboxes based on the value of the 'group' attribute", async () => {
const port = await getPort();
console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
const app = new Koa();
const router = new Router();
const fields = {
syllables: new CheckboxedListField(true, async () => {
return [
...["e", "y", "u", "i", "o", "a"].map((s, index) => ({
value: "vowel" + index,
label: s,
group: "vowels",
})),
...["q", "w", "r", "t", "p", "s", "test_label"].map((s, index) => ({
value: "consonant" + index,
label: s,
group: "consonants",
})),
];
}),
};
mount(
router,
"/",
new (class extends Form<typeof fields, unknown> {
fields = fields;
controls = [new CheckboxedListInput(fields.syllables, { label: "Letters" })];
async onSubmit(ctx: Context) {
// noop
}
async canAccess(_: Context) {
return { canAccess: true, message: "" };
}
})(),
true
);
app.use(router.routes()).use(router.allowedMethods());
server = app.listen(port);
browser = await getBrowser();
const context = await browser.newContext();
page = await context.newPage();
await page.goto(`http://localhost:${port}`);
await page.getByRole("button", { name: "Wyślij" }).click();
await page.getByText(/vowels/).click({ timeout: 500 }); // should display an error message for that field
await page.getByText(/consonants/).click({ timeout: 500 }); // should display an error message for that field
await page.getByText("test_label").click({ timeout: 500 });
});
});
});

File Metadata

Mime Type
text/x-java
Expires
Wed, May 7, 19:48 (1 d, 1 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
625674
Default Alt Text
checkboxed-list-input.test.ts (8 KB)

Event Timeline