[MM-14571] Add e2e to test @mentions notifications (mattermost#2507)

* [MM-14571] Add e2e to test @mentions notifications

* [MM-14571] Cleanup fixture usage, use async/await in plugin

* [MM-14571] Lock down axios version to current version

* [MM-14571] Rename post message as file

* [MM-14571] Additional work based on feedback

* Remove dupe id in channel header
* Add channelid to header
* Update snapshot
* Clean up test
* Add cypress command for getting channel id

* [MM-14571] scroll element into view before clicking

* [MM-14571] scroll another element into view before clicking

* [MM-14571] Remove unneccessary scrollIntoView()

components/channel_header/__snapshots__/channel_header.test.jsx.snap

@@ -3,6 +3,7 @@
 exports[`components/ChannelHeader should render archived view 1`] = `
 <div
  className="channel-header alt"
+ data-channelid="channel_id"
  id="channel-header"
 >
  <div
@@ -17,7 +18,6 @@ exports[`components/ChannelHeader should render archived view 1`] = `
  >
  <div
  className="channel-header__title dropdown"
- id="channelHeaderTitle"
  >
  <h2>
  <MenuWrapper
@@ -132,6 +132,7 @@ exports[`components/ChannelHeader should render archived view 1`] = `
 exports[`components/ChannelHeader should render correct menu when muted 1`] = `
 <div
  className="channel-header alt"
+ data-channelid="channel_id"
  id="channel-header"
 >
  <div
@@ -146,7 +147,6 @@ exports[`components/ChannelHeader should render correct menu when muted 1`] = `
  >
  <div
  className="channel-header__title dropdown"
- id="channelHeaderTitle"
  >
  <h2>
  <MenuWrapper
@@ -353,6 +353,7 @@ exports[`components/ChannelHeader should render properly when empty 1`] = `
 exports[`components/ChannelHeader should render properly when populated 1`] = `
 <div
  className="channel-header alt"
+ data-channelid="channel_id"
  id="channel-header"
 >
  <div
@@ -367,7 +368,6 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
  >
  <div
  className="channel-header__title dropdown"
- id="channelHeaderTitle"
  >
  <h2>
  <MenuWrapper
@@ -533,6 +533,7 @@ exports[`components/ChannelHeader should render properly when populated 1`] = `
 exports[`components/ChannelHeader should render properly when populated with channel props 1`] = `
 <div
  className="channel-header alt"
+ data-channelid="channel_id"
  id="channel-header"
 >
  <div
@@ -547,7 +548,6 @@ exports[`components/ChannelHeader should render properly when populated with cha
  >
  <div
  className="channel-header__title dropdown"
- id="channelHeaderTitle"
  >
  <h2>
  <MenuWrapper

components/channel_header/channel_header.js

@@ -496,6 +496,7 @@ export default class ChannelHeader extends React.PureComponent {
  return (
  <div
  id='channel-header'
+ data-channelid={`${channel.id}`}
  className='channel-header alt'
  >
  <div className='flex-parent'>
@@ -505,7 +506,6 @@ export default class ChannelHeader extends React.PureComponent {
  className='channel-header__info'
  >
  <div
- id='channelHeaderTitle'
  className='channel-header__title dropdown'
  >
  <h2>

components/sidebar/sidebar_channel_button_or_link/__snapshots__/sidebar_channel_button_or_link.test.jsx.snap

@@ -60,6 +60,7 @@ exports[`component/sidebar/sidebar_channel_button_or_link/SidebarChannelButtonOr
  </span>
  <span
  className="badge"
+ id="unreadMentions"
  >
  6
  </span>
@@ -132,6 +133,7 @@ exports[`component/sidebar/sidebar_channel_button_or_link/SidebarChannelButtonOr
  </span>
  <span
  className="badge"
+ id="unreadMentions"
  >
  6
  </span>

components/sidebar/sidebar_channel_button_or_link/sidebar_channel_button_or_link.jsx

@@ -48,7 +48,14 @@ export default class SidebarChannelButtonOrLink extends React.PureComponent {
  render = () => {
  let badge = null;
  if (this.props.badge) {
- badge = <span className='badge'>{this.props.unreadMentions}</span>;
+ badge = (
+ <span
+ id='unreadMentions'
+ className='badge'
+ >
+ {this.props.unreadMentions}
+ </span>
+ );
  }
 
  const content = (

cypress.json

@@ -2,7 +2,7 @@
  "baseUrl": "http:https://localhost:8065",
  "viewportWidth": 1300,
  "defaultCommandTimeout": 20000,
- "pluginsFile": false,
+ "taskTimeout": 20000,
  "video": false,
  "reporter": "junit",
  "reporterOptions": {

cypress/integration/at_mentions/at_mentions_spec.js

@@ -0,0 +1,106 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// ***************************************************************
+// - [number] indicates a test step (e.g. 1. Go to a page)
+// - [*] indicates an assertion (e.g. * Check the title)
+// - Use element ID when selecting an element. Create one if none.
+// ***************************************************************
+
+/*eslint max-nested-callbacks: ["error", 4]*/
+/*eslint-disable func-names*/
+
+describe('at-mention', () => {
+ before(() => {
+ cy.fixture('users').as('usersJSON');
+ });
+
+ it('N14571 still triggers notification if username is not listed in words that trigger mentions', function() {
+ const receiver = this.usersJSON['user-1'];
+ const sender = this.usersJSON['user-2'];
+ const message = `@${receiver.username} I'm messaging you! ${Date.now()}`;
+
+ // 1. Login and navigate to the account settings
+ cy.toAccountSettingsModal(receiver.username);
+
+ // 2. Select "Notifications"
+ cy.get('#notificationsButton').click();
+
+ // * Notifications header should be visible
+ cy.get('#notificationSettingsTitle').should('be.visible').should('contain', 'Notifications');
+
+ // 3. Open up 'Words that trigger mentions' sub-section
+ cy.get('#keysTitle').scrollIntoView();
+ cy.get('#keysTitle').click();
+
+ // 4. Set checkboxes to desired state
+ cy.get('#notificationTriggerFirst').uncheck().should('not.be.checked');
+ cy.get('#notificationTriggerUsername').uncheck().should('not.be.checked');
+ cy.get('#notificationTriggerShouts').check().should('be.checked');
+ cy.get('#notificationTriggerCustom').check().should('be.checked');
+
+ // 5. Set Custom field to not include our name
+ cy.get('#notificationTriggerCustomText').clear().type('@');
+
+ // 6. Click “Save” and close modal
+ cy.get('#saveSetting').scrollIntoView().click();
+ cy.get('#accountSettingsHeader > .close').click();
+
+ // 7. Navigate to the channel we were mention to
+ // clear the notification gem and get the channelId
+ cy.get('#sidebarItem_town-square').click();
+
+ // 8. Get the current channelId
+ cy.getCurrentChannelId().as('channelId');
+
+ // 9. Stub out Notification so we can spy on it
+ cy.window().then((win) => {
+ cy.stub(win, 'Notification').as('notifyStub');
+ });
+
+ // 10. Navigate to a channel we are NOT going to post to
+ cy.get('#sidebarItem_saepe-5').click({force: true});
+
+ // 11. Use another account to post a message @-mentioning our receiver
+ cy.get('@channelId').then((channelId) => {
+ cy.task('postMessageAs', {sender, message, channelId});
+ });
+
+ // * Verify the stub
+ cy.get('@notifyStub').should((stub) => {
+ const [title, opts] = stub.firstCall.args;
+
+ // * Verify notification is coming from Town Square
+ expect(title).to.equal('Town Square');
+
+ const body = `@${sender.username}: ${message}`;
+
+ // * Verify additional args of notification
+ expect(opts).to.include({body, tag: body, requireInteraction: false, silent: false});
+ });
+
+ // * Verify unread mentions badge
+ cy.get('#sidebarItem_town-square').
+ scrollIntoView().
+ find('#unreadMentions').
+ should('be.visible').
+ and('have.text', '1');
+
+ // 12. Go to the channel where you were messaged
+ cy.get('#sidebarItem_town-square').click();
+
+ // * Verify that the message is there
+ cy.getLastPostId().then((postId) => {
+ const postMessageTextId = `#postMessageText_${postId}`;
+
+ // * Verify entire message
+ cy.get(postMessageTextId).should('have.text', message);
+
+ // * Verify highlight of username
+ cy.get(postMessageTextId).
+ find(`[data-mention=${receiver.username}]`).
+ should('be.visible').
+ and('have.text', `@${receiver.username}`);
+ });
+ });
+});

cypress/plugins/index.js

@@ -0,0 +1,10 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+const postMessageAs = require('./post_message_as');
+
+module.exports = (on) => {
+ on('task', {
+ postMessageAs,
+ });
+};

cypress/plugins/post_message_as.js

@@ -0,0 +1,26 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+require('@babel/polyfill');
+require('isomorphic-fetch');
+
+const {Client4} = require('mattermost-redux/client');
+const axios = require('axios');
+
+const cypressConfig = require('../../cypress.json');
+
+module.exports = async ({sender, message, channelId}) => {
+ const url = `${cypressConfig.baseUrl}/api/v4/users/login`;
+
+ const response = await axios({url, method: 'post', data: {login_id: sender.username, password: sender.password}});
+ const token = response.headers.token;
+
+ Client4.setUrl(cypressConfig.baseUrl);
+ Client4.setToken(token);
+
+ return Client4.createPost({
+ channel_id: channelId,
+ message,
+ type: '',
+ });
+};

cypress/support/commands.js

@@ -376,3 +376,11 @@ Cypress.Commands.add('userStatus', (statusInt) => {
  cy.get('.status-wrapper.status-selector').click();
  cy.get('.MenuItem').eq(statusInt).click();
 });
+
+// ***********************************************************
+// Channel
+// ************************************************************
+
+Cypress.Commands.add('getCurrentChannelId', () => {
+ return cy.get('#channel-header').invoke('attr', 'data-channelid');
+});