Component testing evaluates an individual UI component in isolation from the wider system. It suits behavior that can be verified without assembling every service, while keeping the test focused on the component’s visible contract. section 13.2.2 section 15.1.5
Choose the test boundary according to the behavior being verified:
- Test server-side email validation through API calls when the user interface adds no meaningful coverage. section 13.2.2
- Test field validation and terms-and-conditions behavior through an isolated UI component when the concern is primarily local UI behavior. section 13.2.2 section 13.2.2
- Use a web UI with mocked web services when the scenario needs UI interaction but not real downstream services. section 15.1.5
Mandatory registration fields
A component test can render the registration form and verify that email, password, first name, last name, address, and country are mandatory. A separate scenario can verify the displayed message when the terms and conditions remain unapproved. section 13.2.2 section 13.2.2
Listing 15.5 Implementing variations of a task interacting with different interfaces
import { Answerable, QuestionAdapter, Task } from '@serenity-js/core'
import { Send, PostRequest } from '@serenity-js/rest'
import { Ensure, equals } from '@serenity-js/assertions'
class SignUp {
using =(travelerDetails: QuestionAdapter<TravelerDetails>) =>
Task.where(`#actor signs up`,
LocateRegistrationForm(),
FillOutRegistrationForm.using(travelerDetails),
SubmitRegistrationForm(),
)
viaApiUsing = (travelerDetails: QuestionAdapter<TravelerDetails>) =>
Task.where(`#actor signs up (via API)`,
Send.a(PostRequest.to('/api/auth/register')
.with(travelerDetails)),
Ensure.that(LastResponse.status(), equals(201)),
)
}
Compare a UI task with its API-backed variation to keep setup efficient while preserving the same business-level registration behavior. section 15.1.5
