Skip to content

Instantly share code, notes, and snippets.

@diabolo
Created January 30, 2009 04:33
Show Gist options
  • Save diabolo/54944 to your computer and use it in GitHub Desktop.
Save diabolo/54944 to your computer and use it in GitHub Desktop.
Possible html output for cucumber
.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
.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