Support developing with React 16, and as a peer dependency

components/accordion/__tests__/accordion.browser-test.jsx

@@ -152,7 +152,7 @@ describe('Accordion', function () {
 		it('renders an accordion', () => {
 			wrapper = mount(<AccordionExample />, { attachTo: mountNode });
 			const accordion = wrapper.find(Accordion);
-			expect();
+			expect(accordion).to.be.present;
 		});
 
 		it('renders `panelContentActions` component, if passed', () => {
@@ -179,18 +179,23 @@ describe('Accordion', function () {
 
 		it('triggers a change callback on panel select', () => {
 			wrapper = mount(<AccordionExample />, { attachTo: mountNode });
-			const panel = wrapper.find('SLDSAccordionPanel').first();
-			expect(panel.props().expanded).to.be.false;
-			panel.find('.slds-accordion__summary-action').simulate('click');
-			expect(panel.props().expanded).to.be.true;
+			const panel = () => wrapper.find('SLDSAccordionPanel').first();
+			expect(panel()).to.have.prop('expanded', false);
+			panel()
+				.find('button.slds-accordion__summary-action')
+				.simulate('click');
+			expect(panel()).to.have.prop('expanded', true);
 		});
 
 		it('`aria-expanded` set to true on panel select', () => {
 			wrapper = mount(<AccordionExample />, { attachTo: mountNode });
-			const panel = wrapper.find('SLDSAccordionPanel').first();
-			const button = panel.find('.slds-accordion__summary-action');
-			panel.find('.slds-accordion__summary-action').simulate('click');
-			expect(button.props()['aria-expanded']).to.be.true;
+			const panel = () => wrapper.find('SLDSAccordionPanel').first();
+			panel()
+				.find('button.slds-accordion__summary-action')
+				.simulate('click');
+			expect(
+				panel().find('button.slds-accordion__summary-action')
+			).to.have.prop('aria-expanded', true);
 		});
 	});
 });

components/alert/__tests__/alert.browser-test.jsx

@@ -68,11 +68,11 @@ describe('SLDSAlert: ', function () {
 		 * It allows access to the Mocha test context via `this`.
 		 */
 		it('calls onRequestClose handler', function () {
-			const button = this.wrapper.find('.slds-notify__close');
+			const button = this.wrapper.find('button.slds-notify__close');
 			// If applicable, use second parameter to pass the data object
-			expect(this.wrapper.find('.slds-notify').length).to.equal(1);
+			expect(this.wrapper).to.have.state('isOpen', true);
 			button.simulate('click', {});
-			expect(this.wrapper.find('.slds-notify').length).to.equal(0);
+			expect(this.wrapper).to.have.state('isOpen', false);
 		});
 		it('calls onClickHeadingLink handler', function () {
 			const link = this.wrapper.find('a');

components/app-launcher/__tests__/app-launcher.browser-test.jsx

@@ -4,7 +4,7 @@ import ReactModal from 'react-modal';
 import { expect } from 'chai';
 import { mount, ReactWrapper } from 'enzyme';
 import assign from 'lodash.assign';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
 
 import IconSettings from '../../icon-settings';
 import AppLauncher from '../../app-launcher';
@@ -51,17 +51,9 @@ describe('SLDS APP LAUNCHER *******************************************', () =>
 			'.slds-context-bar__icon-action'
 		);
 
-		/*
-		 * How to write tests for react-modal using portal
-		 * http://remarkablemark.org/blog/2017/05/17/testing-react-modal/
-		 */
-		const portalNode = ReactDOM.findDOMNode(
-			handles.appLauncher.find(ReactModal).node.portal
-		); // eslint-disable-line react/no-find-dom-node
-
 		// Wrap the modal portal in an Enzyme wrapper
 		handles.modal = new ReactWrapper(
-			handles.appLauncher.find(ReactModal).node.portal,
+			handles.appLauncher.find(ReactModal).getElement().portal,
 			true
 		);
 	}
@@ -106,23 +98,21 @@ describe('SLDS APP LAUNCHER *******************************************', () =>
 		});
 
 		it('renders modal', () => {
-			should.exist(handles.modal);
+			expect(handles.modal).to.be.present;
 		});
 
 		it('renders custom modal class', () => {
-			should.exist(handles.modal.find('.custom-modal-class'));
+			should.exist(handles.appLauncher.find('.custom-modal-class'));
 		});
 
 		it('renders modal header', () => {
-			should.exist(handles.modal.find('.slds-app-launcher__header'));
+			should.exist(handles.appLauncher.find('.slds-app-launcher__header'));
 		});
 
 		it('app launcher title can be set', () => {
-			expect(
-				handles.modal.contains(
-					<h2 className="slds-text-heading--medium">App Launcher!</h2>
-				)
-			).to.equal(true);
+			expect(handles.appLauncher).to.contain(
+				<h2 className="slds-text-heading--medium">App Launcher!</h2>
+			);
 		});
 
 		it('renders search bar', () => {
@@ -138,12 +128,12 @@ describe('SLDS APP LAUNCHER *******************************************', () =>
 		});
 
 		it('closing modal fires callback', () => {
-			Simulate.click(handles.modal.find('.slds-modal__close').node);
+			handles.appLauncher.find('button.slds-modal__close').simulate('click');
 			expect(onClose.calledOnce).to.be.true; // eslint-disable-line no-unused-expressions
 		});
 
 		it('close modal callback receives original event as arg', () => {
-			Simulate.click(handles.modal.find('.slds-modal__close').node);
+			handles.appLauncher.find('button.slds-modal__close').simulate('click');
 			expect(onClose.args.length).to.equal(1);
 		});
 
@@ -156,8 +146,10 @@ describe('SLDS APP LAUNCHER *******************************************', () =>
 		});
 
 		it('app launcher can be passed children', () => {
-			should.exist(handles.modal.find('SLDSAppLauncherSection'));
-			expect(handles.modal.find('SLDSAppLauncherTile').length).to.equal(2);
+			should.exist(handles.appLauncher.find('SLDSAppLauncherSection'));
+			expect(handles.appLauncher.find('SLDSAppLauncherTile').length).to.equal(
+				2
+			);
 		});
 	});
 
@@ -200,18 +192,18 @@ describe('SLDS APP LAUNCHER *******************************************', () =>
 		});
 
 		it('App Launcher Icon link has proper classes', () => {
-			expect(handles.appLauncherIcon.find('button').node.className).to.include(
-				'slds-icon-waffle_container slds-context-bar__button'
-			);
+			const button = handles.appLauncherIcon.find('button');
+			expect(button).to.have.className('slds-icon-waffle_container');
+			expect(button).to.have.className('slds-context-bar__button');
 		});
 
 		it('clicking App Launcher Icon fires callback', () => {
-			Simulate.click(handles.appLauncherIcon.find('button').node);
+			handles.appLauncherIcon.find('button').simulate('click');
 			expect(triggerOnClick.calledOnce).to.be.true; // eslint-disable-line no-unused-expressions
 		});
 
 		it('App Launcher Icon callback receives original event as arg', () => {
-			Simulate.click(handles.appLauncherIcon.find('button').node);
+			handles.appLauncherIcon.find('button').simulate('click');
 			expect(triggerOnClick.args.length).to.equal(1);
 		});
 

components/app-launcher/__tests__/section.browser-test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import chai from 'chai';
 import assign from 'lodash.assign';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
 
 import IconSettings from '../../icon-settings';
 import AppLauncherTile from '../../app-launcher/tile';
@@ -61,7 +61,7 @@ describe('SLDS APP LAUNCHER SECTION *******************************************'
 		});
 
 		it('modal section has "slds-is-open" class when open', () => {
-			expect(handles.section.find('.slds-section').node.className).to.include(
+			expect(handles.section.find('.slds-section')).to.have.className(
 				'slds-is-open'
 			);
 		});
@@ -81,9 +81,11 @@ describe('SLDS APP LAUNCHER SECTION *******************************************'
 		});
 
 		it('renders li with proper classes', () => {
-			expect(handles.section.find('li').at(0).node.className).to.include(
-				'slds-col--padded slds-grow-none slds-size--1-of-1 slds-medium-size--1-of-3'
-			);
+			const li = handles.section.find('li').at(0);
+			expect(li).to.have.className('slds-col--padded');
+			expect(li).to.have.className('slds-grow-none');
+			expect(li).to.have.className('slds-size--1-of-1');
+			expect(li).to.have.className('slds-medium-size--1-of-3');
 		});
 
 		it('renders custom section title', () => {
@@ -97,7 +99,7 @@ describe('SLDS APP LAUNCHER SECTION *******************************************'
 		});
 
 		it('toggling section fires callback', () => {
-			Simulate.click(handles.section.find('.slds-button').node);
+			handles.section.find('.slds-button').simulate('click');
 			expect(onToggleClick.calledOnce).to.be.true; // eslint-disable-line no-unused-expressions
 		});
 	});

