Skip to content

Commit 5203d9b

Browse files
interactivellamainteractivellama
authored
Merge pull request #1468 from futuremint/react-16
Support developing with React 16, and as a peer dependency
2 parents b581b39 + f81f3f3 commit 5203d9b

File tree

57 files changed

+2223
-2119
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+2223
-2119
lines changed

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ describe('Accordion', function () {
152152
it('renders an accordion', () => {
153153
wrapper = mount(<AccordionExample />, { attachTo: mountNode });
154154
const accordion = wrapper.find(Accordion);
155-
expect();
155+
expect(accordion).to.be.present;
156156
});
157157

158158
it('renders `panelContentActions` component, if passed', () => {
@@ -179,18 +179,23 @@ describe('Accordion', function () {
179179

180180
it('triggers a change callback on panel select', () => {
181181
wrapper = mount(<AccordionExample />, { attachTo: mountNode });
182-
const panel = wrapper.find('SLDSAccordionPanel').first();
183-
expect(panel.props().expanded).to.be.false;
184-
panel.find('.slds-accordion__summary-action').simulate('click');
185-
expect(panel.props().expanded).to.be.true;
182+
const panel = () => wrapper.find('SLDSAccordionPanel').first();
183+
expect(panel()).to.have.prop('expanded', false);
184+
panel()
185+
.find('button.slds-accordion__summary-action')
186+
.simulate('click');
187+
expect(panel()).to.have.prop('expanded', true);
186188
});
187189

188190
it('`aria-expanded` set to true on panel select', () => {
189191
wrapper = mount(<AccordionExample />, { attachTo: mountNode });
190-
const panel = wrapper.find('SLDSAccordionPanel').first();
191-
const button = panel.find('.slds-accordion__summary-action');
192-
panel.find('.slds-accordion__summary-action').simulate('click');
193-
expect(button.props()['aria-expanded']).to.be.true;
192+
const panel = () => wrapper.find('SLDSAccordionPanel').first();
193+
panel()
194+
.find('button.slds-accordion__summary-action')
195+
.simulate('click');
196+
expect(
197+
panel().find('button.slds-accordion__summary-action')
198+
).to.have.prop('aria-expanded', true);
194199
});
195200
});
196201
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,11 +68,11 @@ describe('SLDSAlert: ', function () {
6868
* It allows access to the Mocha test context via `this`.
6969
*/
7070
it('calls onRequestClose handler', function () {
71-
const button = this.wrapper.find('.slds-notify__close');
71+
const button = this.wrapper.find('button.slds-notify__close');
7272
// If applicable, use second parameter to pass the data object
73-
expect(this.wrapper.find('.slds-notify').length).to.equal(1);
73+
expect(this.wrapper).to.have.state('isOpen', true);
7474
button.simulate('click', {});
75-
expect(this.wrapper.find('.slds-notify').length).to.equal(0);
75+
expect(this.wrapper).to.have.state('isOpen', false);
7676
});
7777
it('calls onClickHeadingLink handler', function () {
7878
const link = this.wrapper.find('a');

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

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ReactModal from 'react-modal';
44
import { expect } from 'chai';
55
import { mount, ReactWrapper } from 'enzyme';
66
import assign from 'lodash.assign';
7-
import TestUtils from 'react-addons-test-utils';
7+
import TestUtils from 'react-dom/test-utils';
88

99
import IconSettings from '../../icon-settings';
1010
import AppLauncher from '../../app-launcher';
@@ -51,17 +51,9 @@ describe('SLDS APP LAUNCHER *******************************************', () =>
5151
'.slds-context-bar__icon-action'
5252
);
5353

54-
/*
55-
* How to write tests for react-modal using portal
56-
* http://remarkablemark.org/blog/2017/05/17/testing-react-modal/
57-
*/
58-
const portalNode = ReactDOM.findDOMNode(
59-
handles.appLauncher.find(ReactModal).node.portal
60-
); // eslint-disable-line react/no-find-dom-node
61-
6254
// Wrap the modal portal in an Enzyme wrapper
6355
handles.modal = new ReactWrapper(
64-
handles.appLauncher.find(ReactModal).node.portal,
56+
handles.appLauncher.find(ReactModal).getElement().portal,
6557
true
6658
);
6759
}
@@ -106,23 +98,21 @@ describe('SLDS APP LAUNCHER *******************************************', () =>
10698
});
10799

108100
it('renders modal', () => {
109-
should.exist(handles.modal);
101+
expect(handles.modal).to.be.present;
110102
});
111103

112104
it('renders custom modal class', () => {
113-
should.exist(handles.modal.find('.custom-modal-class'));
105+
should.exist(handles.appLauncher.find('.custom-modal-class'));
114106
});
115107

116108
it('renders modal header', () => {
117-
should.exist(handles.modal.find('.slds-app-launcher__header'));
109+
should.exist(handles.appLauncher.find('.slds-app-launcher__header'));
118110
});
119111

120112
it('app launcher title can be set', () => {
121-
expect(
122-
handles.modal.contains(
123-
<h2 className="slds-text-heading--medium">App Launcher!</h2>
124-
)
125-
).to.equal(true);
113+
expect(handles.appLauncher).to.contain(
114+
<h2 className="slds-text-heading--medium">App Launcher!</h2>
115+
);
126116
});
127117

128118
it('renders search bar', () => {
@@ -138,12 +128,12 @@ describe('SLDS APP LAUNCHER *******************************************', () =>
138128
});
139129

140130
it('closing modal fires callback', () => {
141-
Simulate.click(handles.modal.find('.slds-modal__close').node);
131+
handles.appLauncher.find('button.slds-modal__close').simulate('click');
142132
expect(onClose.calledOnce).to.be.true; // eslint-disable-line no-unused-expressions
143133
});
144134

145135
it('close modal callback receives original event as arg', () => {
146-
Simulate.click(handles.modal.find('.slds-modal__close').node);
136+
handles.appLauncher.find('button.slds-modal__close').simulate('click');
147137
expect(onClose.args.length).to.equal(1);
148138
});
149139

@@ -156,8 +146,10 @@ describe('SLDS APP LAUNCHER *******************************************', () =>
156146
});
157147

158148
it('app launcher can be passed children', () => {
159-
should.exist(handles.modal.find('SLDSAppLauncherSection'));
160-
expect(handles.modal.find('SLDSAppLauncherTile').length).to.equal(2);
149+
should.exist(handles.appLauncher.find('SLDSAppLauncherSection'));
150+
expect(handles.appLauncher.find('SLDSAppLauncherTile').length).to.equal(
151+
2
152+
);
161153
});
162154
});
163155

@@ -200,18 +192,18 @@ describe('SLDS APP LAUNCHER *******************************************', () =>
200192
});
201193

202194
it('App Launcher Icon link has proper classes', () => {
203-
expect(handles.appLauncherIcon.find('button').node.className).to.include(
204-
'slds-icon-waffle_container slds-context-bar__button'
205-
);
195+
const button = handles.appLauncherIcon.find('button');
196+
expect(button).to.have.className('slds-icon-waffle_container');
197+
expect(button).to.have.className('slds-context-bar__button');
206198
});
207199

208200
it('clicking App Launcher Icon fires callback', () => {
209-
Simulate.click(handles.appLauncherIcon.find('button').node);
201+
handles.appLauncherIcon.find('button').simulate('click');
210202
expect(triggerOnClick.calledOnce).to.be.true; // eslint-disable-line no-unused-expressions
211203
});
212204

213205
it('App Launcher Icon callback receives original event as arg', () => {
214-
Simulate.click(handles.appLauncherIcon.find('button').node);
206+
handles.appLauncherIcon.find('button').simulate('click');
215207
expect(triggerOnClick.args.length).to.equal(1);
216208
});
217209

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { mount } from 'enzyme';
33
import chai from 'chai';
44
import assign from 'lodash.assign';
5-
import TestUtils from 'react-addons-test-utils';
5+
import TestUtils from 'react-dom/test-utils';
66

77
import IconSettings from '../../icon-settings';
88
import AppLauncherTile from '../../app-launcher/tile';
@@ -61,7 +61,7 @@ describe('SLDS APP LAUNCHER SECTION *******************************************'
6161
});
6262

6363
it('modal section has "slds-is-open" class when open', () => {
64-
expect(handles.section.find('.slds-section').node.className).to.include(
64+
expect(handles.section.find('.slds-section')).to.have.className(
6565
'slds-is-open'
6666
);
6767
});
@@ -81,9 +81,11 @@ describe('SLDS APP LAUNCHER SECTION *******************************************'
8181
});
8282

8383
it('renders li with proper classes', () => {
84-
expect(handles.section.find('li').at(0).node.className).to.include(
85-
'slds-col--padded slds-grow-none slds-size--1-of-1 slds-medium-size--1-of-3'
86-
);
84+
const li = handles.section.find('li').at(0);
85+
expect(li).to.have.className('slds-col--padded');
86+
expect(li).to.have.className('slds-grow-none');
87+
expect(li).to.have.className('slds-size--1-of-1');
88+
expect(li).to.have.className('slds-medium-size--1-of-3');
8789
});
8890

8991
it('renders custom section title', () => {
@@ -97,7 +99,7 @@ describe('SLDS APP LAUNCHER SECTION *******************************************'
9799
});
98100

99101
it('toggling section fires callback', () => {
100-
Simulate.click(handles.section.find('.slds-button').node);
102+
handles.section.find('.slds-button').simulate('click');
101103
expect(onToggleClick.calledOnce).to.be.true; // eslint-disable-line no-unused-expressions
102104
});
103105
});

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

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { mount } from 'enzyme';
33
import chai from 'chai';
44
import assign from 'lodash.assign';
5-
import TestUtils from 'react-addons-test-utils';
5+
import TestUtils from 'react-dom/test-utils';
66
import IconSettings from '../../icon-settings';
77

88
import AppLauncherTile from '../../app-launcher/tile';
@@ -116,13 +116,14 @@ describe('SLDS APP LAUNCHER TILE *******************************************', (
116116
});
117117

118118
it('has an href attribute', () => {
119-
expect(handles.tile.find('a').node.href).to.equal(
119+
expect(handles.tile.find('a')).to.have.attr(
120+
'href',
120121
'https://www.marketingcloud.com/'
121122
);
122123
});
123124

124125
it('clicking tile fires callback', () => {
125-
Simulate.click(handles.tile.find('a').node);
126+
handles.tile.find('a').simulate('click');
126127
expect(onClick.calledOnce).to.be.true; // eslint-disable-line no-unused-expressions
127128
});
128129

@@ -132,7 +133,7 @@ describe('SLDS APP LAUNCHER TILE *******************************************', (
132133

133134
it('tile can be passed a search string', () => {
134135
const searchStr = handles.tile;
135-
const childrenProps = searchStr.component.props.props.children.props;
136+
const childrenProps = searchStr.props().children.props;
136137
expect(childrenProps.search).to.equal('upport');
137138
});
138139

@@ -185,15 +186,15 @@ describe('SLDS APP LAUNCHER TILE *******************************************', (
185186
// const clonedNodeWithoutSpan = clonedNode.firstChild.remove();
186187
// console.log(clonedNode);
187188

188-
expect(handles.more.node.textContent).to.equal(`${moreLabel}`);
189+
expect(handles.more.text()).to.equal(`${moreLabel}`);
189190
});
190191

191192
it('long descriptions use Tooltip activated by hover', () => {
192193
// this test causes the tooltip to 'flash' on the testing page http://localhost:8001/
193-
Simulate.mouseEnter(handles.more.node, {});
194+
handles.more.simulate('mouseenter');
194195
// uses portal mount
195196
should.exist(document.querySelector('.slds-popover--tooltip'));
196-
Simulate.mouseLeave(handles.more.node, {});
197+
handles.more.simulate('mouseleave');
197198
});
198199

199200
it('search string highlights tooltip content', () => {
@@ -223,9 +224,11 @@ describe('SLDS APP LAUNCHER TILE *******************************************', (
223224
});
224225

225226
it('renders text icon with proper classes', () => {
226-
expect(handles.icon.find('span').node.className).to.include(
227-
'slds-avatar slds-avatar--large slds-align--absolute-center slds-icon-custom-27'
228-
);
227+
const icon = handles.icon.find('span');
228+
expect(icon).to.have.className('slds-avatar');
229+
expect(icon).to.have.className('slds-avatar--large');
230+
expect(icon).to.have.className('slds-align--absolute-center');
231+
expect(icon).to.have.className('slds-icon-custom-27');
229232
});
230233

231234
it('tile can be passed a custom text icon', () => {
@@ -248,8 +251,8 @@ describe('SLDS APP LAUNCHER TILE *******************************************', (
248251
cleanDom();
249252
});
250253

251-
it('renders <Icon> node', () => {
252-
expect(handles.icon.find('span').node.className).to.include(
254+
it('renders <Icon>', () => {
255+
expect(handles.icon.find('span')).to.have.className(
253256
'slds-icon_container'
254257
);
255258
});

0 commit comments

Comments
 (0)