Creating a component harness
Let's imagine that we want to expose our Video component so that it can be integrated with other applications. Here, it would make sense to write a test harness for it – but how should we structure it? Our example of displaying YouTube videos using a YouTube Player component inside a Video component, which will be inside a Course component, turns out to be difficult to test using a "test as a user" approach in the DOM directly. So, let's take a layered approach here.
When constructing a component, we should strive to only have a single reference point – the DOM – for each page. Taking a layered approach, we start the test from the Course component, which knows about the Video component, which, in turn, knows about the YouTube Player component. By doing this, we can test from the Course component by exposing the Video harness that encapsulates the workspace-video selector as a Page Object for each of the instances...