[MM-12852] E2E: Write initial test setup with Cypress (mattermost#2045)

* E2E: Write initial test setup with Cypress

* assigned element IDs and rearrange test files

.eslintrc.json

@@ -1,13 +1,16 @@
 {
  "extends": [
  "./node_modules/eslint-config-mattermost/.eslintrc.json",
- "./node_modules/eslint-config-mattermost/.eslintrc-react.json"
+ "./node_modules/eslint-config-mattermost/.eslintrc-react.json",
+ "plugin:cypress/recommended"
  ],
  "plugins": [
- "import"
+ "import",
+ "cypress"
  ],
  "env": {
- "jest": true
+ "jest": true,
+ "cypress/globals": true
  },
  "settings": {
  "import/resolver": "webpack",

.gitignore

@@ -8,4 +8,8 @@ node_modules
 tests/reports
 .DS_Store
 mattermost-webapp.iml
-.vscode/
+.vscode/
+
+# disable folders generated by Cypress
+cypress/screenshots
+cypress/videos

NOTICE.txt

@@ -212,6 +212,56 @@ THE SOFTWARE.
 
 ---
 
+## cypress
+
+This product contains 'cypress' by Cypress.
+
+Fast, easy and reliable testing for anything that runs in a browser.
+
+* HOMEPAGE:
+ * https://github.com/cypress-io/cypress
+
+* LICENSE: MIT
+
+The MIT License (MIT)
+
+Copyright (c) 2016 Cypress.io, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+## eslint-plugin-cypress
+
+This product contains 'eslint-plugin-cypress' by Cypress.
+
+An ESLint plugin for projects that use Cypress
+
+* HOMEPAGE:
+ * https://github.com/cypress-io/eslint-plugin-cypress
+
+* LICENSE: MIT
+
+(No license text is stated in the homepage.)
+
+---
+
 ## exif2css
 
 This product contains 'exif2css' by Anton.
@@ -984,8 +1034,8 @@ THE SOFTWARE.
 
 ## Markdown
 
-Copyright © 2004, John Gruber 
-https://daringfireball.net/ 
+Copyright © 2004, John Gruber
+https://daringfireball.net/
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
@@ -1009,7 +1059,7 @@ Common code (API client, Redux stores, logic, utility functions) for building a
 
 * LICENSE: Apache-2.0
 
-Copyright 2015-present Mattermost, Inc. 
+Copyright 2015-present Mattermost, Inc.
 
  Apache License
  Version 2.0, January 2004

components/channel_layout/channel_controller.jsx

@@ -38,7 +38,10 @@ export default class ChannelController extends React.Component {
 
  render() {
  return (
- <div className='channel-view'>
+ <div
+ id='channel_view'
+ className='channel-view'
+ >
  <AnnouncementBarController/>
  <SystemNotice/>
 

components/common/__snapshots__/site_name_and_description.test.jsx.snap

@@ -2,11 +2,14 @@
 
 exports[`/components/common/SiteNameAndDescription should match snapshot, default 1`] = `
 <Fragment>
- <h1>
+ <h1
+ id="site_name"
+ >
  Mattermost
  </h1>
  <h4
  className="color--light"
+ id="site_description"
  >
  <FormattedMessage
  defaultMessage="All team communication in one place, searchable and accessible anywhere"
@@ -19,11 +22,14 @@ exports[`/components/common/SiteNameAndDescription should match snapshot, defaul
 
 exports[`/components/common/SiteNameAndDescription should match snapshot, with custom site name and description 1`] = `
 <Fragment>
- <h1>
+ <h1
+ id="site_name"
+ >
  other_site
  </h1>
  <h4
  className="color--light"
+ id="site_description"
  >
  custom_description_text
  </h4>

components/common/back_button.jsx

@@ -28,12 +28,16 @@ export default class BackButton extends React.PureComponent {
 
  render() {
  return (
- <div className='signup-header'>
+ <div
+ id='back_button'
+ className='signup-header'
+ >
  <Link
  onClick={this.props.onClick}
  to={this.props.url}
  >
  <span
+ id='back_button_icon'
  className='fa fa-chevron-left'
  title={localizeMessage('generic_icons.back', 'Back Icon')}
  />

components/common/site_name_and_description.jsx

@@ -34,8 +34,11 @@ export default class SiteNameAndDescription extends React.PureComponent {
 
  return (
  <React.Fragment>
- <h1>{siteName}</h1>
- <h4 className='color--light'>
+ <h1 id='site_name'>{siteName}</h1>
+ <h4
+ id='site_description'
+ className='color--light'
+ >
  {description}
  </h4>
  </React.Fragment>

components/header_footer_template/__snapshots__/header_footer_template.test.jsx.snap

@@ -12,12 +12,14 @@ exports[`components/HeaderFooterTemplate should match snapshot with about link 1
  >
  <div
  className="footer-pane col-xs-12"
+ id="footer_section"
  >
  <div
  className="col-xs-12"
  >
  <span
  className="pull-right footer-site-name"
+ id="company_name"
  >
  Mattermost
  </span>
@@ -27,6 +29,7 @@ exports[`components/HeaderFooterTemplate should match snapshot with about link 1
  >
  <span
  className="pull-right footer-link copyright"
+ id="copyright"
  >
  © 2015-2017 Mattermost, Inc.
  </span>
@@ -65,12 +68,14 @@ exports[`components/HeaderFooterTemplate should match snapshot with all links 1`
  >
  <div
  className="footer-pane col-xs-12"
+ id="footer_section"
  >
  <div
  className="col-xs-12"
  >
  <span
  className="pull-right footer-site-name"
+ id="company_name"
  >
  Mattermost
  </span>
@@ -80,6 +85,7 @@ exports[`components/HeaderFooterTemplate should match snapshot with all links 1`
  >
  <span
  className="pull-right footer-link copyright"
+ id="copyright"
  >
  © 2015-2017 Mattermost, Inc.
  </span>
@@ -161,12 +167,14 @@ exports[`components/HeaderFooterTemplate should match snapshot with children 1`]
  >
  <div
  className="footer-pane col-xs-12"
+ id="footer_section"
  >
  <div
  className="col-xs-12"
  >
  <span
  className="pull-right footer-site-name"
+ id="company_name"
  >
  Mattermost
  </span>
@@ -176,6 +184,7 @@ exports[`components/HeaderFooterTemplate should match snapshot with children 1`]
  >
  <span
  className="pull-right footer-link copyright"
+ id="copyright"
  >
  © 2015-2017 Mattermost, Inc.
  </span>
@@ -200,12 +209,14 @@ exports[`components/HeaderFooterTemplate should match snapshot with help link 1`
  >
  <div
  className="footer-pane col-xs-12"
+ id="footer_section"
  >
  <div
  className="col-xs-12"
  >
  <span
  className="pull-right footer-site-name"
+ id="company_name"
  >
  Mattermost
  </span>
@@ -215,6 +226,7 @@ exports[`components/HeaderFooterTemplate should match snapshot with help link 1`
  >
  <span
  className="pull-right footer-link copyright"
+ id="copyright"
  >
  © 2015-2017 Mattermost, Inc.
  </span>
@@ -253,12 +265,14 @@ exports[`components/HeaderFooterTemplate should match snapshot with privacy poli
  >
  <div
  className="footer-pane col-xs-12"
+ id="footer_section"
  >
  <div
  className="col-xs-12"
  >
  <span
  className="pull-right footer-site-name"
+ id="company_name"
  >
  Mattermost
  </span>
@@ -268,6 +282,7 @@ exports[`components/HeaderFooterTemplate should match snapshot with privacy poli
  >
  <span
  className="pull-right footer-link copyright"
+ id="copyright"
  >
  © 2015-2017 Mattermost, Inc.
  </span>
@@ -306,12 +321,14 @@ exports[`components/HeaderFooterTemplate should match snapshot with term of serv
  >
  <div
  className="footer-pane col-xs-12"
+ id="footer_section"
  >
  <div
  className="col-xs-12"
  >
  <span
  className="pull-right footer-site-name"
+ id="company_name"
  >
  Mattermost
  </span>
@@ -321,6 +338,7 @@ exports[`components/HeaderFooterTemplate should match snapshot with term of serv
  >
  <span
  className="pull-right footer-link copyright"
+ id="copyright"
  >
  © 2015-2017 Mattermost, Inc.
  </span>
@@ -359,12 +377,14 @@ exports[`components/HeaderFooterTemplate should match snapshot without children
  >
  <div
  className="footer-pane col-xs-12"
+ id="footer_section"
  >
  <div
  className="col-xs-12"
  >
  <span
  className="pull-right footer-site-name"
+ id="company_name"
  >
  Mattermost
  </span>
@@ -374,6 +394,7 @@ exports[`components/HeaderFooterTemplate should match snapshot without children
  >
  <span
  className="pull-right footer-link copyright"
+ id="copyright"
  >
  © 2015-2017 Mattermost, Inc.
  </span>

components/header_footer_template/header_footer_template.jsx

@@ -97,12 +97,23 @@ export default class NotLoggedIn extends React.PureComponent {
  {this.props.children}
  </div>
  <div className='row footer'>
- <div className='footer-pane col-xs-12'>
+ <div
+ id='footer_section'
+ className='footer-pane col-xs-12'
+ >
  <div className='col-xs-12'>
- <span className='pull-right footer-site-name'>{'Mattermost'}</span>
+ <span
+ id='company_name'
+ className='pull-right footer-site-name'
+ >
+ {'Mattermost'}
+ </span>
  </div>
  <div className='col-xs-12'>
- <span className='pull-right footer-link copyright'>
+ <span
+ id='copyright'
+ className='pull-right footer-link copyright'
+ >
  {`© 2015-${new Date().getFullYear()} Mattermost, Inc.`}
  </span>
  <span className='pull-right'>