components/app-launcher/__tests__/tile.browser-test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import chai from 'chai';
 import assign from 'lodash.assign';
-import TestUtils from 'react-addons-test-utils';
+import TestUtils from 'react-dom/test-utils';
 import IconSettings from '../../icon-settings';
 
 import AppLauncherTile from '../../app-launcher/tile';
@@ -116,13 +116,14 @@ describe('SLDS APP LAUNCHER TILE *******************************************', (
 		});
 
 		it('has an href attribute', () => {
-			expect(handles.tile.find('a').node.href).to.equal(
+			expect(handles.tile.find('a')).to.have.attr(
+				'href',
 				'https://www.marketingcloud.com/'
 			);
 		});
 
 		it('clicking tile fires callback', () => {
-			Simulate.click(handles.tile.find('a').node);
+			handles.tile.find('a').simulate('click');
 			expect(onClick.calledOnce).to.be.true; // eslint-disable-line no-unused-expressions
 		});
 
@@ -132,7 +133,7 @@ describe('SLDS APP LAUNCHER TILE *******************************************', (
 
 		it('tile can be passed a search string', () => {
 			const searchStr = handles.tile;
-			const childrenProps = searchStr.component.props.props.children.props;
+			const childrenProps = searchStr.props().children.props;
 			expect(childrenProps.search).to.equal('upport');
 		});
 
@@ -185,15 +186,15 @@ describe('SLDS APP LAUNCHER TILE *******************************************', (
 			// const clonedNodeWithoutSpan = clonedNode.firstChild.remove();
 			// console.log(clonedNode);
 
-			expect(handles.more.node.textContent).to.equal(`${moreLabel}`);
+			expect(handles.more.text()).to.equal(`${moreLabel}`);
 		});
 
 		it('long descriptions use Tooltip activated by hover', () => {
 			// this test causes the tooltip to 'flash' on the testing page http://localhost:8001/
-			Simulate.mouseEnter(handles.more.node, {});
+			handles.more.simulate('mouseenter');
 			// uses portal mount
 			should.exist(document.querySelector('.slds-popover--tooltip'));
-			Simulate.mouseLeave(handles.more.node, {});
+			handles.more.simulate('mouseleave');
 		});
 
 		it('search string highlights tooltip content', () => {
@@ -223,9 +224,11 @@ describe('SLDS APP LAUNCHER TILE *******************************************', (
 		});
 
 		it('renders text icon with proper classes', () => {
-			expect(handles.icon.find('span').node.className).to.include(
-				'slds-avatar slds-avatar--large slds-align--absolute-center slds-icon-custom-27'
-			);
+			const icon = handles.icon.find('span');
+			expect(icon).to.have.className('slds-avatar');
+			expect(icon).to.have.className('slds-avatar--large');
+			expect(icon).to.have.className('slds-align--absolute-center');
+			expect(icon).to.have.className('slds-icon-custom-27');
 		});
 
 		it('tile can be passed a custom text icon', () => {
@@ -248,8 +251,8 @@ describe('SLDS APP LAUNCHER TILE *******************************************', (
 			cleanDom();
 		});
 
-		it('renders <Icon> node', () => {
-			expect(handles.icon.find('span').node.className).to.include(
+		it('renders <Icon>', () => {
+			expect(handles.icon.find('span')).to.have.className(
 				'slds-icon_container'
 			);
 		});