How to create a good test page

Anna WiersemaAnna Wiersema 🛠️ 
edited November 21, 2019 in General

Hello everyone, here’s the Skuid approved method for creating a good test page. 

Why are test pages important?

A simple test page is easy to share with other Skuid users. It allows another person to easily reproduce your use case and, in the case of an issue, identify what's going on. Because Skuid pages are stored as XML, it’s easy to transfer Skuid pages between environments, especially if you follow the guidelines below. 

What makes a good test page?

 A good test page consists of the following:

  1. At the top of the page, a description of what's going on: this can be a list of steps to reproduce the issue (in the case of a product defect) or a description of the change (in the case of a feature/improvement). 

    • If the issue requires a specific environment configuration (i.e. a Salesforce Validation Rule), include specific steps for setting up the configuration.
  2. If at all possible, use Ui-Only models because they will work in any Skuid environment regardless of the Data Sources connected. If you do need to use a Data Source:

    • Use Skuid standard data entities (e.g. "Page").

    • If you cannot use Ui-Only models, use Salesforce Standard Objects/Fields when at all possible.

  3. Illustrate the issue at hand in the simplest, most concise manner possible (i.e. no "kitchen sink" pages). The goal is to reduce noise such that only the behavior which needs to be addressed is presented in the Test Page:

    • No custom Themes or Design Systems (unless it's related to Themes or Design Systems)

    • No JavaScript (unless it's related to JavaScript)

    • No custom CSS

    • No Models other than ones required to reproduce the behavior

    • No Model Actions (unless it's related to Model Actions)

    • No Action Framework Sequences (unless it's related to Action Framework Sequences)

    • No Components that are not related to the specific issue being reported

  4. Verify the behavior in V1/V2 (if applicable). Provide a Test Page for all API Versions where the behavior presents itself.

  5. Include the XML for all Test Pages with your post (i.e. don't link to pages in live environments).
Also, here are some goodies for you - test page templates for v1 and v2!

Test Page Template V1:
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" useviewportmeta="true" showheader="false">
    <models>        <model id="UiOnly" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true" unloadwarningifunsavedchanges="false">            <fields/>            <conditions/>            <actions/>        </model>    </models>    <components>        <wrapper uniqueid="sk-3rqDsl-157">            <components>                <richtext multiple="false" uniqueid="sk-3Su6f6-214">                    <contents>&lt;h1&gt;Testing Procedure&lt;/h1&gt;&lt;ul&gt;    &lt;li&gt;Preview page&lt;/li&gt;    &lt;li&gt;&lt;strong&gt;Expected Results:&lt;/strong&gt;&lt;/li&gt;&lt;/ul&gt;                    </contents>                </richtext>            </components>            <styles>                <styleitem type="background" bgtype="color">                    <styles>                        <styleitem property="background-color" value="#dbeef3"/>                    </styles>                </styleitem>                <styleitem type="border" borders="all" padding="all" margin="bottom,">                    <styles>                        <styleitem property="border" value="8px solid transparent"/>                        <styleitem property="padding" value="8px"/>                        <styleitem property="margin-bottom" value="8px"/>                        <styleitem property="box-sizing" value="border-box"/>                    </styles>                </styleitem>                <styleitem type="size"/>            </styles>        </wrapper>        <grid uniqueid="sk-NHy-101" columngutter="8px" rowgutter="8px">            <divisions>                <division behavior="flex" minwidth="100px" ratio="1" verticalalign="top">                    <components/>                </division>            </divisions>            <styles>                <styleitem type="background" bgtype="none"/>            </styles>        </grid>    </components>    <resources>        <labels/>        <javascript/>        <css/>        <actionsequences/>    </resources>    <styles/>    <pageregioncontents/>
</skuidpage>

Test Page Template V2:
<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false" theme="Ink">    <models>        <model id="UiOnly" limit="20" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">            <fields/>            <conditions/>            <actions/>        </model>    </models>    <components>        <skuid__wrapper uniqueid="sk-14Mb-404">            <components>                <skuid__text contents="&lt;h1&gt;Testing Procedure&lt;/h1&gt;&#10;&#10;&lt;ul&gt;&#10;    &lt;li&gt;&lt;/li&gt;&#10;    &lt;li&gt;&lt;strong&gt;Expected Results&lt;/strong&gt;&lt;/li&gt;&#10;&lt;/ul&gt;" uniqueid="sk-14Mi-423" allowHTML="true">                    <styles>                        <spacing left="1.5" right="1.5" bottom="1.5"/>                    </styles>                </skuid__text>            </components>            <background type="color" color="#dbeef3"/>            <styles>                <spacing top="2" bottom="2" left="2" right="2"/>            </styles>        </skuid__wrapper>        <skuid__grid uniqueid="sk-NK4-1502" flexDirection="row" justifyContent="flex-start" alignItems="flex-start" columnGutter="2" rowGutter="2">            <divisions>                <division minWidth="100px" ratio="1" alignSelf="auto">                    <components/>                </division>            </divisions>        </skuid__grid>    </components>    <resources>        <labels/>        <javascript/>        <css/>        <actionsequences/>    </resources>    <styles/>    <pageregioncontents/>
</skuid__page>
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!