Add minimal gallery e2e testing

.gitignore

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

cypress.config.ts

@@ -5,8 +5,11 @@ export default defineConfig({
   e2e: {
     'baseUrl': 'http://localhost:8080',
     experimentalStudio: true,
-    supportFile: 'cypress/support/e2e.ts',
-    specPattern:'cypress/e2e/**/*.cy.ts'
+    supportFile: 'test/cypress/support/e2e.ts',
+    specPattern:'test/cypress/e2e/**/*.cy.ts',
+    fixturesFolder:false,
+    screenshotsFolder:'test/cypress/screenshots',
+    downloadsFolder:'test/cypress/downloads',
   },
 
   component: {

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(':nth-child(1) > .button > .photo-container > .photo');
+
+
+    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 ligthbox', () => {
+    cy.wait('@getContent');
+    // contains a folder
+    cy.get(':nth-child(1) > .button > .photo-container > .photo');
+
+
+    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

@@ -16,12 +16,12 @@ describe('Login', () => {
     cy.intercept({
       method: 'Get',
       url: '/pgapi/gallery/content/',
-    }).as('getDir');
+    }).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('@getDir').then((interception) => {
+    cy.wait('@getContent').then((interception) => {
       assert.isNotNull(interception.response.body, '1st API call has data');
     });
   });

test/tsconfig.json

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

tsconfig.json

@@ -28,6 +28,6 @@
   "exclude": [
     "cypress.config.ts",
     // See https://github.com/cypress-io/cypress/issues/7552#issuecomment-763498855
-    "cypress/**/*"
+    "test/cypress/**/*"
   ]
 }