Skip to content

Commit

Permalink
added tests for $mdExpansionPanelGroup
Browse files Browse the repository at this point in the history 
update readme
  • Loading branch information
Ben Rubin authored and Ben Rubin committed Jul 2, 2016
1 parent c1cd958 commit 451d2dc
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 35 deletions.
3 changes: 1 addition & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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


<div style="border: 1px solid #ccc">
Expand Down
195 changes: 162 additions & 33 deletions src/expansionPanels.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
describe('material.components.expansionPanels', function () {
var panel;
var group;
var scope;
var content;
var $mdUtil;
Expand Down Expand Up @@ -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;
Expand All @@ -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;

Expand All @@ -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();
Expand All @@ -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);
Expand All @@ -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);
}));

});

Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -511,8 +611,29 @@ describe('material.components.expansionPanels', function () {
function getDirective(options) {
options = options || {};

var template = $mdUtil.supplant('{2}' +
'<md-expansion-panel {0} md-component-id="expansionPanelId">'+
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}' +
'<md-expansion-panel {0}{6}>'+
'><md-expansion-panel-collapsed>'+
'<div class="md-title">Title</div>'+
'<div class="md-summary">Summary</div>'+
Expand Down Expand Up @@ -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('' +
'<md-expansion-panel-group {0} {1} md-component-id="expansionPanelGroupId">'+
'</md-expansion-panel-group>',
[
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;
}


Expand Down

0 comments on commit 451d2dc

Please sign in to comment.