Tester Quadrant

## Basic Overview

The Tester Quadrant is a quadrant in the Editor of Perchance that is usually an overlooked feature of the editor unless someone really read through the Perchance tutorial document thoroughly. While it seems unintuitive to use it since Perchance has a feature that auto-updates the Preview every time the Lists Quadrant or the HTML Quadrant is edited, there few tricks that you can use it for.

If you have registered an account in Perchance, there is a chance that the "Tester Console" will have your registered email if you have saved password in your browser.

## Parts

There are two parts in the Tester Quadrant, the tester console and the tester output.

### Tester Console

The Tester Console is where you will write your Perchance code you need to test. This is usually the ones enclosed in square brackets `[].`

### Tester Output

The Tester Output is where you will see the output of the test that you entered in the Tester Console. There is an option to see the output in HTML format and Plain Text format.

## Examples

The following examples are using the Minimal Template. Here we will be testing the `output` list.

In the Tester Console, we test the `output` list from the template. Upon pressing enter at the console, it will return a randomized output upon calling the list.

We can then modify the output using different methods used to transform the text returned by the `output` list. We can use the `upperCase` and make the text of the output in uppercase.

Aside from the bracketed list, we can add other texts alongside the bracketed outputs. In the above example, we store the uppercased output in the variable `x` and we then replaced "PIG" with "RABBIT" using the `replaceText("Text to replace", "Replacing Text")` method. Then to easily identify the previous and new output, we added the `Previous:` and `New:` in the tester console. Then on the tester output, we see the replaced and the added text.

We can also add simple formatting using HTML tags such as `<i>, <b>` to format the text in the output.

Aside from using simple formatting using HTML tags, we can use CSS to further stylize the output in the Tester Output. Unfortunately, the styles in the HTML Quadrant of the editor is not available to be used in the Tester Output since it is a separate iframe and HTML document.

Here we can see the plain text output of the Tester Output when the plain text in bottom right is selected. This does not render any HTML.

To use a stylesheet in the Tester Output, we first need to create the stylesheet in a `<style>` tag and call it before the test in the Test Console. Here the `[addStyle()]` calls the `addStyle` function that creates the stylesheet. The double backslash `\\` is used to prevent the curly brackets `{}` from applying its Perchance function since it is used in shorthand lists.

If your tester code is becoming a little bit longer, you can create a "Testbench" which includes the things you need to test. In the example we use the `$output = [this.selectAll.joinItems("")]` method to turn all the lines in the list `testbench` into one line that can be used in the Tester Console.

## Notes

Here are the "quadrants" of the Editor Page: List Quadrant, **Tester Quadrant**, HTML Quadrant, and Preview Quadrant.

Learn more stuff