Skip to content

Create a shortcode test page

In our feedback rounds, we found a number of edge-case types of issues caused by different combinations of shortcodes in markdown (e.g, #104 (closed)).

We need a way to test changes to shortcodes so that we avoid introducing new problems like these.

For now, a simple thing we can do is:

  • Create a page at content/shortcode-tests.md
  • Make sure it's ignored by search engines (set noindex: true in the front matter for the page)
  • Populate the test page with lorem ipsum style text content.
    • Format the content to use every combination of markdown/shortcode you can think of, especially things that might be nested, as this seems to be the most likely thing to have issues. Look at things we fixed in the first feedback issue for inspiration.
    • We don't need to be concerned about regular markdown in combination with other regular markdown (e.g, codeblocks + lists); shortcodes are more likely to introduce rendering oddities.
  • The page will probably be easiest to use if we include headers for each "test case"
Example 
## Tabs inside a list

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- This is a list

  {{< tabs >}}
  
  {{< tab title="Tab one" >}}
  
  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.
  
  {{< tab title="Tab two" >}}
  
   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.
  
  {{< alert type="note" >}}
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  
  {{< /alert >}}
  
  {{< /tabs >}}

- List item two
- List item three

## Alert inside tabs

<sample alert inside tabs>

## Icon inside an alert

<sample icon inside alert>

## Code block inside tabs inside a list

<etc etc>

Once we have a complex page like this, we can include checking this page as a test step when we modify or add shortcodes.

Eventually we could set up automated visual regression testing against this page and run that on the pipeline. This could maybe help us catch visual regressions introduced by frontend dependency updates.

Edited by Sarah German