Merge pull request #5751 from avalonmediasystem/cypress_new

Get latest Cypress version setup and running tests in docker and outside of docker

.gitignore

@@ -77,6 +77,9 @@ yarn-debug.log*
 
 # Cypress test output
 /cypress
+/spec/cypress/downloads
+/spec/cypress/screenshots
+/spec/cypress/videos
 
 # ActiveStorage
 /storage

docker-compose.yml

@@ -203,10 +203,10 @@ services:
 
   cypress:
     network_mode: host
-    image: cypress/included:3.8.2
+    image: cypress/included:latest
     depends_on:
       - avalon
-    entrypoint: cypress run -C spec/cypress/cypress.json
+    entrypoint: cypress run -C spec/cypress/cypress.config.js
     working_dir: /e2e
     volumes:
       - ./:/e2e

package.json

@@ -41,6 +41,7 @@
     "@babel/plugin-transform-runtime": "7",
     "@babel/preset-env": "7",
     "babel-loader": "8",
+    "cypress": "^13.7.1",
     "html-webpack-plugin": "^5.3.2",
     "prop-types": "^15.7.2",
     "webpack-cli": "4",
@@ -55,6 +56,8 @@
   },
   "scripts": {
     "start-collection-index": "webpack-dev-server --mode development --config config/webpack/collection_index.js --host 0.0.0.0",
-    "start-collection-view": "webpack-dev-server --mode development --config config/webpack/collection_view.js --host 0.0.0.0"
+    "start-collection-view": "webpack-dev-server --mode development --config config/webpack/collection_view.js --host 0.0.0.0",
+    "cypress:open": "cypress open -C spec/cypress/cypress.config.js",
+    "cypress:run": "cypress run -C spec/cypress/cypress.config.js"
   }
 }

spec/cypress/cypress.config.js

@@ -0,0 +1,23 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  env: {
+    "USERS_ADMINISTRATOR_EMAIL": "[email protected]",
+    "USERS_ADMINISTRATOR_PASSWORD": "password",
+    "USERS_USER_EMAIL": "[email protected]",
+    "USERS_USER_PASSWORD": "password",
+    "MEDIA_OBJECT_ID": "123456789"
+  },
+  downloadsFolder: "spec/cypress/downloads",
+  fixturesFolder: "spec/cypress/fixtures",
+  screenshotsFolder: "spec/cypress/screenshots",
+  videosFolder: "spec/cypress/videos",
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: "http://localhost:3000",
+    supportFile: "spec/cypress/support/e2e.js",
+    specPattern: "spec/cypress/integration/**/*.js"
+  },
+});

spec/cypress/cypress_dev.config.js

@@ -0,0 +1,28 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  env: {
+    "USERS_ADMINISTRATOR_EMAIL": "[email protected]",
+    "USERS_ADMINISTRATOR_PASSWORD": "archivist1",
+    "USERS_USER_EMAIL":"[email protected]",
+    "USERS_USER_PASSWORD": "testing_user1",
+    "MEDIA_OBJECT_ID": "fj236208t",
+    "MEDIA_OBJECT_TITLE":"Beginning Responsibility: Lunchroom Manners",
+    "SEARCH_COLLECTION":"7.7 regression test",
+  },
+  downloadsFolder: "spec/cypress/downloads",
+  fixturesFolder: "spec/cypress/fixtures",
+  screenshotsFolder: "spec/cypress/screenshots",
+  videosFolder: "spec/cypress/videos",
+  browser: process.env.BROWSER || 'electron', //
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: "https://avalon-dev.dlib.indiana.edu/",
+    supportFile: "spec/cypress/support/e2e.js",
+    specPattern: "spec/cypress/integration/**/*.js"
+  },
+
+
+});

spec/cypress/fixtures/example.json

