Mattermost-server: Write Webapp E2E with Cypress: "MM-T560 Browser tab and team sidebar unreads and mentions - Mention in different team"

[saturninoabril]

See our documentation for Webapp end-to-end testing with Cypress for reference.

MM-T560 Browser tab and team sidebar unreads and mentions - Mention in different team

Steps #1

Browser tab and team sidebar unreads and mentions - Mention in different team
–––––––––––––––––––––––––

1. With an account on two teams, view team A, make sure no unreads or mentions
2. Have another user view team B
3. Have the other user post an at-mention for you in any channel on on team B

Expected

• Browser tab displays: (1) * channel - [team name] Mattermost
• Team sidebar: Small dot left of team B icon in team sidebar, and a mention badge in top right corner of the badge with number "1"
• Favicon should stay blue (not turn red) when there are mentions indicated

---

Steps #2

Team sidebar icon - Badge with mention count increments when added to channel
–––––––––––––––––––––––––

1. With an account on two teams(A&B), view and remain on team A
2. Have another user view team B
3. Have the other user add you to channel on team B

Expected

• Browser tab - Mention badge increases e.g. (2)*
• Team sidebar - Mention badge in top right corner of the team B icon with number "1" or if the existing badge count is present it should incremented to reflect test user being added to new channel on this team

---

Test Folder: /cypress/integration/notifications
Test code arrangement:

describe('Notifications', () => {
    it('MM-T560 Browser tab and team sidebar unreads and mentions - Mention in different team', () => {
        // code
    });
});

Notes:

1. Do not add @prod label in a spec file
   
   
   
   • If you're writing script into a newly created test file, @prod label should not be included.
   
   
   • If you're adding script into an existing test file, @prod label should removed.
   
   
2. Use queries from testing-library whenever possible. We share the same philosophy as the testing-library when doing UI automation like "Interact with your app the same way as your users" and so, please follow their guidelines especially when querying an element.

If you're interested, please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

[seongwon-kang]

I'll work on this.

[saturninoabril]

Sure and thanks @seongwon-kang!

[seongwon-kang]

@saturninoabril is there any method for get favicon? I tried link[rel=icon], but href of favicon image changes randomly.

[saturninoabril]

One option is to save base favicon image at /fixtures folder and compare its image content to the one generated from href. Image content comparison can be like in this lines.

Different topic: It's not mention in this issue but since there are two steps for this test case, please put each step in a separate it blocks, like:
```
it('MM-T560_1 Browser tab and team sidebar unreads and mentions - Mention in different team', () => {...});
it('MM-T560_2 Team sidebar icon - Badge with mention count increments when added to channel', () => {...});

[seongwon-kang]

Thanks @saturninoabril! I'll try it later.