Initialisation d'un repo pour seed cypress

.gitignore

@@ -0,0 +1,49 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.gradle/*
+.settings/*
+.project
+.classpath
+.idea/*
+!.idea/runConfigurations
+*.iws
+*.iml
+*.ipr
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+/testResults
+.scannerwork/*
+
+# Storybook
+/storybook-static
+
+# production
+**/build
+**/build_*
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+#Docker
+docker-compose.yml
+
+#cypress
+.nyc_output/
+.nyc_coverage/
+cypress/screenshots/
+cypress/videos/
+cypress/reports/
+mocha_reports/

README.md

@@ -1,2 +1,69 @@
-# cypress-seed
+# Cypress Seed
 
+Ce seed permet de demarrer un projet de test automatisé pour n'importe quel client ou application web en utilisant le framwork CYPRESS ==> https://www.cypress.io/
+
+**NOTE** : Ce Repo restera un SEED qui evolura. Pour vos test faite un fork de ce seed
+
+### Prerequis 
+
+- node v12 ou + et npm 6.14 ou +
+
+### Dependance
+
+| Dependance  |  Version  |  Obligatoire  |
+|---|---|---|
+| __typescript__  | 3.8.3  |  X  |
+| __cypress__  | 5.2.0  |  X  |
+| __mochawesome__  |  6.1.1 |  X |
+
+## Get Started
+
+faire un git clone du projet : 
+```bash
+$ git clone https://gitea.ci.apside-top.fr/apside-qualite/cypress-seed.git 
+```
+
+Installer toutes les dependance avec npm  
+```bash
+$ cd ./cypress-seed
+$ npm install 
+```
+
+Ouvrir Cypress
+```bash
+$  npm run cypress:open:dev 
+```
+
+![alt text](./docs/capture-open.gif "Openning cypress")
+
+
+Cliquer sur ``apside.spec.ts``
+
+Tous les test présent dans ``apside.spec.ts`` vont être joués
+
+![alt text](./docs/capture-running.gif "Running test")
+
+
+Genere les rapport mochawesome
+```bash
+$  npm run generate:report:dev 
+```
+
+cela va genere un repertoire ``mocha_reports`` avec un rapport detailé et beau ;-) de tous vos tests
+
+ puis ouvrir ``output.html``
+
+![alt text](./docs/capture-repports.png "Mocha report")
+
+## Premier test avec Cypress
+
+// TODO Donner 2 3 exemple de Comment créer un test
+
+**NOTE** : 2 configuration sont actuellement disponible
+
+// TODO expliquer les 2 config dev et local
+
+# RELEASE
+
+## 0.0.1 (_23/09/2020_)
+- initialisation __cypress__ et les rapport __mochawesome__

cypress.json

@@ -0,0 +1,12 @@
+{
+  "chromeWebSecurity": false,
+  "viewportWidth": 1280,
+  "viewportHeight": 770,
+  "video": false,
+  "ignoreErrors": ["ResizeObserver"],
+  "requestTimeout": 13000,
+  "reporter": "cypress-multi-reporters",
+  "reporterOptions": {
+    "configFile": "reporterOptions.json"
+  }
+}

cypress/config/cypress.dev.json

@@ -0,0 +1,7 @@
+{
+  "baseUrl": "https://apside.com/",
+  "env": {
+    "username": "test",
+    "password": "Password@2020"
+  }
+}

cypress/config/cypress.local.json

@@ -0,0 +1,7 @@
+{
+  "baseUrl": "https://localhost:9000/",
+  "env": {
+    "username": "test",
+    "password": "Password@2020"
+  }
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/apside.spec.ts

@@ -0,0 +1,26 @@
+import {goToCompoundDashboard} from '../../support/common/action.spec';
+
+describe('Test Page d\'accueil APSIDE .com', () => {
+    beforeEach(() => {
+        
+    });
+
+    it('Visité apside.com ', function() {
+        cy.visit('/');
+        cy.get('.titreBigOrange').should('be.visible');
+        cy.get('.titreBigOrange').should('have.text', 'INNOVATION');
+    });
+
+    
+    it('Visité et trouver APSIDE TOURS ', function() {
+        cy.visit('/');
+        cy.get('.search_menu').click();
+        cy.get('#search').type('TOURS');
+        cy.get('#search_btn').click();
+        cy.get('.first > .lanceurBlog > .texte > .intro > .btn-plus2').click();
+
+        cy.get('.titreBigBleu').should('be.visible');
+        cy.get('.titreBigBleu').should('have.text', 'Apside Tours');
+    });1
+
+});

cypress/plugins/index.ts

@@ -0,0 +1,38 @@
+/// <reference types="cypress" />
+
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+// @ts-ignore
+const fs = require('fs-extra');
+const path = require('path');
+
+function getConfigurationByFile (file) {
+    const pathToConfigFile = path.resolve( 'cypress', 'config', `cypress.${file}.json`)
+    return fs.readJSONSync(pathToConfigFile)
+}
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+    const file = config.env.configFile || 'local';
+    Object.assign(config, getConfigurationByFile(file));
+    if(file === 'local') {
+        // No need to activate code coverage task for dev or other environnement because code is not instrumented for coverage
+        require('@cypress/code-coverage/task')(on, config);
+    }
+    // include any other plugin code...
+    // IMPORTANT to return the config object
+    // with the any changed environment variables
+    return config
+}
+

cypress/support/FormObjects/Forms.spec.ts

