custom-summary.hbs

# Create a Custom Summary!

You can effortlessly generate custom test summaries and PR comments using your CTRF report, Handlebars and Markdown. 

## Example: Generating a Summary

Let's start with the basics, a summary table that gives an overview of your test ctrf (you might have seen this one somewhere!). This table is straightforward yet powerful, helping you quickly communicate the state of your tests:

| **Tests 📝** | **Passed ✅** | **Failed ❌** | **Skipped ⏭️** | **Pending ⏳** | **Other ❓** | **Flaky 🍂** | **Duration ⏱️** |
| --- | --- | --- | --- | --- | --- | --- | --- |
| {{ctrf.summary.tests}} | {{ctrf.summary.passed}} | {{ctrf.summary.failed}} | {{ctrf.summary.skipped}} | {{ctrf.summary.pending}} | {{ctrf.summary.other}} | {{countFlaky ctrf.tests}} | {{formatDuration ctrf.summary.start ctrf.summary.stop}} |

This table is generated by referencing various properties from your CTRF report, making it easy to create detailed and customized summaries.

In addition, you can leverage custom methods like `countFlaky` and `formatDuration` to enhance your summary:

**Count of flaky tests**: {{countFlaky ctrf.tests}}
**Duration of execution**: {{formatDuration ctrf.summary.start ctrf.summary.stop}}

Remember, you're not just writing markdown—you're writing markdown enhanced with Handlebars, which means you can take full advantage of markdown's features while adding dynamic content.

## Example: Iterating Over the Tests Array

Next, let's focus on generating a report specifically for failed tests. To do this, we'll iterate through the CTRF tests array and filter out the failed tests:

| **Name** | **Status** | **Failure Message** |
| --- | --- | --- |
{{#each ctrf.tests}}
  {{#if (eq status "failed")}}
  | {{name}} | {{status}} ❌ | {{#if message}}{{message}}{{else}}No failure message{{/if}} |
  {{/if}}
{{/each}}

You might have noticed, this one is using a helper called `eq`. You can use this for property comparisons directly within your template logic.

## HTML

If raw markdown isn't quite working for you, GitHub also renders some HTML.

Here is the same failed table in HTML:

<table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Status</th>
        <th>Failure Message</th>
      </tr>
    </thead>
    <tbody>
      {{#each ctrf.tests}}
        {{#if (eq status "failed")}}
        <tr>
          <td>{{name}}</td>
          <td>{{status}}  ❌</td>
          <td>{{#if message}}{{stripAnsi message}}{{else}}No failure message{{/if}}</td>
        </tr>
        {{/if}}
      {{/each}}
    </tbody>
  </table>

Notice the use of the stripAnsi method, as some error messages contain ANSI.

## Adding Extra Markdown Elements

You can further enrich your summaries by tagging collaborators, adding tasks, and linking to important resources. Here's how:

### Tag a collaborator:

You might want to notify someone specific, like @Ma11hewThomas.

### You can add tasks!

- [x] Passed all unit tests
- [ ] Review code quality
- [ ] Update documentation

### Include useful links:

[GitHub Actions Documentation](https://docs.github.com/en/actions)

### Adding Collapsible Sections

If you have extensive details that might clutter your summary, you can use collapsible sections to hide and reveal information as needed:

<details>
  <summary>See detailed test results</summary>

  <br>

  | **Name** | **Status** | **Failure Message** |
  | --- | --- | --- |
  {{#each ctrf.tests}}
  | {{name}} | {{status}} | {{#if message}}{{stripAnsi message}}{{else}}No failure message{{/if}} |
  {{/each}}
</details>


### GitHub properties

There are various GitHub properties you can tap into!

- Repository name: {{github.repoName}}
- Branch name: {{github.branchName}}
- Run number: {{github.runNumber}}
- Job name: {{github.jobName}}
- Workflow ID: {{github.workflowId}}
- Workflow name: {{github.workflowName}}
- Actor name: {{github.actorName}}
- Event name: {{github.eventName}}
- Run ID: {{github.runId}}
- Pull request number: {{github.pullRequestNumber}}
- API URL: {{github.apiUrl}}
- Base URL: {{github.baseUrl}}
- Build URL: {{github.buildUrl}}