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;
}