← Recipe: validate a form and confirm in a modal

4. Replace tests/smoke.luau

luastra/ui · luastra/data · controlled input · about 20 minutes
invalid → corrected → dismissed → confirmed

The test drives the same actions as the controls and inspects both application state and accessible render properties.

When to use it

Replace the generated smoke test to cover invalid input, normalization, both modal exit paths, and confirmation.

Focused example

--!strict

local app = require("app/main")

local function find(node: any, id: string): any?
    if node.id == id then return node end
    for _, child in node.children or {} do
        local result = find(child, id)
        if result ~= nil then return result end
    end
    return nil
end

app.handle("form.review", "profile/review", "")
local invalidTree = app.render()
assert(app.snapshot().modalOpen == false, "invalid form opened the modal")
assert((find(invalidTree, "profile/name") :: any).properties.errorId == "profile/name-error")
assert((find(invalidTree, "profile/email-error") :: any).properties.role == "alert")

app.handle("form.name", "profile/name", "  Ada  ")
app.handle("form.email", "profile/email", "not-an-email")
app.handle("form.review", "profile/review", "")
assert(app.snapshot().emailError ~= nil, "invalid email was accepted")

app.handle("form.email", "profile/email", "ada@example.test")
app.handle("form.review", "profile/review", "")
assert(app.snapshot().modalOpen == true, "valid form did not open the modal")
assert(app.snapshot().name == "Ada", "validated name was not trimmed")
assert((find(app.render(), "profile/confirm-modal") :: any).properties.open == true)

app.handle("form.cancel-review", "profile/confirm-modal", "escape")
assert(app.snapshot().modalOpen == false, "modal dismissal was ignored")
app.handle("form.review", "profile/review", "")
app.handle("form.confirm", "profile/confirm", "")
assert(app.snapshot().submittedName == "Ada", "confirmation was not recorded")

return true

Complete inventory

View all pages in Recipe: validate a form and confirm in a modal
← Previous: 3. Replace src/main.luauNext: 5. Check and run →