Try running tests in GitHub Actions (#680)

* Try running tests in GitHub Actions * Update tests.yml * tweaks and switch to grunt-contrib-jasmine v2.0.0 * add prereqs for Chrome Headless see publiclab/image-sequencer#1798 * jest tweaks * running! only 3 failing tests * getting closer * fix jest tests * Update Gruntfile.js
publiclab · Jan 27, 2021 · ad3d704 · ad3d704
1 parent d392444
commit ad3d704
Show file tree

Hide file tree

Showing 8 changed files with 1,649 additions and 184 deletions.
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -0,0 +1,56 @@
+name: tests
+on: [pull_request]
+jobs:
+  base-tests:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '12'
+        check-latest: true
+    - name: Cache node modules
+      uses: actions/cache@v2
+      env:
+        cache-name: cache-node-modules
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-build-${{ env.cache-name }}-
+          ${{ runner.os }}-build-
+          ${{ runner.os }}-
+    - name: Install Dependencies
+      run: npm install
+    - name: "Build dist files"
+      run: grunt build
+    - name: "Run tests"
+      run: grunt jasmine
+
+  ui-tests:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v2
+    - name: Setup node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '12'
+        check-latest: true
+    - name: Cache node modules
+      uses: actions/cache@v2
+      env:
+        cache-name: cache-node-modules
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-build-${{ env.cache-name }}-
+          ${{ runner.os }}-build-
+          ${{ runner.os }}-
+    - name: Install Dependencies
+      run: npm install
+    - name: "Build dist files"
+      run: grunt build
+    - name: "Run UI tests"
+      run: npm run test-ui
diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile
@@ -1,5 +1,67 @@
 FROM gitpod/workspace-full
-
+
+USER root
+RUN sudo apt-get update && apt-get install -y apt-transport-https \
+ && sudo apt-get install -y \
+    xserver-xorg-dev \
+    libxext-dev \
+    build-essential \
+    libxi-dev \
+    libglew-dev \
+    pkg-config \
+    libglu1-mesa-dev \
+    freeglut3-dev \
+    mesa-common-dev \
+    x11-apps \
+    libice6 \
+    libsm6 \
+    libxaw7 \
+    libxft2 \
+    libxmu6 \
+    libxpm4 \
+    libxt6 \
+    x11-apps \
+    xbitmaps \
+    ca-certificates \
+    fonts-liberation \
+    libappindicator3-1 \
+    libasound2 \
+    libatk-bridge2.0-0 \
+    libatk1.0-0 \
+    libc6 \
+    libcairo2 \
+    libcups2 \
+    libdbus-1-3 \
+    libexpat1 \
+    libfontconfig1 \
+    libgbm1 \
+    libgcc1 \
+    libglib2.0-0 \
+    libgtk-3-0 \
+    libnspr4 \
+    libnss3 \
+    libpango-1.0-0 \
+    libpangocairo-1.0-0 \
+    libstdc++6 \
+    libx11-6 \
+    libx11-xcb1 \
+    libxcb1 \
+    libxcomposite1 \
+    libxcursor1 \
+    libxdamage1 \
+    libxext6 \
+    libxfixes3 \
+    libxi6 \
+    libxrandr2 \
+    libxrender1 \
+    libxss1 \
+    libxtst6 \
+    lsb-release \
+    wget \
+    xdg-utils \
+    xvfb \
+ && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/*
+
 USER gitpod
 
-RUN bash -c ". ~/.nvm/nvm-lazy.sh && npm install -g gulp-cli live-server"
+RUN bash -c ". ~/.nvm/nvm-lazy.sh && npm install -g gulp-cli live-server"
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -43,8 +43,13 @@ module.exports = function(grunt) {
 
         jasmine: {
           publiclabeditor: {
-            src: 'dist/*.js',
+            src: 'dist/PublicLab.Editor.js',
             options: {
+              allowFileAccess: true,
+              sandboxArgs: {
+                args: ['--no-sandbox', '--allow-sync-xhr-in-page-dismissal'],
+                timeout: 3000
+              },
               specs: 'spec/javascripts/*spec.js',
               vendor: [
                 'node_modules/jquery/dist/jquery.min.js',

diff --git a/dist/PublicLab.Editor.js b/dist/PublicLab.Editor.js
@@ -11522,7 +11522,7 @@ module.exports = tokenizeLinks;
 
 },{}],114:[function(require,module,exports){
 //! moment.js
-//! version : 2.27.0
+//! version : 2.29.1
 //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
 //! license : MIT
 //! momentjs.com
@@ -14063,8 +14063,7 @@ module.exports = tokenizeLinks;
     hooks.createFromInputFallback = deprecate(
         'value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), ' +
             'which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are ' +
-            'discouraged and will be removed in an upcoming major release. Please refer to ' +
-            'http://momentjs.com/guides/#/warnings/js-date/ for more info.',
+            'discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.',
         function (config) {
             config._d = new Date(config._i + (config._useUTC ? ' UTC' : ''));
         }
@@ -15249,7 +15248,10 @@ module.exports = tokenizeLinks;
     function calendar$1(time, formats) {
         // Support for single parameter, formats only overload to the calendar function
         if (arguments.length === 1) {
-            if (isMomentInput(arguments[0])) {
+            if (!arguments[0]) {
+                time = undefined;
+                formats = undefined;
+            } else if (isMomentInput(arguments[0])) {
                 time = arguments[0];
                 formats = undefined;
             } else if (isCalendarSpec(arguments[0])) {
@@ -15927,7 +15929,7 @@ module.exports = tokenizeLinks;
             eras = this.localeData().eras();
         for (i = 0, l = eras.length; i < l; ++i) {
             // truncate time
-            val = this.startOf('day').valueOf();
+            val = this.clone().startOf('day').valueOf();
 
             if (eras[i].since <= val && val <= eras[i].until) {
                 return eras[i].name;
@@ -15947,7 +15949,7 @@ module.exports = tokenizeLinks;
             eras = this.localeData().eras();
         for (i = 0, l = eras.length; i < l; ++i) {
             // truncate time
-            val = this.startOf('day').valueOf();
+            val = this.clone().startOf('day').valueOf();
 
             if (eras[i].since <= val && val <= eras[i].until) {
                 return eras[i].narrow;
@@ -15967,7 +15969,7 @@ module.exports = tokenizeLinks;
             eras = this.localeData().eras();
         for (i = 0, l = eras.length; i < l; ++i) {
             // truncate time
-            val = this.startOf('day').valueOf();
+            val = this.clone().startOf('day').valueOf();
 
             if (eras[i].since <= val && val <= eras[i].until) {
                 return eras[i].abbr;
@@ -15990,7 +15992,7 @@ module.exports = tokenizeLinks;
             dir = eras[i].since <= eras[i].until ? +1 : -1;
 
             // truncate time
-            val = this.startOf('day').valueOf();
+            val = this.clone().startOf('day').valueOf();
 
             if (
                 (eras[i].since <= val && val <= eras[i].until) ||
@@ -17141,7 +17143,7 @@ module.exports = tokenizeLinks;
 
     //! moment.js
 
-    hooks.version = '2.27.0';
+    hooks.version = '2.29.1';
 
     setHookCallback(createLocal);
 
@@ -22654,7 +22656,7 @@ module.exports = {
 
 },{}],185:[function(require,module,exports){
 var builder = '<div class="dropdown" style="margin-bottom: 20px;">';
-builder += '<button class="btn btn-default dropdown-toggle dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="min-width: 150px;" >';
+builder += '<button class="btn btn-outline-secondary dropdown-toggle dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="min-width: 150px;" >';
 builder += '<span class= "selected">What Do you want to insert?</span>';
 builder += '<span class="caret"></span>';
 builder += '</button>';
@@ -22667,7 +22669,7 @@ builder += '<li role="presentation"><a role="menuitem" tabindex="-1" class="Ques
 builder += '</ul>';
 builder += '</div>';
 builder += '<div class="dropdown" style="margin-bottom: 20px;">';
-builder += '<button class="btn btn-default dropdown-toggle dropdownMenu2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="min-width: 150px;">';
+builder += '<button class="btn btn-outline-secondarydropdown-toggle dropdownMenu2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="min-width: 150px;">';
 builder += '<span class="selected2">Insert as a</span>';
 builder += '<span class="caret"></span>';
 builder += '</button>';
@@ -22679,7 +22681,7 @@ builder += '</div>';
 builder += '<div class="input-group">';
 builder += '<input type="text" class="form-control inputText" placeholder="Enter a tagname" style="min-width: 150px;">';
 builder += '<span class="input-group-btn">';
-builder += '<button class="btn btn-default go1" type="button">Go!</button>';
+builder += '<button class="btn btn-outline-secondary go1" type="button">Go!</button>';
 builder += '</span>';
 builder += '</div>';
 module.exports = builder;
@@ -22754,7 +22756,7 @@ module.exports = function CustomInsert(_module, wysiwyg) {
     }
   });
   const builder = require("./PublicLab.CustomInsert.Template.js");
-  $('.wk-commands').append('<a class="woofmark-command-insert btn btn-default" data-toggle="Insert" title="Custom Insert"><i class="fa fa-tags"></i></a>');
+  $('.wk-commands').append('<a class="woofmark-command-insert btn btn-outline-secondary" data-toggle="Insert" title="Custom Insert"><i class="fa fa-tags"></i></a>');
   var Option1 = "Notes";
   var Option2 = "List";
   $('.woofmark-command-insert').attr('data-content', builder);
@@ -22825,10 +22827,10 @@ module.exports = PublicLab.MainImageModule = PublicLab.Module.extend({
         _module.image.onload = function() {
           var heightDropdown = this.height;
           var widthDropdown = this.width;
-          if (this.width > 340) {
-            var aspectRatio = this.width / 340;
-            widthDropdown = 340;
-            heightDropdown = this.height / aspectRatio;
+          if (this.height > 180) {
+            var aspectRatio = this.height / 180;
+            widthDropdown = this.width / aspectRatio; ;
+            heightDropdown = 180;
           }
           _module.dropEl.css('height', heightDropdown);
           _module.dropEl.css('width', widthDropdown);
@@ -23110,7 +23112,7 @@ module.exports = function initAutoCenter(_module, wysiwyg) {
   // $('.woofmark-mode-markdown').removeClass('disabled')
 
   // create a menu option for auto center:
-  $('.wk-commands').append('<button class="woofmark-command-autocenter btn btn-default" data-toggle="autocenter" title="<center> In Rich mode, insert spaces for images."><i class="fa fa-align-center"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-autocenter btn btn-outline-secondary" data-toggle="autocenter" title="<center> In Rich mode, insert spaces for images."><i class="fa fa-align-center"></i></button>');
   // since chunk.selection returns null for images
 
   $(document).ready(function() {
@@ -23243,7 +23245,7 @@ module.exports = function initAutoCenter(_module, wysiwyg) {
 
 module.exports = function initEmbed(_module, wysiwyg) {
   // create a menu option for embeds:
-  $('.wk-commands').append('<button class="woofmark-command-embed btn btn-default" data-toggle="youtube" title="Youtube link <iframe>"><i class="fa fa-youtube"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-embed btn btn-outline-secondary" data-toggle="youtube" title="Youtube link <iframe>"><i class="fa fa-youtube"></i></button>');
 
   $(document).ready(function() {
     $('[data-toggle="youtube"]').tooltip();
@@ -23274,7 +23276,7 @@ module.exports = function initEmbed(_module, wysiwyg) {
 
 module.exports = function initHorizontalRule(_module, wysiwyg) {
   // create a menu option for horizontal rules:
-  $('.wk-commands').append('<button class="woofmark-command-horizontal-rule btn btn-default" data-toggle="horizontal" title="Horizontal line <hr>"><i class="fa fa-ellipsis-h"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-horizontal-rule btn btn-outline-secondary" data-toggle="horizontal" title="Horizontal line <hr>"><i class="fa fa-ellipsis-h"></i></button>');
 
   $(document).ready(function() {
     $('[data-toggle="horizontal"]').tooltip();
@@ -23334,17 +23336,17 @@ module.exports = function initTables(_module, wysiwyg) {
 
 
   // create a submenu for sizing tables
-  $('.wk-commands').append('<button class="woofmark-command-table btn btn-default" data-toggle="table" title="Table <table>"><i class="fa fa-table"></i></button>');
+  $('.wk-commands').append('<button class="woofmark-command-table btn btn-outline-secondary" data-toggle="table" title="Table <table>"><i class="fa fa-table"></i></button>');
 
   $(document).ready(function() {
     $('[data-toggle="table"]').tooltip();
   });
 
   var builder = '<div class="form-inline form-group ple-table-popover" style="width:400px;">';
-  builder += '<a id="decRows" class="btn btn-sm btn-default"><i class="fa fa-minus"></i></a> <span id="tableRows">4</span> <a id="incRows" class="btn btn-sm btn-default"><i class="fa fa-plus"></i></a>';
+  builder += '<a id="decRows" class="btn btn-sm btn-outline-secondary"><i class="fa fa-minus"></i></a> <span id="tableRows">4</span> <a id="incRows" class="btn btn-sm btn-outline-secondary"><i class="fa fa-plus"></i></a>';
   builder += ' x ';
-  builder += '<a id="decCols" class="btn btn-sm btn-default"><i class="fa fa-minus"></i></a> <span id="tableCols">3</span> <a id="incCols" class="btn btn-sm btn-default"><i class="fa fa-plus"></i></a>';
-  builder += '&nbsp;<a class="ple-table-size btn btn-default">Add</a>';
+  builder += '<a id="decCols" class="btn btn-sm btn-outline-secondaryt"><i class="fa fa-minus"></i></a> <span id="tableCols">3</span> <a id="incCols" class="btn btn-sm btn-outline-secondary"><i class="fa fa-plus"></i></a>';
+  builder += '&nbsp;<a class="ple-table-size btn btn-outline-secondary">Add</a>';
   builder += '</div>';
 
   $('.woofmark-command-table').attr('data-content', builder);
@@ -23422,7 +23424,7 @@ module.exports = PublicLab.RichTextModule = PublicLab.Module.extend({
         icon: "clock-o",
         position: 90,
         text:
-          "Your work is auto-saved so you can return to it in this browser. To recover drafts, open the <button class='btn btn-sm btn-default' style='padding-left:1.5em'><i class='fa fa-clock-o'></i></button> menu below."
+          "Your work is auto-saved so you can return to it in this browser. To recover drafts, open the <button class='btn btn-sm btn-outline-secondary' style='padding-left:1.5em'><i class='fa fa-clock-o'></i></button> menu below."
       }
     ];
 
@@ -23882,7 +23884,7 @@ module.exports = function relatedNodes(module) {
     relatedEl.find('.result').remove();
 
     relatedResults.slice(0, 8).forEach(function(result) {
-      relatedEl.append('<div class="result result-' + result.id + '" style="margin: 3px;"><a class="btn btn-xs btn-default add-tag"><i class="fa fa-plus-circle"></i> Add</a> <a class="title"></a> by <a class="author"></a></div>');
+      relatedEl.append('<div class="result result-' + result.id + '" style="margin: 3px;"><a class="btn btn-xs btn-outline-secondary add-tag"><i class="fa fa-plus-circle"></i> Add</a> <a class="title"></a> by <a class="author"></a></div>');
       relatedEl.find('.result-' + result.id + ' .title').html(result.title);
       relatedEl.find('.result-' + result.id + ' .title').attr('href', result.url);
       relatedEl.find('.result-' + result.id + ' .author').html('@' + result.author);
@@ -24017,7 +24019,7 @@ module.exports = PublicLab.TitleModule = PublicLab.Module.extend({
     _module.menuEl = _module.el.find('.ple-menu-more');
 
     // a "more tools" menu, not currently used:
-    // _module.menuEl.append('<a class="btn btn-default">...</a>');
+    // _module.menuEl.append('<a class="btn btn-outline-secondary">...</a>');
 
     $(_module.el).find('input').keydown(function(e) {
       _editor.validate();