Created
January 30, 2009 04:33
-
-
Save diabolo/54944 to your computer and use it in GitHub Desktop.
Possible html output for cucumber
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.comment | |
Comments in this file are this color and wrapped in a "div class="comment"". There not expected to be in the output | |
.run | |
.info | |
date command project etc. | |
.summary | |
%h3 | |
Summary | |
%span (click on any summary item to go the step) | |
%ul.steps | |
%li.step.pass | |
%a{ :href => "#f1c1s1" } . | |
%li.step.pass | |
%a{ :href => "#f1c1s2" } . | |
%li.step.pending | |
%a{ :href => "#f1c1s3" } p | |
%li.step.fail | |
%a{ :href => "#f1c1s4" } f | |
.stats | |
.scenario 1 scenario | |
.pass 3 steps passed | |
.fail 1 step failed | |
.pending steps pending (2 with no step definition) | |
.controls | |
%h3 Controls | |
.comment | |
These would use javascript to make the output below more navigable. | |
%ul.collapse | |
collapse | |
%li | |
%button{:type => 'button'} | |
all | |
%li | |
%button{:type => 'button'} | |
steps | |
%li | |
%button{:type => 'button'} | |
scenarios | |
%li | |
%button{:type => 'button'} | |
features | |
%ul.expand | |
expand | |
%li | |
%button{:type => 'button'} | |
features | |
%li | |
%button{:type => 'button'} | |
scenarios | |
%li | |
%button{:type => 'button'} | |
steps | |
%li | |
%button{:type => 'button'} | |
all | |
.comment | |
should we just bookmark steps, or should we bookmark features and scenarios as well? | |
%p currently bookmarking all using convention for name | |
%ul | |
%li f for feature | |
%li c for scenario | |
%li s for step | |
%p so the first step in the second scenario of the first feature will have a name 'f1c2s1' | |
.feature | |
.bookmark | |
%a{:name => 'f1'} | |
.title Feature | |
.description | |
In order to keep order administration simple | |
.br Customers | |
.br Must confirm their order before payment | |
.scenario | |
.bookmark | |
%a{:name => 'f1c1'} | |
.title Basic Scenario | |
%ul.steps | |
%li.step.pass | |
.bookmark | |
%a{:name => 'f1c1s1'} | |
.text | |
Passing step Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
.match | |
path/to/matching/step/with/line/number xx | |
%li.step.pass | |
.bookmark | |
%a{:name => 'f1c1s2'} | |
.text | |
Passing step Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
.match | |
path/to/matching/step/with/line/number xx | |
%li.step.pending | |
.bookmark | |
%a{:name => 'f1c1s3'} | |
.text | |
Pending step Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
.match | |
path/to/pending/step/with/line/number xx | |
%li.step.fail | |
.bookmark | |
%a{:name => 'f1c1s4'} | |
.text | |
Failing stepLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
.match | |
path/to/failing/step/with/line/number xx | |
.trace | |
Trace LineLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
%li.step.skipped | |
.text | |
Skipped stepLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
.scenario | |
.title Nested steps scenario | |
%ul.steps | |
%li.step.pass | |
.text | |
Passing step implemented by calling other steps | |
.match | |
path/to/matching/step/with/line/number xx | |
.nest | |
path/to/nested/step/with/line/number xx | |
.nest | |
path/to/nested/step/with/line/number xx | |
.nest | |
path/to/nested/step/with/line/number xx | |
.nest | |
path/to/nested/step/with/line/number xx | |
%li.step.pending | |
.text | |
Step implemented by calling other steps where one step is pending | |
.match | |
path/to/matching/step/with/line/number xx | |
.nest.pending | |
path/to/line/calling/pending/step/with/line/number xx | |
.nest.skipped | |
path/to/skipped/nested/step/with/line/number xx | |
.nest.skipped | |
path/to/skipped/nested/step/with/line/number xx | |
%li.step.fail | |
.text | |
Failure occuring in nested step | |
.match | |
path/to/matching/step/with/line/number xx | |
.nest.fail | |
path/to/line/calling/failing/step/with/line/number xx | |
.nest.skipped | |
path/to/skipped/nested/step/with/line/number xx | |
.nest.skipped | |
path/to/skipped/nested/step/with/line/number xx | |
.trace | |
Trace LineLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
%li.step.skipped | |
.text | |
Skipped step | |
.scenario | |
.title Step tables scenario | |
%ul.steps | |
%li.step.pass | |
.text | |
Passing step with table | |
.table | |
.comment | |
Assumes cucumber converts tables into proper table html. If not would | |
put table stuff in a %pre%code | |
%table | |
%tr | |
%th name | |
%th email | |
%th phone | |
%tr | |
%td Aslak | |
%td [email protected] | |
%td 123 | |
%tr | |
%td Joe | |
%td [email protected] | |
%td 234 | |
%tr | |
%td Bryan | |
%td [email protected] | |
%td 456 | |
.match | |
path/to/matching/step/with/line/number xx | |
%li.step.pending | |
.text | |
Pending step with table | |
.table | |
%table | |
%tr | |
%th name | |
%th email | |
%th phone | |
%tr | |
%td Aslak | |
%td [email protected] | |
%td 123 | |
%tr | |
%td Joe | |
%td [email protected] | |
%td 234 | |
%tr | |
%td Bryan | |
%td [email protected] | |
%td 456 | |
.match | |
path/to/line/calling/pending/step/with/line/number xx | |
%li.step.fail | |
.text | |
Failure in step with table | |
.table | |
%table | |
%tr | |
%th name | |
%th email | |
%th phone | |
%tr | |
%td Aslak | |
%td [email protected] | |
%td 123 | |
%tr | |
%td Joe | |
%td [email protected] | |
%td 234 | |
%tr | |
%td Bryan | |
%td [email protected] | |
%td 456 | |
.match | |
path/to/line/calling/failing/step/with/line/number xx | |
.trace | |
Trace LineLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
%li.step.skipped | |
.text | |
Skipped step | |
.outline | |
%h3 Outline | |
.comment Going to use square brackets instead of angle brackets here. | |
.comment | |
Taking the approach that an outline is just a quick way of specifying many different scenarios, so as far as results are concerned I'm just going to show every one as a seperate scenario. Now if I want to get cute and reduce the output then I can | |
%ul | |
%li Use javascript to collapse the children | |
%li Use javascript to examine the children and style the parent based on the presence of fail skipped and pending elements | |
%ul.steps | |
%li.step Given there are [start] cucumbers | |
%li.step When I eat [eat] cucumbers | |
%li.step Then I should have [left] cucumbers | |
.examples | |
%table | |
%tr | |
%th start | |
%th eat | |
%th left | |
%tr | |
%td 12 | |
%td 5 | |
%td 7 | |
%tr | |
%td 20 | |
%td 5 | |
%td 7 | |
.scenario | |
%ul.steps | |
%li.step.pass | |
Given there are [12] cucumbers | |
.match | |
path/to/matching/step/with/line/number xx | |
%li.step.pass | |
When I eat [5] cucumbers | |
.match | |
path/to/matching/step/with/line/number xx | |
%li.step.pass | |
Then I should have [7] cucumbers | |
.match | |
path/to/matching/step/with/line/number xx | |
.scenario | |
%ul.steps | |
%li.step.fail | |
Given there are [20] cucumbers | |
.match | |
path/to/matching/step/with/line/number xx | |
.trace | |
to many cucumbers | |
%li.step.skipped | |
When I eat [5] cucumbers | |
.match | |
path/to/matching/step/with/line/number xx | |
%li.step.skipped | |
Then I should have [7] cucumbers | |
.match | |
path/to/matching/step/with/line/number xx | |
.feature | |
.bookmark | |
%a{:name => 'f2'} | |
.title Feature with Background | |
.description | |
In order to keep order administration simple | |
.br Customers | |
.br Must confirm their order before payment | |
.background | |
%h3 Background | |
.comment | |
This section shows the background steps, but not the results of the background being run | |
%ul.steps | |
%li.step | |
.text | |
Background step | |
.match | |
path/to/matching/stepdef/with/line/number xx | |
%li.step | |
.text | |
Background step | |
.match | |
path/to/matching/stepdef/with/line/number xx | |
.scenario | |
.bookmark | |
%a{:name => 'f2c1'} | |
.title Basic Scenario | |
.background | |
%h3 Background | |
.comment | |
This section shows the background steps, actually being run. It is envisaged that this would be collapsed by default unless something went wrong. | |
%ul.steps | |
%li.step.pass | |
.bookmark | |
%a{:name => 'f2c1s1b1'} | |
.text | |
Background step | |
.match | |
path/to/matching/stepdef/with/line/number xx | |
.comment | |
background steps would show in the summary for each scenario, and would have their own bookmark | |
%li.step.pass | |
.bookmark | |
%a{:name => 'f2c1s1b2'} | |
.text | |
Background step 2 | |
.match | |
path/to/matching/stepdef/with/line/number xx | |
.comment now we are back to the normal steps | |
%ul.steps | |
%li.step.pass | |
.bookmark | |
%a{:name => 'f1c1s1'} | |
.text | |
Passing step | |
.match | |
path/to/matching/step/with/line/number xx | |
%li.step.pass | |
.bookmark | |
%a{:name => 'f1c1s2'} | |
.text | |
Passing step | |
.match | |
path/to/matching/step/with/line/number xx |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.comment | |
:color black | |
:background gray | |
:margin 1em | |
html | |
:background black | |
:color white | |
.pass | |
:color green | |
a | |
:color green | |
:text-decoration none | |
&:visited, &:hover, &:active | |
:color green | |
.pending | |
:color yellow | |
a | |
:color yellow | |
:text-decoration none | |
&:visited, &:hover, &:active | |
:color yellow | |
.fail | |
:color red | |
a | |
:color red | |
:text-decoration none | |
&:visited, &:hover, &:active | |
:color red | |
.skipped | |
:color blue | |
a | |
:color blue | |
:text-decoration none | |
&:visited, &:hover, &:active | |
:color blue | |
.match | |
:color gray | |
ul | |
:list-style none | |
.stats | |
:margin 2em | |
.summary | |
ul.steps | |
li | |
:display inline | |
ul.collapse, ul.expand | |
li | |
:display inline | |
.trace, .table, .examples | |
:margin-left 2em | |
.nest | |
:margin-left 2em | |
.title | |
:font x-large, bold | |
.scenario | |
.background | |
:margin-left 2em |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment