feat: Add Mermaid diagrams example to use it in E2E tests

Author: javierbrea

.env.example

@@ -5,6 +5,13 @@
 # may be useful to set it to `true`.
 ACTIONS_STEP_DEBUG=true
 
+# E2E tests
+
+CONFLUENCE_URL=https://confluence.tid.es
+CONFLUENCE_PAT=foo-access-token
+CONFLUENCE_README_PAGE_ID=foo-readme-page-id
+CONFLUENCE_CHANGELOG_PAGE_ID=foo-changelog-page-id
+
 # GitHub Actions inputs should follow `INPUT_<name>` format (case-sensitive).
 # Hyphens should not be converted to underscores!
 INPUT_DOCS-DIR="./docs"

README.md

@@ -10,28 +10,19 @@ This action syncs markdown files to Confluence using the [Markdown Confluence Sy
   - [Tree operation mode](#tree-operation-mode)
   - [Flat operation mode](#flat-operation-mode)
   - [Id operation mode](#id-operation-mode)
+  - [Mermaid diagrams](#mermaid-diagrams)
 - [Configuration](#configuration)
   - [Inputs](#inputs)
   - [Configuration file](#configuration-file)
   - [Environment variables](#environment-variables)
 - [Contributing](#contributing)
 - [License](#license)
 
-
-```mermaid
-graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
-    E-->F;
-```
-
 ## Features
 
 * It creates/updates/deletes [Confluence](https://www.atlassian.com/es/software/confluence) pages based on markdown files in a directory.
 * Upload images to Confluence and update links in markdown files
-* Supports Mermaid diagrams
+* Supports [Mermaid diagrams](#mermaid-diagrams)
 * Per-page configuration using [frontmatter metadata](https://jekyllrb.com/docs/front-matter/)
 * Works great with [Docusaurus](https://docusaurus.io/)
 * Three modes of operation:
@@ -151,6 +142,23 @@ confluence_page_id: 123456789
     confluence-personal-access-token: ${{ secrets.CONFLUENCE_PAT }}
 ```
 
+### Mermaid diagrams
+
+Mermaid diagrams are supported in the markdown files. The action will render the diagrams as images and upload them to Confluence.
+
+```markdown
+```mermaid
+graph TD;
+  A-->B;
+  A-->C;
+```
+
+```mermaid
+graph TD;
+  A-->B;
+  A-->C;
+```
+
 ## Configuration
 
 The action accepts a configuration file in the root of the repository, and it can be also configured using Github action inputs or even environment variables.

test/e2e/specs/check-sync.spec.ts

@@ -7,6 +7,7 @@ import {
   getChangelogPageTitle,
   getReadmePageTitle,
   getReadmePageChildren,
+  getReadmePageBody,
 } from "../support/confluence";
 
 describe("check sync", () => {
@@ -21,6 +22,13 @@ describe("check sync", () => {
       );
     });
 
+    it("should have rendered mermaid diagram", async () => {
+      const pageContent = await getReadmePageBody();
+      expect(pageContent).toEqual(expect.stringContaining('<img class="confluence-embedded-image"'));
+      expect(pageContent).toEqual(expect.stringContaining('data-linked-resource-type="attachment"'));
+      expect(pageContent).toEqual(expect.stringMatching(/data-linked-resource-default-alias="autogenerated-(\S)*\.svg"/));
+    });
+
     it("should have one child", async () => {
       const pageChildren = await getReadmePageChildren();
 

test/e2e/support/confluence.ts

@@ -37,7 +37,7 @@ async function getPageContent(id: string) {
 /**
  * Returns the confluence content properties of the README page
  */
-async function getReadmePageContent() {
+export async function getReadmePageContent() {
   return getPageContent(README_PAGE_ID);
 }
 
@@ -79,3 +79,11 @@ export async function getReadmePageTitle() {
   const content = await getReadmePageContent();
   return content.title;
 }
+
+/**
+ * Returns the title of the README page
+ */
+export async function getReadmePageBody() {
+  const content = await getReadmePageContent();
+  return content.body?.view?.value;
+}