maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor/Improve addTagsToArticle specs (#19006)

Browse source
This commit is contained in:
Mac Siri 2023-01-24 14:48:01 -05:00 • committed by GitHub
parent f8469b04fb
commit 2218a14fff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
cypress/e2e/seededFlows/publishingFlows/addTagsToArticle.spec.js
View file

@ -38,79 +38,66 @@ describe('Add tags to article', () => {
cy.clearLocalStorage();
});
it('automatically suggests top tags when field is focused', () => {
it('properly suggests top tags when field is focused', () => {
cy.intercept('search/tags**', exampleSearchResult);
// It is possible in slow running tests that the fetched "top tags" will not be available in the autocomplete before the focus event triggered below.
// Here we retry the focus event until the combobox expands.
const focusInputAndGetParentCombobox = ($el) =>
$el.focus().blur().focus().parents('div');
// Focus the input automatically return 'top tags'
cy.findByRole('textbox', { name: 'Add up to 4 tags' })
.pipe(focusInputAndGetParentCombobox)
.should('have.attr', 'aria-expanded', 'true');
cy.findByRole('heading', { name: 'Top tags' }).should('exist');
cy.findByRole('option', { name: '# tagone' }).should('exist');
cy.findByRole('option', {
name: '# tagtwo tag two short summary',
}).should('exist');
});
cy.findByRole('option', { name: '# tagtwo tag two short summary' }).should(
'exist',
);
it("doesn't suggest top tags already added", () => {
// User select first tag option
// - Check input has 'reset' and still has focus
// - Check only the unselected top tag is presented
cy.findByRole('textbox', { name: 'Add up to 4 tags' }).as('input').focus();
cy.findByRole('option', { name: '# tagone' }).click();
// Check input has 'reset' and still has focus
cy.get('@input').should('have.value', '').should('have.focus');
cy.findByRole('heading', { name: 'Top tags' }).should('exist');
// Check only the unselected top tag is presented
cy.findByRole('option', {
name: '# tagtwo tag two short summary',
}).should('exist');
cy.findByRole('option', { name: '# tagone' }).should('not.exist');
});
it('searches and shows suggestions', () => {
cy.intercept('search/tags**', exampleSearchResult);
// User searches for a tag
// - Top tags should not be shown when a search starts
cy.findByRole('textbox', { name: 'Add up to 4 tags' }).type('a');
// Top tags should not be shown when a search starts
cy.findByRole('heading', { name: 'Top tags' }).should('not.exist');
cy.findByRole('option', { name: '# suggestion suggestion summary' }).should(
'exist',
);
});
it('displays currently typed text as a suggestion if no suggestions found', () => {
// displays currently typed text as a suggestion if no suggestions are returned
// - Top tags should not be shown when a search starts
cy.intercept('search/tags**', { result: [] });
cy.findByRole('textbox', { name: 'Add up to 4 tags' }).type('a');
// Top tags should not be shown when a search starts
cy.findByRole('heading', { name: 'Top tags' }).should('not.exist');
cy.findByRole('option', { name: '# a' }).should('exist');
cy.findByRole('option', { name: '# aa' }).should('exist');
});
it('selects a tag by clicking, typing a comma or space', () => {
cy.findByRole('textbox', { name: 'Add up to 4 tags' }).as('input').focus();
cy.findByRole('option', { name: '# tagone' }).click();
cy.findByRole('button', { name: 'Edit tagone' }).should('exist');
cy.findByRole('button', { name: 'Remove tagone' }).should('exist');
cy.get('@input').type('something,');
cy.findByRole('button', { name: 'Edit something' }).should('exist');
cy.findByRole('button', { name: 'Remove something' }).should('exist');
cy.get('@input').type('another ');
cy.findByRole('button', { name: 'Edit another' }).should('exist');
cy.findByRole('button', { name: 'Remove another' }).should('exist');
});
it('selects currently entered text when input blurs', () => {
// selects currently entered text when input blurs
cy.findByRole('textbox', { name: 'Add up to 4 tags' })
.type('something')
.blur();