serenity-js / serenity-js / 5952710161

93%

push

github

feat(web): chainable `PageElements` (#1864)

This change enables `PageElements` to offer more advanced chaining patterns
and DOES NOT require any modifications to the existing client code.

`PageElements` now allows for defining the container element at runtime, **separately** from defining the filtering chain. 

For example:

```typescript
const shoppingList = () =>
  PageElement.located(By.id('shopping-list'))
    .describedAs('shopping list');

await actor.attemptsTo(
  Ensure.that(
    Text.of(
      green(items())
        .first()
        .of(shoppingList())
    ),
    equals('lettuce'),
  )
)
```

`PageElements` now also allows for using pre-composed filter chains, like the one above, in `.where` clauses:

```typescript
const shoppingLists = () =>
  PageElement.located(By.css('.shopping-list'))
    .describedAs('shopping list');
    
// find the last of container items that contain a specific first child item
shoppingLists()
  .where(Text.of(green(items()).first(), equals('lettuce'))
  .last()
```

Thanks to @viper3400 for the code review and suggestions

3578 of 3745 branches covered (95.54%)

Branch coverage included in aggregate %.

444 of 444 new or added lines in 17 files covered. (100.0%)

32532 of 33361 relevant lines covered (97.52%)

621.14 hits per line