MM-15739 - De-flakify Cypress tests, fix Notifications spy (mattermos…

…t#2886)

* switch to using a spy vs stub for notifications. tons of misc fixes to tests.

* changes based on review feedback

* fix linting error

cypress/integration/account_settings/display/channel_display_mode_spec.js

@@ -25,7 +25,7 @@ describe('Account Settings > Display > Channel Display Mode', () => {
  });
 
  it('should render in min setting view', () => {
- // 1. Go to Account Settings with "user-1"
+ // # Go to Account Settings with "user-1"
  cy.toAccountSettingsModal(null, true);
 
  // * Check that the Display tab is loaded
@@ -78,10 +78,11 @@ describe('Account Settings > Display > Channel Display Mode', () => {
  cy.get('#accountSettingsHeader > .close').click();
 
  // # Go to channel which has any posts
- cy.get('#sidebarItem_town-square').click();
+ cy.get('#sidebarItem_town-square').click({force: true});
 
  // * Validate if the post content in center channel is full width
  // by checking the exact class name.
+ cy.get('#postListContent').should('be.visible');
  cy.get('#postContent').first().invoke('attr', 'class').should('contain', 'post__content').should('not.contain', 'center');
  });
 
@@ -115,10 +116,11 @@ describe('Account Settings > Display > Channel Display Mode', () => {
  cy.get('#accountSettingsHeader > .close').click();
 
  // # Go to channel which has any posts
- cy.get('#sidebarItem_town-square').click();
+ cy.get('#sidebarItem_town-square').click({force: true});
 
  // * Validate if the post content in center channel is fixed and centered
  // by checking the exact class name.
+ cy.get('#postListContent').should('be.visible');
  cy.get('#postContent').first().invoke('attr', 'class').should('contain', 'post__content center');
  });
 });

cypress/integration/account_settings/display/code_theme_colors_spec.js

@@ -45,7 +45,7 @@ describe('AS14319 Theme Colors - Code', () => {
  cy.visit('/');
 
  // # Enter in code block for message
- cy.get('#post_textbox').type('```\ncode\n```{enter}');
+ cy.get('#post_textbox').clear().type('```\ncode\n```{enter}');
  });
 
  // reset settings to default mattermost theme
@@ -83,6 +83,7 @@ describe('AS14319 Theme Colors - Code', () => {
  // # Save and close settings modal
  cy.get('#saveSetting').click();
  cy.get('#accountSettingsHeader > .close').click();
+ cy.get('#accountSettingsHeader').should('be.hidden');
 
  // * Verify that the styles remain after saving and closing modal
  verifyLastPostStyle(THEME);

cypress/integration/account_settings/display/message_display_mode_spec.js

@@ -12,6 +12,7 @@
 describe('Account Settings > Display > Message Display', () => {
  before(() => {
  // # Change message display setting to compact
+ cy.apiLogin('user-1');
  cy.changeMessageDisplaySetting('COMPACT');
  });
 

cypress/integration/account_settings/sidebar/channel_switcher_spec.js

@@ -26,7 +26,7 @@ describe('Account Settings > Sidebar > Channel Switcher', () => {
  });
 
  // # Go to Account Settings with "user-1"
- cy.toAccountSettingsModal('user-1');
+ cy.toAccountSettingsModal(null, true);
  });
 
  after(() => {

cypress/integration/account_settings/theme_color/custom_colors_sidebar_styles_spec.js

@@ -25,9 +25,27 @@ const testCases = [
  {key: 12, name: 'Mention Jewel Text', inputTarget: '.saturation-black', inputColor: ['background-color', 'rgb(65, 92, 129)'], content: '"mentionColor":"#415c81"'},
 ];
 
+// Selects Edit Theme, selects Custom Theme, checks display, selects custom drop-down for color options
+function customColors(dropdownInt, dropdownName) {
+ cy.get('#themeEdit').scrollIntoView().click();
+
+ cy.get('#customThemes').click();
+
+ // Checking Custom Theme Display
+ cy.get('#displaySettingsTitle').scrollIntoView();
+ cy.get('.theme-elements__header').should('be.visible', 'contain', 'Sidebar Styles');
+ cy.get('.theme-elements__header').should('be.visible', 'contain', 'Center Channel Styles');
+ cy.get('.theme-elements__header').should('be.visible', 'contain', 'Link and BUtton Sytles');
+ cy.get('.padding-top').should('be.visible', 'contain', 'Import theme Colors from Slack');
+ cy.get('#saveSetting').scrollIntoView().should('be.visible', 'contain', 'Save');
+ cy.get('#cancelSetting').should('be.visible', 'contain', 'Cancel');
+
+ cy.get('.theme-elements__header').eq(dropdownInt).should('contain', dropdownName).click();
+}
+
 describe('AS14318 Theme Colors - Color Picker', () => {
  before(() => {
- // 1. Set default theme preference
+ // # Set default theme preference
  cy.apiLogin('user-1');
  cy.apiSaveThemePreference();
  });
@@ -39,7 +57,7 @@ describe('AS14318 Theme Colors - Color Picker', () => {
 
  it('Theme Display should render in min setting view', () => {
  // # Go to Account Settings with "user-1"
- cy.toAccountSettingsModal('user-1');
+ cy.toAccountSettingsModal(null, true);
 
  // * Check that the Display tab is loaded
  cy.get('#displayButton').should('be.visible');
@@ -57,12 +75,12 @@ describe('AS14318 Theme Colors - Color Picker', () => {
  describe('Custom - Sidebar Styles input change', () => {
  before(() => {
  // # Go to Theme > Custom > Sidebar Styles
- cy.customColors(0, 'Sidebar Styles');
+ customColors(0, 'Sidebar Styles');
  });
 
  after(() => {
  // Save Sidebar Text color change and close the Account settings modal
- cy.get('#saveSetting').click();
+ cy.get('#saveSetting').click({force: true});
  cy.get('#accountSettingsHeader > .close').click();
  });
 

cypress/integration/at_mentions/at_mentions_spec.js

@@ -54,7 +54,30 @@ function setNotificationSettings(desiredSettings = {first: true, username: true,
  click();
  cy.get('#accountSettingsHeader > .close').
  click().
- should('be.hidden');
+ should('not.exist');
+
+ // Setup notification spy
+ cy.window().then((win) => {
+ function Notification(title, opts) {
+ this.title = title;
+ this.opts = opts;
+ }
+
+ Notification.requestPermission = function() {
+ return 'granted';
+ };
+
+ Notification.close = function() {
+ return true;
+ };
+
+ win.Notification = Notification;
+
+ cy.spy(win, 'Notification').as('notifySpy');
+ });
+
+ // Verify that we now have a Notification property
+ cy.window().should('have.property', 'Notification');
 }
 
 describe('at-mention', () => {
@@ -78,51 +101,38 @@ describe('at-mention', () => {
 
  // # Navigate to the channel we were mention to
  // clear the notification gem and get the channelId
- cy.get('#sidebarItem_town-square').click({force: true});
+ cy.get('#sidebarItem_town-square').scrollIntoView().click({force: true});
 
  // # Get the current channelId
  cy.getCurrentChannelId().as('channelId');
 
- // # Navigate to a channel we are NOT going to post to
- cy.get('#sidebarItem_saepe-5').click({force: true});
-
- // # Stub out Notification so we can spy on it
- cy.window().then((win) => {
- cy.stub(win, 'Notification').as('notifyStub');
- });
+ // 4. Navigate to a channel we are NOT going to post to
+ cy.get('#sidebarItem_saepe-5').scrollIntoView().click({force: true});
  });
 
  it('N14571 still triggers notification if username is not listed in words that trigger mentions', function() {
  // # Set Notification settings
- setNotificationSettings({first: false, username: false, shouts: true, custom: true});
+ setNotificationSettings({first: false, username: true, shouts: true, custom: true});
 
  const message = `@${this.receiver.username} I'm messaging you! ${Date.now()}`;
 
  // # Use another account to post a message @-mentioning our receiver
- cy.task('postMessageAs', {sender: this.sender, message, channelId: this.channelId});
-
- // * Verify the stub
- cy.get('@notifyStub').should((stub) => {
- const [title, opts] = stub.firstCall.args;
+ cy.postMessageAs(this.sender, message, this.channelId);
 
- // * Verify notification is coming from Town Square
- expect(title).to.equal('Town Square');
+ const body = `@${this.sender.username}: ${message}`;
 
- const body = `@${this.sender.username}: ${message}`;
-
- // * Verify additional args of notification
- expect(opts).to.include({body, tag: body, requireInteraction: false, silent: false});
- });
+ cy.get('@notifySpy').should('have.been.calledWithMatch', 'Town Square', {body, tag: body, requireInteraction: false, silent: false});
 
  // * Verify unread mentions badge
+ cy.get('#publicChannel').scrollIntoView();
+
  cy.get('#sidebarItem_town-square').
- scrollIntoView().
  find('#unreadMentions').
  should('be.visible').
  and('have.text', '1');
 
- // # Go to the channel where you were messaged
- cy.get('#sidebarItem_town-square').click();
+ // * Go to that channel
+ cy.get('#sidebarItem_town-square').click({force: true});
 
  // # Get last post message text
  cy.getLastPostId().then((postId) => {
@@ -148,19 +158,20 @@ describe('at-mention', () => {
  const message = `Hey ${this.receiver.username}! I'm messaging you! ${Date.now()}`;
 
  // # Use another account to post a message @-mentioning our receiver
- cy.task('postMessageAs', {sender: this.sender, message, channelId: this.channelId});
+ cy.postMessageAs(this.sender, message, this.channelId);
 
  // * Verify stub was not called
- cy.get('@notifyStub').should('be.not.called');
+ cy.get('@notifySpy').should('be.not.called');
 
  // * Verify unread mentions badge does not exist
+ cy.get('#publicChannel').scrollIntoView();
  cy.get('#sidebarItem_town-square').
  scrollIntoView().
  find('#unreadMentions').
  should('be.not.visible');
 
  // # Go to the channel where you were messaged
- cy.get('#sidebarItem_town-square').click();
+ cy.get('#sidebarItem_town-square').click({force: true});
 
  // # Get last post message text
  cy.getLastPostId().then((postId) => {
@@ -183,24 +194,27 @@ describe('at-mention', () => {
  setNotificationSettings({first: false, username: false, shouts: false, custom: true});
 
  const channelMentions = ['@here', '@all', '@channel'];
+ const sender = this.sender;
+ const channelId = this.channelId;
+ const receiver = this.receiver;
 
  channelMentions.forEach((mention) => {
  const message = `Hey ${mention} I'm message you all! ${Date.now()}`;
 
  // # Use another account to post a message @-mentioning our receiver
- cy.task('postMessageAs', {sender: this.sender, message, channelId: this.channelId});
+ cy.postMessageAs(sender, message, channelId);
 
  // * Verify stub was not called
- cy.get('@notifyStub').should('be.not.called');
+ cy.get('@notifySpy').should('be.not.called');
 
  // * Verify unread mentions badge does not exist
+ cy.get('#publicChannel').scrollIntoView();
  cy.get('#sidebarItem_town-square').
- scrollIntoView().
  find('#unreadMentions').
  should('be.not.visible');
 
  // # Go to the channel where you were messaged
- cy.get('#sidebarItem_town-square').click();
+ cy.get('#sidebarItem_town-square').click({force: true});
 
  // # Get last post message text
  cy.getLastPostId().then((postId) => {
@@ -214,7 +228,7 @@ describe('at-mention', () => {
 
  // * Verify it's not highlighted
  cy.get('@postMessageText').
- find(`[data-mention=${this.receiver.username}]`).
+ find(`[data-mention=${receiver.username}]`).
  should('not.exist');
  });
  });

cypress/integration/channel/autocomplete_shown_each_channel_spec.js

@@ -20,19 +20,19 @@ describe('Identical Message Drafts', () => {
 
  it('M14432 shows Autocomplete in each channel', () => {
  // # Go to test Channel A on sidebar
- cy.get('#sidebarItem_town-square').should('be.visible').click();
+ cy.get('#sidebarItem_town-square').click({force: true});
 
  // * Validate if the channel has been opened
  cy.url().should('include', '/channels/town-square');
 
  // # Start a draft in Channel A containing just "@"
- cy.get('#post_textbox').type('@');
+ cy.get('#post_textbox').should('be.visible').type('@');
 
  // * At mention auto-complete appears in Channel A
  cy.get('#suggestionList').should('be.visible');
 
  // # Go to test Channel B on sidebar
- cy.get('#sidebarItem_autem-2').should('be.visible').click();
+ cy.get('#sidebarItem_autem-2').click({force: true});
 
  // * Validate if the newly navigated channel is open
  // * autocomplete should not be visible in channel
@@ -46,7 +46,7 @@ describe('Identical Message Drafts', () => {
  cy.get('#suggestionList').should('be.visible');
 
  // # Go back to test Channel A on sidebar
- cy.get('#sidebarItem_town-square').should('be.visible').click();
+ cy.get('#sidebarItem_town-square').click({force: true});
 
  // * Validate if the channel has been opened
  // * At mention auto-complete is preserved in Channel A

cypress/integration/channel/channel_settings_spec.js

@@ -30,13 +30,16 @@ describe('Channel Settings', () => {
  cy.get('#saveItems').click();
 
  // click on all the messages to make sure there are none left unread
- cy.get('#directChannelList').children('li:not(:first-child)').each(($el) => {
- cy.wrap($el).click();
- });
-
- // check for the close button
  cy.get('#directChannelList').find('a.sidebar-item').each(($el) => {
- cy.wrap($el).find('span.btn-close').should('exist');
+ cy.wrap($el).as('channel');
+
+ // Click to mark as unread
+ cy.get('@channel').click({force: true});
+
+ cy.get('#postListContent').should('be.visible');
+
+ // check for the close button
+ cy.get('@channel').find('span.btn-close').should('exist');
  });
  });
 });

cypress/integration/channel/collapsed_message_spec.js

@@ -11,7 +11,7 @@
 
 function verifyCollapsedPost() {
  // * Verify show more button
- cy.get('#showMoreButton').should('be.visible').and('have.text', 'Show More');
+ cy.get('#showMoreButton').scrollIntoView().should('be.visible').and('have.text', 'Show More');
 
  // * Verify gradient
  cy.get('#collapseGradient').should('be.visible');

cypress/integration/channel/edit_message_spec.js

@@ -9,6 +9,8 @@
 
 /* eslint max-nested-callbacks: ["error", 5] */
 
+import * as TIMEOUTS from '../../fixtures/timeouts';
+
 describe('Edit Message', () => {
  beforeEach(() => {
  // # Login as "user-1"
@@ -32,10 +34,10 @@ describe('Edit Message', () => {
  cy.get('#suggestionList').should('be.visible');
 
  // # Press the escape key
- cy.get('#edit_textbox').focus().type('{esc}');
+ cy.get('#edit_textbox').wait(TIMEOUTS.TINY).focus().type('{esc}');
 
  // * Check if the textbox contains expected text
- cy.get('#edit_textbox').should('contain', 'Hello World! @');
+ cy.get('#edit_textbox').should('have.value', 'Hello World! @');
 
  // * Assert user autocomplete is not visible
  cy.get('#suggestionList').should('not.exist');
@@ -47,10 +49,10 @@ describe('Edit Message', () => {
  cy.get('#suggestionList').should('be.visible');
 
  // # Press the escape key
- cy.get('#edit_textbox').type('{esc}');
+ cy.get('#edit_textbox').wait(TIMEOUTS.TINY).type('{esc}');
 
  // * Check if the textbox contains expected text
- cy.get('#edit_textbox').should('contain', 'Hello World! @ ~');
+ cy.get('#edit_textbox').should('have.value', 'Hello World! @ ~');
 
  // * Assert channel autocomplete is not visible
  cy.get('#suggestionList').should('not.exist');
@@ -62,7 +64,7 @@ describe('Edit Message', () => {
  cy.get('#emojiPicker').should('be.visible');
 
  // * Press the escape key
- cy.get('#edit_textbox').type('{esc}');
+ cy.get('#edit_textbox').wait(TIMEOUTS.TINY).type('{esc}');
 
  // * Assert emoji picker is not visible
  cy.get('#emojiPicker').should('not.exist');