Port Cite web test suite to Cypress

Steps to implement:

 Copy over and adapt setup files, to install Cypress in the Cite code base.
 Port tests/selenium/specs/backlinks.js and supporting file cite.page.js to run under the Cypress environment, in a second patchset.
 Run the new suite in CI, replacing the previous selenium integration.
 Delete the selenium test suite.

Bug: T353436
Change-Id: Ie76371e18d8612daa7c7be741432c6f3e0b783b5
This commit is contained in:
mareikeheuer 2023-12-19 14:36:26 +01:00
parent f112648cb2
commit 0f801ea550
8 changed files with 1530 additions and 18 deletions

5
.gitignore vendored
View file

@ -23,3 +23,8 @@ project.index
sublime-*
sftp-config.json
.eslintcache
/cypress/.cache
/cypress/videos
/cypress/screenshots
/cypress/downloads

View file

@ -21,7 +21,8 @@ module.exports = function ( grunt ) {
},
all: [
'**/*.{js,json}',
'!{vendor,node_modules}/**'
'!{vendor,node_modules}/**',
'!cypress/screenshots/**/*.js'
]
},
banana: conf.MessagesDirs,

24
cypress.config.js Normal file
View file

@ -0,0 +1,24 @@
'use strict';
/* eslint-env node */
const { defineConfig } = require( 'cypress' );
// const { mwApiCommands } = require( './cypress/support/MwApiPlugin.js' );
const envLogDir = process.env.LOG_DIR ? process.env.LOG_DIR + '/Cite' : null;
module.exports = defineConfig( {
e2e: {
supportFile: false,
baseUrl: process.env.MW_SERVER + process.env.MW_SCRIPT_PATH,
mediawikiAdminUsername: process.env.MEDIAWIKI_USER,
mediawikiAdminPassword: process.env.MEDIAWIKI_PASSWORD
},
retries: 2,
screenshotsFolder: envLogDir || 'cypress/screenshots',
video: true,
videosFolder: envLogDir || 'cypress/videos',
downloadsFolder: envLogDir || 'cypress/downloads'
} );

11
cypress/.eslintrc.json Normal file
View file

@ -0,0 +1,11 @@
{
"root": true,
"extends": [
"wikimedia/server",
"plugin:cypress/recommended"
],
"parserOptions": {
"sourceType": "module"
}
}

View file

@ -0,0 +1,82 @@
import * as helpers from '../utils/functions.helper.js';
const title = getTestString( 'CiteTest-title' );
const encodedTitle = encodeURIComponent( title );
function getTestString( prefix = '' ) {
return prefix + Math.random().toString();
}
describe( 'Cite backlinks test', () => {
before( () => {
cy.visit( '/' );
const wikiText = 'This is reference #1: <ref name="a">This is citation #1 for reference #1 and #2</ref><br> ' +
'This is reference #2: <ref name="a" /><br>' +
'This is reference #3: <ref>This is citation #2</ref><br>' +
'<references />';
// Rely on the retry behavior of Cypress assertions to use this as a "wait" until the specified conditions are met.
cy.window().should( 'have.property', 'mw' ).and( 'have.property', 'loader' ).and( 'have.property', 'using' );
cy.window().then( async ( win ) => {
await win.mw.loader.using( 'mediawiki.api' ).then(
async function () {
await new win.mw.Api().create( title, {}, wikiText );
}
);
} );
} );
beforeEach( () => {
// cy.visit( `/wiki/${ encodedTitle }` );
cy.visit( `/index.php?title=${ encodedTitle }` );
} );
it( 'hides clickable up arrow by default when there are multiple backlinks', () => {
helpers.getCiteMultiBacklink( 1 ).should( 'not.exist' );
} );
it( 'hides clickable up arrow when jumping back from multiple used references', () => {
helpers.getReference( 2 ).click();
helpers.getCiteMultiBacklink( 1 ).click();
// The up-pointing arrow in the reference line is not linked
helpers.getCiteMultiBacklink( 1 ).should( 'not.be.visible' );
} );
it( 'shows clickable up arrow when jumping to multiple used references', () => {
helpers.getReference( 2 ).click();
helpers.getCiteMultiBacklink( 1 ).should( 'be.visible' );
helpers.getFragmentFromLink( helpers.getCiteMultiBacklink( 1 ) ).then( ( linkFragment ) => {
helpers.getReference( 2 ).invoke( 'attr', 'id' ).should( 'eq', linkFragment );
} );
} );
it( 'highlights backlink in the reference list for the clicked reference when there are multiple used references', () => {
cy.get( '.mw-page-title-main' ).should( 'be.visible' );
helpers.getReference( 2 ).click();
helpers.getCiteSubBacklink( 2 ).should( 'have.class', 'mw-cite-targeted-backlink' );
} );
it( 'uses the last clicked target for the clickable up arrow on multiple used references', () => {
helpers.getReference( 2 ).click();
helpers.getReference( 1 ).click();
helpers.getFragmentFromLink( helpers.getCiteMultiBacklink( 1 ) ).then( ( linkFragment ) => {
helpers.getReference( 1 ).invoke( 'attr', 'id' ).then( ( referenceId ) => {
expect( linkFragment ).to.equal( referenceId );
} );
} );
} );
it( 'retains backlink visibility for unnamed references when interacting with other references', () => {
helpers.getReference( 3 ).click();
helpers.getCiteSingleBacklink( 2 ).click();
// Doesn' matter what is focused next, just needs to be something else
helpers.getReference( 1 ).click();
// The backlink of the unnamed reference is still visible
helpers.getCiteSingleBacklink( 2 ).should( 'be.visible' );
} );
} );

View file

@ -0,0 +1,22 @@
export function getReference( num ) {
return cy.get( `#mw-content-text .reference:nth-of-type(${ num })` );
}
export function getCiteSubBacklink( num ) {
return cy.get( `.mw-cite-backlink sup:nth-of-type(${ num }) a` );
}
export function getCiteMultiBacklink( num ) {
return cy.get( `.references li:nth-of-type(${ num }) .mw-cite-up-arrow-backlink` );
}
export function getCiteSingleBacklink( num ) {
return cy.get( `.references li:nth-of-type(${ num }) .mw-cite-backlink a` );
}
export function getFragmentFromLink( linkElement ) {
return linkElement.invoke( 'attr', 'href' ).then( ( href ) => {
return href.split( '#' )[ 1 ];
} );
}

1393
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -3,8 +3,10 @@
"private": true,
"scripts": {
"selenium-daily": "npm run selenium-test",
"selenium-test": "wdio tests/selenium/wdio.conf.js",
"test": "grunt test"
"selenium-test": "cypress run",
"cypress:open": "cypress open",
"test": "grunt test",
"lint:fix": "grunt test --fix"
},
"devDependencies": {
"@wdio/cli": "7.30.1",
@ -12,7 +14,9 @@
"@wdio/local-runner": "7.30.1",
"@wdio/mocha-framework": "7.26.0",
"@wdio/spec-reporter": "7.29.1",
"cypress": "^13.6.1",
"eslint-config-wikimedia": "0.26.0",
"eslint-plugin-cypress": "^2.15.1",
"grunt": "1.6.1",
"grunt-banana-checker": "0.11.0",
"grunt-eslint": "24.3.0",