@@ -0,0 +1,44 @@
+class Forms {
+    EmptyFormCompound(){
+        cy.get('#securityGroup').click()
+       cy.get('#name').click()
+        cy.get('#securityGroup-helper-text').should('have.text', 'Security group is required');
+        cy.get('#name').click()
+        cy.get('#alias').click;
+        cy.get('#name-helper-text').should('be.visible');
+        cy.get('#alias').click()
+        cy.get('#name-helper-text').should('have.text', 'Must not be null');
+
+        cy.get('.space-form > .space-autocomplete > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root > input').click();
+        cy.get('#description').click({ force: true });
+
+        cy.get('#description').click()
+
+        cy.get('#lead-helper-text').should('be.visible');
+        cy.get('#lead-helper-text').should('have.text', 'Field \'securityGroup\' must be set');
+
+        cy.get('.MuiDialogActions-root > :nth-child(2)').should('be.disabled');
+        
+    }
+    EmptyFormStudy(){
+        cy.get('#compoundName').should('be.disabled')
+        cy.get('#name').click()
+        cy.get('#alias').click()
+        cy.get('#name-helper-text').should('be.visible');
+        cy.get('#name-helper-text').should('have.text','Must not be null');
+        cy.get('#name-helper-text').should('have.text', 'Must not be null');
+
+        cy.get('.space-form > .space-autocomplete > .MuiAutocomplete-root > .MuiFormControl-root > .MuiInputBase-root > input').click();
+        cy.get('#description').click({ force: true });
+
+        cy.get('#description').click()
+
+        cy.get('#lead-helper-text').should('be.visible');
+        cy.get('#lead-helper-text').should('have.text', 'Lead is required');
+
+        cy.get('.MuiDialogActions-root > :nth-child(2)').should('be.disabled');
+        
+    }
+    
+}
+export const Createforms = new Forms()

cypress/support/commands.ts

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/common/action.spec.ts

@@ -0,0 +1,11 @@
+import * as faker from 'faker';
+
+// Compound's Actions
+export function openSearchBar() {
+
+}
+
+export function search(query: String) {
+    
+}
+

cypress/support/common/validators.ts

@@ -0,0 +1,5 @@
+/// <reference types="Cypress"/>
+// Field validator
+export function fieldErrorValidator(){
+   
+}

cypress/support/index.ts

@@ -0,0 +1,56 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+import '@cypress/code-coverage/support';
+import addContext from 'mochawesome/addContext'
+
+Cypress.Screenshot.defaults({
+    screenshotOnRunFailure: true
+})
+
+
+// Cypress.env('compoundName', 'cy_' + faker.name.lastName().toLowerCase());
+// Cypress.env('compoundAlias', 'alias_' + Cypress.env('compoundName'));
+
+
+Cypress.on('test:after:run', (test, runnable: Mocha.Suite) => {
+    if (test.state === 'failed') {
+      let item = runnable;
+      const nameParts = [runnable.title]
+  
+      // Iterate through all parents and grab the titles
+      while (item.parent) {
+        nameParts.unshift(item.parent.title)
+      //tslint:disable-next-line
+        item = item.parent
+        
+      }
+  
+      const fullTestName = nameParts
+              .filter(Boolean)
+              .join(' -- ')           // this is how cypress joins the test title fragments
+  
+      const imageUrl = `screenshots/${
+        Cypress.spec.name
+      }/${fullTestName} (failed).png`
+  
+      addContext({ test }, imageUrl)
+    }
+});
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": "../node_modules",
+    "types": ["cypress"]
+  },
+  "include": [
+    "**/*.ts",
+    "../node_modules/@types/node/globals.d.ts"
+  ]
+}

package.json

@@ -0,0 +1,47 @@
+{
+    "name": "space-e2e-test-automation",
+    "version": "0.0.1",
+    "private": true,
+    "scripts": {
+        "report:combine:reports": "mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/output.json",
+        "report:generate:report": "marge cypress/reports/output.json -f output -o mocha_reports/",
+        "report:copyScreenshots": "cp -r cypress/screenshots mocha_reports || exit 0",
+        "cypress:open": "cypress open",
+        "cypress:run": "cypress run",
+        "cypress:open:dev": "cypress open --env configFile=dev",
+        "cypress:run:dev": "cypress run --env configFile=dev || exit 0",
+        "precypress:open:dev": "rm -rf cypress/screenshots/* || exit 0",
+        "precypress:run:dev": "rm -rf cypress/screenshots cypress/reports/* mocha_reports/*",
+        "generate:report:dev": "npm run cypress:run:dev & npm run report:combine:reports & npm run report:generate:report & npm run report:copyScreenshots"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@cypress/code-coverage": "^3.8.1",
+        "@testdeck/mocha": "^0.1.0",
+        "@types/classnames": "~2.2.10",
+        "@types/mocha": "^8.0.3",
+        "@types/node": "~12.0.10",
+        "cypress": "^5.2.0",
+        "cypress-multi-reporters": "^1.4.0",
+        "faker": "~4.1.0",
+        "mocha": "^8.1.3",
+        "mochawesome": "^6.1.1",
+        "mochawesome-merge": "^4.1.0",
+        "mochawesome-report-generator": "^5.1.0",
+        "tslint": "~5.18.0",
+        "tslint-react": "~4.2.0",
+        "typescript": "3.8.3",
+        "typescript-tslint-plugin": "~0.5.5"
+    }
+}

reporterOptions.json

@@ -0,0 +1,10 @@
+{
+    "reporterEnabled": "mochawesome",
+    "mochawesomeReporterOptions": {
+        "reportDir": "cypress/reports/mocha",
+        "quiet": true,
+        "overwrite": false,
+        "html": false,
+        "json": true
+    }
+}

tsconfig.json

@@ -0,0 +1,31 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+        ],
+        "strictPropertyInitialization": false,
+        "allowJs": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "preserve",
+        "noImplicitAny": false
+    },
+    "include": [
+        "src"
+    ],
+    "plugins": [{
+        "name": "typescript-tslint-plugin",
+        "configFile": "tslint.json"
+    }]
+}