diff --git a/README.md b/README.md index 3b8e86e..845f2c8 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,7 @@ A module that implements design elements based on [Material Design](https://mate To see Material Design Expansion Panels Specification go [here](https://material.google.com/components/expansion-panels.html). - -This module is **In Progress** currently and should not be used in production. You can expect a tested and documented version in the near future. +The expansion panel component can be used with just html or you can use the Expansion Panel Group to control multiple panels through code
diff --git a/src/expansionPanels.spec.js b/src/expansionPanels.spec.js index 8d60b30..e1d175a 100644 --- a/src/expansionPanels.spec.js +++ b/src/expansionPanels.spec.js @@ -1,5 +1,6 @@ describe('material.components.expansionPanels', function () { var panel; + var group; var scope; var content; var $mdUtil; @@ -39,6 +40,12 @@ describe('material.components.expansionPanels', function () { panel = undefined; scope = undefined; + if (group) { + group.scope().$destroy(); + group.remove(); + group = undefined; + } + if (content) { content.remove(); content = undefined; @@ -53,23 +60,6 @@ describe('material.components.expansionPanels', function () { // --- Expansion Panel Service --- describe('$mdExpansionPanel Service', function () { - - // it('should expand panel', function (done) { - // var element = getDirective(); - // inject(function ($mdExpansionPanel) { - // - // $mdExpansionPanel('expansionPanelId').then(function (instance) { - // console.log(element); - // // instance.expand(); - // // flushAnimations(); - // // expect(element.hasClass('md-open')).toBe(false); - // expect(true).toBe(true); - // done(); - // }); - // }); - // }); - - it('should find instance by id', inject(function($mdExpansionPanel) { var instance; @@ -78,7 +68,7 @@ describe('material.components.expansionPanels', function () { }); expect(instance).toBeUndefined(); - var element = getDirective(); + var element = getDirective({componentId: 'expansionPanelId'}); $timeout.flush(); expect(instance).toBeDefined(); @@ -90,7 +80,7 @@ describe('material.components.expansionPanels', function () { instance.expand(); }); - var element = getDirective(); + var element = getDirective({componentId: 'expansionPanelId'}); flushAnimations(); expect(element.hasClass('md-open')).toBe(true); @@ -103,11 +93,114 @@ describe('material.components.expansionPanels', function () { instance.collapse(); }); - var element = getDirective(); + var element = getDirective({componentId: 'expansionPanelId'}); flushAnimations(); expect(element.hasClass('md-close')).toBe(true); - }));close + })); + + it('should remove panel', inject(function($mdExpansionPanel) { + $mdExpansionPanel('expansionPanelId').then(function(instance) { + instance.remove(); + }); + + var element = getDirective({componentId: 'expansionPanelId'}); + expect(element.scope()).toBeUndefined(); + })); + + }); + + + + + + + // --- Expansion Panel Group Service --- + + describe('$mdExpansionPanelGroup Service', function () { + + it('should find instance by id', inject(function($mdExpansionPanelGroup) { + var instance; + + $mdExpansionPanelGroup('expansionPanelGroupId').then(function(inst) { + instance = inst; + }); + expect(instance).toBeUndefined(); + + var element = getGroupDirective(); + $timeout.flush(); + + expect(instance).toBeDefined(); + })); + + + it('should register panel and add it', inject(function($mdExpansionPanelGroup) { + var instance; + var panelInstance; + + $mdExpansionPanelGroup('expansionPanelGroupId').then(function(inst) { + instance = inst; + inst.register('panelName', { + template: getTemplate(), + controller: function () {} + }); + + inst.add('panelName').then(function (_panelInstance) { + panelInstance = _panelInstance; + }); + }); + + var element = getGroupDirective(); + $timeout.flush(); + + expect(panelInstance).toBeDefined(); + })); + + + it('should remove added panel', inject(function($mdExpansionPanelGroup) { + var instance; + + $mdExpansionPanelGroup('expansionPanelGroupId').then(function(inst) { + instance = inst; + inst.add({ + template: getTemplate({componentId: 'expansionPanelId'}), + controller: function () {} + }); + + inst.remove('expansionPanelId'); + }); + + var element = getGroupDirective(); + $timeout.flush(); + + expect(element[0].querySelector('[md-component-id="expansionPanelId"]')).toBe(null); + })); + + + it('should remove all panels', inject(function($mdExpansionPanelGroup) { + var instance; + + $mdExpansionPanelGroup('expansionPanelGroupId').then(function(inst) { + instance = inst; + inst.add({ + template: getTemplate({componentId: 'expansionPanelOne'}), + controller: function () {} + }); + + inst.add({ + template: getTemplate({componentId: 'expansionPanelTwo'}), + controller: function () {} + }); + + inst.removeAll(); + }); + + var element = getGroupDirective(); + $timeout.flush(); + + expect(element[0].querySelector('[md-component-id="expansionPanelOne"]')).toBe(null); + expect(element[0].querySelector('[md-component-id="expansionPanelTwo"]')).toBe(null); + })); }); @@ -158,6 +251,13 @@ describe('material.components.expansionPanels', function () { }); + it('should remove panel', inject(function($mdExpansionPanel) { + var element = getDirective(); + element.scope().$panel.remove(); + expect(element.scope()).toBeUndefined(); + })); + + describe('Focused', function () { it('should be the focused element', function () { var element = getDirective(); @@ -511,8 +611,29 @@ describe('material.components.expansionPanels', function () { function getDirective(options) { options = options || {}; - var template = $mdUtil.supplant('{2}' + - ''+ + var template = getTemplate(options); + + inject(function($compile, $rootScope) { + scope = $rootScope.$new(); + panel = $compile(template)(scope); + }); + + document.body.appendChild(panel[0]); + + if (options.content) { + content = panel; + panel = content.find('md-expansion-panel'); + } + + panel.scope().$digest(); + return panel; + } + + function getTemplate(options) { + options = options || {}; + + return $mdUtil.supplant('{2}' + + ''+ '>'+ '
Title
'+ '
Summary
'+ @@ -541,21 +662,29 @@ describe('material.components.expansionPanels', function () { options.footerNoStick ? ' md-no-sticky ' : '', options.componentId ? ' md-component-id="'+options.componentId+'" ' : '' ]); + } + + + + function getGroupDirective(options) { + options = options || {}; + + var template = $mdUtil.supplant('' + + ''+ + '', + [ + options.multiple ? ' multiple ' : '', + options.autoExpand ? ' auto-exapnd ' : '' + ]); inject(function($compile, $rootScope) { - scope = $rootScope.$new(); - panel = $compile(template)(scope); + group = $compile(template)($rootScope.$new()); }); - document.body.appendChild(panel[0]); - - if (options.content) { - content = panel; - panel = content.find('md-expansion-panel'); - } + document.body.appendChild(group[0]); - panel.scope().$digest(); - return panel; + group.scope().$digest(); + return group; }