Make the UI not look ugly

[bcomnes]

There are two UIs to deal with in VHS-tape:

1. The test level UI and layout (e.g. the elements that you get off t.element and surrounding information)
2. The eventual, soon to come, storybook-like UI wrapper thing. (Tracked in Interactive test runner.  #27)

This issue pertains to 1.

Here is what I was thinking, and it may require bigger changes.

• Test elements have a min width/hight, so small components stack up nice and uniformly.
• They need to support growing as well, for components that represent full screen or larger elements.
• Add some minimal, but basic styling (e.g. system fonts, and some baseline colors/borders for the containers so it doesn't look like default HTML) to the test elements in a very scoped way, so that it doesn't affect its children (the tests) (e.g. using > and other specific selectors) or inherit the component global styles.

Test metadata and stuff have a lot of constraints around it, since I eventually want to load in individual VHS test files into iframes in the wrapper, and support only testing in a tape-y way (e.g. when you want to run a single test in a file and none of the others).

[tony-go]

In the console ?

[bcomnes]

No, when you run interactively in the browser.

[tony-go]

Here an idea of the revisited interactive UI

It's not very sophisticated, but I prefer to show you this before go further.

Did you have an idea of how can I get the status of the test or test suit (failed or success) ? I found a global event 'onFinish', but it trigs the end of execution. (Maybe I skipped something)

[bcomnes]

Cool @tony-go! It looks like the right direction. Let me clarify the OP some more.

[bcomnes]

Generally, with the addition of what I just added to the OP, lets drop the metadata header for now, and just aim to get the styling in place to close this issue:

[tony-go]

Hi,

Sorry for the wait :)

From what I can read, I think that "The eventual, soon to come, storybook-like UI wrapper thing" will fix this 3 points.

What do you think about start somethin' with https://github.com/yoshuawuyts/previewify ?