Skip to content

Commit

Permalink
feat(dropdowns): React Dropdown does not need a title
Browse files Browse the repository at this point in the history 
[#116913731]

BREAKING CHANGE: split prop must be passed in to split the dropdown
label and toggle. Previously, providing a toggle would automatically
split the label and toggle.

Signed-off-by: Elena Sharma <esharma@pivotal.io>
  • Loading branch information
William Lindner committed Apr 15, 2016
1 parent c3f259f commit c281cb2
Show file tree
Hide file tree
Showing 6 changed files with 271 additions and 105 deletions.
154 changes: 121 additions & 33 deletions library/spec/pivotal-ui-react/dropdown/dropdown_spec.js
View file
@@ -1,19 +1,19 @@
require('../spec_helper');
import {Dropdown, DropdownItem} from '../../../src/pivotal-ui-react/dropdowns/dropdowns';

describe('Dropdowns', function() {
describe('Dropdowns', () => {
function dropdownTestFor(dropdownComponentName, dropdownClassName) {
describe(dropdownComponentName, function() {
beforeEach(function() {
describe(dropdownComponentName, () => {
beforeEach(() => {
var DropdownClass = require('../../../src/pivotal-ui-react/dropdowns/dropdowns')[dropdownComponentName];
ReactDOM.render(<DropdownClass title="Dropping" buttonClassName="test-btn-class"/>, root);
});

afterEach(function() {
afterEach(() => {
ReactDOM.unmountComponentAtNode(root);
});

it('creates a dropdown', function() {
it('creates a dropdown', () => {
expect('button.dropdown-toggle').toContainText('Dropping');
});

Expand All @@ -25,10 +25,10 @@ describe('Dropdowns', function() {
});
}

describe('Dropdown', function() {
let subject
describe('Dropdown', () => {
let subject;

beforeEach(function() {
beforeEach(() => {
const props = {
className: 'test-class',
id: 'test-id',
Expand All @@ -37,66 +37,154 @@ describe('Dropdowns', function() {
}
};


subject = ReactDOM.render(
<Dropdown title="Dropping" {...props} buttonClassName="test-btn-class">
<DropdownItem href="test">Item #1</DropdownItem>
</Dropdown>, root);
});

afterEach(function() {
afterEach(() => {
ReactDOM.unmountComponentAtNode(root);
});

it('passes through className to the dropdown', function() {
it('passes through className to the dropdown', () => {
expect('.dropdown').toHaveClass('test-class');
});

it('passes through style to the button', function() {
it('passes through style to the button', () => {
expect('.dropdown-toggle').toHaveCss({opacity: '0.5'});
});

it('passes through id to the button', function() {
it('passes through id to the button', () => {
expect('.dropdown-toggle#test-id').toExist();
});

it('creates a dropdown-toggle', () => {
expect('.dropdown-toggle').toContainText('Dropping');
expect('.dropdown-toggle').toHaveClass('btn-default');
expect('.dropdown-toggle').toHaveClass('test-btn-class');
});

it('renders all children DropdownItems', function() {
expect('.dropdown-menu li').toHaveLength(1);
expect('.dropdown-menu li').toHaveText('Item #1');
describe('dropdown menu', () => {
it('shows the children on click', () => {
expect('.dropdown-menu').not.toExist();
$('.dropdown-toggle').simulate('click');
expect('.dropdown-menu li').toHaveLength(1);
expect('.dropdown-menu li').toHaveText('Item #1');
});

describe('hiding children', () => {
it('hides when the toggle is clicked', () => {
$('.dropdown-toggle').simulate('click');
expect('.dropdown-menu').toExist();
$('.dropdown-toggle').simulate('click');
expect('.dropdown-menu').not.toExist();
});

it('hides when clicking outside the dropdown', () => {
$('.dropdown-toggle').simulate('click');
expect('.dropdown-menu').toExist();
const evt = document.createEvent('HTMLEvents');
evt.initEvent('click', true, true );
document.documentElement.dispatchEvent(evt);
expect('.dropdown-menu').not.toExist();
});

describe('when scrim is disabled', () => {
it('does not hide the dropdown menu when clicking outside of the dropdown', () => {
subject::setProps({disableScrim: true});

$('.dropdown-toggle').simulate('click');
expect('.dropdown-menu').toExist();
const evt = document.createEvent('HTMLEvents');
evt.initEvent('click', true, true );
document.documentElement.dispatchEvent(evt);
expect('.dropdown-menu').toExist();
});
});
});
});

describe('split', () => {
it('puts the title in the dropdown label when split is true', () => {
subject::setProps({split: true});
expect('.dropdown-label').toHaveText('Dropping');
expect('.dropdown-toggle').not.toHaveText('Dropping');
describe('when title is provided', () => {
beforeEach(() => {
subject = ReactDOM.render(
<Dropdown title="Dropping" buttonClassName="test-btn-class">
<DropdownItem href="test">Item #1</DropdownItem>
</Dropdown>, root);
});

describe('when toggle is not set', () => {
describe('when split is false', () => {
it('puts the title in the dropdown toggle', () => {
expect('.dropdown-label').not.toExist();
expect('.dropdown-toggle').toHaveText('Dropping');
});
});

describe('when split is true', () => {
beforeEach(() => {
subject::setProps({split: true});
});

it('puts the title in the dropdown label', () => {
expect('.dropdown-label').toHaveText('Dropping');
expect('.dropdown-toggle').not.toHaveText('Dropping');
});
});
});

it('puts the title in the dropdown toggle when split is false', () => {
subject::setProps({split: false});
expect('.dropdown-toggle').toHaveText('Dropping');
describe('when toggle is set', () => {
beforeEach(() => {
subject::setProps({toggle: <div className="foo">★</div>});
});

describe('when split is false', () => {
it('puts the title in the dropdown toggle', () => {
expect('.dropdown-label').not.toExist();
expect('.dropdown-toggle').toHaveText('Dropping★');
});
});

describe('when split is true', () => {
beforeEach(() => {
subject::setProps({split: true});
});

it('puts the title in the dropdown label', () => {
expect('.dropdown-label').toHaveText('Dropping');
expect('.dropdown-toggle').toHaveText('★');
});
});
});
});

describe('toggle', () => {
describe('when title is not provided', () => {
beforeEach(() => {
subject::setProps({title: 'Dropping', toggle: <div className="foo">Toggle!</div>});
subject = ReactDOM.render(
<Dropdown buttonClassName="test-btn-class">
<DropdownItem href="test">Item #1</DropdownItem>
</Dropdown>, root
);
});

it('puts the title in the dropdown label', () => {
expect('.dropdown-label').toHaveText('Dropping');
expect('.dropdown-toggle').not.toHaveText('Dropping');
describe('when toggle is not set', () => {
describe('when split is false', () => {
it('renders the default toggle with no label', () => {
expect('.dropdown-label').not.toExist();
expect('.dropdown-toggle').toExist();
});
});
});

it('puts the custom toggle in the dropdown toggle', () => {
expect('.dropdown-label').not.toHaveText('Toggle!');
expect('.dropdown-toggle').toHaveText('Toggle!');
describe('when toggle is set', () => {
beforeEach(() => {
subject::setProps({toggle: <div className="foo">★</div>});
});
describe('when split is false', () => {
it('renders the custom toggle with no label', () => {
expect('.dropdown-label').not.toExist();
expect('.dropdown-toggle .foo').toHaveText('★');
});
});
});
});
});
Expand Down
14 changes: 11 additions & 3 deletions library/spec/pivotal-ui-react/notification/notification_spec.js
View file
Expand Up @@ -34,6 +34,8 @@ describe('Notification', function() {
<NotificationItem href="my-fo-link">fo</NotificationItem>
<NotificationItem href="my-fum-link">fum</NotificationItem>
</Notifications>), root);

$('.dropdown-toggle').simulate('click');
});

it('passes through the className to the btn-group', function() {
Expand Down Expand Up @@ -85,7 +87,9 @@ describe('Notification', function() {
expect('.dropdown-notifications-title .dropdown-notifications-badge').not.toExist();
});

it('renders the no notification message', function() {
it('renders the no notification message on click', function() {
$('.dropdown-toggle').simulate('click');

expect('.dropdown-menu .dropdown-notifications-none').toContainText('no notifications');
});
});
Expand Down Expand Up @@ -134,7 +138,9 @@ describe('Alert Notifications', function() {
expect('.dropdown-notifications-title .dropdown-notifications-alert').toHaveClass('fa-exclamation-triangle');
});

it('renders the children in a dropdown menu', function() {
it('renders the children in a dropdown menu on click', function() {
$('.dropdown-toggle').simulate('click');

expect('.dropdown-menu a:eq(0)').toContainText('fee');
expect('.dropdown-menu a:eq(0)').toHaveAttr('href', 'my-fee-link');

Expand Down Expand Up @@ -166,7 +172,9 @@ describe('Alert Notifications', function() {
expect('.dropdown-notifications-title .dropdown-notifications-alert').not.toExist();
});

it('renders the no notification message', function() {
it('renders the no notification message on click', function() {
$('.dropdown-toggle').simulate('click');

expect('.dropdown-menu .dropdown-notifications-none').toContainText('no alerts');
});
});
Expand Down

0 comments on commit c281cb2

Please sign in to comment.