Cypress: refactoring for button click problem (probably caused by wei…

…rd font rendering in GitHub Actions)

.gitignore

@@ -32,6 +32,7 @@ root
 .env
 
 # Cypress
+cypress.env.json
 cypress/videos
 cypress/screenshots
 cypress/cypress-record.sh

cypress/cypress.config.ts

@@ -9,6 +9,10 @@ export default defineConfig({
     experimentalStudio: true,
     experimentalRunAllSpecs: true,
 
+    // Increase viewport width because GitHub Actions may render a wider font which
+    // may cause button clicks to be prevented by overlaying elements.
+    viewportWidth: 1200,
+
     setupNodeEvents(_on, config) {
       config = dotenvPlugin(config)
 

cypress/e2e/clean-up.cy.ts

@@ -48,7 +48,7 @@ describe('Clean-up', { redirectionLimit: PAGE_SIZE }, () => {
               }).as('delete-route')
             })
 
-          //   Force is necessary because button is invisible at this point
+          // Force is necessary because button is invisible at this point (hidden in popover menu)
           cy.get('@confirm-delete').click({ force: true })
 
           cy.contains('.modal-dialog .btn', 'Delete')

cypress/e2e/import-publication-wos.cy.ts

@@ -69,7 +69,7 @@ describe('Publication import', () => {
 
     cy.ensureNoModal()
 
-    cy.contains('.btn', 'Add author').click({ scrollBehavior: false })
+    cy.contains('.btn', 'Add author').click()
 
     cy.ensureModal('Add author').within(function () {
       cy.intercept({

cypress/e2e/issues/issue-1108.cy.ts

@@ -13,7 +13,7 @@ describe('Issue #1108: Cannot add author without first name', () => {
 
     cy.contains('People & Affiliations').click()
 
-    cy.contains('.btn', 'Add author').click({ scrollBehavior: false })
+    cy.contains('.btn', 'Add author').click()
   })
 
   it('should be possible to add author without first name', () => {

cypress/e2e/issues/issue-1140.cy.ts

@@ -13,7 +13,7 @@ describe('Issue #1140: External contributor info is empty in the suggest box', (
 
     cy.contains('People & Affiliations').click()
 
-    cy.contains('.btn', 'Add author').click({ scrollBehavior: false })
+    cy.contains('.btn', 'Add author').click()
 
     cy.ensureModal('Add author').within(() => {
       cy.get('input[name=first_name]').type('John')
@@ -30,9 +30,7 @@ describe('Issue #1140: External contributor info is empty in the suggest box', (
 
     cy.ensureNoModal()
 
-    cy.contains('table#contributors-author-table tr', 'John Doe')
-      .find('.if.if-edit')
-      .click({ scrollBehavior: 'nearest' })
+    cy.contains('table#contributors-author-table tr', 'John Doe').find('.if.if-edit').click()
 
     cy.get('#person-suggestions')
       .find('.list-group-item')

cypress/e2e/issues/issue-1237.cy.ts

@@ -567,7 +567,7 @@ describe('Issue #1237: Accessibility and mark-up: make sure labels are clickable
   function setUpPublication(publicationType: PublicationType) {
     cy.visit('/publication/add')
 
-    cy.contains('Enter a publication manually').click()
+    cy.contains('Enter a publication manually').find(':radio').click()
     cy.contains('.btn', 'Add publication(s)').click()
 
     cy.contains(new RegExp(`^${publicationType}$`)).click()
@@ -585,7 +585,7 @@ describe('Issue #1237: Accessibility and mark-up: make sure labels are clickable
   function setUpDataset(editDatasetCallback: () => void) {
     cy.visit('/dataset/add')
 
-    cy.contains('Register a dataset manually').click()
+    cy.contains('Register a dataset manually').find(':radio').click()
     cy.contains('.btn', 'Add dataset').click()
 
     updateFields(
@@ -617,7 +617,7 @@ describe('Issue #1237: Accessibility and mark-up: make sure labels are clickable
     | 'Creator'
 
   function updateFields(section: FieldsSection, callback: () => void, persist = false) {
-    cy.contains('.card-header', section).find('.btn').click({ scrollBehavior: 'nearest' })
+    cy.contains('.card-header', section).find('.btn').click()
 
     const modalTitle = new RegExp(`(Edit|Add) ${section}`, 'i')
 

cypress/e2e/issues/issue-1246.cy.ts

@@ -17,10 +17,10 @@ describe('Issue #1246: Close button on toast does not work', () => {
       .find('.dropdown .btn:has(i.if.if-more)')
       .click()
 
-    cy.contains('Delete').click()
+    cy.contains('.dropdown-item', 'Delete').click()
 
     cy.ensureModal('Are you sure?').within(() => {
-      cy.contains('.btn-danger', 'Delete').click()
+      cy.contains('.btn', 'Delete').click()
     })
 
     cy.ensureNoModal()
@@ -35,10 +35,10 @@ describe('Issue #1246: Close button on toast does not work', () => {
 
     cy.visitPublication()
 
-    cy.contains('Publish to Biblio').click()
+    cy.contains('.btn', 'Publish to Biblio').click()
 
     cy.ensureModal('Are you sure?').within(() => {
-      cy.contains('.btn-success', 'Publish').click()
+      cy.contains('.btn', 'Publish').click()
     })
 
     cy.ensureNoModal()
@@ -53,10 +53,10 @@ describe('Issue #1246: Close button on toast does not work', () => {
 
     cy.visitPublication()
 
-    cy.contains('Withdraw').click()
+    cy.contains('.btn', 'Withdraw').click()
 
     cy.ensureModal('Are you sure?').within(() => {
-      cy.contains('.btn-danger', 'Withdraw').click()
+      cy.contains('.btn', 'Withdraw').click()
     })
 
     cy.ensureNoModal()
@@ -71,18 +71,21 @@ describe('Issue #1246: Close button on toast does not work', () => {
 
     cy.visitPublication()
 
-    cy.contains('Withdraw').click()
+    cy.contains('.btn', 'Withdraw').click()
 
     cy.ensureModal('Are you sure?').within(() => {
-      cy.contains('.btn-danger', 'Withdraw').click()
+      cy.contains('.btn', 'Withdraw').click()
     })
 
     cy.ensureNoModal()
 
-    cy.contains('Republish').click()
+    // Make sure withdraw-toast is gone first
+    cy.ensureNoToast()
+
+    cy.contains('.btn', 'Republish').click()
 
     cy.ensureModal('Are you sure?').within(() => {
-      cy.contains('.btn-success', 'Republish').click()
+      cy.contains('.btn', 'Republish').click()
     })
 
     cy.ensureNoModal()
@@ -100,7 +103,7 @@ describe('Issue #1246: Close button on toast does not work', () => {
 
     cy.visitPublication()
 
-    cy.contains('Lock record').click()
+    cy.contains('.btn', 'Lock record').click()
 
     assertToast('Publication was successfully locked.')
   })
@@ -115,12 +118,12 @@ describe('Issue #1246: Close button on toast does not work', () => {
 
     cy.visitPublication()
 
-    cy.contains('Lock record').click()
+    cy.contains('.btn', 'Lock record').click()
 
     // Make sure lock-toast is gone first
-    cy.ensureNoToast({ timeout: 6000 })
+    cy.ensureNoToast()
 
-    cy.contains('Unlock record').click()
+    cy.contains('.btn', 'Unlock record').click()
 
     assertToast('Publication was successfully unlocked.')
   })
@@ -133,10 +136,7 @@ describe('Issue #1246: Close button on toast does not work', () => {
     cy.contains('Miscellaneous').click()
     cy.contains('.btn', 'Add publication(s)').click()
 
-    cy.contains('Publication details')
-      .closest('.card-header')
-      .contains('.btn', 'Edit')
-      .click({ scrollBehavior: 'nearest' })
+    cy.contains('Publication details').closest('.card-header').contains('.btn', 'Edit').click()
 
     cy.ensureModal('Edit publication details').within(() => {
       cy.get('input[type=text][name=title]').type('Issue 1246 test [CYPRESSTEST]')
@@ -147,7 +147,7 @@ describe('Issue #1246: Close button on toast does not work', () => {
 
     cy.contains('People & Affiliations').click()
 
-    cy.contains('.btn', 'Add author').click({ scrollBehavior: 'nearest' })
+    cy.contains('.btn', 'Add author').click()
 
     cy.ensureModal('Add author').within(() => {
       cy.intercept('/publication/*/contributors/author/suggestions?*').as('suggestions')
@@ -180,6 +180,6 @@ describe('Issue #1246: Close button on toast does not work', () => {
 
     // Reduced assertion timeout here so the test still works if someone decides to reduce the
     // toast dismissal timeout in the future.
-    cy.ensureNoToast({ timeout: 1000 })
+    cy.ensureNoToast({ timeout: 500 })
   }
 })

cypress/support/commands/ensure-no-toast.ts

@@ -4,7 +4,9 @@ type EnsureNoToastOptions = {
   timeout?: number
 }
 
-export default function ensureNoToast(options: EnsureNoToastOptions): Cypress.Chainable<JQuery<HTMLElement>> {
+export default function ensureNoToast(
+  options: EnsureNoToastOptions = { timeout: 6000 } // Toast automatically disappear after 5 seconds
+): Cypress.Chainable<JQuery<HTMLElement>> {
   logCommand('ensureNoToast', { options })
 
   const { timeout } = options

cypress/support/commands/finish-log.ts

@@ -1,6 +1,6 @@
 import { updateConsoleProps, updateLogMessage } from './helpers'
 
-export default function finishLog(subject, log, appendToMessage = false) {
+export default function finishLog(subject: unknown, log: Cypress.Log, appendToMessage = false) {
   let theSubject = subject
   if (subject === null) {
     theSubject = '(null)'
@@ -14,7 +14,7 @@ export default function finishLog(subject, log, appendToMessage = false) {
     updateLogMessage(log, subject)
   }
 
-  log.end()
+  log.finish()
 
   return subject
 }