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

reinstate reply to comment e2e test (#13181)

Browse source 
* reinstate reply to comment e2e test

* refactor selector for reply comment box

* refactor and remove data testid no longer needed
This commit is contained in:
Suzanne Aitchison 2021-03-30 16:31:07 +01:00 • committed by GitHub
parent ae51dc0466
commit 7af30e8bfc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/javascript/crayons/MentionAutocompleteTextArea/MentionAutocompleteTextArea.jsx
View file

@ -290,7 +290,6 @@ export const MentionAutocompleteTextArea = ({
/>
<textarea
data-testid="autocomplete-textarea"
data-mention-autocomplete-active="true"
ref={plainTextAreaRef}
onChange={handleTextInputChange}

2
app/javascript/crayons/MentionAutocompleteTextArea/__tests__/__snapshots__/MentionAutocompleteTextArea.test.jsx.snap
View file

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<MentionAutocompleteTextArea /> should render 1`] = `"<div aria-live=\\"polite\\" class=\\"screen-reader-only\\"></div><div id=\\"combobox-container\\" class=\\"crayons-autocomplete\\" data-reach-combobox=\\"\\" data-state=\\"idle\\"><textarea aria-autocomplete=\\"both\\" aria-controls=\\"listbox--combobox-container\\" aria-expanded=\\"false\\" aria-haspopup=\\"listbox\\" role=\\"combobox\\" data-mention-autocomplete-active=\\"true\\" data-reach-combobox-input=\\"\\" data-state=\\"idle\\" aria-label=\\"test text area\\" id=\\"test-text-area\\" style=\\"font: -webkit-small-control; text-rendering: auto; letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0; text-shadow: none; display: inline-block; text-align: start; background-color: white; border: 1px solid; flex-direction: column; resize: auto; cursor: auto; padding: 2px; white-space: pre-wrap; word-wrap: break-word; visibility: visible; transition: none;\\" class=\\"hidden\\"></textarea><textarea data-testid=\\"autocomplete-textarea\\" data-mention-autocomplete-active=\\"true\\" aria-label=\\"test text area\\" id=\\"test-text-area\\" style=\\"font: -webkit-small-control; text-rendering: auto; letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0; text-shadow: none; display: inline-block; text-align: start; background-color: white; border: 1px solid; flex-direction: column; resize: auto; cursor: auto; padding: 2px; white-space: pre-wrap; word-wrap: break-word; visibility: visible; transition: none;\\"></textarea></div>"`;
exports[`<MentionAutocompleteTextArea /> should render 1`] = `"<div aria-live=\\"polite\\" class=\\"screen-reader-only\\"></div><div id=\\"combobox-container\\" class=\\"crayons-autocomplete\\" data-reach-combobox=\\"\\" data-state=\\"idle\\"><textarea aria-autocomplete=\\"both\\" aria-controls=\\"listbox--combobox-container\\" aria-expanded=\\"false\\" aria-haspopup=\\"listbox\\" role=\\"combobox\\" data-mention-autocomplete-active=\\"true\\" data-reach-combobox-input=\\"\\" data-state=\\"idle\\" aria-label=\\"test text area\\" id=\\"test-text-area\\" style=\\"font: -webkit-small-control; text-rendering: auto; letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0; text-shadow: none; display: inline-block; text-align: start; background-color: white; border: 1px solid; flex-direction: column; resize: auto; cursor: auto; padding: 2px; white-space: pre-wrap; word-wrap: break-word; visibility: visible; transition: none;\\" class=\\"hidden\\"></textarea><textarea data-mention-autocomplete-active=\\"true\\" aria-label=\\"test text area\\" id=\\"test-text-area\\" style=\\"font: -webkit-small-control; text-rendering: auto; letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0; text-shadow: none; display: inline-block; text-align: start; background-color: white; border: 1px solid; flex-direction: column; resize: auto; cursor: auto; padding: 2px; white-space: pre-wrap; word-wrap: break-word; visibility: visible; transition: none;\\"></textarea></div>"`;

88
cypress/integration/articleFlows/commentOnArticle.spec.js
View file

@ -26,11 +26,11 @@ describe('Comment on articles', () => {
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
// Wait for the new autocomplete text areas to be mounted
cy.findByTestId('autocomplete-textarea', {
role: 'textbox',
name: /Add a comment to the discussion/,
// Get a handle to the newly substituted textbox
cy.findByRole('textbox', {
name: /^Add a comment to the discussion$/i,
}).as('plainCommentBox');
cy.get('@plainCommentBox').type('Some text @s');
// Verify the combobox has appeared
@ -72,10 +72,9 @@ describe('Comment on articles', () => {
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
// Wait for the new autocomplete text areas to be mounted
cy.findByTestId('autocomplete-textarea', {
role: 'textbox',
name: /Add a comment to the discussion/,
// Get a handle to the newly substituted textbox
cy.findByRole('textbox', {
name: /^Add a comment to the discussion$/i,
}).as('plainCommentBox');
cy.get('@plainCommentBox').type('Some text @s');
@ -100,10 +99,10 @@ describe('Comment on articles', () => {
);
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
// Wait for the new autocomplete text areas to be mounted
cy.findByTestId('autocomplete-textarea', {
role: 'textbox',
name: /Add a comment to the discussion/,
// Get a handle to the newly substituted textbox
cy.findByRole('textbox', {
name: /^Add a comment to the discussion$/i,
}).as('plainCommentBox');
cy.get('@plainCommentBox').type('Some text @u');
@ -130,10 +129,10 @@ describe('Comment on articles', () => {
);
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
// Wait for the new autocomplete text areas to be mounted
cy.findByTestId('autocomplete-textarea', {
role: 'textbox',
name: /Add a comment to the discussion/,
// Get a handle to the newly substituted textbox
cy.findByRole('textbox', {
name: /^Add a comment to the discussion$/i,
}).as('plainCommentBox');
cy.get('@plainCommentBox').type('Some text @s');
@ -159,13 +158,11 @@ describe('Comment on articles', () => {
);
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
// Wait for the new autocomplete text areas to be mounted
cy.findByTestId('autocomplete-textarea', {
role: 'textbox',
name: /Add a comment to the discussion/,
}).as('plainCommentBox');
cy.get('@plainCommentBox').type('Some text @se');
// Get a handle to the newly substituted textbox
cy.findByRole('textbox', {
name: /^Add a comment to the discussion$/i,
}).type('Some text @se');
// Verify the combobox has appeared
cy.findByRole('combobox', { name: /Add a comment to the discussion/ }).as(
@ -187,12 +184,11 @@ describe('Comment on articles', () => {
);
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
// Wait for the new autocomplete text areas to be mounted
cy.findByTestId('autocomplete-textarea', {
role: 'textbox',
name: /Add a comment to the discussion/,
}).as('plainCommentBox');
cy.get('@plainCommentBox').type('Some text @s');
// Get a handle to the newly substituted textbox
cy.findByRole('textbox', {
name: /^Add a comment to the discussion$/i,
}).type('Some text @s');
// Verify the combobox has appeared
cy.findByRole('combobox', { name: /Add a comment to the discussion/ }).as(
@ -206,33 +202,26 @@ describe('Comment on articles', () => {
cy.findByText('@search_user_1').should('not.be.visible');
});
xit('should reply to a comment with user mention autocomplete', () => {
it('should reply to a comment with user mention autocomplete', () => {
cy.intercept(
{ method: 'GET', url: '/search/usernames' },
{ fixture: 'search/usernames.json' },
);
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
// Wait for the new autocomplete text areas to be mounted
cy.findByTestId('autocomplete-textarea', {
role: 'textbox',
name: /Add a comment to the discussion/,
}).as('plainCommentBox');
// Get a handle to the newly substituted textbox
cy.findByRole('textbox', {
name: /^Add a comment to the discussion$/i,
}).type('first comment');
cy.get('@plainCommentBox').type('first comment');
cy.findByRole('button', { name: /Submit/ }).click();
cy.findByRole('link', { name: /Reply/ }).click();
cy.findAllByTestId('autocomplete-textarea', {
role: 'textbox',
name: /Reply to a comment/,
})
.last()
.as('replyCommentBox');
cy.findByRole('textbox', {
name: /Reply to a comment.../,
}).as('replyCommentBox');
cy.get('@replyCommentBox').click();
cy.get('@replyCommentBox').type('Some text @s');
cy.get('@replyCommentBox').click().type('Some text @s');
// Verify the combobox has appeared
cy.findByRole('combobox', { name: /Reply to a comment/ }).as(
@ -255,15 +244,12 @@ describe('Comment on articles', () => {
);
cy.findByLabelText(/^Add a comment to the discussion$/i).click();
// Wait for the new autocomplete text areas to be mounted
cy.findByTestId('autocomplete-textarea', {
role: 'textbox',
name: /Add a comment to the discussion/,
}).as('plainCommentBox');
// Get a handle to the newly substituted textbox
cy.findByRole('textbox', {
name: /^Add a comment to the discussion$/i,
}).type('first comment');
cy.get('@plainCommentBox').type('first comment');
cy.findByRole('button', { name: /Submit/ }).click();
cy.findByRole('link', { name: /Reply/ });
cy.findByTestId('comments-container').within(() => {