@@ -1,19 +1,3 @@
-/* 
- * Copyright 2011-2024, The Trustees of Indiana University and Northwestern
- *   University.  Licensed under the Apache License, Version 2.0 (the "License");
- *   you may not use this file except in compliance with the License.
- * 
- * You may obtain a copy of the License at
- * 
- * http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software distributed
- *   under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
- *   CONDITIONS OF ANY KIND, either express or implied. See the License for the
- *   specific language governing permissions and limitations under the License.
- * ---  END LICENSE_HEADER BLOCK  ---
-*/
-
 {
   "name": "Using fixtures to represent data",
   "email": "[email protected]",

spec/cypress/integration/auth_identity_spec.js

@@ -19,7 +19,7 @@ context('Authentication', () => {
   // Error when creating duplicate user
   it('.duplicate_user_error()', () => {
 		cy.visit('/users/sign_up')
-		cy.get('form').within(() => {
+		cy.get('form.new_user').within(() => {
 			cy.get('#user_username').type('test1').should('have.value', 'test1') // Only yield inputs within form
 			cy.get('#user_email').type('[email protected]').should('have.value', '[email protected]') // Only yield inputs within form
 			cy.get('#user_password').type('test1') // Only yield textareas within form
@@ -28,7 +28,7 @@ context('Authentication', () => {
 		cy.get('input[name=commit]').last().click()
 
 		cy.visit('/users/sign_up')
-		cy.get('form').within(() => {
+		cy.get('form.new_user').within(() => {
 			cy.get('#user_username').type('test1').should('have.value', 'test1') // Only yield inputs within form
 			cy.get('#user_email').type('[email protected]').should('have.value', '[email protected]') // Only yield inputs within form
 			cy.get('#user_password').type('test1') // Only yield textareas within form

spec/cypress/integration/collections_spec.js

@@ -0,0 +1,83 @@
+/* 
+ * Copyright 2011-2024, The Trustees of Indiana University and Northwestern
+ *   University.  Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ * 
+ * You may obtain a copy of the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software distributed
+ *   under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+ *   CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ *   specific language governing permissions and limitations under the License.
+ * ---  END LICENSE_HEADER BLOCK  ---
+*/
+
+context('Collections', () => {
+	  //Since it takes a while for a newly created collection to reflect in search, we are using static search data
+  const search_collection = Cypress.env('SEARCH_COLLECTION')
+  const collection_title = `Automation collection title ${Math.floor(Math.random() * 10000) + 1}`
+
+
+  // checks navigation to Browse
+  it('Verify whether an admin user is able to create a collection - @T553cda51', () => {
+		cy.login('administrator')
+		cy.visit('/')
+		cy.get('#manageDropdown').click()
+		cy.contains('Manage Content').click()
+		cy.contains('Create Collection').click()
+		//Create dynamic data below 
+		cy.get('#admin_collection_name').type(collection_title).should('have.value', collection_title)
+		cy.get('#admin_collection_description').type("Collection desc").should('have.value', 'Collection desc')
+		cy.get('#admin_collection_contact_email').type("[email protected]").should('have.value', '[email protected]')
+		cy.get('#admin_collection_website_url').type("https://www.google.com").should('have.value', 'https://www.google.com')
+		cy.get('#admin_collection_website_label').type("test label").should('have.value', 'test label')
+		cy.get('input[value="Create Collection"]').click()
+		// Handle the alert
+		Cypress.on('uncaught:exception', (err, runnable) => {
+			// Return false to prevent Cypress from failing the test due to the issue:
+			//"TypeError: The following error originated from your application code, not from Cypress."
+			//Cannot read properties of undefined (reading 'success')
+			return false;
+		  });
+		//Assert title and edit collection button. Can add more assertions here if required.
+		cy.contains('h2', collection_title).should('be.visible')
+		cy.contains('button', 'Edit Collection Info').should('exist')
+
+		//Can add a Tearoff code here: delete the created collection using DELETE request for data cleanup
+
+  })
+
+  it("Verify whether the user is able to search for Collections-'@Tf7cefb09", () => {
+	cy.login('administrator')
+	cy.visit('/')
+	cy.get('a[href="/collections"]').click()
+	//Using an existing collection for this test case for now, since it takes a while for the newly created test case to get reflected
+	// Generate a random index to slice the title
+	const startIndex = Math.floor(Math.random() * (search_collection.length-3));
+	const sliceLength = Math.floor(Math.random() * (search_collection.length - startIndex)) + 1; // Random slice length
+	//slice a random portion of the collection title as the search keyword to ensure variablitity in testing
+	const search_keyword = search_collection.slice(startIndex, startIndex + sliceLength)
+	cy.get('input[placeholder="Search collections..."]').type(search_keyword).should('have.value', search_keyword)
+	cy.screenshot('search');
+	cy.get('.card-body').contains('a', search_collection);
+
+})
+
+
+	it('Verify deleting a collection - @T959a56df', () => {
+		cy.login('administrator')
+		cy.visit('/')
+		cy.get('#manageDropdown').click()
+		cy.contains('Manage Content').click()
+		cy.contains('a', collection_title).closest('tr').find('.btn-danger').click(); 
+		//May require adding steps to select a collection to move the existing  items, when dealing with non empty collections
+		cy.get('input[value="Yes, I am sure"]').click()
+		cy.contains('h1', 'My Collections')
+		//May need to update this assertion to ensire that this is valid during pagination of collections. Another alternative would be to check via API or search My collections
+		cy.contains('a', collection_title).should('not.exist');
+
+	})
+
+})

spec/cypress/integration/homepage_spec.js

@@ -47,7 +47,7 @@ context('Homepage', () => {
 		cy.contains('Email address')
 		cy.contains('Confirm email address')
 		cy.contains('Subject')
-		cy.contains('Comments')
+		cy.contains('Comment')
 		cy.contains('Submit comments')
   })
 
@@ -66,7 +66,7 @@ context('Homepage', () => {
   it('.describe_sign_in_page() - click on a DOM element', () => {
 		cy.visit('/')
 		cy.get('a[href*="/users/sign_in"] ').first().click()
-		cy.contains('Email / Password').click()
+		cy.contains('Username or email').click()
 		cy.contains('Username or email')
 		cy.contains('Password')
 		cy.contains('Sign up')
@@ -86,7 +86,7 @@ context('Homepage', () => {
   // is able to create new account
   it('.create_new_account()', () => {
 		cy.visit('/users/sign_up')
-		cy.get('form').within(() => {
+		cy.get('form.new_user').within(() => {
 			cy.get('#user_username').type('Sumith').should('have.value', 'Sumith') // Only yield inputs within form
 			cy.get('#user_email').type('[email protected]').should('have.value', '[email protected]') // Only yield inputs within form
 			cy.get('#user_password').type('sumith3') // Only yield textareas within form

spec/cypress/integration/media_object_spec.js

@@ -17,18 +17,19 @@
 context('Media objects', () => {
 
 	const media_object_id = Cypress.env('MEDIA_OBJECT_ID')
+	const media_object_title = Cypress.env('MEDIA_OBJECT_TITLE')
 
   // can visit a media object
   it('.visit_media_object()', () => {
 		cy.login('administrator')
 		// The below code is hard-coded for a media object url. This needs to be changed with a valid object URL later for each website.
 		cy.visit('/media_objects/' + media_object_id)
 		cy.contains('Unknown item').should('not.exist')
-		cy.contains('Beginning Responsibility: Lunchroom Manners')
+		cy.contains(media_object_title)
 		cy.contains('Main contributor')
 		cy.contains('Date')
 		// This below line is to play the video. If the video is not playable, this might return error. In that case, comment the below code.
-		cy.get('#mep_0').click()
+		cy.get('button[title="Play"]').click()
   })
 
   // Open multiple media objects in different tabs and play it.

spec/cypress/integration/navigation_spec.js

@@ -74,7 +74,8 @@ context('Navigations', () => {
   // Search - is able to enter keyword and perform search
   it('.search()', () => {
 		cy.visit('/')
-		cy.get('#searchField').type('lunchroom').should('have.value', 'lunchroom') // Only yield inputs within form
-		cy.get('#global-search-submit').click()
+		cy.get("li[class='nav-item'] a[class='nav-link']").click()
+		cy.get("input.global-search-input[placeholder='Search this site']").first().type('lunchroom').should('have.value', 'lunchroom') // Only yield inputs within form
+		cy.get('button.global-search-submit').first().click()
   })
 })