test: add test for changing slide using ui buttons and keyborad actions

Author: anon-pradip

tests/e2e/config.js

@@ -10,7 +10,7 @@ const config = {
   minTimeout: parseInt(process.env.MIN_TIMEOUT) || 5,
   headless: process.env.HEADLESS === 'true',
   debug: process.env.DEBUG === 'true',
-  targetServer: process.env.TARGET_SERVER.toLowerCase() || 'ocis'
+  targetServer: (process.env.TARGET_SERVER || 'ocis').toLowerCase()
 }
 
 module.exports = config

tests/e2e/features/presentationViewer.feature

@@ -11,8 +11,14 @@ Feature: markdown presentation viewer
   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
-
-
-  Scenario: check content of a slide
-    When user "admin" previews a markdown file "test-markdown.md" in presentation viewer
+    And the content of the current slide should be "PRESENTATION VIEWER"
+    # change slide with button in UI
+    When user "admin" navigates to the next slide using next slide button
+    Then the content of the current slide should be "An extension for OpenCloud & ownCloud Infinite Scale (oCIS) that allows users to create slide presentations directly from markdown files."
+    When user "admin" navigates to the previous slide using previous slide button
     Then the content of the current slide should be "PRESENTATION VIEWER"
+    # change slide with keyboard
+    When user "admin" navigates to the next slide using keyboard
+    Then the content of the current slide should be "An extension for OpenCloud & ownCloud Infinite Scale (oCIS) that allows users to create slide presentations directly from markdown files."
+    When user "admin" navigates to the previous slide using keyboard
+    Then the content of the current slide should be "PRESENTATION VIEWER" 

tests/e2e/filesForUpload/test-markdown.md

@@ -1,4 +1,8 @@
 # Presentation Viewer
+---
+
+An extension for OpenCloud & ownCloud Infinite Scale (oCIS) that allows users to create slide presentations directly from markdown files.
+
 ---
 ## Table of Contents
 1. Introduction

tests/e2e/pageObjects/PresentationViewerPage.js

@@ -3,10 +3,27 @@ class PresentationViewer {
     this.slidesContainerSelector = '#presentation-viewer-main .slides'
     this.presentationViewerHomepageSelector = '#presentation-viewer-main'
     this.currentSlideSelector = '#presentation-viewer-main section.present'
+    this.navigateNextSlideSelector = 'button[aria-label="next slide"]'
+    this.navigatePreviousSlideSelector = 'button[aria-label="previous slide"]'
   }
 
   async getCurrentSlideContent() {
-    return await page.locator(this.currentSlideSelector).innerText()
+    return await page
+      .locator(this.currentSlideSelector)
+      .innerText()
+      .then((text) => text.trim())
+  }
+
+  async changeSlideUsingButton(direction) {
+    if (direction === 'next') {
+      await page.click(this.navigateNextSlideSelector)
+    } else if (direction === 'previous') {
+      await page.click(this.navigatePreviousSlideSelector)
+    }
+  }
+
+  async changeSlideUsingKeyboard(action) {
+    await page.locator('body').press(action)
   }
 }
 

tests/e2e/stepDefinitions/presentationViewerContext.js

@@ -32,6 +32,24 @@ When(
   }
 )
 
+When('user {string} navigates to the next slide using next slide button', async function (user) {
+  await presentationViewer.changeSlideUsingButton('next')
+})
+When(
+  'user {string} navigates to the previous slide using previous slide button',
+  async function (user) {
+    await presentationViewer.changeSlideUsingButton('previous')
+  }
+)
+
+When('user {string} navigates to the next slide using keyboard', async function (user) {
+  await presentationViewer.changeSlideUsingKeyboard('ArrowRight')
+})
+
+When('user {string} navigates to the previous slide using keyboard', async function (user) {
+  await presentationViewer.changeSlideUsingKeyboard('ArrowLeft')
+})
+
 Then(
   'markdown file {string} should be opened in the presentation viewer',
   async function (fileName) {