Write e2e test for Cite-VisualEditor integration in Cypress

Implemented the test case as described in the ticket.
Deviated from ticket's approach for creating a new page by manual creation instead of API,
to verify the end-to-end functionality through the interface & ensure the entire proccess works seamlessly.

Bug: T353439
Change-Id: I8f863ae0bd8fdb1fb0f1b103d98ba9f2306f3df2
This commit is contained in:
mareikeheuer 2024-01-30 14:37:11 +01:00
parent 4a6b78ac0c
commit b411dc50a2
2 changed files with 62 additions and 0 deletions

View file

@ -0,0 +1,51 @@
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( 'Visual Editor Cite Integration', () => {
before( () => {
cy.visit( '/index.php' );
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>' +
'<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' );
// Create a new page containing a reference
cy.window().then( async ( win ) => {
await win.mw.loader.using( 'mediawiki.api' );
const response = await new win.mw.Api().create( title, {}, wikiText );
expect( response.result ).to.equal( 'Success' );
} );
} );
it( 'should edit and verify reference content in Visual Editor', () => {
cy.visit( `/index.php?title=${ encodedTitle }` );
// Open VE
cy.get( 'li#ca-ve-edit a' ).click();
cy.contains( '.oo-ui-buttonElement-button', 'Start editing' ).click();
cy.url().should( 'include', 'veaction=edit' );
helpers.getVEFootnoteMarker( 'a', 1, 1 ).click();
// Popup appears containing ref content
helpers.getVEReferencePopup()
.should( 'be.visible' )
.should( 'have.text', 'This is citation #1 for reference #1 and #2' );
// Open edit popup
cy.contains( '.oo-ui-buttonElement-button', 'Edit' ).click();
// Dialog appears with ref content
helpers.getVEDialog()
.should( 'be.visible' )
.should( 'have.text', 'This is citation #1 for reference #1 and #2' );
} );
} );

View file

@ -20,3 +20,14 @@ export function getFragmentFromLink( linkElement ) {
return href.split( '#' )[ 1 ];
} );
}
export function getVEFootnoteMarker( refName, sequenceNumber, index ) {
return cy.get( `sup.ve-ce-mwReferenceNode#cite_ref-${ refName }_${ sequenceNumber }-${ index - 1 }` );
}
export function getVEReferencePopup() {
return cy.get( '.oo-ui-popupWidget-popup .ve-ui-mwReferenceContextItem .mw-content-ltr' );
}
export function getVEDialog() {
return cy.get( '.oo-ui-dialog-content .oo-ui-fieldsetLayout .ve-ui-mwTargetWidget .ve-ce-generated-wrapper' );
}