feat: Cypress tests for open design

.github/workflows/ci.yml

@@ -39,4 +39,10 @@ jobs:
 
     - name: Run HTML5 Validator
       run: html5validator --root _site/
+
+    - name: Serve with jekyll
+      run: bundle exec jekyll serve
+
+    - name: Cypress
+      run: npm run cypress
 

_includes/form/presets/selectDesign.html

@@ -2,15 +2,15 @@
 {%- assign group = "select" -%}
 {%- assign design_arr = "" | split: ',' -%}
 {%- for design in site.data.design -%}
-    {%- assign design_arr = design_arr | push: design[1].name[page.lang] -%}
+    {%- assign design_arr = design_arr | push: design[1] -%}
 {%- endfor %}
 {%- assign design_arr = design_arr | sort_natural -%}
 <div class="form-group">
   {% include form/components/label-group.html id=include.id title=title group=group param=site.data.forms.param.required_false %}
   <select class="form-control" id="{{ title }}{{ group }}" name="{{ title }}{{ group }}">
     <option value="">&nbsp;</option>
     {%- for design in design_arr -%}
-      <option value="{{ design | slugify }}">{{ design }}</option>
+      <option value="{{ design.name.en | slugify }}">{{ design.name[page.lang] }}</option>
     {%- endfor -%}
   </select>
 </div>

_pages/en/open-design.html

@@ -5,7 +5,7 @@
 permalink: /en/open-design.html
 ---
 
-<h1 property="name" id="wb-cont">Open Design Resources</h1>
+<h1 property="name" id="wb-cont">Open Designs</h1>
 <p>Open design refers to a design for a physical or software product released under a license granting anyone permission to use, modify or redistribute it.</p>
 <p>Search the catalog for open design resource by different levels of Canadian public .</p>
 <p>You may also <strong>add</strong> a resource or <strong>update</strong> its data using using the <a href="./open-design-form.html">Open Design Resource Form</a>.</p>

_pages/fr/design-libre.html

@@ -5,7 +5,7 @@
 permalink: /fr/design-libre.html
 ---
 
-<h1 property="name" id="wb-cont">Design libres</h1>
+<h1 property="name" id="wb-cont">Designs Libres</h1>
 <p>Un design libre est un design, que ce soit pour un produit physique ou un logiciel, dont le développement suit un processus semblable au code et logiciel libre. La licence du design permet d’y accéder librement, de créer des travaux dérivés, de modifier le design et de le redistribuer.</p>
 <p>Consultez la liste des designs libres utilisés par les administrations publiques canadiennes.</p>
 <p>Vous pouvez <strong>ajouter</strong> un design ou <strong>modifier</strong> ses informations en utilisant le <a href="./design-libre-formulaire.html">Formulaire de Design Libre</a>.</p>

assets/js/src/designForm.js

@@ -11,6 +11,8 @@
 
 const designSelect = $('.page-designForm #nameselect');
 const adminSelect = $('.page-designForm #adminCode');
+const URL = document.defaultView.location.origin + 
+(document.defaultView.location.protocol == "http:" ? "/ore-ero" : "");
 
 $(document).ready(function () {
   $('#prbotSubmitdesignForm').click(function () {
@@ -408,7 +410,7 @@ function getConfigNew(designObject, file, ProjectName) {
 
 function selectDesign() {
   let value = designSelect.val();
-  $.getJSON('../design.json', function (result) {
+  $.getJSON(URL + '/design.json', function (result) {
     if (result[value]) {
       addValueToFieldsDesign(result[value]);
       $('#adminCode').focus();
@@ -458,7 +460,7 @@ function resetFieldsDesign() {
 function selectAdmin() {
   let design = designSelect.val();
   let administration = adminSelect.val();
-  $.getJSON('../design.json', function (result) {
+  $.getJSON(URL + '/design.json', function (result) {
     if (result[design]) {
       for (let i = 0; i < result[design].administrations.length; i++) {
         if (result[design].administrations[i].adminCode == administration) {

assets/js/src/designType.js

@@ -93,6 +93,7 @@ function fillTypeFields(designTypes) {
     }
     $('#designType' + id).val(designType.type.en);
   });
+
 }
 
 function addType(index) {

assets/js/src/validation.js

@@ -74,3 +74,7 @@ function submitInit() {
   }
   return valid;
 }
+//Allows use of the function for testing so there isn't any real submission happening
+window.submit_init = {
+  submitInit,
+};

cypress/integration/unit-tests/licences.spec.js

@@ -0,0 +1,18 @@
+context('Licences', () => {
+    it ('addMorelicences button should add an element to the list and show the removeMorelicences button', () => {
+    cy.visit('http://localhost:4000/ore-ero/en/open-design-form.html');
+    cy.get('#addMorelicences').find('.btn-tabs-more').click();
+    cy.get('#addMorelicences').find('ul > li').should('have.length', 2);
+    cy.get('#addMorelicences').find('.btn-tabs-more-remove').should('be.visible');
+  });
+  it ('removeMorelicences button should remove an item from the list and disappear', () => {
+    cy.get('#addMorelicences').find('.btn-tabs-more-remove').click();
+    cy.get('#addMorelicences').find('ul > li').should('have.length', 1);
+    cy.get('#addMorelicences').find('.btn-tabs-more-remove').should('be.hidden');
+  });
+
+  it ('There should be available licence options', () => {
+    cy.visit('http://localhost:4000/ore-ero/en/open-design-form.html');
+    cy.get('#licencesspdxID').children().should('have.length.greaterThan', 1);
+  });
+});