re-enable a cypress test, removing use of aliases (#13412)
* re-enable test * specifically target the option rather than text in the dropdown * remove use of aliases from flakey test * trigger travis * trigger travis * focus option before clicking * add comment, remove other aliases for textareas
This commit is contained in:
Suzanne Aitchison
GitHub
parent
29dcea3750
commit
3ec91dd936
1 changed files with 118 additions and 116 deletions
|
|
@ -1,4 +1,19 @@
|
|||
describe('Comment on articles', () => {
|
||||
// In these tests we have purposefully avoided the use of aliasing (https://docs.cypress.io/guides/core-concepts/variables-and-aliases#Aliases)
|
||||
// Making use of aliases is generally best practice, but due to the implementation of the autocomplete component (switching between two different textareas) it can cause flakiness in these particular tests
|
||||
|
||||
const getCommentCombobox = () =>
|
||||
cy.findByRole('combobox', {
|
||||
name: /^Add a comment to the discussion$/i,
|
||||
});
|
||||
|
||||
const getCommentDropdown = () => cy.findByRole('listbox');
|
||||
|
||||
const getCommentPlainTextBox = () =>
|
||||
cy.findByRole('textbox', {
|
||||
name: /^Add a comment to the discussion$/i,
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
cy.testSetup();
|
||||
cy.fixture('users/articleEditorV1User.json').as('user');
|
||||
|
|
@ -18,47 +33,49 @@ describe('Comment on articles', () => {
|
|||
});
|
||||
|
||||
describe('Comments using mention autocomplete', () => {
|
||||
it.skip('should comment on an article with user mention autocomplete suggesting max 6 users', () => {
|
||||
it('should comment on an article with user mention autocomplete suggesting max 6 users', () => {
|
||||
cy.intercept(
|
||||
{ method: 'GET', url: '/search/usernames' },
|
||||
{ fixture: 'search/usernames.json' },
|
||||
);
|
||||
|
||||
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
cy.findByRole('textbox', {
|
||||
name: /^Add a comment to the discussion$/i,
|
||||
}).as('plainCommentBox');
|
||||
}).click();
|
||||
|
||||
cy.get('@plainCommentBox').type('Some text @s');
|
||||
// Get a handle to the newly substituted textbox
|
||||
getCommentPlainTextBox();
|
||||
getCommentPlainTextBox().type('Some text @s');
|
||||
|
||||
// Verify the combobox has appeared
|
||||
cy.findByRole('combobox', { name: /Add a comment to the discussion/ }).as(
|
||||
'autocompleteCommentBox',
|
||||
);
|
||||
cy.get('@autocompleteCommentBox').should('have.focus');
|
||||
getCommentCombobox();
|
||||
getCommentCombobox().should('have.focus');
|
||||
|
||||
cy.findByText('Type to search for a user').should('exist');
|
||||
cy.get('@autocompleteCommentBox').type('earch');
|
||||
getCommentCombobox().type('earch');
|
||||
getCommentDropdown().should('exist');
|
||||
|
||||
const expectedUsernames = [
|
||||
'@search_user_1',
|
||||
'@search_user_2',
|
||||
'@search_user_2',
|
||||
'@search_user_3',
|
||||
'@search_user_4',
|
||||
'@search_user_5',
|
||||
'@search_user_6',
|
||||
const expectedUsernameMatches = [
|
||||
/@search_user_1/,
|
||||
/@search_user_2/,
|
||||
/@search_user_2/,
|
||||
/@search_user_3/,
|
||||
/@search_user_4/,
|
||||
/@search_user_5/,
|
||||
/@search_user_6/,
|
||||
];
|
||||
|
||||
expectedUsernames.forEach((name) => cy.findByText(name).should('exist'));
|
||||
cy.findByText('@search_user_7').should('not.exist');
|
||||
expectedUsernameMatches.forEach((name) =>
|
||||
cy.findByRole('option', { name }).should('exist'),
|
||||
);
|
||||
cy.findByRole('option', { name: /@search_user_7/ }).should('not.exist');
|
||||
cy.findByRole('option', { name: /@search_user_3/ }).focus();
|
||||
cy.findByRole('option', { name: /@search_user_3/ }).click();
|
||||
|
||||
cy.findByText('@search_user_3').click();
|
||||
getCommentDropdown().should('not.exist');
|
||||
|
||||
cy.get('@plainCommentBox').should('have.focus');
|
||||
cy.get('@plainCommentBox').should(
|
||||
getCommentPlainTextBox().should('have.focus');
|
||||
getCommentPlainTextBox().should(
|
||||
'have.value',
|
||||
'Some text @search_user_3 ',
|
||||
);
|
||||
|
|
@ -70,23 +87,21 @@ describe('Comment on articles', () => {
|
|||
{ fixture: 'search/usernames.json' },
|
||||
);
|
||||
|
||||
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
cy.findByRole('textbox', {
|
||||
name: /^Add a comment to the discussion$/i,
|
||||
}).as('plainCommentBox');
|
||||
}).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
getCommentPlainTextBox();
|
||||
getCommentPlainTextBox().type('Some text @s');
|
||||
|
||||
cy.get('@plainCommentBox').type('Some text @s');
|
||||
// Verify the combobox has appeared
|
||||
cy.findByRole('combobox', { name: /Add a comment to the discussion/ }).as(
|
||||
'autocompleteCommentBox',
|
||||
);
|
||||
cy.get('@autocompleteCommentBox').should('have.focus');
|
||||
cy.get('@autocompleteCommentBox').type('earch_user{downarrow}{enter}');
|
||||
getCommentCombobox();
|
||||
getCommentCombobox().should('have.focus');
|
||||
getCommentCombobox().type('earch_user{downarrow}{enter}');
|
||||
|
||||
cy.get('@plainCommentBox').should('have.focus');
|
||||
cy.get('@plainCommentBox').should(
|
||||
getCommentPlainTextBox().should('have.focus');
|
||||
getCommentPlainTextBox().should(
|
||||
'have.value',
|
||||
'Some text @search_user_1 ',
|
||||
);
|
||||
|
|
@ -98,28 +113,26 @@ describe('Comment on articles', () => {
|
|||
{ fixture: 'search/emptyUsernamesSearch.json' },
|
||||
);
|
||||
|
||||
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
cy.findByRole('textbox', {
|
||||
name: /^Add a comment to the discussion$/i,
|
||||
}).as('plainCommentBox');
|
||||
}).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
getCommentPlainTextBox();
|
||||
getCommentPlainTextBox().type('Some text @u');
|
||||
|
||||
cy.get('@plainCommentBox').type('Some text @u');
|
||||
// Verify the combobox has appeared
|
||||
cy.findByRole('combobox', { name: /Add a comment to the discussion/ }).as(
|
||||
'autocompleteCommentBox',
|
||||
);
|
||||
cy.get('@autocompleteCommentBox').should('have.focus');
|
||||
getCommentCombobox();
|
||||
getCommentCombobox().should('have.focus');
|
||||
|
||||
cy.get('@autocompleteCommentBox').type('ser');
|
||||
getCommentCombobox().type('ser');
|
||||
|
||||
cy.findByText('No results found').should('exist');
|
||||
cy.get('@autocompleteCommentBox').type(' ');
|
||||
getCommentCombobox().type(' ');
|
||||
|
||||
cy.findByText('No results found').should('not.exist');
|
||||
cy.get('@plainCommentBox').should('have.focus');
|
||||
cy.get('@plainCommentBox').should('have.value', 'Some text @user ');
|
||||
getCommentPlainTextBox().should('have.focus');
|
||||
getCommentPlainTextBox().should('have.value', 'Some text @user ');
|
||||
});
|
||||
|
||||
it('should stop showing mention autocomplete suggestions on text delete', () => {
|
||||
|
|
@ -128,27 +141,23 @@ describe('Comment on articles', () => {
|
|||
{ fixture: 'search/usernames.json' },
|
||||
);
|
||||
|
||||
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
cy.findByRole('textbox', {
|
||||
name: /^Add a comment to the discussion$/i,
|
||||
}).as('plainCommentBox');
|
||||
}).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
getCommentPlainTextBox();
|
||||
getCommentPlainTextBox().type('Some text @s');
|
||||
|
||||
cy.get('@plainCommentBox').type('Some text @s');
|
||||
// Verify the combobox has appeared
|
||||
cy.findByRole('combobox', { name: /Add a comment to the discussion/ }).as(
|
||||
'autocompleteCommentBox',
|
||||
);
|
||||
getCommentCombobox();
|
||||
|
||||
cy.get('@autocompleteCommentBox').should('have.focus');
|
||||
cy.get('@autocompleteCommentBox').type('e');
|
||||
cy.findByText('@search_user_1').should('exist');
|
||||
getCommentCombobox().should('have.focus');
|
||||
getCommentCombobox().type('e');
|
||||
cy.findByRole('option', { name: /@search_user_1/ }).should('exist');
|
||||
|
||||
cy.get('@autocompleteCommentBox').type(
|
||||
'{backspace}{backspace}{backspace}',
|
||||
);
|
||||
cy.findByText('@search_user_1').should('not.exist');
|
||||
getCommentCombobox().type('{backspace}{backspace}{backspace}');
|
||||
cy.findByRole('option', { name: /@search_user_1/ }).should('not.exist');
|
||||
});
|
||||
|
||||
it('should resume search suggestions when user types after deleting', () => {
|
||||
|
|
@ -157,24 +166,23 @@ describe('Comment on articles', () => {
|
|||
{ fixture: 'search/usernames.json' },
|
||||
);
|
||||
|
||||
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
cy.findByRole('textbox', {
|
||||
name: /^Add a comment to the discussion$/i,
|
||||
}).type('Some text @se');
|
||||
}).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
getCommentPlainTextBox();
|
||||
getCommentPlainTextBox().type('Some text @se');
|
||||
|
||||
// Verify the combobox has appeared
|
||||
cy.findByRole('combobox', { name: /Add a comment to the discussion/ }).as(
|
||||
'autocompleteCommentBox',
|
||||
);
|
||||
getCommentCombobox();
|
||||
|
||||
cy.get('@autocompleteCommentBox').should('have.focus');
|
||||
cy.get('@autocompleteCommentBox').type('{backspace}{backspace}');
|
||||
cy.findByText('@search_user_1').should('not.exist');
|
||||
getCommentCombobox().should('have.focus');
|
||||
getCommentCombobox().type('{backspace}{backspace}');
|
||||
cy.findByRole('option', { name: /@search_user_1/ }).should('not.exist');
|
||||
|
||||
cy.get('@autocompleteCommentBox').type('se');
|
||||
cy.findByText('@search_user_1').should('exist');
|
||||
getCommentCombobox().type('se');
|
||||
cy.findByRole('option', { name: /@search_user_1/ }).should('exist');
|
||||
});
|
||||
|
||||
it('should close the autocomplete suggestions on Escape press', () => {
|
||||
|
|
@ -183,23 +191,22 @@ describe('Comment on articles', () => {
|
|||
{ fixture: 'search/usernames.json' },
|
||||
);
|
||||
|
||||
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
cy.findByRole('textbox', {
|
||||
name: /^Add a comment to the discussion$/i,
|
||||
}).type('Some text @s');
|
||||
}).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
getCommentPlainTextBox();
|
||||
getCommentPlainTextBox().type('Some text @s');
|
||||
|
||||
// Verify the combobox has appeared
|
||||
cy.findByRole('combobox', { name: /Add a comment to the discussion/ }).as(
|
||||
'autocompleteCommentBox',
|
||||
);
|
||||
getCommentCombobox();
|
||||
|
||||
cy.get('@autocompleteCommentBox').type('earch');
|
||||
cy.findByText('@search_user_1').should('be.visible');
|
||||
getCommentCombobox().type('earch');
|
||||
cy.findByRole('option', { name: /@search_user_1/ }).should('exist');
|
||||
|
||||
cy.get('@autocompleteCommentBox').type('{Esc}');
|
||||
cy.findByText('@search_user_1').should('not.be.visible');
|
||||
getCommentCombobox().type('{Esc}');
|
||||
cy.findByRole('option', { name: /@search_user_1/ }).should('not.exist');
|
||||
});
|
||||
|
||||
it('should close the autocomplete suggestions and exit combobox on click outside', () => {
|
||||
|
|
@ -208,29 +215,26 @@ describe('Comment on articles', () => {
|
|||
{ fixture: 'search/usernames.json' },
|
||||
);
|
||||
|
||||
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
cy.findByRole('textbox', {
|
||||
name: /^Add a comment to the discussion$/i,
|
||||
}).as('plainTextArea');
|
||||
}).click();
|
||||
|
||||
cy.get('@plainTextArea').type('Some text @s');
|
||||
// Get a handle to the newly substituted textbox
|
||||
getCommentPlainTextBox();
|
||||
getCommentPlainTextBox().type('Some text @s');
|
||||
|
||||
// Verify the combobox has appeared
|
||||
cy.findByRole('combobox', { name: /Add a comment to the discussion/ }).as(
|
||||
'autocompleteCommentBox',
|
||||
);
|
||||
getCommentCombobox();
|
||||
|
||||
cy.get('@autocompleteCommentBox').type('earch');
|
||||
cy.findByText('@search_user_1').should('be.visible');
|
||||
getCommentCombobox().type('earch');
|
||||
cy.findByRole('option', { name: /@search_user_1/ }).should('be.visible');
|
||||
|
||||
// Click away from the dropdown
|
||||
cy.get('@autocompleteCommentBox').click({ position: 'right' });
|
||||
cy.findByText('@search_user_1').should('not.exist');
|
||||
getCommentCombobox().click({ position: 'right' });
|
||||
cy.findByRole('option', { name: /@search_user_1/ }).should('not.exist');
|
||||
|
||||
// Check the combobox has exited and we are returned to the plainTextArea
|
||||
cy.get('@plainTextArea').should('have.focus');
|
||||
getCommentPlainTextBox().should('have.focus');
|
||||
});
|
||||
|
||||
it('should exit combobox when blurred and refocused', () => {
|
||||
|
|
@ -239,24 +243,21 @@ describe('Comment on articles', () => {
|
|||
{ fixture: 'search/usernames.json' },
|
||||
);
|
||||
|
||||
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
|
||||
|
||||
// Get a handle to the newly substituted textbox
|
||||
cy.findByRole('textbox', {
|
||||
name: /^Add a comment to the discussion$/i,
|
||||
}).as('plainTextArea');
|
||||
}).click();
|
||||
|
||||
cy.get('@plainTextArea').type('Some text @s');
|
||||
// Get a handle to the newly substituted textbox
|
||||
getCommentPlainTextBox();
|
||||
getCommentPlainTextBox().type('Some text @s');
|
||||
|
||||
// Verify the combobox has appeared
|
||||
cy.findByRole('combobox', {
|
||||
name: /Add a comment to the discussion/,
|
||||
}).as('combobox');
|
||||
getCommentCombobox();
|
||||
|
||||
// Blur the currently active textarea, and check that the blur results in the plainTextArea being restored
|
||||
cy.get('@combobox').blur();
|
||||
cy.get('@combobox').should('not.be.visible');
|
||||
cy.get('@plainTextArea').should('be.visible');
|
||||
getCommentCombobox().blur();
|
||||
getCommentCombobox().should('not.exist');
|
||||
getCommentPlainTextBox().should('exist');
|
||||
});
|
||||
|
||||
it.skip('should reply to a comment with user mention autocomplete', () => {
|
||||
|
|
@ -268,7 +269,7 @@ describe('Comment on articles', () => {
|
|||
// Get a handle to the newly substituted textbox
|
||||
cy.findByRole('main')
|
||||
.as('main')
|
||||
.findByRole('textbox', /^Add a comment to the discussion$/i)
|
||||
.findByRole('textbox', { name: /^Add a comment to the discussion$/i })
|
||||
.click();
|
||||
|
||||
// The mention autocomplete is two textareas
|
||||
|
|
@ -305,7 +306,7 @@ describe('Comment on articles', () => {
|
|||
.as('autocompleteCommentBox');
|
||||
|
||||
cy.get('@main').get('@autocompleteCommentBox').type('earch');
|
||||
cy.findByText('@search_user_1').click();
|
||||
cy.findByRole('option', { name: /@search_user_1/ }).click();
|
||||
|
||||
cy.get('@replyCommentBox').should(
|
||||
'have.value',
|
||||
|
|
@ -319,11 +320,12 @@ describe('Comment on articles', () => {
|
|||
{ fixture: 'search/usernames.json' },
|
||||
);
|
||||
|
||||
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
|
||||
// Get a handle to the newly substituted textbox
|
||||
cy.findByRole('textbox', {
|
||||
name: /^Add a comment to the discussion$/i,
|
||||
}).type('first comment');
|
||||
}).click();
|
||||
// Get a handle to the newly substituted textbox
|
||||
getCommentPlainTextBox();
|
||||
getCommentPlainTextBox().type('first comment');
|
||||
|
||||
cy.findByRole('button', { name: /Submit/ }).click();
|
||||
cy.findByRole('link', { name: /Reply/ });
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue