Modern Testing Of The FableDOM By A Humble Hedgehog

This is a past event

26 people went

Domain Group HQ

100 Harris Street, Pyrmont · Sydney

How to find us

Follow the signs inside past the cafe

Location image of event venue


Are you interested in F# and front-end development? We have a special treat for you.

Fancy a taste of Type-Safe front-end development with Fable (, and property-based testing of UI logic with Hedgehog ( Great. We thought you would. Make sure you RSVP ASAP so that we can get the food order in.

Esteemed F# Sydney colleague and researcher, Alberto Vergara, is going to take us on this adventure.

== The Fable of the Hedgehog and the Tree ==

In the land of HTML, there was once a busy tree (see Fig 1). The tree spent her days swaying her branches too and fro to the rhythm of the breeze. She would also respond to changing seasons and weather conditions. She would contract her branches and leaves in winter, grow them in spring, and in autumn, she would sort her fruit by age. She was no ordinary tree.

The tree had some good ideas but as she got older, she started to become anxious -- she wasn't sure if these ideas would help her achieve her goals for all possible weather conditions, and testing her ideas one-by-one one was impractical! What was a good tree-girl to do?

This is the story of how one gallant hedgehog showed this girl-tree how to test her branch expansion and sorting ideas, and how she went on to save her entire grove.

... and in technical terms

Fable ( brings together the power of the F# compiler ( and BabelJS ( to make JavaScript a true F# backend.

With F# and Fable, the definition of a presentation and the logic behind it can now be expressed as a pure function. Pure functions, in turn, can be reasoned about in terms of their abstract properties (decanted flow patterns from input to output, if you will).

Hedgehog ( is a new property based testing system that offers great capabilities for the definitions of tests as properties.

In this session, Alberto will combine Fable and Hedgehog to develop a tree view component; where the core logic behind the component is defined by functions that we test using Hedgehog.

Figure 1: A FableDOM Tree -- A Moderately Stylised HTML Document Object Model (DOM)