Skip to content

Strengthen UI tests with rendered-behavior assertions and add low-signal test audit #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bbopen wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Strengthen UI tests with rendered-behavior assertions and add low-signal test audit #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bb01aad
Strengthen low-signal component tests with behavioral assertions
bbopen Feb 26, 2026
1c72b7f
Address remaining audit gaps in carousel and textarea tests
bbopen Feb 26, 2026
47970cb
Remove test audit document from PR scope
bbopen Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
179 changes: 95 additions & 84 deletions test/carousel_test.gleam
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,48 +9,52 @@ import weft_lustre_ui/theme

pub fn carousel_tests() {
describe("carousel", [
describe("headless config mutators", [
it(
"orientation helpers round-trip across root/content/item configs",
fn() {
let vertical = headless_carousel.carousel_vertical()

let root_config =
headless_carousel.carousel_config()
|> headless_carousel.carousel_orientation(orientation: vertical)
let content_config =
headless_carousel.carousel_content_config()
|> headless_carousel.carousel_content_orientation(
orientation: vertical,
)
let item_config =
headless_carousel.carousel_item_config()
|> headless_carousel.carousel_item_orientation(
orientation: vertical,
)

headless_carousel.carousel_orientation_is_vertical(
orientation: headless_carousel.carousel_config_orientation(
config: root_config,
),
)
|> expect.to_equal(expected: True)
describe("headless behavior", [
it("vertical orientation is reflected on root/content/item", fn() {
let vertical = headless_carousel.carousel_vertical()

headless_carousel.carousel_orientation_is_vertical(
orientation: headless_carousel.carousel_content_config_orientation(
config: content_config,
),
let view =
headless_carousel.carousel(
config: headless_carousel.carousel_config()
|> headless_carousel.carousel_orientation(orientation: vertical),
children: [
headless_carousel.carousel_content(
config: headless_carousel.carousel_content_config()
|> headless_carousel.carousel_content_orientation(
orientation: vertical,
),
children: [
headless_carousel.carousel_item(
config: headless_carousel.carousel_item_config()
|> headless_carousel.carousel_item_orientation(
orientation: vertical,
),
child: weft_lustre.text(content: "Slide 1"),
),
],
),
],
)
|> expect.to_equal(expected: True)

headless_carousel.carousel_orientation_is_vertical(
orientation: headless_carousel.carousel_item_config_orientation(
config: item_config,
),
let rendered =
weft_lustre.layout(attrs: [], child: view)
|> element.to_string

string.contains(rendered, "data-orientation=\"vertical\"")
|> expect.to_equal(expected: True)
}),
Comment on lines +13 to +45
Copy link

@coderabbitai coderabbitai bot Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Test title overstates what is currently asserted.

"vertical orientation is reflected on root/content/item" currently validates only a single data-orientation="vertical" token. Either assert orientation at each intended node or narrow the test name to match scope.

Proposed minimal fix (rename to match current assertion scope) 
-      it("vertical orientation is reflected on root/content/item", fn() {
+      it("vertical orientation is present in rendered markup", fn() {
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@test/carousel_test.gleam` around lines 13 - 45, The test titled "vertical
orientation is reflected on root/content/item" only checks for a single
data-orientation token in the rendered string; either expand the assertions to
explicitly check each node (root produced by headless_carousel.carousel, content
from headless_carousel.carousel_content, and item from
headless_carousel.carousel_item for data-orientation="vertical") or rename the
test to accurately reflect its current scope (e.g., "vertical orientation is
present in rendered output"); update the assertion logic around
weft_lustre.layout |> element.to_string accordingly and keep the test name and
assertions consistent.

it("disabled control renders disabled attribute", fn() {
let rendered =
headless_carousel.carousel_previous(
config: headless_carousel.carousel_control_config()
|> headless_carousel.carousel_control_disabled(),
)
|> expect.to_equal(expected: True)
},
),
|> weft_lustre.layout(attrs: [])
|> element.to_string

string.contains(rendered, "disabled=\"\"")
|> expect.to_equal(expected: True)
}),
]),
describe("headless rendering", [
it("renders carousel root/content/item/control slots", fn() {
Expand Down Expand Up @@ -86,61 +90,62 @@ pub fn carousel_tests() {
string.contains(rendered, "data-slot=\"carousel-item\"")
|> expect.to_equal(expected: True)

string.contains(rendered, "data-slot=\"carousel-content\"")
|> expect.to_equal(expected: True)

string.contains(rendered, "data-slot=\"carousel-previous\"")
|> expect.to_equal(expected: True)

string.contains(rendered, "data-slot=\"carousel-next\"")
|> expect.to_equal(expected: True)
}),
]),
describe("styled config mutators", [
it(
"orientation helpers round-trip across root/content/item configs",
fn() {
let t = theme.theme_default()
let vertical = ui_carousel.carousel_vertical(theme: t)

let root_config =
ui_carousel.carousel_config(theme: t)
|> ui_carousel.carousel_orientation(theme: t, orientation: vertical)
let content_config =
ui_carousel.carousel_content_config(theme: t)
|> ui_carousel.carousel_content_orientation(
theme: t,
orientation: vertical,
)
let item_config =
ui_carousel.carousel_item_config(theme: t)
|> ui_carousel.carousel_item_orientation(
theme: t,
orientation: vertical,
)
describe("styled behavior", [
it("styled vertical orientation is reflected in rendered markup", fn() {
let t = theme.theme_default()
let vertical = ui_carousel.carousel_vertical(theme: t)

ui_carousel.carousel_orientation_is_vertical(
let view =
ui_carousel.carousel(
theme: t,
orientation: ui_carousel.carousel_config_orientation(
theme: t,
config: root_config,
),
config: ui_carousel.carousel_config(theme: t)
|> ui_carousel.carousel_orientation(
theme: t,
orientation: vertical,
),
children: [
ui_carousel.carousel_content(
theme: t,
config: ui_carousel.carousel_content_config(theme: t)
|> ui_carousel.carousel_content_orientation(
theme: t,
orientation: vertical,
),
children: [
ui_carousel.carousel_item(
theme: t,
config: ui_carousel.carousel_item_config(theme: t)
|> ui_carousel.carousel_item_orientation(
theme: t,
orientation: vertical,
),
child: weft_lustre.text(content: "Slide 1"),
),
],
),
],
)
|> expect.to_equal(expected: True)

ui_carousel.carousel_orientation_is_vertical(
theme: t,
orientation: ui_carousel.carousel_content_config_orientation(
theme: t,
config: content_config,
),
)
|> expect.to_equal(expected: True)
let rendered =
weft_lustre.layout(attrs: [], child: view)
|> element.to_string

ui_carousel.carousel_orientation_is_vertical(
theme: t,
orientation: ui_carousel.carousel_item_config_orientation(
theme: t,
config: item_config,
),
)
|> expect.to_equal(expected: True)
},
),
string.contains(rendered, "data-orientation=\"vertical\"")
|> expect.to_equal(expected: True)

string.contains(rendered, "data-orientation=\"horizontal\"")
|> expect.to_equal(expected: False)
}),
]),
describe("styled rendering", [
it("renders carousel root/content/item/control slots", fn() {
Expand Down Expand Up @@ -179,6 +184,12 @@ pub fn carousel_tests() {
string.contains(rendered, "data-slot=\"carousel-item\"")
|> expect.to_equal(expected: True)

string.contains(rendered, "data-slot=\"carousel-content\"")
|> expect.to_equal(expected: True)

string.contains(rendered, "data-slot=\"carousel-previous\"")
|> expect.to_equal(expected: True)

string.contains(rendered, "data-slot=\"carousel-next\"")
|> expect.to_equal(expected: True)
}),
Expand Down
24 changes: 22 additions & 2 deletions test/direction_test.gleam
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import weft_lustre_ui/theme
pub fn direction_tests() {
describe("direction", [
describe("headless direction", [
it("direction_provider applies the configured dir attribute", fn() {
it("direction_provider applies rtl dir attribute", fn() {
let config =
headless_direction.direction_provider_config(
direction: headless_direction.direction_rtl(),
Expand All @@ -25,10 +25,27 @@ pub fn direction_tests() {

string.contains(rendered, "dir=\"rtl\"")
|> expect.to_equal(expected: True)

string.contains(rendered, "dir=\"ltr\"")
|> expect.to_equal(expected: False)
}),
it("direction_provider applies ltr dir attribute", fn() {
let rendered =
headless_direction.direction_provider(
config: headless_direction.direction_provider_config(
direction: headless_direction.direction_ltr(),
),
children: [],
)
|> weft_lustre.layout(attrs: [])
|> element.to_string

string.contains(rendered, "dir=\"ltr\"")
|> expect.to_equal(expected: True)
}),
Comment on lines +32 to 45
Copy link

@coderabbitai coderabbitai bot Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider adding a negative assertion for consistency.

The RTL tests include negative assertions verifying dir="ltr" is absent. For symmetry and stronger coverage, the LTR test should also verify that dir="rtl" is absent.

Suggested addition 
        string.contains(rendered, "dir=\"ltr\"")
        |> expect.to_equal(expected: True)
+
+       string.contains(rendered, "dir=\"rtl\"")
+       |> expect.to_equal(expected: False)
      }),
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
it("direction_provider applies ltr dir attribute", fn() {
let rendered =
headless_direction.direction_provider(
config: headless_direction.direction_provider_config(
direction: headless_direction.direction_ltr(),
),
children: [],
)
|> weft_lustre.layout(attrs: [])
|> element.to_string
string.contains(rendered, "dir=\"ltr\"")
|> expect.to_equal(expected: True)
}),
it("direction_provider applies ltr dir attribute", fn() {
let rendered =
headless_direction.direction_provider(
config: headless_direction.direction_provider_config(
direction: headless_direction.direction_ltr(),
),
children: [],
)
|> weft_lustre.layout(attrs: [])
|> element.to_string
string.contains(rendered, "dir=\"ltr\"")
|> expect.to_equal(expected: True)
string.contains(rendered, "dir=\"rtl\"")
|> expect.to_equal(expected: False)
}),
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@test/direction_test.gleam` around lines 32 - 45, The LTR test (using
direction_provider, direction_provider_config, and direction_ltr) only asserts
that rendered contains 'dir="ltr"' but lacks the complementary negative
assertion; add an assertion that 'dir="rtl"' is not present (e.g., check that
string.contains(rendered, "dir=\"rtl\"") |> expect.to_equal(expected: False)) to
mirror the RTL tests and strengthen coverage.

]),
describe("styled direction", [
it("styled helpers mirror headless direction semantics", fn() {
it("styled provider applies rtl dir and helper agrees", fn() {
let t = theme.theme_default()
let config =
ui_direction.direction_provider_config(
Expand All @@ -50,6 +67,9 @@ pub fn direction_tests() {

string.contains(rendered, "dir=\"rtl\"")
|> expect.to_equal(expected: True)

string.contains(rendered, "dir=\"ltr\"")
|> expect.to_equal(expected: False)
}),
]),
])
Expand Down
19 changes: 7 additions & 12 deletions test/form_test.gleam
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ pub fn form_tests() {

rendered_form
|> expect.to_equal(expected: rendered_forms)

string.contains(rendered_form, "<form")
|> expect.to_equal(expected: True)
}),
]),
describe("styled form facade", [
Expand Down Expand Up @@ -64,19 +67,8 @@ pub fn form_tests() {

rendered_form
|> expect.to_equal(expected: rendered_forms)
}),
it("styled form root renders semantic form container", fn() {
let t = theme.theme_default()
let rendered =
ui_form.form(
theme: t,
config: ui_form.form_config(theme: t),
children: [weft_lustre.text(content: "body")],
)
|> weft_lustre.layout(attrs: [])
|> element.to_string

string.contains(rendered, "<form")
string.contains(rendered_form, "id=\"name\"")
|> expect.to_equal(expected: True)
}),
it("headless form helper wiring remains available", fn() {
Expand All @@ -93,6 +85,9 @@ pub fn form_tests() {

string.contains(rendered, "<textarea")
|> expect.to_equal(expected: True)

string.contains(rendered, "id=\"bio\"")
|> expect.to_equal(expected: True)
}),
]),
])
Expand Down
14 changes: 10 additions & 4 deletions test/input_otp_test.gleam
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import weft_lustre_ui/theme

pub fn input_otp_tests() {
describe("input_otp", [
describe("headless config mutators", [
it("input_otp config mutators affect rendered slot structure", fn() {
describe("headless behavior", [
it("length and disabled mutators affect rendered slots", fn() {
let config =
headless_input_otp.input_otp_config(
value: "12",
Expand All @@ -29,6 +29,9 @@ pub fn input_otp_tests() {

string.contains(rendered, "data-index=\"3\"")
|> expect.to_equal(expected: True)

string.contains(rendered, "data-index=\"4\"")
|> expect.to_equal(expected: False)
}),
]),
describe("headless rendering", [
Expand Down Expand Up @@ -59,8 +62,8 @@ pub fn input_otp_tests() {
|> expect.to_equal(expected: True)
}),
]),
describe("styled config mutators", [
it("input_otp config mutators affect rendered slot structure", fn() {
describe("styled behavior", [
it("length and disabled mutators affect styled rendered slots", fn() {
let t = theme.theme_default()
let config =
ui_input_otp.input_otp_config(
Expand All @@ -81,6 +84,9 @@ pub fn input_otp_tests() {

string.contains(rendered, "data-index=\"3\"")
|> expect.to_equal(expected: True)

string.contains(rendered, "data-index=\"4\"")
|> expect.to_equal(expected: False)
}),
]),
describe("styled rendering", [
Expand Down
Loading
Loading