Merge pull request #715 from bpatrik/e2e

Adding E2E testing with cypress

.github/workflows/build.yml

@@ -64,6 +64,10 @@ jobs:
         MYSQL_PORT: ${{ job.services.mariadb.ports[3306] }}
         PORT: 35000
         CI: true
+    - name: E2E test - Cypress run
+      uses: cypress-io/github-action@v6
+      with:
+        start: npm run start-e2e-server
 
   create-release:
     runs-on: [ubuntu-latest]

.gitignore

@@ -27,3 +27,4 @@ ffmpeg/
 locale.source.xlf
 test.*
 /db/
+/test/cypress/screenshots/

angular.json

@@ -2,7 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "cli": {
     "schematicCollections": [
-      "@angular-eslint/schematics"
+      "@angular-eslint/schematics",
+      "@schematics/angular"
     ]
   },
   "version": 1,

cypress.config.ts

@@ -0,0 +1,23 @@
+import {defineConfig} from 'cypress';
+
+export default defineConfig({
+
+  e2e: {
+    'baseUrl': 'http://localhost:8080',
+    experimentalStudio: true,
+    supportFile: 'test/cypress/support/e2e.ts',
+    specPattern:'test/cypress/e2e/**/*.cy.ts',
+    fixturesFolder:false,
+    screenshotsFolder:'test/cypress/screenshots',
+    downloadsFolder:'test/cypress/downloads',
+  },
+
+  component: {
+    devServer: {
+      framework: 'angular',
+      bundler: 'webpack',
+    },
+    specPattern: '**/*.cy.ts'
+  }
+
+});

package.json

@@ -23,7 +23,9 @@
     "merge-new-translation": "gulp merge-new-translation",
     "generate-man": "gulp generate-man",
     "lint": "ng lint",
