diff --git a/client/app/components/blueprints/blueprint-editor/_blueprint-editor.sass b/client/app/components/blueprints/blueprint-editor/_blueprint-editor.sass index 72dfbd413..8f5fea354 100644 --- a/client/app/components/blueprints/blueprint-editor/_blueprint-editor.sass +++ b/client/app/components/blueprints/blueprint-editor/_blueprint-editor.sass @@ -5,6 +5,9 @@ .wait-cursor cursor: wait +.inline-breadcrumb + display: inline-block + .blueprint-designer-header button margin-left: 10px diff --git a/client/app/components/blueprints/blueprint-editor/blueprint-editor.directive.js b/client/app/components/blueprints/blueprint-editor/blueprint-editor.directive.js index 4c052b198..789508957 100644 --- a/client/app/components/blueprints/blueprint-editor/blueprint-editor.directive.js +++ b/client/app/components/blueprints/blueprint-editor/blueprint-editor.directive.js @@ -26,7 +26,7 @@ if (toState.name === 'login') { return; } - if (fromState.name === "designer.blueprints.editor" && toState.name !== "designer.blueprints.editor") { + if ((fromState.name === "designer.blueprints.editor" || fromState.name === "") && toState.name !== "designer.blueprints.editor") { var origBlueprint = BlueprintsState.getOriginalBlueprint(); if (!BlueprintsState.doNotSave() && !angular.equals(origBlueprint, vm.blueprint) && !event.defaultPrevented) { SaveBlueprintModal.showModal(vm.blueprint, toState, toParams, fromState, fromParams); diff --git a/client/app/components/blueprints/blueprint-editor/blueprint-editor.html b/client/app/components/blueprints/blueprint-editor/blueprint-editor.html index 64b8565ad..1a0867378 100644 --- a/client/app/components/blueprints/blueprint-editor/blueprint-editor.html +++ b/client/app/components/blueprints/blueprint-editor/blueprint-editor.html @@ -1,9 +1,6 @@ -
    -
  1. -  {{'Back to Blueprints'|translate}} -
    2. +
    1. Blueprint Editor: diff --git a/client/app/states/designer/blueprints/editor/editor.html b/client/app/states/designer/blueprints/editor/editor.html index b6a6469e4..ec3ef8144 100644 --- a/client/app/states/designer/blueprints/editor/editor.html +++ b/client/app/states/designer/blueprints/editor/editor.html @@ -1 +1,8 @@ - \ No newline at end of file + +
        +
      1. +  {{'Back to Blueprints'|translate}} +
        2. +
      + +       diff --git a/package.json b/package.json index c7fb7c123..3323fd4ba 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "karma-growl-reporter": "^1.0.0", "karma-mocha": "^1.1.1", "karma-phantomjs-launcher": "^1.0.2", + "karma-chrome-launcher": "0.1.4", "karma-sinon": "^1.0.4", "lodash": "^4.15.0", "merge": "^1.2.0", diff --git a/tests/blueprints/blueprint-editor.directive.spec.js b/tests/blueprints/blueprint-editor.directive.spec.js new file mode 100644 index 000000000..1e76838c1 --- /dev/null +++ b/tests/blueprints/blueprint-editor.directive.spec.js @@ -0,0 +1,340 @@ +describe('app.components.blueprints.blueprint-editor.blueprint-editor-directive', function() { + var element; + var successResponse = { + message: 'Success!' + }; + + beforeEach(function () { + module('app.services', 'app.components', 'app.config', 'app.states', 'gettext', 'app.services'); + bard.inject('$state', 'Session', '$httpBackend', '$compile', '$rootScope', '$controller', 'BlueprintsState', 'DesignerState', + 'SaveBlueprintModal', '$controller', '$document', 'BlueprintDetailsModal'); + }); + + var compileHTML = function (markup, scope) { + element = angular.element(markup); + $compile(element)(scope); + + scope.$digest(); + }; + + beforeEach(function () { + Session.create({ + auth_token: 'b10ee568ac7b5d4efbc09a6b62cb99b8', + }); + $httpBackend.whenGET('').respond(200); + }); + + describe('Blueprints Editor: Existing Blueprint', function() { + beforeEach(function () { + var mockDir = 'tests/mock/blueprint-editor/'; + $rootScope.blueprint = readJSON(mockDir + 'blueprint.json'); + $rootScope.serviceTemplates = readJSON(mockDir + 'service-templates.json'); + + var htmlTmp = ''; + + compileHTML(htmlTmp, $rootScope); + }); + + it('should display the correct blueprint name and enable save btn when name changed', function () { + var blueprintName = element.find('#blueprintName'); + expect(blueprintName.val()).to.equal("Blueprint One"); + var saveButton = element.find('#saveBtm'); + expect(saveButton.hasClass('disabled')).to.eq(true); + + // Save Btn becomes enabled when blueprint name changed + blueprintName.val("Updated Blueprint Name").trigger('input'); + $rootScope.$apply(); + expect(saveButton.hasClass('disabled')).to.eq(false); + }); + + + it('should show/hide toolbox', function () { + var toolbox = element.find('#toolbox'); + var addItemBtn = element.find('#toggleToolbox'); + + // Toolbox initially hidden + expect(toolbox.length).to.eq(0); + + // Toolbox shown when button clicked + addItemBtn.click(); + $rootScope.$apply(); + toolbox = element.find('#toolbox'); + expect(toolbox.length).to.eq(1); + }); + + it('should show toolbox items disabled if they have been added to the canvas', function () { + var toolbox = element.find('#toolbox'); + var addItemBtn = element.find('#toggleToolbox'); + + // Toolbox initially hidden + expect(toolbox.length).to.eq(0); + + // Toolbox shown when button clicked + addItemBtn.click(); + $rootScope.$apply(); + toolbox = element.find('#toolbox'); + expect(toolbox.length).to.eq(1); + + // 3 items already on canvas + var nodes = element.find('.node-rect'); + expect(nodes.length).to.eq(3); + + // 3 items in toolbox should be disabled because they are on the canvas + var disabledToolboxItems = element.find('.not-draggable'); + expect(disabledToolboxItems.length).to.eq(3); + }); + + it('should show toolbox items enabled when they are removed from the canvas', function () { + var toolbox = element.find('#toolbox'); + var addItemBtn = element.find('#toggleToolbox'); + + // Toolbox initially hidden + expect(toolbox.length).to.eq(0); + + // Toolbox shown when button clicked + addItemBtn.click(); + $rootScope.$apply(); + toolbox = element.find('#toolbox'); + expect(toolbox.length).to.eq(1); + + // 3 canvas nodes + var nodes = element.find('.node-rect'); + expect(nodes.length).to.eq(3); + + // 3 items in toolbox should be disabled because they are on the canvas + var disabledToolboxItems = element.find('.not-draggable'); + expect(disabledToolboxItems.length).to.eq(3); + + // select and remove a node + var removeBtn = element.find('#removeItems'); + selectNode(nodes[0]); + $rootScope.$apply(); + expect(removeBtn.hasClass('disabled')).to.eq(false); + removeBtn.click(); + $rootScope.$apply(); + + // Should now be only two nodes on canvas + nodes = element.find('.node-rect'); + expect(nodes.length).to.eq(2); + + // Should now be only two disabled toolbox items + disabledToolboxItems = element.find('.not-draggable'); + expect(disabledToolboxItems.length).to.eq(2); + }); + + it('should filter toolbox items', function () { + var toolbox = element.find('#toolbox'); + var addItemBtn = element.find('#toggleToolbox'); + + // Toolbox initially hidden + expect(toolbox.length).to.eq(0); + + // Toolbox shown when button clicked + addItemBtn.click(); + $rootScope.$apply(); + toolbox = element.find('#toolbox'); + expect(toolbox.length).to.eq(1); + + // Initially there should be 6 toolbox items + var toolboxItems = element.find('.catalog-item'); + expect(toolboxItems.length).to.eq(6); + + // After filter is applied there should only be one toolbox item + var filterFld = element.find('#filterFld'); + filterFld.val("RHEL7 on VMware").trigger('input'); + $rootScope.$apply(); + toolboxItems = element.find('.catalog-item'); + expect(toolboxItems.length).to.eq(1); + }); + }); + + describe('Blueprints Editor: New Blueprint', function() { + beforeEach(function () { + var mockDir = 'tests/mock/blueprint-editor/'; + $rootScope.blueprint = readJSON(mockDir + 'new-blueprint.json'); + $rootScope.serviceTemplates = readJSON(mockDir + 'service-templates.json'); + + var htmlTmp = ''; + + compileHTML(htmlTmp, $rootScope); + }); + + it('should initially display empty name and save btn disabled, enable save when name entered', function () { + var blueprintName = element.find('#blueprintName'); + var saveButton = element.find('#saveBtm'); + expect(blueprintName.val()).to.equal(""); + expect(saveButton.hasClass('disabled')).to.eq(true); + + // Save Btn becomes enabled when blueprint name entered + blueprintName.val("Blueprint Four").trigger('input'); + $rootScope.$apply(); + expect(saveButton.hasClass('disabled')).to.eq(false); + }); + + it('should add toolbox items to the canvas when they are clicked', function () { + var toolbox = element.find('#toolbox'); + var addItemBtn = element.find('#toggleToolbox'); + + // Toolbox initially hidden + expect(toolbox.length).to.eq(0); + + // Toolbox shown when button clicked + addItemBtn.click(); + $rootScope.$apply(); + toolbox = element.find('#toolbox'); + expect(toolbox.length).to.eq(1); + + // Initially canvas is empty + var nodes = element.find('.node-rect'); + expect(nodes.length).to.eq(0); + + // Click on toolbox item to add it to canvas + var toolboxItems = element.find('.catalog-item'); + toolboxItems[1].click(); + $rootScope.$apply(); + nodes = element.find('.node-rect'); + expect(nodes.length).to.eq(1); + + // Toolbox item can only be added once + expect(angular.element(toolboxItems[1]).hasClass('not-draggable')).to.eq(true); + }); + + it('should call save blueprint service when save button pressed', function () { + var BlueprintsStateSpy = sinon.stub(BlueprintsState, 'saveBlueprint').returns(Promise.resolve({message: 'success'})); + var blueprintName = element.find('#blueprintName'); + var saveButton = element.find('#saveBtm'); + blueprintName.val("Blueprint Four").trigger('input'); + saveButton.click(); + $rootScope.$apply(); + expect(BlueprintsStateSpy).to.have.been.called; + }); + + it('should launch details dlg. when details button pressed', function () { + var BlueprintDetailsModalSpy = sinon.stub(BlueprintDetailsModal, 'showModal').returns(Promise.resolve()); + var detailsButton = element.find('#blueprintDetails'); + detailsButton.click(); + $rootScope.$apply(); + expect(BlueprintDetailsModalSpy).to.have.been.called; + }); + + it('should ask for confirmation when navigating away from a modified blueprint', function () { + var stateGoSpy = sinon.spy($state, 'go'); + var saveModalSpy = sinon.stub(SaveBlueprintModal, 'showModal').returns(Promise.resolve()); + + // edit blueprint name + var blueprintName = element.find('#blueprintName'); + blueprintName.val("Blueprint Four").trigger('input'); + $rootScope.$apply(); + + // attempt to nav away + $state.go('designer.blueprints.list'); + + expect(stateGoSpy).to.have.been.calledWith('designer.blueprints.list'); + expect(saveModalSpy).to.have.been.called; + }); + + it('should NOT ask for confirmation when navigating away from an unchanged blueprint', function () { + var stateGoSpy = sinon.spy($state, 'go'); + var saveModalSpy = sinon.stub(SaveBlueprintModal, 'showModal').returns(Promise.resolve()); + + // attempt to nav away + $state.go('designer.blueprints.list'); + + expect(stateGoSpy).to.have.been.calledWith('designer.blueprints.list'); + expect(saveModalSpy).to.not.have.been.called; + }); + + it('should handle single and multiple canvas selections', function () { + var toolbox = element.find('#toolbox'); + var addItemBtn = element.find('#toggleToolbox'); + + // Toolbox initially hidden + expect(toolbox.length).to.eq(0); + + // Toolbox shown when button clicked + addItemBtn.click(); + $rootScope.$apply(); + toolbox = element.find('#toolbox'); + expect(toolbox.length).to.eq(1); + + // Initially canvas is empty + var nodes = element.find('.node-rect'); + expect(nodes.length).to.eq(0); + + // Click on toolbox items to add them to canvas + var toolboxItems = element.find('.catalog-item'); + toolboxItems[1].click(); + toolboxItems[2].click(); + $rootScope.$apply(); + nodes = element.find('.node-rect'); + expect(nodes.length).to.eq(2); + + // With no nodes selected Duplicate and Remove buttons should be disabled + var duplicateBtn = element.find('#duplicateItem'); + var removeBtn = element.find('#removeItems'); + expect(duplicateBtn.hasClass('disabled')).to.eq(true); + expect(removeBtn.hasClass('disabled')).to.eq(true); + + // Single Node Selection should enable the Duplicate and Remove buttons + selectNode(nodes[0]); + $rootScope.$apply(); + expect(duplicateBtn.hasClass('disabled')).to.eq(false); + expect(removeBtn.hasClass('disabled')).to.eq(false); + + // Multiple Node Selection should disable the Duplicate button, but + /* enable the Remove button + $document.triggerHandler({type:"keydown", which:17, keyCode: 17}); + $document.trigger({type:"keydown", which:17, keyCode: 17}); + selectNode(nodes[1]); + $rootScope.$apply(); + expect(duplicateBtn.hasClass('disabled')).to.eq(true); + expect(removeBtn.hasClass('disabled')).to.eq(false); + */ + }); + + it('should remove a selected node from the canvas', function () { + var toolbox = element.find('#toolbox'); + var addItemBtn = element.find('#toggleToolbox'); + + // Toolbox initially hidden + expect(toolbox.length).to.eq(0); + + // Toolbox shown when button clicked + addItemBtn.click(); + $rootScope.$apply(); + toolbox = element.find('#toolbox'); + expect(toolbox.length).to.eq(1); + + // Initially canvas is empty + var nodes = element.find('.node-rect'); + expect(nodes.length).to.eq(0); + + // Click on toolbox items to add them to canvas + var toolboxItems = element.find('.catalog-item'); + toolboxItems[1].click(); + toolboxItems[2].click(); + $rootScope.$apply(); + + // Should be two nodes on canvas + nodes = element.find('.node-rect'); + expect(nodes.length).to.eq(2); + + // select and click on the remove button + var removeBtn = element.find('#removeItems'); + selectNode(nodes[0]); + $rootScope.$apply(); + expect(removeBtn.hasClass('disabled')).to.eq(false); + removeBtn.click(); + $rootScope.$apply(); + + // Should now be only one node on canvas + nodes = element.find('.node-rect'); + expect(nodes.length).to.eq(1); + }); + }); + + function selectNode(node) { + angular.element(node).parent().triggerHandler({type: 'mousedown', pageX: 0, pageY:0}); + angular.element(node).parent().trigger('mousedown'); + } +}); diff --git a/tests/blueprints/blueprint-editor.state.spec.js b/tests/blueprints/blueprint-editor.state.spec.js index 48e04f35f..59a23f73e 100644 --- a/tests/blueprints/blueprint-editor.state.spec.js +++ b/tests/blueprints/blueprint-editor.state.spec.js @@ -3,7 +3,7 @@ describe('blueprint.editor', function() { module('app.states', 'app.config', 'gettext', bard.fakeToastr); }); - describe('controller', function() { + describe('controller with existing blueprint', function() { var collectionsApiSpy; var controller; @@ -12,7 +12,7 @@ describe('blueprint.editor', function() { var controllerResolves = { blueprint: readJSON(mockDir + 'blueprint.json'), blueprintTags: readJSON(mockDir + 'blueprint-tags.json'), - serviceTemplates: readJSON(mockDir + 'service-templates.json') + serviceTemplates: readJSON(mockDir + 'service-templates-orig.json') }; beforeEach(function() { @@ -36,5 +36,40 @@ describe('blueprint.editor', function() { expect(controller.blueprint.ui_properties.chart_data_model.nodes[0].image).to.equal('http://localhost:8001/pictures/10r4.jpg'); }); + it('disables three items in toolbox because they are on canvas', function() { + expect(controller.serviceTemplates[1].disableInToolbox).to.equal(true); + expect(controller.serviceTemplates[2].disableInToolbox).to.equal(true); + expect(controller.serviceTemplates[5].disableInToolbox).to.equal(true); + }); + }); + + describe('controller with new blueprint', function() { + var collectionsApiSpy; + var controller; + + var mockDir = 'tests/mock/blueprint-editor/'; + + var controllerResolves = { + blueprint: null, + blueprintTags: null, + serviceTemplates: readJSON(mockDir + 'service-templates.json') + }; + + beforeEach(function() { + bard.inject('$controller', '$log', '$state', '$rootScope', 'CollectionsApi', 'Notifications'); + + controller = $controller($state.get('designer.blueprints.editor').controller, controllerResolves); + $rootScope.$apply(); + }); + + it('is created successfully', function() { + expect(controller).to.be.defined; + }); + + it('created a new blueprint', function() { + expect(controller.blueprint.name).to.equal(""); + expect(controller.blueprint.tags.length).to.equal(0); + expect(controller.blueprint.ui_properties.chart_data_model.nodes.length).to.equal(0); + }); }); }); diff --git a/tests/blueprints/blueprints-list.directive.spec.js b/tests/blueprints/blueprints-list.directive.spec.js index 0f3bc36dc..0fea895ef 100644 --- a/tests/blueprints/blueprints-list.directive.spec.js +++ b/tests/blueprints/blueprints-list.directive.spec.js @@ -101,5 +101,21 @@ describe('app.components.blueprints.BlueprintsListDirective', function() { disabledPublishButton = angular.element(rows[2]).find('.btn.btn-default.disabled'); expect(disabledPublishButton.length).to.eq(0); }); + + it('should goto the blueprint editor when a blueprint is clicked', function () { + var stateGoSpy = sinon.spy($state, 'go'); + var rows = element.find('.list-view-pf > .list-group-item'); + expect(rows.length).to.eq($scope.blueprints.length); + + var rowElement = angular.element(rows[0]); + + var rowInfo = rowElement.find('.list-view-pf-main-info'); + expect(rowInfo.length).to.eq(1); + + eventFire(angular.element(rowInfo[0]), 'click'); + $scope.$digest(); + + expect(stateGoSpy).to.have.been.calledWith('designer.blueprints.editor', { blueprintId: 10000000000023 }); + }); }); }); diff --git a/tests/mock/blueprint-editor/new-blueprint.json b/tests/mock/blueprint-editor/new-blueprint.json new file mode 100644 index 000000000..2b12e24f0 --- /dev/null +++ b/tests/mock/blueprint-editor/new-blueprint.json @@ -0,0 +1,16 @@ +{ + "name": "", + "tags": [], + "ui_properties": { + "automate_entrypoints": { + "Provision": "Service/Provisioning/StateMachines/ServiceProvision_Template/default" + }, + "visibility": { + "id": 800, + "name": "Private" + }, + "chart_data_model": { + "nodes": [] + } + } +} diff --git a/tests/mock/blueprint-editor/service-templates-orig.json b/tests/mock/blueprint-editor/service-templates-orig.json new file mode 100644 index 000000000..491fb9fa8 --- /dev/null +++ b/tests/mock/blueprint-editor/service-templates-orig.json @@ -0,0 +1,134 @@ +{ + "name": "service_templates", + "count": 18, + "subcount": 7, + "resources": [ + { + "href": "http://localhost:8001/api/service_templates/10000000000001", + "id": 10000000000001, + "name": "Create new AWS ELB", + "service_type": "atomic", + "prov_type": "generic_ansible_tower", + "picture": { + "id": 10000000000001, + "resource_id": 10000000000001, + "resource_type": "ServiceTemplate", + "image_href": "http://localhost:8001/pictures/10r1.png" + }, + "service_template_catalog": { + "name": "Amazon Operations" + } + }, + { + "href": "http://localhost:8001/api/service_templates/10000000000004", + "id": 10000000000004, + "name": "Deploy RHEL7 with PostgreSQL", + "service_type": "composite", + "picture": { + "id": 10000000000004, + "resource_id": 10000000000004, + "resource_type": "ServiceTemplate", + "image_href": "http://localhost:8001/pictures/10r4.jpg" + }, + "service_template_catalog": { + "name": "Amazon Operations" + } + }, + { + "href": "http://localhost:8001/api/service_templates/10000000000010", + "id": 10000000000010, + "name": "Hybrid Cloud Application", + "service_type": "composite", + "picture": { + "id": 10000000000010, + "resource_id": 10000000000010, + "resource_type": "ServiceTemplate", + "image_href": "http://localhost:8001/pictures/10r10.png" + }, + "service_template_catalog": { + "name": "Hybrid Cloud Services" + } + }, + { + "href": "http://localhost:8001/api/service_templates/10000000000015", + "id": 10000000000015, + "name": "RHEL7 on VMware", + "service_type": "atomic", + "prov_type": "vmware", + "picture": { + "id": 10000000000012, + "resource_id": 10000000000015, + "resource_type": "ServiceTemplate", + "image_href": "http://localhost:8001/pictures/10r12.png" + }, + "service_template_catalog": { + "name": "VMware Operations" + } + }, + { + "href": "http://localhost:8001/api/service_templates/10000000000016", + "id": 10000000000016, + "name": "RHEL7 on RHEV", + "service_type": "atomic", + "prov_type": "redhat", + "picture": { + "id": 10000000000013, + "resource_id": 10000000000016, + "resource_type": "ServiceTemplate", + "image_href": "http://localhost:8001/pictures/10r13.jpg" + }, + "service_template_catalog": { + "name": "RHEV Operations" + } + }, + { + "href": "http://localhost:8001/api/service_templates/10000000000018", + "id": 10000000000018, + "name": "RHEL7 on Amazon AWS", + "service_type": "atomic", + "prov_type": "amazon", + "picture": { + "id": 10000000000014, + "resource_id": 10000000000018, + "resource_type": "ServiceTemplate", + "image_href": "http://localhost:8001/pictures/10r14.png" + }, + "service_template_catalog": { + "name": "Amazon Operations" + } + }, + { + "href": "http://localhost:8001/api/service_templates/10000000000019", + "id": 10000000000019, + "name": "RHEL7 on OpenStack", + "service_type": "atomic", + "prov_type": "openstack", + "picture": { + "id": 10000000000015, + "resource_id": 10000000000019, + "resource_type": "ServiceTemplate", + "image_href": "http://localhost:8001/pictures/10r15.jpg" + }, + "service_template_catalog": { + "name": "OpenStack Operations" + } + } + ], + "actions": [ + { + "name": "query", + "method": "post", + "href": "http://localhost:8001/api/service_templates" + }, + { + "name": "edit", + "method": "post", + "href": "http://localhost:8001/api/service_templates" + }, + { + "name": "delete", + "method": "post", + "href": "http://localhost:8001/api/service_templates" + } + ] +} diff --git a/tests/mock/blueprint-editor/service-templates.json b/tests/mock/blueprint-editor/service-templates.json index 491fb9fa8..613d02905 100644 --- a/tests/mock/blueprint-editor/service-templates.json +++ b/tests/mock/blueprint-editor/service-templates.json @@ -1,8 +1,4 @@ -{ - "name": "service_templates", - "count": 18, - "subcount": 7, - "resources": [ +[ { "href": "http://localhost:8001/api/service_templates/10000000000001", "id": 10000000000001, @@ -24,6 +20,7 @@ "id": 10000000000004, "name": "Deploy RHEL7 with PostgreSQL", "service_type": "composite", + "disableInToolbox": true, "picture": { "id": 10000000000004, "resource_id": 10000000000004, @@ -39,6 +36,7 @@ "id": 10000000000010, "name": "Hybrid Cloud Application", "service_type": "composite", + "disableInToolbox": true, "picture": { "id": 10000000000010, "resource_id": 10000000000010, @@ -87,6 +85,7 @@ "name": "RHEL7 on Amazon AWS", "service_type": "atomic", "prov_type": "amazon", + "disableInToolbox": true, "picture": { "id": 10000000000014, "resource_id": 10000000000018, @@ -113,22 +112,5 @@ "name": "OpenStack Operations" } } - ], - "actions": [ - { - "name": "query", - "method": "post", - "href": "http://localhost:8001/api/service_templates" - }, - { - "name": "edit", - "method": "post", - "href": "http://localhost:8001/api/service_templates" - }, - { - "name": "delete", - "method": "post", - "href": "http://localhost:8001/api/service_templates" - } - ] -} +] +