Mochawesome reporting (mattermost#3130)

* Mochawesome reporting

* rename script file, move all results into results folder

* Cleanup file ignores

* Missed screenshots folder

.eslintignore

@@ -0,0 +1 @@
+e2e/results

.gitignore

@@ -12,6 +12,5 @@ mattermost-webapp.iml
 
 # disable folders generated by Cypress
 e2e/node_modules
-e2e/cypress/screenshots
 e2e/cypress/videos
 e2e/results

e2e/cypress.json

@@ -4,11 +4,6 @@
  "defaultCommandTimeout": 20000,
  "taskTimeout": 20000,
  "video": false,
- "reporter": "junit",
- "reporterOptions": {
- "mochaFile": "results/results-[hash].xml",
- "toConsole": false
- },
  "env": {
  "webhookBaseUrl": "http:https://localhost:3000"
  }

e2e/cypress/support/index.js

@@ -5,11 +5,76 @@
 // Read more at: https://on.cypress.io/configuration
 // ***********************************************************
 
+/* eslint-disable no-loop-func */
+
 import './ui_commands';
 import './api_commands';
 import './task_commands';
 import '@testing-library/cypress/add-commands';
 import 'cypress-file-upload';
+import addContext from 'mochawesome/addContext';
+
+Cypress.on('test:after:run', (test, runnable) => {
+ // Only if the test is failed do we want to add
+ // the additional context of the screenshot.
+ if (test.state === 'failed') {
+ let filename = Cypress.spec.name + '/';
+ let parentNames = '';
+
+ // Define our starting parent
+ let parent = runnable.parent;
+
+ // If the test failed due to a hook, we have to handle
+ // getting our starting parent to form the correct filename.
+ if (test.failedFromHookId) {
+ // Failed from hook Id is always something like 'h2'
+ // We just need the trailing number to match with parent id
+ const hookId = test.failedFromHookId.split('')[1];
+
+ // If the current parentId does not match our hook id
+ // start digging upwards until we get the parent that
+ // has the same hook id, or until we get to a tile of ''
+ // (which means we are at the top level)
+ if (parent.id !== `r${hookId}`) {
+ while (parent.parent.id !== `r${hookId}`) {
+ if (parent.title === '') {
+ // If we have a title of '' we have reached the top parent
+ break;
+ } else {
+ parent = parent.parent;
+ }
+ }
+ }
+ }
+
+ // Now we can go from parent to parent to generate the screenshot filename
+ while (parent) {
+ // Only append parents that have actual content for their titles
+ if (parent.title !== '') {
+ parentNames = parent.title + ' -- ' + parentNames;
+ }
+
+ parent = parent.parent;
+ }
+
+ // Clean up strings of characters that Cypress strips out
+ const charactersToStrip = /[;:"<>/]/g;
+ parentNames = parentNames.replace(charactersToStrip, '');
+ const testTitle = test.title.replace(charactersToStrip, '');
+
+ // If the test has a hook name, that means it failed due to a hook
+ // and consequently Cypress appends some text to the file name
+ const hookName = test.hookName ? ' -- ' + test.hookName + ' hook' : '';
+
+ filename += parentNames + testTitle + hookName + ' (failed).png';
+
+ // Add context to the mochawesome report which includes the screenshot
+ addContext({test}, {
+ title: 'Failing Screenshot: >> screenshots/' + filename,
+ value: 'screenshots/' + filename,
+ });
+ }
+});
 
 // Add login cookies to whitelist to preserve it
 beforeEach(() => {