Behat tests

.travis.yml

@@ -94,4 +94,3 @@ script:
   - if [ ${MOODLE_PLUGIN_CI} = "2" ]; then moodle-plugin-ci mustache; fi
   - if [ ${MOODLE_PLUGIN_CI} = "2" ]; then moodle-plugin-ci grunt; fi
   - if [ ${MOODLE_PLUGIN_CI} = "2" ]; then moodle-plugin-ci behat --dump; fi
-

README.md

@@ -58,3 +58,28 @@ The plugin can be configured during the initial install, and later by navigating
 * If nothing is displayed in the popup after clicking one of the buttons in the TinyMCE toolbar, it is likely an issue with the `X-Frame-Options` header. To fix this, change the server configuration to set the header to `SAMEORIGIN`. Also, make sure that the header is not set twice as the browser will default the value to `DENY` (sometimes individual web apps also set the header, or there is some conflicting server configuration)
 * The default maximum size of uploads in PHP is very small, it is recommended to set the `upload_max_filesize` setting to `40M` and the `post_max_size` setting to `50M` for a time limit of 2:00 to avoid getting an alert while recording
 * The filesize of recorded video for Firefox will likely be twice that of other browsers, even with the same settings; this is expected as it uses a different writing library for recording video. The audio filesize should be similar across all browsers
+
+### Behat tests
+
+To ensure behat tests work correctly, you should add this chrome switches to $CFG->behat_profiles like this:
+
+$CFG->behat_profiles = [
+    'default' => [
+        'browser' => 'chrome',
+        'capabilities' => [
+            'chrome' => [
+                'switches' => [
+                    '--use-fake-device-for-media-stream',
+                    '--use-fake-ui-for-media-stream'
+                ]
+            ]
+        ],
+        'extensions' => [
+            'Behat\MinkExtension' => [
+                'selenium2' => [
+                    'browser' => 'chrome'
+                ]
+            ]
+        ]
+    ]
+];

tests/behat/audio_record.feature

@@ -0,0 +1,40 @@
+@editor @tinymce @editor_tinymce @recordrtc @tinymce_recordrtc @tinymce_recordrtc_audio
+Feature: record audio to annotate it in tinymce editor
+  In order to record a audio for annotation
+  As a user
+  I need to see the plugin dialogue when I click on record audio button
+
+  @javascript
+  Scenario: the popup dialogue shows when clicking on record audio button
+    When I log in as "admin"
+    And I follow "Preferences" in the user menu
+    And I follow "Editor preferences"
+    And I set the field "Text editor" to "TinyMCE HTML editor"
+    And I press "Save changes"
+    And I follow "Home"
+    And I follow "Site home"
+    And I click on "Add a new course" "button"
+    And I click on "#id_summary_editor_audiortc" "css_element"
+    Then "iframe" "css_element" should be visible
+    When I switch to popup iframe
+    Then I should see "Start Recording"
+    And "button#start-stop" "css_element" should exist
+    When I click on "Start Recording" "button"
+    Then "#minutes" "css_element" should be visible
+    And "#seconds" "css_element" should be visible
+    And I should see "Stop Recording"
+    When I wait "2" seconds
+    And I click on "Stop Recording" "button"
+    Then "audio#player" "css_element" should be visible
+    And I should see "Record Again"
+    And I should see "Attach Recording as Annotation"
+    And "button#upload" "css_element" should exist
+    When I click on "Attach Recording as Annotation" "button"
+    And I confirm the popup
+    When I set the following fields to these values:
+      | Course full name | Test Course |
+      | Course short name | testcourse |
+    And I click on "Save and display" "button"
+    And I follow "Site home"
+    Then "audio.vjs-tech" "css_element" should exist
+

tests/behat/behat_recordrtc.php