-    "ng-test": "ng test"
+    "start-e2e-server": "node ./test/folder-reset test/e2e && node ./src/backend/index --config-path=test/e2e/config.json --Database-dbFolder=test/e2e --Server-port=8080",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run"
   },
   "repository": {
     "type": "git",
@@ -110,6 +112,7 @@
     "codelyzer": "6.0.2",
     "core-js": "3.29.0",
     "coveralls": "3.1.1",
+    "cypress": "latest",
     "deep-equal-in-any-order": "2.0.5",
     "ejs-loader": "0.5.0",
     "eslint": "8.36.0",

src/backend/middlewares/RenderingMWs.ts

@@ -9,7 +9,6 @@ import {SharingDTO} from '../../common/entities/SharingDTO';
 import {Utils} from '../../common/Utils';
 import {LoggerRouter} from '../routes/LoggerRouter';
 import {TAGS} from '../../common/config/public/ClientConfig';
-import {ConfigDiagnostics} from '../model/diagnostics/ConfigDiagnostics';
 
 const forcedDebug = process.env['NODE_ENV'] === 'debug';
 

src/backend/model/FFmpegFactory.ts

@@ -1,6 +1,8 @@
+import {FfmpegCommand} from 'fluent-ffmpeg';
+
 /* eslint-disable @typescript-eslint/no-var-requires */
 export class FFmpegFactory {
-  public static get(): any {
+  public static get(): (path?: string) => FfmpegCommand {
     const ffmpeg = require('fluent-ffmpeg');
     try {
       const ffmpegPath = require('ffmpeg-static');

src/backend/model/database/AlbumManager.ts

@@ -7,7 +7,6 @@ import {SearchQueryDTO} from '../../../common/entities/SearchQueryDTO';
 import {SavedSearchEntity} from './enitites/album/SavedSearchEntity';
 import {Logger} from '../../Logger';
 import {IObjectManager} from './IObjectManager';
-import {DirectoryEntity} from './enitites/DirectoryEntity';
 
 const LOG_TAG = '[AlbumManager]';
 

src/backend/model/database/CoverManager.ts

@@ -4,7 +4,6 @@ import {MediaEntity} from './enitites/MediaEntity';
 import {DiskMangerWorker} from '../threading/DiskMangerWorker';
 import {ObjectManagers} from '../ObjectManagers';
 import {DatabaseType} from '../../../common/config/private/PrivateConfig';
-import {SortingMethod} from '../../../common/entities/SortingMethods';
 import {SQLConnection} from './SQLConnection';
 import {SearchQueryDTO, SearchQueryTypes, TextSearch,} from '../../../common/entities/SearchQueryDTO';
 import {DirectoryEntity} from './enitites/DirectoryEntity';
@@ -111,7 +110,7 @@ export class CoverManager implements IObjectManager {
           .limit(1)
           .getOne();
       } catch (e) {
-        Logger.error('Cant get album cover using:', JSON.stringify(album.searchQuery), JSON.stringify(Config.AlbumCover.SearchQuery));
+        Logger.error(LOG_TAG, 'Cant get album cover using:', JSON.stringify(album.searchQuery), JSON.stringify(Config.AlbumCover.SearchQuery));
         throw e;
       }
     }
@@ -120,7 +119,7 @@ export class CoverManager implements IObjectManager {
       try {
         coverMedia = await coverQuery().limit(1).getOne();
       } catch (e) {
-        Logger.error('Cant get album cover using:', JSON.stringify(album.searchQuery));
+        Logger.error(LOG_TAG, 'Cant get album cover using:', JSON.stringify(album.searchQuery));
         throw e;
       }
     }

src/backend/model/database/GalleryManager.ts

@@ -14,11 +14,10 @@ import {Logger} from '../../Logger';
 import {ObjectManagers} from '../ObjectManagers';
 import {DuplicatesDTO} from '../../../common/entities/DuplicatesDTO';
 import {ReIndexingSensitivity} from '../../../common/config/private/PrivateConfig';
-import {IObjectManager} from './IObjectManager';
 
 const LOG_TAG = '[GalleryManager]';
 
-export class GalleryManager  {
+export class GalleryManager {
   public static parseRelativeDirePath(relativeDirectoryName: string): {
     name: string;
     parent: string;
@@ -177,7 +176,7 @@ export class GalleryManager  {
     let duplicates = await mediaRepository
       .createQueryBuilder('media')
       .innerJoin(
-        (query): any =>
+        (query) =>
           query
             .from(MediaEntity, 'innerMedia')
             .select([
@@ -248,7 +247,7 @@ export class GalleryManager  {
     duplicates = await mediaRepository
       .createQueryBuilder('media')
       .innerJoin(
-        (query): any =>
+        (query) =>
           query
             .from(MediaEntity, 'innerMedia')
             .select([
@@ -319,7 +318,11 @@ export class GalleryManager  {
     dir.isPartial = true;
   }
 
-  protected async getDirIdAndTime(connection: Connection, name: string, path: string): Promise<{ id: number, lastScanned: number, lastModified: number }> {
+  protected async getDirIdAndTime(connection: Connection, name: string, path: string): Promise<{
+    id: number,
+    lastScanned: number,
+    lastModified: number
+  }> {
     return await connection
       .getRepository(DirectoryEntity)
       .createQueryBuilder('directory')

src/backend/model/database/IndexingManager.ts

@@ -1,4 +1,4 @@
-import {DirectoryDTOUtils, DirectoryPathDTO, ParentDirectoryDTO} from '../../../common/entities/DirectoryDTO';
+import {DirectoryBaseDTO, DirectoryDTOUtils, DirectoryPathDTO, ParentDirectoryDTO} from '../../../common/entities/DirectoryDTO';
 import {DirectoryEntity} from './enitites/DirectoryEntity';
 import {SQLConnection} from './SQLConnection';
 import {DiskManager} from '../DiskManger';
@@ -261,8 +261,8 @@ export class IndexingManager {
         // directory found
         childDirectories.splice(dirIndex, 1);
       } else {
-        // dir does not exists yet
-        directory.parent = {id: currentDirId} as any;
+        // dir does not exist yet
+        directory.parent = {id: currentDirId} as ParentDirectoryDTO;
         (directory as DirectoryEntity).lastScanned = null; // new child dir, not fully scanned yet
         const d = await directoryRepository.insert(
           directory as DirectoryEntity
@@ -311,7 +311,7 @@ export class IndexingManager {
         item.directory = null;
         metaFile = Utils.clone(item);
         item.directory = scannedDirectory;
-        metaFile.directory = {id: currentDirID} as any;
+        metaFile.directory = {id: currentDirID} as DirectoryBaseDTO;
         metaFilesToSave.push(metaFile);
       }
     }
@@ -374,7 +374,7 @@ export class IndexingManager {
         // Media not in DB yet
         media[i].directory = null;
         mediaItem = Utils.clone(media[i]);
-        mediaItem.directory = {id: parentDirId} as any;
+        mediaItem.directory = {id: parentDirId} as DirectoryBaseDTO;
         (MediaDTOUtils.isPhoto(mediaItem)
             ? mediaChange.insertP
             : mediaChange.insertV

src/common/config/private/Config.ts

@@ -12,7 +12,7 @@ declare const process: any;
 const upTime = new Date().toISOString();
 // TODO: Refactor Config to be injectable globally.
 // This is a bad habit to let the Config know if its in a testing env.
-const isTesting = ['afterEach', 'after', 'beforeEach', 'before', 'describe', 'it']
+const isTesting = process.env['NODE_ENV'] == true || ['afterEach', 'after', 'beforeEach', 'before', 'describe', 'it']
   .every((fn) => (global as any)[fn] instanceof Function);
 
 @ConfigClass<IConfigClass<TAGS> & ServerConfig>({

src/frontend/app/ui/faces/face/face.component.html

@@ -7,10 +7,10 @@
        [style.height.px]="size">
 
     <div class="photo"
-         *ngIf="thumbnail && thumbnail.Available && false"
+         *ngIf="thumbnail && thumbnail.Available"
          [style.background-image]="getSanitizedThUrl()"></div>
 
-    <ng-icon *ngIf="!thumbnail || !thumbnail.Available || true"
+    <ng-icon *ngIf="!thumbnail || !thumbnail.Available"
              class="no-image" name="ionPersonOutline"></ng-icon>
   </div>
 

src/frontend/app/ui/gallery/blog/blog.service.ts

@@ -3,7 +3,7 @@ import {NetworkService} from '../../../model/network/network.service';
 import {FileDTO} from '../../../../../common/entities/FileDTO';
 import {Utils} from '../../../../../common/Utils';
 import {ContentService} from '../content.service';
-import {mergeMap, Observable} from 'rxjs';
+import {mergeMap, Observable, shareReplay} from 'rxjs';
 import {MDFilesFilterPipe} from '../../../pipes/MDFilesFilterPipe';
 
 @Injectable()
@@ -27,7 +27,7 @@ export class BlogService {
           .map(f => this.splitMarkDown(f, dates));
 
         return (await Promise.all(files)).flat();
-      }));
+      }), shareReplay(1));
   }
 
   private async splitMarkDown(file: FileDTO, dates: number[]): Promise<GroupedMarkdown[]> {

src/frontend/app/ui/gallery/content.service.ts

@@ -1,17 +1,5 @@
 import {Injectable} from '@angular/core';
-import {NetworkService} from '../../model/network/network.service';
-import {ContentWrapper} from '../../../../common/entities/ConentWrapper';
-import {SubDirectoryDTO,} from '../../../../common/entities/DirectoryDTO';
-import {GalleryCacheService} from './cache.gallery.service';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {Config} from '../../../../common/config/public/Config';
-import {ShareService} from './share.service';
-import {NavigationService} from '../../model/navigation.service';
-import {QueryParams} from '../../../../common/QueryParams';
-import {ErrorCodes} from '../../../../common/entities/Error';
-import {map} from 'rxjs/operators';
-import {MediaDTO} from '../../../../common/entities/MediaDTO';
-import {FileDTO} from '../../../../common/entities/FileDTO';
+import {Observable, shareReplay} from 'rxjs';
 import {GallerySortingService, GroupedDirectoryContent} from './navigator/sorting.service';
 import {FilterService} from './filter/filter.service';
 import {ContentLoaderService} from './contentLoader.service';
@@ -28,7 +16,7 @@ export class ContentService {
     this.sortedFilteredContent = this.sortingService
       .applySorting(
         this.filterService.applyFilters(this.contentLoaderService.originalContent)
-      );
+      ).pipe(shareReplay(1));
 
   }
 

test/cypress/e2e/faces.cy.ts

@@ -0,0 +1,28 @@
+describe('Faces', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.get('.card-body');
+    cy.get('.col-sm-12').contains('Login');
+    /* ==== Generated with Cypress Studio ==== */
+    cy.get('#username').type('admin');
+    cy.get('#password').clear();
+    cy.get('#password').type('admin');
+    cy.intercept({
+      method: 'Get',
+      url: '/pgapi/person',
+    }).as('getPerson');
+    cy.get('.col-sm-12 > .btn').click();
+    cy.get('nav .nav-item .nav-link').contains('Faces').click();
+  });
+  it('Show faces', () => {
+    cy.wait('@getPerson', {timeout: 10000});
+    // contains a folder
+    cy.get('app-face  a > .info').contains('Alvin the Squirrel').should('exist');
+  });
+  it('Faces should have photos', () => {
+    cy.wait('@getPerson', {timeout: 10000});
+    // should have a photo
+    cy.get('app-face .photo-container .photo', {timeout: 10000}).should('exist');
+  });
+
+});

test/cypress/e2e/gallery.cy.ts

@@ -0,0 +1,74 @@
+describe('Gallery', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.get('.card-body');
+    cy.get('.col-sm-12').contains('Login');
+    /* ==== Generated with Cypress Studio ==== */
+    cy.get('#username').type('admin');
+    cy.get('#password').clear();
+    cy.get('#password').type('admin');
+    cy.intercept({
+      method: 'Get',
+      url: '/pgapi/gallery/content/',
+    }).as('getContent');
+    cy.get('.col-sm-12 > .btn').click();
+  });
+  it('Gallery should open', () => {
+    cy.get('.mb-0 > :nth-child(1) > .nav-link').contains('Gallery');
+  });
+  it('Gallery should filter', () => {
+    cy.wait('@getContent');
+    cy.get('app-gallery-navbar  ng-icon[name="ionFunnelOutline"]').click({scrollBehavior: false});
+    cy.get('app-gallery-navbar #gallery-filter-0').select('City', {force: true});
+    cy.get('app-gallery-navbar #gallery-filter-0').siblings('.filter-column').contains('Berkeley')
+        .parent().find('ng-icon[name="ionFlagOutline"]').click({scrollBehavior: false, force: true});
+
+    cy.get('app-gallery-navbar  ng-icon[name="ionFunnelOutline"]').click({scrollBehavior: false});
+    //should indicate that the filters have changed
+    cy.get('app-gallery-navbar .btn-secondary  ng-icon[name="ionFunnelOutline"]');
+
+    for (let i = 0; i < 3; ++i) {
+      cy.window().scrollTo(0, 9000, {ensureScrollable: false, duration: 100, easing: 'linear'}).wait(500);
+    }
+    // should this photo be visible
+    cy.get('.photo-container > img[alt="IMG_5910.jpg"]');
+    cy.get('.photo-container > img[alt="IMG_6220.jpg"]').should('not.exist');
+  });
+
+
+  it('Gallery should show infobar over photo', () => {
+    cy.wait('@getContent');
+    // contains a folder
+    cy.get('app-gallery-directories.directories > app-gallery-directory > .button > .photo-container');
+
+
+    for (let i = 0; i < 5; ++i) {
+      cy.window().scrollTo(0, 9000, {ensureScrollable: false, duration: 100, easing: 'linear'}).wait(500);
+    }
+
+    // these photos should be visible
+    cy.get('.photo-container > img[alt="IMG_6220.jpg"]');
+    cy.get('.photo-container > img[alt="IMG_5910.jpg"]').trigger('mouseover', {scrollBehavior: 'center'});
+
+    cy.get('.photo-container > .info > .photo-name').contains('IMG_5910.jpg');
+    cy.get('.photo-container > .info > .photo-position').contains('Berkeley');
+    cy.get('.photo-container > .info > .photo-keywords a').contains('Berkley');
+    cy.get('.photo-container > .info > .photo-keywords a').contains('Alvin the Squirrel');
+    cy.get('.photo-container > .info > .photo-keywords a').contains('USA');
+  });
+  it('Gallery should open lightbox', () => {
+    cy.wait('@getContent');
+    // contains a folder
+    cy.get('app-gallery-directories.directories > app-gallery-directory > .button > .photo-container');
+
+
+    for (let i = 0; i < 5; ++i) {
+      cy.window().scrollTo(0, 9000, {ensureScrollable: false, duration: 100, easing: 'linear'}).wait(500);
+    }
+
+    cy.get('.photo-container > img[alt="IMG_5910.jpg"]').click({scrollBehavior: 'center'});
+    cy.get('app-lightbox-controls > #controllers-container > .controls-caption').contains('Squirrel at berkely');
+    cy.get('app-lightbox-controls  .faces-container > .face > .face-name').contains('Alvin the Squirrel');
+
+  });
+});

test/cypress/e2e/login.cy.ts

@@ -0,0 +1,29 @@
+describe('Login', () => {
+  it('Page opens', () => {
+    cy.visit('/');
+    cy.get('.card-body');
+    cy.get('.col-sm-12').contains('Login');
+  });
+  it('Login', () => {
+    cy.visit('/');
+    cy.get('.card-body');
+    cy.get('.col-sm-12').contains('Login');
+    /* ==== Generated with Cypress Studio ==== */
+    cy.get('#username').type('admin');
+    cy.get('#password').clear();
+    cy.get('#password').type('admin');
+
+    cy.intercept({
+      method: 'Get',
+      url: '/pgapi/gallery/content/',
+    }).as('getContent');
+    cy.get('.col-sm-12 > .btn').click();
+    /* ==== End Cypress Studio ==== */
+    cy.get('.mb-0 > :nth-child(1) > .nav-link').contains('Gallery');
+
+    cy.wait('@getContent').then((interception) => {
+      assert.isNotNull(interception.response.body, '1st API call has data');
+    });
+  });
+
+});

test/cypress/support/commands.ts

@@ -0,0 +1,43 @@
+// ***********************************************
+// This example namespace declaration will help
+// with Intellisense and code completion in your
+// IDE or Text Editor.
+// ***********************************************
+// declare namespace Cypress {
+//   interface Chainable<Subject = any> {
+//     customCommand(param: any): typeof customCommand;
+//   }
+// }
+//
+// function customCommand(param: any): void {
+//   console.warn(param);
+// }
+//
+// NOTE: You can use it like so:
+// Cypress.Commands.add('customCommand', customCommand);
+//
+// ***********************************************
+// This example commands.js 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) => { ... })

test/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

test/cypress/support/component.ts

@@ -0,0 +1,39 @@
+// ***********************************************************
+// This example support/component.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')
+
+import { mount } from 'cypress/angular'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

test/cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// 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
+// ***********************************************************
+
+// When a command from ./commands is ready to use, import with `import './commands'` syntax
+// import './commands';

test/cypress/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*.ts"],
+  "compilerOptions": {
+    "sourceMap": false,
+    "types": ["cypress"]
+  },
+  // See https://github.com/cypress-io/cypress/issues/7552#issuecomment-763498855
+  "exclude": []
+}

test/folder-reset.ts

@@ -0,0 +1,14 @@
+import * as fs from 'fs';
+
+declare const process: { argv: string[] };
+
+
+const dir = process.argv[2];
+
+if (fs.existsSync(dir)) {
+  console.log('deleting folder:' + dir);
+  fs.rmSync(dir, {recursive: true});
+}
+console.log('creating folder:' + dir);
+fs.mkdirSync(dir);
+

test/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": false,
+  }
+}

tsconfig.json

@@ -24,5 +24,10 @@
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
+  },
+  "exclude": [
+    "cypress.config.ts",
+    // See https://github.com/cypress-io/cypress/issues/7552#issuecomment-763498855
+    "test/cypress/**/*"
+  ]
 }