Storyboard Extension >

Section Container

Sometimes your test might perform a large number of steps and the storyboard becomes unwieldy. Adding cards to a collapsible sections will allow you to group the steps your test has taken into different sections on the storyboard.

Behaviour:

A section container may be added by calling the addSectionContainer() or addContainer(new SectionContainer(title)) methods
By default a section container will be closed automatically when adding another container or the current example ends
Automatic closing can be prevented by calling setAutoClose(false) on the container, this will embed subsequently added containers into this container
A section container may be closed manually using closeContainer()
A section container may be added to another container event when auto close is set using insertSectionContainer() or insertContainer(new SectionContainer(title)) methods
If a card with a failure or warning status is added to the section then the section title will be given that same status
Clicking on the section title will show or hide the rest of the cards in the section
A section container may be automatically added to the storyboard for each example by calling the setAppendMode(AppendTo.NEW_STORYBOARD_SECTION_PER_EXAMPLE) method on the extension

Example 1: Add Section Container

<span concordion:execute="addSectionContainer(#TEXT)">Example 1</span>
<span concordion:assertTrue="addCard(#TEXT)">Card 1</span>

When this snippet is run with this fixture, this results in a new section being added to the Example.

Example 2: Automatically Add Section Container For Each Example

<div class="testinput" concordion:example="example1">
    <h3>Example 1</h3>
    <span concordion:assertTrue="addCard(#TEXT)">Card 1</span>
    <span concordion:assertTrue="addCard(#TEXT)">Card 2</span>
</div>
<div class="testinput" concordion:example="example2">
    <span concordion:assertTrue="addCard(#TEXT)">Card 3</span>
</div>

When this snippet is run with this fixture and the append mode is set to AppendTo.NEW_STORYBOARD_SECTION_PER_EXAMPLE, this results 2 sections being added to the Storyboard.

Example 3: Manually Close Container

<span concordion:execute="addSectionContainer(#TEXT)">Example 1</span>
<span concordion:assertTrue="addCard(#TEXT)">Card 1</span>
<span concordion:execute="closeContainer()">Example 1</span>
<span concordion:assertTrue="addCard(#TEXT)">Card 1</span>

When this snippet is run with this fixture, this results in 1 card being added to the storyboard after the last section.

Example 4: Automatically Close Container

<span concordion:execute="addSectionContainer(#TEXT)">Example 1</span>
<span concordion:assertTrue="addCard(#TEXT)">Card 1</span>
<span concordion:execute="addSectionContainer(#TEXT)">Example 1</span>
<span concordion:assertTrue="addCard(#TEXT)">Card 1</span>

When this snippet is run with this fixture, this results in 2 sections being added to the storyboard.

Example 5: Add Container To Container

<span concordion:execute="addSectionContainerToContainer(#TEXT)">Example 1</span>
<span concordion:assertTrue="addCard(#TEXT)">Card 1</span>
<span concordion:execute="addSectionContainerToContainer(#TEXT)">Embedded Example</span>
<span concordion:assertTrue="addCard(#TEXT)">Card 1</span>

When this snippet is run with this fixture, this results in 1 section being added to the storyboard.

Example 6: Add Failure Card to Section

<span concordion:execute="addSectionContainer(#TEXT)">Example 1</span>
<span concordion:assertTrue="addFailureCard(#TEXT)">Card 1</span>

When this snippet is run with this fixture, this results the section title getting a failure status and left expanded.

Storyboard

Example 1: Add Section Container
Click image to see example
Example 2: Automatically Add Section Container For Each Example
Click image to see example
Example 3: Manually Close Container
Click image to see example
Example 4: Automatically Close Container
Click image to see example
Example 5: Add Container To Container
Click image to see example
Example 6: Add Failure Card to Section
Click image to see example