What Should a Green Test Prove? Vue Testing with Vitest Browser Mode

For my TACON talk, I built a small shop called Claw & Chew. It sells a hamster plush wearing a crab costume. The customer wants one thing: add the plush to their bag. The test does exactly that, then checks the bag count. The test passes. The customer can’t click the button. That failure is the starting point for my testing strategy. Before choosing a runner or counting tests, decide what a passing test should prove. Three Contracts of a Component By a component’s contract, I mean what someone using it should be able to rely on. For testing, I separate that into three questions: Behavior: Does an action produce the expected result? Adding the plush should update the bag; completing checkout should show a confirmation. Accessibility: Can people operate the interface and understand its state? Keyboard input, focus, accessible names, and selection should agree with the visible UI. Appearance: Does the component match the approved design in the states we care about? Check spacing, colors,…