1st ui tests (cypress)

.gitignore

@@ -2,3 +2,7 @@ __pycache__/
 validata_ui.egg-info/
 .env
 .vscode/
+
+# Cypress ui tests
+screenshotsFolder
+videosFolder
\ No newline at end of file

.prettierrc

+{
+  "semi": false
+}

README.md

@@ -7,6 +7,7 @@ Validata user interface
 ## Usage
 
 You can use the online instance of Validata:
+
 - user interface: https://go.validata.fr/
 - API: https://go.validata.fr/api/v1/
 - API docs: https://go.validata.fr/api/v1/apidocs
@@ -55,4 +56,8 @@ Start the web server...
 ./serve.sh
 ```
 
-... then open http://localhost:5601/
\ No newline at end of file
+... then open http://localhost:5601/
+
+## Test
+
+UI tests can be lanched using [Cypress tool](https://www.cypress.io/)

cypress.json

+{
+  "baseUrl": "http://127.0.0.1:5601"
+}

cypress/fixtures/example.json

+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
\ No newline at end of file

cypress/integration/custom_val_deliberations_url_err_spec.js

+describe("Validator form use", function() {
+  it("uses a schema url to validate a csv url", function() {
+    const schema_url =
+      "https://git.opendatafrance.net/scdl/deliberations/raw/v2.1.2/schema.json"
+    const csv_url =
+      "https://git.opendatafrance.net/scdl/deliberations/raw/v2.1.2/examples/Deliberations_coll_siret_ko.csv"
+
+    cy.visit("")
+
+    // Fill input textfield with schema URL and submit
+    cy.get("form[data-cy=custom_schema_form]").within($form => {
+      cy.get("input[name=schema_url]").type(schema_url)
+      cy.root().submit()
+    })
+
+    // On validator form page,
+    // click on 'URL' tab
+    cy.get("a#url-tab.nav-link").click()
+
+    // within form
+    cy.get("div#url form").within($form => {
+      cy.get("input[name=url]").type(csv_url)
+      cy.root().submit()
+    })
+
+    // On report page
+    cy.get("h2.card-title").contains("Fichier invalide")
+    cy.get("a.btn").contains("Télécharger en PDF")
+  })
+})

cypress/integration/custom_val_deliberations_url_ok_spec.js

+describe("Validator form use", function() {
+  it("uses a schema url to validate a csv url", function() {
+    const schema_url =
+      "https://git.opendatafrance.net/scdl/deliberations/raw/v2.1.2/schema.json"
+    const csv_url =
+      "https://git.opendatafrance.net/scdl/deliberations/raw/v2.1.2/examples/Deliberations_ok.csv"
+
+    cy.visit("")
+
+    // Fill input textfield with schema URL and submit
+    cy.get("[data-cy=custom_schema_form]").within($form => {
+      cy.get("input[name=schema_url]").type(schema_url)
+      cy.root().submit()
+    })
+
+    // On validator form page,
+    // click on 'URL' tab
+    cy.get("a#url-tab.nav-link").click()
+
+    // within form
+    cy.get("div#url form").within($form => {
+      cy.get("input[name=url]").type(csv_url)
+      cy.root().submit()
+    })
+
+    // On report page
+    cy.get("h2.card-title").contains("Fichier valide")
+    cy.get("a.btn").contains("Télécharger en PDF")
+  })
+})

cypress/integration/custom_validator_access_spec.js

+describe("Validator form access", function() {
+  it("loads a validation form from a schema url", function() {
+    const schema_url =
+      "https://git.opendatafrance.net/scdl/subventions/raw/master/schema.json"
+
+    cy.visit("")
+
+    // Fill input textfield with schema URL and submit
+    cy.get("form[data-cy=custom_schema_form]").within($form => {
+      cy.get("input[name=schema_url]").type(schema_url)
+      cy.root().submit()
+    })
+
+    // On validator form page
+
+    // Check breadcrumbs
+    cy.get("li.breadcrumb-item").contains("Autre schéma")
+
+    // Check title in card
+    cy.get("h2.card-title").contains("Subventions")
+
+    // Check 'Valider le fichier' button
+    cy.get("button").contains("Valider le fichier")
+  })
+})

cypress/integration/home_page_spec.js

+describe("The Home Page", function() {
+  it("successfully loads", function() {
+    // Loads home-page
+    cy.visit("");
+
+    // Checks that schema name select exists
+    cy.get("select[name=schema_name]").should($select => {
+      // and contains <option>
+      expect($select).to.have.descendants("option");
+    });
+
+    // Checks that schema url input exists
+    cy.get("input[name=schema_url]");
+  });
+});

cypress/plugins/index.js

+// ***********************************************************
+// 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)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

+// ***********************************************
+// 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 is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

+// ***********************************************************
+// 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'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

validata_ui/templates/home.html

@@ -29,7 +29,7 @@
 
 <div class="my-5">
   <h2 class="my-4">Autre schéma</h2>
-  <form action="{{ url_for('custom_validator') }}" method="GET">
+  <form action="{{ url_for('custom_validator') }}" data-cy="custom_schema_form" method="GET">
     <div class="form-row">
       <div class="form-group col-lg-9">
         <input