Add data-test attribute to test order of cell buttons

kbase · Oct 15, 2020 · 35ea951 · 35ea951
1 parent fca5adb
commit 35ea951
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 11 deletions.
diff --git a/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js b/kbase-extension/static/kbase/js/widgets/narrative_core/kbaseCellToolbarMenu.js
@@ -279,7 +279,8 @@ define([
                     id: dropdownId,
                     dataToggle: 'dropdown',
                     ariaHaspopup: 'true',
-                    ariaExpanded: 'true'
+                    ariaExpanded: 'true',
+                    'data-test' : 'cell-dropdown'
                 }, [span({ class: 'fa fa-ellipsis-h fa-lg' })]),
                 ul({
                     class: 'dropdown-menu dropdown-menu-right',
@@ -378,6 +379,7 @@ define([
                             dataPlacement: 'left',
                             title: true,
                             dataOriginalTitle: 'Move Cell Up',
+                            'data-test' : 'cell-move-up',
                             id: events.addEvent({ type: 'click', handler: doMoveCellUp })
                         }, [
                             span({ class: 'fa fa-arrow-up fa-lg' })
@@ -389,6 +391,7 @@ define([
                             dataPlacement: 'left',
                             title: true,
                             dataOriginalTitle: 'Move Cell Down',
+                             'data-test' : 'cell-move-down',
                             id: events.addEvent({ type: 'click', handler: doMoveCellDown })
                         }, [
                             span({ class: 'fa fa-arrow-down fa-lg' })
@@ -404,6 +407,7 @@ define([
                                 dataToggle: 'tooltip',
                                 dataPlacement: 'left',
                                 title: true,
+                                 'data-test' : 'cell-toggle-expansion',
                                 dataOriginalTitle: toggleMinMax === 'maximized' ? 'Collapse Cell' : 'Expand Cell',
                                 id: events.addEvent({ type: 'click', handler: doToggleMinMaxCell })
                             }, [

diff --git a/test/unit/spec/narrative_core/kbaseCellToolbarMenu-spec.js b/test/unit/spec/narrative_core/kbaseCellToolbarMenu-spec.js
@@ -1,14 +1,16 @@
 /*global describe, it, expect, beforeAll */
 /*jslint white: true*/
 define([
+    'jquery',
     'kbaseCellToolbarMenu',
     'base/js/namespace'
-], function(
+], function (
+    $,
     Widget,
     Jupyter
 ) {
     'use strict';
-    describe('Test the kbaseCellToolbarMenu widget', function() {
+    describe('Test the kbaseCellToolbarMenu widget', function () {
         beforeAll(() => {
             Jupyter.narrative = {
                 readonly: false
@@ -40,6 +42,7 @@ define([
                 }
             };
         };
+
         const mockToolbar = (mode, stage, collapsedState) => {
             const instance = Widget.make();
             const parentCell = mockParentCell(mode, stage, collapsedState);
@@ -50,49 +53,77 @@ define([
             )[0].innerText;
         };
 
-        it('Should say Error when minimized and mode is error', function() {
+
+        const mockToolbarDataTestNodes = (mode, stage, collapsedState) => {
+            const instance = Widget.make();
+            const parentCell = mockParentCell(mode, stage, collapsedState);
+            const toolbarDiv = document.createElement('div');
+            instance.register_callback([toolbarDiv], parentCell);
+            return toolbarDiv.querySelectorAll(
+                '[data-test]'
+            );
+        };
+
+        // This test might better be served through Snapshot Testing
+        // This test might want to check to see if each buttton has the correct fa-* class
+        it('Should render the correct app cell buttons in the correct order', function () {
+            var testToolBar = mockToolbarDataTestNodes('success', '', 'maximized');
+            var expectedButtonOrder = ['cell-dropdown', 'cell-move-up', 'cell-move-down', 'cell-toggle-expansion'];
+            var extractedButtons = [];
+            testToolBar.forEach(function (element) {
+                var attribute = element.getAttribute('data-test');
+                if (expectedButtonOrder.includes(attribute)) {
+                    extractedButtons.push(attribute);
+                }
+            });
+            expect(extractedButtons.length).toEqual(expectedButtonOrder.length);
+            expect(extractedButtons).toEqual(expectedButtonOrder);
+        });
+
+
+        it('Should say Error when minimized and mode is error', function () {
             expect(
                 mockToolbar('error', '', 'minimized')
             ).toBe('Error');
         });
 
-        it('Should say Error when minimized and mode is internal-error', function() {
+        it('Should say Error when minimized and mode is internal-error', function () {
             expect(
                 mockToolbar('internal-error', '', 'minimized')
             ).toBe('Error');
         });
 
-        it('Should say Canceled when minimized and canceling', function() {
+        it('Should say Canceled when minimized and canceling', function () {
             expect(
                 mockToolbar('canceling', '', 'minimized')
             ).toBe('Canceled');
         });
 
-        it('Should say Canceled when minimized and canceled', function() {
+        it('Should say Canceled when minimized and canceled', function () {
             expect(
                 mockToolbar('canceled', '', 'minimized')
             ).toBe('Canceled');
         });
 
-        it('Should say Running when minimized and running', function() {
+        it('Should say Running when minimized and running', function () {
             expect(
                 mockToolbar('processing', 'running', 'minimized')
             ).toBe('Running');
         });
 
-        it('Should say Running when minimized and queued', function() {
+        it('Should say Running when minimized and queued', function () {
             expect(
                 mockToolbar('processing', 'queued', 'minimized')
             ).toBe('Queued');
         });
 
-        it('Should say Success when minimized and mode is success', function() {
+        it('Should say Success when minimized and mode is success', function () {
             expect(
                 mockToolbar('success', '', 'minimized')
             ).toBe('Success');
         });
 
-        it('Should suppress the status message if maximized', function() {
+        it('Should suppress the status message if maximized', function () {
             expect(
                 mockToolbar('processing', 'running', 'maximized')
             ).toBe('');