@@ -0,0 +1,96 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Behat recordrtc-related steps definitions for tinymce editor.
+ *
+ * @package    tinymce_recordrtc
+ * @category   test
+ * @copyright  2018 Marouene Agrebi <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+// NOTE: no MOODLE_INTERNAL test here, this file may be required by behat before including /config.php.
+
+require_once(__DIR__ . '/../../../../../../behat/behat_base.php');
+
+
+/**
+ * Behat recordrtc-related steps definitions for tinymce editor.
+ *
+ * @package    tinymce_recordrtc
+ * @category   test
+ * @copyright  2018 Marouene Agrebi <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class behat_recordrtc extends behat_base {
+
+    /**
+     * Switch to iframe inside the popup window.
+     *
+     * @When /^I switch to popup iframe$/
+     */
+    public function i_switch_to_popup_iframe() {
+
+        // We spin to give time to the iframe to be loaded.
+        $this->spin(
+            function () {
+                $this->switch_to_popup_iframe();
+                // If no exception we are done.
+                return true;
+            },
+            self::EXTENDED_TIMEOUT
+        );
+    }
+
+    /**
+     * Switches to the first iFrame in the document.
+     *
+     * @throws Exception When no iFrame is found.
+     */
+    public function switch_to_popup_iframe() {
+
+        // Find the only iFrame in the document by tag name.
+        // The reason: this iFrame has only one selector: id, that can not be used to find it
+        // because it is generated automatically.
+        $function = <<<JS
+            (function(){
+                 var iframe = document.getElementsByTagName('iframe');
+                 iframe[1].name = "iframeTinymce";
+            })()
+JS;
+        try {
+            $this->getSession()->executeScript($function);
+        } catch (Exception $e) {
+            throw new \Exception("iFrame was NOT found." . PHP_EOL . $e->getMessage());
+        }
+
+        // After injecting the name attribute to the iFrame
+        // we can now use the original switchToIFrame function which needs
+        // the name attribute as an argument.
+        $this->getSession()->getDriver()->switchToIFrame("iframeTinymce");
+    }
+
+    /**
+     * Confirm browser alert popup.
+     *
+     * @When /^I confirm the popup$/
+     */
+    public function i_confirm_the_popup() {
+        sleep(1);
+        $this->getSession()->getDriver()->getWebDriverSession()->accept_alert();
+    }
+}

tests/behat/installed.feature

@@ -9,4 +9,4 @@ Feature: Installation succeeds
     And I navigate to "Plugins overview" node in "Site administration > Plugins"
     Then the following should exist in the "plugins-control-panel" table:
       |RecordRTC|
-      |tinymce_recordrtc|
+      |tinymce_recordrtc|

tests/behat/video_record.feature

@@ -0,0 +1,37 @@
+@editor @tinymce @editor_tinymce @recordrtc @tinymce_recordrtc @tinymce_recordrtc_video
+Feature: record video to annotate it in tinymce editor
+  In order to record a video for annotation
+  As a user
+  I need to see the plugin dialogue when I click on record video button
+
+  @javascript
+  Scenario: the popup dialogue shows when clicking on record video button
+    When I log in as "admin"
+    And I follow "Preferences" in the user menu
+    And I follow "Editor preferences"
+    And I set the field "Text editor" to "TinyMCE HTML editor"
+    And I press "Save changes"
+    And I follow "Home"
+    And I follow "Site home"
+    And I click on "Add a new course" "button"
+    And I click on "#id_summary_editor_videortc" "css_element"
+    Then "iframe" "css_element" should be visible
+    When I switch to popup iframe
+    Then I should see "Start Recording"
+    And "button#start-stop" "css_element" should exist
+    When I click on "Start Recording" "button"
+    And I should see "Stop Recording"
+    When I wait "2" seconds
+    And I click on "Stop Recording" "button"
+    Then "video#player" "css_element" should be visible
+    And I should see "Record Again"
+    And I should see "Attach Recording as Annotation"
+    And "button#upload" "css_element" should exist
+    When I click on "Attach Recording as Annotation" "button"
+    And I confirm the popup
+    When I set the following fields to these values:
+      | Course full name | Test Course |
+      | Course short name | testcourse |
+    And I click on "Save and display" "button"
+    And I follow "Site home"
+    Then "video.vjs-tech" "css_element" should exist

