[Testing:TAGrading] Uncaught syntax error notebook

site/app/templates/admin/NotebookBuilder.twig

@@ -40,7 +40,7 @@
         });
     </script>
 
-    <h2>{{ gradeable.getTitle() }} Notebook Builder</h2>
+    <h2 data-testid="notebook-builder-title">{{ gradeable.getTitle() }} Notebook Builder</h2>
     <div id="notebook-builder">
         <p>Loading...</p>
     </div>

site/app/templates/admin/admin_gradeable/AdminGradeableAuto.twig

@@ -101,7 +101,7 @@
     <div class="notebook-builder-info">
         <div class="option-title">Notebook Builder:</div>
         <div>
-            <a class="btn btn-primary" href="{{ notebook_builder_url ~ '/new' }}">Start New</a>
+            <a class="btn btn-primary" href="{{ notebook_builder_url ~ '/new' }}" data-testid="start-new-notebook">Start New</a>
             <span>Start a new configuration with notebook builder.</span>
         </div>
         <div class="notebook-builder-edit-button-div">

site/app/templates/grading/electronic/NotebookPanel.twig

@@ -3,7 +3,7 @@
 {% from 'notebook/Notebook.twig' import renderNotebook as renderNotebook %}
 
 
-<div id="notebook-view" class="draggable rubric_panel" style="display:none">
+<div id="notebook-view" class="draggable rubric_panel" style="display:none" data-testid="notebook-view">
     <span class="grading_label"> Notebook View </span>
 	{% include 'notebook/Notebook.twig' with {
         "notebook": notebook,

site/app/templates/grading/electronic/PDFAnnotationBar.twig

@@ -63,24 +63,25 @@
 </div>
 
 <script>
-    $(document).ready(function () {
+    $(document).ready(function (events, handler) {
         renderPDFToolbar();
     });
     //TODO: move to js file
     let colorEvent;
-    if(document.createEvent){
-        colorEvent = document.createEvent("HTMLEvents");
+    if (document.createEvent) {
+        colorEvent = document.createEvent('HTMLEvents');
         colorEvent.initEvent('colorchange', true, true);
     }
     else {
         colorEvent = document.createEventObject();
-        colorEvent.eventType = "colorchange";
+        colorEvent.eventType = 'colorchange';
     }
 
-    colorEvent.eventName = "colorchange";
-
-    function emitEvent(elem){
-        if(document.createEvent){
+    colorEvent.eventName = 'colorchange';
+    console.log('hello from color -event');
+    function emitEvent(elem) {
+        console.log(elem);
+        if (document.createEvent) {
             elem.dispatchEvent(colorEvent);
         }
     }

site/app/templates/misc/MarkdownArea.twig

@@ -78,6 +78,7 @@
         <textarea
             data-testid="{{ markdown_area_id }}"
             id="{{ markdown_area_id }}"
+            data-testid="{{ markdown_area_id }}"
             class="markdown-textarea fill-available {{ class is defined ? class }}"
             name="{{ markdown_area_name is defined ? markdown_area_name : "markdown_area" }}"
             {% if placeholder is defined %}

site/app/templates/notebook/Notebook.twig

@@ -1,4 +1,4 @@
-<div class="notebook" id="notebook-main-view">
+<div class="notebook" id="notebook-main-view" data-testid="notebook-main-view">
     <script>
         const USER_ID = "{{student_id}}";
     </script>
@@ -289,7 +289,7 @@
     //interval is 20 percent of overall time allowed or 10 minutes, whichever is greater
     let interval = Math.floor(((({{ allowed_minutes }}) / 5) > 10 ? ({{ allowed_minutes }}) / 5 : 10));
     let loadTime = 0;
-    let showPopup = false;
+    let show_popup = false;
 
     function notebookPopupSubmitKey(){
         return `${gradeable_id}-${USER_ID}`;
@@ -312,7 +312,7 @@
         const time_taken = Math.floor((curTime - loadTime)/1000);
         const minutes_taken = Math.floor(time_taken / 60);
         if (minutes_taken >= interval ) {
-            if (localStorage.getItem(notebookPopupSubmitKey()) === 'yes' && curTime < user_deadline && showPopup) {
+            if (localStorage.getItem(notebookPopupSubmitKey()) === 'yes' && curTime < user_deadline && show_popup) {
                 $(".notebook-submit-popup").show();
             }
         }

site/cypress/e2e/Cypress-TAGrading/notebook_section.spec.js

@@ -0,0 +1,21 @@
+describe('Notebook Section Testing', () => {
+    it('Notebook builder and Notebook panel', () => {
+        cy.login();
+        cy.visit(['sample', 'gradeable', 'grading_homework', 'update?nav_tab=1']);
+        cy.get('[data-testid="start-new-notebook"]').click();
+        cy.get('[data-testid="notebook-builder-title"]').should('contain', 'Grading Homework Notebook Builder');
+        cy.get('[data-testid="multiple-choice"]').should('have.value', 'Multiple Choice');
+        cy.get('[data-testid="markdown"]').should('have.value', 'Markdown');
+        cy.get('[data-testid="short-answer"]').should('have.value', 'Short Answer');
+        cy.get('[data-testid="image"]').should('have.value', 'Image');
+        cy.get('[data-testid="item"]').should('have.value', 'Item');
+        cy.get('[data-testid="itempool-item"]').should('have.value', 'Itempool Item');
+        cy.get('[data-testid="markdown"]').click();
+        cy.get('[data-testid="notebook-builder-markdown-0"]').click().type('# Notebook-Cypress-Test');
+        cy.get('[data-testid="notebook-save"]').click();
+        cy.visit(['sample', 'gradeable', 'grading_homework', 'grading', 'grade?who_id=hG1b13ljpDjKu32&sort=id&direction=ASC']);
+        cy.get('body').type('{N}');
+        cy.get('[data-testid="notebook-view"]').should('contain', 'Notebook View');
+        cy.get('[data-testid="notebook-main-view"]').should('contain', 'Notebook-Cypress-Test');
+    });
+});

site/public/js/drag-and-drop.js

@@ -458,7 +458,7 @@ function addLabel(filename, filesize, part, previous) {
 function handle_input_keypress(inactive_version) {
     empty_inputs = false;
     // eslint-disable-next-line no-undef
-    showPopup = true;
+    show_popup = true;
     if (!inactive_version) {
         setButtonStatus();
     }

site/public/js/notebook_builder/widgets/form-options-widget.js

@@ -37,7 +37,7 @@ class FormOptionsWidget extends Widget {
     getFormOptionsTemplate() {
         return `
         <div class="buttons">
-            <input type="button" class="save-button" value="Save">
+            <input type="button" class="save-button" value="Save" data-testid="notebook-save">
         </div>
         <div class="status"></div>`;
     }

site/public/js/notebook_builder/widgets/widget.js

@@ -84,6 +84,7 @@ class Widget {
         const button = document.createElement('input');
         button.setAttribute('type', 'button');
         button.setAttribute('value', value);
+        button.dataset.testid = value.toLowerCase().split(' ').join('-');
 
         return button;
     }