The Screenplay Pattern

// Java, Serenity Screenplay
alice.attemptsTo(
    SignIn.withCredentials(alice.usernameAndPassword()),
    AddToBasket.theProduct("Field Notes").times(2),
    CheckOut.payingWith(VISA_TEST_CARD)
);

alice.should(seeThat(TheOrder.status(), is("confirmed")));

// TypeScript, hand-rolled. The whole pattern is four small interfaces.
interface Ability { }

class BrowseTheWeb implements Ability {
  constructor(readonly page: Page) {}
  static as(actor: Actor): BrowseTheWeb { return actor.abilityTo(BrowseTheWeb); }
}

interface Task { performAs(actor: Actor): Promise<void>; }
interface Question<T> { answeredBy(actor: Actor): Promise<T>; }

class Actor {
  private abilities = new Map<Function, Ability>();

  constructor(readonly name: string) {}

  whoCan(...abilities: Ability[]): this {
    for (const ability of abilities) this.abilities.set(ability.constructor, ability);
    return this;
  }

  abilityTo<A extends Ability>(type: new (...args: never[]) => A): A {
    const ability = this.abilities.get(type);
    if (!ability) throw new Error(`${this.name} cannot ${type.name}`);
    return ability as A;
  }

  async attemptsTo(...tasks: Task[]) {
    for (const task of tasks) await task.performAs(this);
  }

  async asks<T>(question: Question<T>): Promise<T> {
    return question.answeredBy(this);
  }
}

// A task: composed, reusable, and named after the user's intent.
class AddToBasket implements Task {
  private constructor(private readonly product: string, private readonly quantity: number) {}

  static theProduct(product: string) {
    return { times: (quantity: number) => new AddToBasket(product, quantity) };
  }

  async performAs(actor: Actor) {
    const { page } = BrowseTheWeb.as(actor);
    await page.goto(`/products/${slugify(this.product)}`);
    await page.getByLabel('Quantity').fill(String(this.quantity));
    await page.getByRole('button', { name: 'Add to basket' }).click();
  }
}

// A question: observation, not assertion. The test decides what is expected.
const BasketCount: Question<number> = {
  async answeredBy(actor) {
    const { page } = BrowseTheWeb.as(actor);
    return Number(await page.getByTestId('basket-count').innerText());
  }
};

const alice = new Actor('Alice').whoCan(new BrowseTheWeb(alicePage));
const bob = new Actor('Bob').whoCan(new BrowseTheWeb(bobPage));

await alice.attemptsTo(ShareDocument.with(bob).asCommenter());
await bob.attemptsTo(OpenTheDocument.sharedByAlice());

expect(await bob.asks(CanEdit.theDocument())).toBe(false);   // authorization, tested