test: add e2e test for comparing rendered markdown

tests/e2e/config.js

@@ -1,7 +1,6 @@
 const config = {
   // environment
   baseOcisUrl: process.env.OCIS_URL || 'https://host.docker.internal:9200',
-  assets: './tests/e2e/filesForUpload',
   adminUser: process.env.ADMIN_USERNAME || 'admin',
   adminPassword: process.env.ADMIN_PASSWORD || 'admin',
   // playwright

tests/e2e/features/presentationViewer.feature

@@ -3,12 +3,18 @@ Feature: markdown presentation viewer
   I want to view markdown documents in presentation format
   So that I can easily present content in a structured manner
 
-  Background:
-    Given user "admin" has uploaded the markdown file "test-markdown.md" using API
-    And user "admin" has logged in
 
-
-  Scenario: preview markdown file in presentation viewer
-    When user "admin" previews a markdown file "test-markdown.md" in presentation viewer
-    Then markdown file "test-markdown.md" should be opened in the presentation viewer
-    And content of file "test-markdown.md" should be correctly rendered
+  Scenario Outline: validate content of markdown file in presentation viewer
+    Given user "admin" has uploaded the markdown file "test-markdown.md" with content "<markdown-content>"
+    And user "admin" has logged in to the web UI
+    When the user previews the markdown file
+    Then the rendered HTML should be "<html-content>"
+    Examples:
+    | markdown-content | html-content      |
+    | # heading1       | <h1>heading1</h1> |
+    | ## heading2      | <h2>heading2</h2> |
+    | ### heading3     | <h3>heading3</h3> |
+    | #### heading4    | <h4>heading4</h4> |
+    | ##### heading5   | <h5>heading5</h5> |
+    | ###### heading6  | <h6>heading6</h6> |
+

tests/e2e/pageObjects/PresentationViewerPage.js

@@ -12,28 +12,16 @@ class PresentationViewer {
 
   async getServerParsedSlide() {
     await page.waitForSelector(this.slidesContainerSelector)
-    const parsedSlides = await page.$$eval(this.currentSlideSelector, (slideElements) => {
-      return slideElements.map((slideElement) => {
-        const clonedSlideElement = slideElement.cloneNode(true)
-        // Processing all elements within the slide, excluding <a> tags
-        const allElements = clonedSlideElement.querySelectorAll('*:not(a)')
-        allElements.forEach((childElement) => {
-          // Removing all attributes except for <code> elements
-          if (childElement.tagName.toLowerCase() !== 'code') {
-            Array.from(childElement.attributes).forEach((attribute) => {
-              childElement.removeAttribute(attribute.name)
-            })
-          } else {
-            // Handling <code> elements specifically
-            childElement.removeAttribute('class')
-            childElement.removeAttribute('data-highlighted')
-            childElement.innerHTML = childElement.textContent.trim()
-          }
+    const slides = await page.$$eval(this.currentSlideSelector, (elements) => {
+      return elements.map((element) => {
+        const clonedElement = element.cloneNode(true)
+        clonedElement.querySelectorAll('[id]').forEach((element) => {
+          element.removeAttribute('id')
         })
-        return clonedSlideElement.innerHTML
+        return clonedElement.innerHTML
       })
     })
-    return parsedSlides
+    return slides
   }
 }
 

tests/e2e/stepDefinitions/presentationViewerContext.js

@@ -1,56 +1,38 @@
 const { Given, When, Then } = require('@cucumber/cucumber')
 const { expect } = require('@playwright/test')
 const { getUserCredentials } = require('../utils/userHelper')
-const { uploadFile } = require('../utils/fileHelper')
-const parseLocalFile = require('../utils/markdown')
+const { uploadFileWithContent } = require('../utils/fileHelper')
 const PresentationViewer = require('../pageObjects/PresentationViewerPage')
 const Ocis = require('../pageObjects/OcisPage')
 
 const presentationViewer = new PresentationViewer()
 const ocis = new Ocis()
 
 Given(
-  'user {string} has uploaded the markdown file {string} using API',
-  async function (user, fileName) {
-    await uploadFile(fileName, user)
+  'user {string} has uploaded the markdown file {string} with content {string}',
+  async function (user, fileName, markdownContent) {
+    await uploadFileWithContent(fileName, user, markdownContent)
   }
 )
 
-Given('user {string} has logged in', async function (user) {
+Given('user {string} has logged in to the web UI', async function (user) {
   await ocis.navigateToLoginPage()
   const { username, password } = getUserCredentials(user)
   await ocis.login(username, password)
   await expect(page.locator(ocis.filesContainerSelector)).toBeVisible()
 })
 
-When(
-  'user {string} previews a markdown file {string} in presentation viewer',
-  async function (user, fileName) {
-    await ocis.openMDFileInPresentationViewer()
-  }
-)
-
-Then(
-  'markdown file {string} should be opened in the presentation viewer',
-  async function (fileName) {
-    await expect(page.locator(presentationViewer.presentationViewerHomepageSelector)).toBeVisible()
-    await expect(page.locator(presentationViewer.slidesContainerSelector)).toBeVisible()
-  }
-)
-
-Then('content of file {string} should be correctly rendered', async function (fileName) {
-  await compareRenderedContent(fileName, presentationViewer)
+When('the user previews the markdown file', async function () {
+  await ocis.openMDFileInPresentationViewer()
+  await expect(page.locator(presentationViewer.presentationViewerHomepageSelector)).toBeVisible()
+  await expect(page.locator(presentationViewer.slidesContainerSelector)).toBeVisible()
 })
 
-const compareRenderedContent = async (fileName, presentationViewer) => {
-  const localParsedSlides = parseLocalFile(fileName)
-  for (let i = 1; i <= localParsedSlides.length; i++) {
-    let serverParsedSlide = await presentationViewer.getServerParsedSlide()
-    if (localParsedSlides[i - 1].toString() !== serverParsedSlide.toString()) {
-      throw new Error(`Content did not match for slide: ${i}`)
-    }
-    if (i !== localParsedSlides.length) {
-      await presentationViewer.goToNextSlide()
-    }
-  }
-}
+Then('the rendered HTML should be {string}', async function (htmlContent) {
+  const expectedHTMLContent = htmlContent.replace(/\s+/g, '') // Removing all whitespace
+  const serverRenderedHTMLContent = (await presentationViewer.getServerParsedSlide())[0].replace(
+    /\s+/g,
+    ''
+  ) // Removing all whitespace
+  expect(expectedHTMLContent).toEqual(serverRenderedHTMLContent)
+})

tests/e2e/utils/fileHelper.js

@@ -1,19 +1,10 @@
-const fs = require('fs')
-const path = require('path')
 const { getWebDavUrl, makeApiRequest, getAuthHeaders } = require('./apiHelper')
-const config = require('../config')
 
-const userDetails = []
+let userDetails = []
 
-const readLocalFileContent = (fileName) => {
-  const filePath = path.join(config.assets, fileName)
-  return fs.readFileSync(filePath, 'utf8')
-}
-
-const uploadFile = async (fileName, user) => {
+const uploadFileWithContent = async (fileName, user, data) => {
   const url = getWebDavUrl(user, fileName)
-  const content = readLocalFileContent(fileName)
-  const response = await makeApiRequest('PUT', url, getAuthHeaders(user), content)
+  const response = await makeApiRequest('PUT', url, getAuthHeaders(user), data)
   userDetails.push({ user, fileName })
   return response
 }
@@ -27,6 +18,7 @@ const cleanupResources = async () => {
   for (const userDetail of userDetails) {
     await deleteResource(userDetail.user, userDetail.fileName)
   }
+  userDetails = []
 }
 
-module.exports = { readLocalFileContent, uploadFile, cleanupResources }
+module.exports = { uploadFileWithContent, cleanupResources }