Setup cypress and add tests for homepage

.github/workflows/Tests.yml

@@ -65,11 +65,26 @@ jobs:
         working-directory: zimui
         run: |
           yarn install
+
       - name: Build
         working-directory: zimui
         run: |
           yarn build
 
+      - name: Start web server
+        working-directory: zimui
+        run: |
+          yarn preview &
+
+      - name: Wait for web server to be ready
+        run: |
+          npx wait-on http://localhost:5173
+
+      - name: Run Cypress tests
+        uses: cypress-io/github-action@v6
+        with:
+          config-file: zimui/cypress.config.ts
+
   build-docker:
     runs-on: ubuntu-22.04
     steps:

CHANGELOG

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update scraper to generate JSON files for `zimui` (#212)
 - Remove old UI files and methods: template files (home.html, article.html) and `make_html_files` method in scraper.py
 - Remove broken locale folder and files used for translation; translation will be restored with #222
+- Create "Videos" and "Playlists" tabs for homepage in new Vue.js UI (#213, #214)
 
 ## [2.3.0] - 2024-05-22
 

zimui/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents() {
+      // implement node event listeners here
+    },
+    baseUrl: 'http://localhost:5173'
+  }
+})

zimui/cypress/e2e/channel_home_page.cy.ts

@@ -0,0 +1,35 @@
+describe('home page for a channel', () => {
+  beforeEach(() => {
+    cy.intercept('GET', '/channel.json', { fixture: 'channel/channel.json' }).as('getChannel')
+    cy.intercept('GET', '/playlists/uploads_from_openzim_testing-917Q.json', {
+      fixture: 'channel/playlists/uploads_from_openzim_testing-917Q.json'
+    }).as('getUploads')
+    cy.visit('/')
+    cy.wait('@getChannel')
+    cy.wait('@getUploads')
+  })
+
+  it('loads the videos tab', () => {
+    cy.contains('2 videos').should('be.visible')
+    cy.contains('Coffee Machine').should('be.visible')
+    cy.contains('Timelapse').should('be.visible')
+  })
+
+  it('loads the playlist tab', () => {
+    cy.intercept('GET', '/playlists.json', { fixture: 'channel/playlists.json' }).as('getPlaylists')
+    cy.contains('.v-btn__content', 'Playlists').click()
+    cy.url().should('include', '/playlists')
+    cy.wait('@getPlaylists')
+
+    cy.contains('3 playlists').should('be.visible')
+    cy.contains('Timelapses').should('be.visible')
+    cy.contains('Trailers').should('be.visible')
+    cy.contains('Coffee').should('be.visible')
+  })
+
+  it('opens and loads "About Channel" dialog', () => {
+    cy.contains('.v-btn__content', 'About Channel').click()
+    cy.contains('Description for openZIM_testing').should('be.visible')
+    cy.contains('Jun 4, 2024').should('be.visible')
+  })
+})

zimui/cypress/fixtures/channel/channel.json

@@ -0,0 +1,12 @@
+{
+  "id": "UC8elThf5TGMpQfQc_VE917Q",
+  "title": "openZIM_testing",
+  "description": "-",
+  "channelName": "openZIM_testing",
+  "channelDescription": "Description for openZIM_testing",
+  "profilePath": "profile.jpg",
+  "bannerPath": "banner.jpg",
+  "joinedDate": "2024-06-04T13:30:16.232286Z",
+  "collectionType": "channel",
+  "mainPlaylist": "uploads_from_openzim_testing-917Q"
+}

zimui/cypress/fixtures/channel/playlists.json

@@ -0,0 +1,28 @@
+{
+  "playlists": [
+    {
+      "slug": "timelapses-QgGI",
+      "id": "PLMK6hZr9PcsjcF5mnaQk8Fi-xnb0AQgGI",
+      "title": "Timelapses",
+      "thumbnailPath": "videos/9TgosbGRsTk/video.webp",
+      "videosCount": 2,
+      "mainVideoSlug": "timelapse-9Tgo"
+    },
+    {
+      "slug": "trailers-5Gph",
+      "id": "PLMK6hZr9PcshJpNSRVaKReGlwhVlh5Gph",
+      "title": "Trailers",
+      "thumbnailPath": "videos/TcMBFSGVi1c/video.webp",
+      "videosCount": 1,
+      "mainVideoSlug": "marvel_studios_avengers_endgame_official_trailer-TcMB"
+    },
+    {
+      "slug": "coffee-O2wS",
+      "id": "PLMK6hZr9PcsjTJ5u2z-khzvDNXlqdO2wS",
+      "title": "Coffee",
+      "thumbnailPath": "videos/DYvYGQHYScc/video.webp",
+      "videosCount": 1,
+      "mainVideoSlug": "coffee_machine-DYvY"
+    }
+  ]
+}

zimui/cypress/fixtures/channel/playlists/uploads_from_openzim_testing-917Q.json

@@ -0,0 +1,30 @@
+{
+  "id": "UU8elThf5TGMpQfQc_VE917Q",
+  "author": {
+    "channelId": "UC8elThf5TGMpQfQc_VE917Q",
+    "channelTitle": "openZIM_testing",
+    "profilePath": "channels/UC8elThf5TGMpQfQc_VE917Q/profile.jpg",
+    "bannerPath": "channels/UC8elThf5TGMpQfQc_VE917Q/banner.jpg"
+  },
+  "title": "Uploads from openZIM_testing",
+  "description": "",
+  "publicationDate": "2024-06-04T14:57:45Z",
+  "thumbnailPath": "videos/DYvYGQHYScc/video.webp",
+  "videos": [
+    {
+      "slug": "coffee_machine-DYvY",
+      "id": "DYvYGQHYScc",
+      "title": "Coffee Machine",
+      "thumbnailPath": "videos/DYvYGQHYScc/video.webp",
+      "duration": "PT9S"
+    },
+    {
+      "slug": "timelapse-9Tgo",
+      "id": "9TgosbGRsTk",
+      "title": "Timelapse",
+      "thumbnailPath": "videos/9TgosbGRsTk/video.webp",
+      "duration": "PT11S"
+    }
+  ],
+  "videosCount": 2
+}

zimui/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

zimui/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

zimui/cypress/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    // be explicit about types included
+    // to avoid clashing with Jest types
+    "types": ["cypress"]
+  },
+  "include": ["../node_modules/cypress", "./**/*.ts"]
+}

zimui/package.json

@@ -33,6 +33,7 @@
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
+    "cypress": "^13.11.0",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "jsdom": "^24.0.0",

zimui/vite.config.ts

@@ -12,5 +12,11 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
+  },
+  server: {
+    port: 5173
+  },
+  preview: {
+    port: 5173
   }
 })