uneven maple
I'm using vitest in a SolidStart project.
I'm trying to create tests for an action and haven't been able to figure it out or find any info on it.
My current guess is that I need to automate/UI Test a form in a route, but thought I would ask before using more time by guessing.
I have never done UI testing and wishing there was a way to do this in pure JS. But useAction only works in a Route so I'm guessing creating a route with a form is the only way?
scarlet dust
This is what I came up with:
async function awaitPromise(timeout: number = 1) {
return new Promise(resolve => setTimeout(resolve, timeout));
}
const fakeDB = [
{
id: 1
}
];
const getData = query(async () => [...fakeDB], "getData");
const mutation = action(async () => {
fakeDB.push({ id: fakeDB.length });
reload({ revalidate: getData.key });
});
function Component() {
const data = createAsync(() => getData());
const mutate = useAction(mutation);
return (
<Suspense>
<div id="data">{data()?.length}</div>
<div id="json">{JSON.stringify(data())}</div>
<button id="btn" onClick={mutate} />
<form method="post" action={mutation}>
<input id="submit" type="submit" />
</form>
</Suspense>
);
}
function App() {
return (
<Router>
<Route path="/" component={Component} />
</Router>
);
}
describe(`action and query`, () => {
afterEach(() => {
document.body.innerHTML = "";
});
test(`init`, () =>
createRoot(async dispose => {
render(() => <App />, document.body);
await awaitPromise();
expect(document.getElementById("data")?.textContent).toBe("1");
document.getElementById("btn")?.click();
await awaitPromise();
expect(document.getElementById("data")?.textContent).toBe("2");
document.getElementById("submit")?.click();
await awaitPromise();
expect(document.getElementById("data")?.textContent).toBe("3");
dispose();
}));
});
As an alternative. If you extract the function inside the action you could test this and assume it'll work with the action as well.
In my example I test the whole cycle of query -> action -> revalidate the query .
I don't thinks its to crazy UI testing.