tinymce/editor_plugin.js

@@ -73,7 +73,7 @@ function addAudio(ed, url) {
             baseWidth = 640 + window.parseInt(ed.getLang('advimage.delta_width', 0)),
             percentOfViewportWidth = vp.w * 0.75,
             width = percentOfViewportWidth > baseWidth ? percentOfViewportWidth : baseWidth,
-            height = 340 + window.parseInt(ed.getLang('advimage.delta_width', 0)),
+            height = 220 + window.parseInt(ed.getLang('advimage.delta_width', 0)),
             maximizedmode = (width >= vp.w - 2 || height >= vp.h - 2);
         if (maximizedmode) {
             width = vp.w;
@@ -119,10 +119,10 @@ function addVideo(ed, url) {
         ed.windowManager.onClose.add(onClose);
 
         var vp = ed.dom.getViewPort(),
-            baseWidth = 720 + window.parseInt(ed.getLang('advimage.delta_width', 0)),
+            baseWidth = 640 + window.parseInt(ed.getLang('advimage.delta_width', 0)),
             percentOfViewportWidth = vp.w * 0.75,
             width = percentOfViewportWidth > baseWidth ? percentOfViewportWidth : baseWidth,
-            height = 780 + window.parseInt(ed.getLang('advimage.delta_width', 0)),
+            height = 600 + window.parseInt(ed.getLang('advimage.delta_width', 0)),
             maximizedmode = (width >= vp.w - 2 || height >= vp.h - 2);
         if (maximizedmode) {
             width = vp.w;

tinymce/js/compatcheckmodule.js

@@ -20,36 +20,39 @@
 M.tinymce_recordrtc = M.tinymce_recordrtc || {};
 
 // Show alert and close plugin if browser does not support WebRTC at all.
-M.tinymce_recordrtc.check_has_gum = function() {
+M.tinymce_recordrtc.check_has_gum = function () {
     if (!(navigator.mediaDevices && window.MediaRecorder)) {
-        M.tinymce_recordrtc.show_alert('nowebrtc', function() {
+        M.tinymce_recordrtc.show_alert('nowebrtc', function () {
             tinyMCEPopup.close();
         });
     }
 };
 
 // Notify and redirect user if plugin is used from insecure location.
-M.tinymce_recordrtc.check_secure = function() {
+M.tinymce_recordrtc.check_secure = function () {
     var isSecureOrigin = (window.location.protocol === 'https:') ||
-                         (window.location.host.indexOf('localhost') !== -1);
+        (window.location.host.indexOf('localhost') !== -1) ||
+        (window.location.host.indexOf('127.0.0.1') !== -1);
 
-    if (!isSecureOrigin && (window.bowser.chrome || window.bowser.opera)) {
-        M.tinymce_recordrtc.show_alert('gumsecurity', function() {
-            tinyMCEPopup.close();
-        });
-    } else if (!isSecureOrigin) {
+    if (!isSecureOrigin) {
         alertDanger.ancestor().ancestor().removeClass('hide');
+
+        if (window.bowser.chrome || window.bowser.opera) {
+            M.tinymce_recordrtc.show_alert('gumsecurity', function () {
+                tinyMCEPopup.close();
+            });
+        }
     }
 };
 
 // Display "consider switching browsers" message if not using:
 // - Firefox 29+;
 // - Chrome 49+;
 // - Opera 36+.
-M.tinymce_recordrtc.check_browser = function() {
+M.tinymce_recordrtc.check_browser = function () {
     if (!((window.bowser.firefox && window.bowser.version >= 29) ||
-          (window.bowser.chrome && window.bowser.version >= 49) ||
-          (window.bowser.opera && window.bowser.version >= 36))) {
+        (window.bowser.chrome && window.bowser.version >= 49) ||
+        (window.bowser.opera && window.bowser.version >= 36))) {
         alertWarning.ancestor().ancestor().removeClass('hide');
     }
 };