fix flaky tests on some account settings specs (mattermost#2530)

cypress/fixtures/theme.json

@@ -0,0 +1,28 @@
+{
+ "default": {
+ "sidebarBg":"#145dbf",
+ "sidebarText":"#ffffff",
+ "sidebarUnreadText":"#ffffff",
+ "sidebarTextHoverBg":"#4578bf",
+ "sidebarTextActiveBorder":"#579eff",
+ "sidebarTextActiveColor":"#ffffff",
+ "sidebarHeaderBg":"#1153ab",
+ "sidebarHeaderTextColor":"#ffffff",
+ "onlineIndicator":"#06d6a0",
+ "awayIndicator":"#ffbc42",
+ "dndIndicator":"#f74343",
+ "mentionBj":"#ffffff",
+ "mentionColor":"#145dbf",
+ "centerChannelBg":"#ffffff",
+ "centerChannelColor":"#3d3c40",
+ "newMessageSeparator":"#ff8800",
+ "linkColor":"#2389d7",
+ "buttonBg":"#166de0",
+ "buttonColor":"#ffffff",
+ "errorTextColor":"#fd5960",
+ "mentionHighlightBg":"#ffe577",
+ "mentionHighlightLink":"#166de0",
+ "codeTheme":"github",
+ "mentionBg":"#ffffff"
+ }
+}

cypress/integration/account_settings/display/channel_display_mode_spec.js

@@ -9,15 +9,19 @@
 
 describe('Account Settings > Display > Channel Display Mode', () => {
  before(() => {
- // 1. Go to Account Settings with "user-1"
- cy.toAccountSettingsModal('user-1');
+ // 1. Set default preference of a user on channel and message display
+ cy.updateChannelDisplayModePreference('centered');
+ cy.updateMessageDisplayPreference();
  });
 
  beforeEach(() => {
  cy.viewport(1500, 660);
  });
 
  it('should render in min setting view', () => {
+ // 1. Go to Account Settings with "user-1"
+ cy.toAccountSettingsModal('user-1');
+
  // * Check that the Display tab is loaded
  cy.get('#displayButton').should('be.visible');
 
@@ -68,7 +72,7 @@ describe('Account Settings > Display > Channel Display Mode', () => {
  cy.get('#accountSettingsHeader > .close').click();
 
  // 8. Go to channel which has any posts
- cy.get('#sidebarItem_ratione-1').click();
+ cy.get('#sidebarItem_town-square').click();
 
  // * Validate if the post content in center channel is fulled.
  // * 1179px is fulled width when the viewport width is 1500px
@@ -105,10 +109,24 @@ describe('Account Settings > Display > Channel Display Mode', () => {
  cy.get('#accountSettingsHeader > .close').click();
 
  // 8. Go to channel which has any posts
- cy.get('#sidebarItem_ratione-1').click();
+ cy.get('#sidebarItem_town-square').click();
 
  //* Validate if the post content in center channel is fixed and centered
  cy.get('.post__content').last().should('have.css', 'width', '1000px');
  cy.get('.post__content').last().should('have.class', 'center');
  });
+
+ it('Width of center view when message display is compact and channel display mode is either centered or full', () => {
+ // 1. Set message display to compact with channel display mode set to centered
+ cy.updateMessageDisplayPreference('compact');
+
+ // * Verify that the width is at 1000px
+ cy.get('.post__content').last().should('have.css', 'width', '1000px');
+
+ // 2. Set channel display mode to full (default) with message display in compact
+ cy.updateChannelDisplayModePreference();
+
+ // * Verify that the width is at 1123px
+ cy.get('.post__content').last().should('have.css', 'width', '1123px');
+ });
 });

cypress/integration/account_settings/display/message_display_mode_spec.js

@@ -32,7 +32,7 @@ describe('Account Settings > Display > Message Display', () => {
  const postMessageTextId = `#postMessageText_${postId}`;
 
  // * Verify HTML still includes new line
- cy.get(postMessageTextId).should('have.html', '<p>First line</p>\n<p>Text after</p>\n');
+ cy.get(postMessageTextId).should('have.html', '<p>First line</p>\n<p>Text after</p>');
 
  // 4. click dot menu button
  cy.clickPostDotMenu();
@@ -47,7 +47,7 @@ describe('Account Settings > Display > Message Display', () => {
  cy.get('#editButton').click();
 
  // * Verify HTML includes newline and the edit
- cy.get(postMessageTextId).should('have.html', '<p>First line</p>\n<p>Text after,edited</p>\n');
+ cy.get(postMessageTextId).should('have.html', '<p>First line</p>\n<p>Text after,edited</p>');
 
  // * Post should have (edited)
  cy.get(`#postEdited_${postId}`).