Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

fix(accordion): apply disabled style to accordion-header #3599

Closed
wants to merge 1 commit into from
Closed

fix(accordion): apply disabled style to accordion-header #3599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/accordion/accordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@ angular.module('ui.bootstrap.accordion', ['ui.bootstrap.collapse'])
link: function(scope, element, attr, controller) {
scope.$watch(function() { return controller[attr.accordionTransclude]; }, function(heading) {
if ( heading ) {
element.html('');
element.append(heading);
element.find('span').html('');
element.find('span').append(heading);
}
});
}
Expand Down
90 changes: 59 additions & 31 deletions src/accordion/test/accordion.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,10 +126,10 @@ describe('accordion', function () {
describe('with static panels', function () {
beforeEach(function () {
var tpl =
'<accordion>' +
'<accordion-group heading="title 1">Content 1</accordion-group>' +
'<accordion-group heading="title 2">Content 2</accordion-group>' +
'</accordion>';
'<accordion>' +
'<accordion-group heading="title 1">Content 1</accordion-group>' +
'<accordion-group heading="title 2">Content 2</accordion-group>' +
'</accordion>';
element = angular.element(tpl);
$compile(element)(scope);
scope.$digest();
Expand Down Expand Up @@ -172,9 +172,9 @@ describe('accordion', function () {
var model;
beforeEach(function () {
var tpl =
'<accordion>' +
'<accordion-group ng-repeat="group in groups" heading="{{group.name}}">{{group.content}}</accordion-group>' +
'</accordion>';
'<accordion>' +
'<accordion-group ng-repeat="group in groups" heading="{{group.name}}">{{group.content}}</accordion-group>' +
'</accordion>';
element = angular.element(tpl);
model = [
{name: 'title 1', content: 'Content 1'},
Expand Down Expand Up @@ -217,10 +217,10 @@ describe('accordion', function () {
describe('is-open attribute', function() {
beforeEach(function () {
var tpl =
'<accordion>' +
'<accordion-group heading="title 1" is-open="open.first">Content 1</accordion-group>' +
'<accordion-group heading="title 2" is-open="open.second">Content 2</accordion-group>' +
'</accordion>';
'<accordion>' +
'<accordion-group heading="title 1" is-open="open.first">Content 1</accordion-group>' +
'<accordion-group heading="title 2" is-open="open.second">Content 2</accordion-group>' +
'</accordion>';
element = angular.element(tpl);
scope.open = { first: false, second: true };
$compile(element)(scope);
Expand All @@ -247,10 +247,10 @@ describe('accordion', function () {
describe('is-open attribute with dynamic content', function() {
beforeEach(function () {
var tpl =
'<accordion>' +
'<accordion-group heading="title 1" is-open="open1"><div ng-repeat="item in items">{{item}}</div></accordion-group>' +
'<accordion-group heading="title 2" is-open="open2">Static content</accordion-group>' +
'</accordion>';
'<accordion>' +
'<accordion-group heading="title 1" is-open="open1"><div ng-repeat="item in items">{{item}}</div></accordion-group>' +
'<accordion-group heading="title 2" is-open="open2">Static content</accordion-group>' +
'</accordion>';
element = angular.element(tpl);
scope.items = ['Item 1', 'Item 2', 'Item 3'];
scope.open1 = true;
Expand All @@ -274,9 +274,9 @@ describe('accordion', function () {
describe('is-open attribute with dynamic groups', function () {
beforeEach(function () {
var tpl =
'<accordion>' +
'<accordion-group ng-repeat="group in groups" heading="{{group.name}}" is-open="group.open">{{group.content}}</accordion-group>' +
'</accordion>';
'<accordion>' +
'<accordion-group ng-repeat="group in groups" heading="{{group.name}}" is-open="group.open">{{group.content}}</accordion-group>' +
'</accordion>';
element = angular.element(tpl);
scope.groups = [
{name: 'title 1', content: 'Content 1', open: false},
Expand Down Expand Up @@ -310,9 +310,9 @@ describe('accordion', function () {
var groupBody;
beforeEach(function () {
var tpl =
'<accordion>' +
'<accordion-group heading="title 1" is-disabled="disabled">Content 1</accordion-group>' +
'</accordion>';
'<accordion>' +
'<accordion-group heading="title 1" is-disabled="disabled">Content 1</accordion-group>' +
'</accordion>';
element = angular.element(tpl);
scope.disabled = true;
$compile(element)(scope);
Expand Down Expand Up @@ -340,17 +340,38 @@ describe('accordion', function () {
scope.$digest();
expect(groupBody.scope().isOpen).toBeTruthy();
});

it('should have text-muted styling', function () {
expect(findGroupLink(0).find('span:first')).toHaveClass('text-muted');
});
});

// This is re-used in both the accordion-heading element and the accordion-heading attribute tests
function isDisabledStyleCheck() {
var tpl =
'<accordion ng-init="a = [1,2,3]">' +
'<accordion-group heading="I get overridden" is-disabled="true">' +
'<accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </accordion-heading>' +
'Body' +
'</accordion-group>' +
'</accordion>';
scope.disabled = true;
element = $compile(tpl)(scope);
scope.$digest();
groups = element.find('.panel');

expect(findGroupLink(0).find('span').hasClass('text-muted')).toBe(true);
}

describe('accordion-heading element', function() {
beforeEach(function() {
var tpl =
'<accordion ng-init="a = [1,2,3]">' +
'<accordion-group heading="I get overridden">' +
'<accordion ng-init="a = [1,2,3]">' +
'<accordion-group heading="I get overridden">' +
'<accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </accordion-heading>' +
'Body' +
'</accordion-group>' +
'</accordion>';
'</accordion-group>' +
'</accordion>';
element = $compile(tpl)(scope);
scope.$digest();
groups = element.find('.panel');
Expand All @@ -359,20 +380,25 @@ describe('accordion', function () {
expect(findGroupLink(0).text()).toBe('Heading Element 123 ');
});
it('attaches the same scope to the transcluded heading and body', function() {
expect(findGroupLink(0).find('span').scope().$id).toBe(findGroupBody(0).find('span').scope().$id);
expect(findGroupLink(0).find('span.ng-scope').scope().$id).toBe(findGroupBody(0).find('span').scope().$id);
});
it('should wrap the transcluded content in a span', function () {
expect(findGroupLink(0).find('span:first').length).toEqual(1);
});

it('should have disabled styling when is-disabled is true', isDisabledStyleCheck);

});

describe('accordion-heading attribute', function() {
beforeEach(function() {
var tpl =
'<accordion ng-init="a = [1,2,3]">' +
'<accordion-group heading="I get overridden">' +
'<accordion ng-init="a = [1,2,3]">' +
'<accordion-group heading="I get overridden">' +
'<div accordion-heading>Heading Element <span ng-repeat="x in a">{{x}}</span> </div>' +
'Body' +
'</accordion-group>' +
'</accordion>';
'</accordion-group>' +
'</accordion>';
element = $compile(tpl)(scope);
scope.$digest();
groups = element.find('.panel');
Expand All @@ -381,9 +407,11 @@ describe('accordion', function () {
expect(findGroupLink(0).text()).toBe('Heading Element 123 ');
});
it('attaches the same scope to the transcluded heading and body', function() {
expect(findGroupLink(0).find('span').scope().$id).toBe(findGroupBody(0).find('span').scope().$id);
expect(findGroupLink(0).find('span.ng-scope').scope().$id).toBe(findGroupBody(0).find('span').scope().$id);
});

it('should have disabled styling when is-disabled is true', isDisabledStyleCheck);

});

describe('accordion-heading, with repeating accordion-groups', function() {
Expand Down