Merge branch 'xp-connect-select'

2 files changed, 49 insertions, 43 deletions

diff --git a/test/components/Connect.spec.js b/test/components/Connect.spec.js
index 9c6ed0d109..59079082c5 100644
--- a/test/components/Connect.spec.js
+++ b/test/components/Connect.spec.js
@@ -2,10 +2,9 @@
 
 import { expect } from 'chai';
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 
 import Connect from '../../app/components/Connect';
-import Header from '../../app/components/HeaderBar';
 
 import type { ConnectProps } from '../../app/components/Connect';
 
@@ -19,13 +18,12 @@ describe('components/Connect', () => {
       }
     });
 
-    const header = component.find(Header);
-    const securityMessage = component.find('.connect__status-security--unsecured');
-    const connectButton = component.find('.button .button--positive');
-
+    const header = getComponent(component, 'header');
+    const securityMessage = getComponent(component, 'networkSecurityMessage');
+    const connectButton = getComponent(component, 'secureConnection');
     expect(header.prop('style')).to.equal('error');
-    expect(securityMessage.text().toLowerCase()).to.contain('unsecured');
-    expect(connectButton.text()).to.equal('Secure my connection');
+    expect(securityMessage.html()).to.contain('UNSECURED');
+    expect(connectButton.html()).to.contain('Secure my connection');
   });
 
   it('shows secured hints when connected', () => {
@@ -36,13 +34,12 @@ describe('components/Connect', () => {
       }
     });
 
-    const header = component.find(Header);
-    const securityMessage = component.find('.connect__status-security--secure');
-    const disconnectButton = component.find('.button .button--negative-light');
-
+    const header = getComponent(component, 'header');
+    const securityMessage = getComponent(component, 'networkSecurityMessage');
+    const disconnectButton = getComponent(component, 'disconnect');
     expect(header.prop('style')).to.equal('success');
-    expect(securityMessage.text().toLowerCase()).to.contain('secure');
-    expect(disconnectButton.text()).to.equal('Disconnect');
+    expect(securityMessage.html()).to.contain('SECURE ');
+    expect(disconnectButton.html()).to.contain('Disconnect');
   });
 
   it('shows the connection location when connecting', () => {
@@ -54,12 +51,12 @@ describe('components/Connect', () => {
         city: 'Oslo',
       }
     });
-    const countryAndCity = component.find('.connect__status-location');
-    const ipAddr = component.find('.connect__status-ipaddress');
+    const countryAndCity = getComponent(component, 'location');
+    const ipAddr = getComponent(component, 'ipAddress');
 
-    expect(countryAndCity.text()).to.contain('Norway');
-    expect(countryAndCity.text()).not.to.contain('Oslo');
-    expect(ipAddr.text()).to.be.empty;
+    expect(countryAndCity.html()).to.contain('Norway');
+    expect(countryAndCity.html()).not.to.contain('Oslo');
+    expect(ipAddr.length).to.equal(0);
   });
 
   it('shows the connection location when connected', () => {
@@ -72,12 +69,12 @@ describe('components/Connect', () => {
         ip: '4.3.2.1',
       }
     });
-    const countryAndCity = component.find('.connect__status-location');
-    const ipAddr = component.find('.connect__status-ipaddress');
+    const countryAndCity = getComponent(component, 'location');
+    const ipAddr = getComponent(component, 'ipAddress');
 
-    expect(countryAndCity.text()).to.contain('Norway');
-    expect(countryAndCity.text()).to.contain('Oslo');
-    expect(ipAddr.text()).to.contain('4.3.2.1');
+    expect(countryAndCity.html()).to.contain('Norway');
+    expect(countryAndCity.html()).to.contain('Oslo');
+    expect(ipAddr.html()).to.contain('4.3.2.1');
   });
 
   it('shows the connection location when disconnected', () => {
@@ -90,12 +87,12 @@ describe('components/Connect', () => {
         ip: '4.3.2.1',
       }
     });
-    const countryAndCity = component.find('.connect__status-location');
-    const ipAddr = component.find('.connect__status-ipaddress');
+    const countryAndCity = getComponent(component, 'location');
+    const ipAddr = getComponent(component, 'ipAddress');
 
-    expect(countryAndCity.text()).to.contain('Norway');
-    expect(countryAndCity.text()).to.not.contain('Oslo');
-    expect(ipAddr.text()).to.contain('4.3.2.1');
+    expect(countryAndCity.html()).to.contain('Norway');
+    expect(countryAndCity.html()).to.not.contain('Oslo');
+    expect(ipAddr.html()).to.contain('4.3.2.1');
   });
 
   it('invokes the onConnect prop', (done) => {
@@ -106,9 +103,9 @@ describe('components/Connect', () => {
         status: 'disconnected',
       }
     });
-    const connectButton = component.find('.button .button--positive');
+    const connectButton = getComponent(component, 'secureConnection');
 
-    connectButton.simulate('click');
+    connectButton.prop('onPress')();
   });
 });
 
@@ -134,5 +131,9 @@ const defaultProps: ConnectProps = {
 
 function renderWithProps(customProps: $Shape<ConnectProps>) {
   const props = { ...defaultProps, ...customProps };
-  return mount( <Connect { ...props } /> );
+  return shallow( <Connect { ...props } /> );
 }
+
+function getComponent(container, testName) {
+  return container.findWhere( n => n.prop('testName') === testName);
+}
\ No newline at end of file
diff --git a/test/components/SelectLocation.spec.js b/test/components/SelectLocation.spec.js
index 59a8dc9770..4e2265c6dd 100644
--- a/test/components/SelectLocation.spec.js
+++ b/test/components/SelectLocation.spec.js
@@ -2,7 +2,7 @@
 
 import { expect } from 'chai';
 import * as React from 'react';
-import ReactTestUtils, { Simulate } from 'react-dom/test-utils';
+import { shallow } from 'enzyme';
 import SelectLocation from '../../app/components/SelectLocation';
 
 import type { SettingsReduxState } from '../../app/redux/settings/reducers';
@@ -48,7 +48,7 @@ describe('components/SelectLocation', () => {
   };
 
   const render = (props: SelectLocationProps) => {
-    return ReactTestUtils.renderIntoDocument(
+    return shallow(
       <SelectLocation { ...props } />
     );
   };
@@ -57,11 +57,8 @@ describe('components/SelectLocation', () => {
     const props = makeProps(state, {
       onClose: () => done()
     });
-    const domNode = ReactTestUtils.findRenderedDOMComponentWithClass(render(props), 'select-location__close');
-    // See: https://github.com/facebook/flow/pull/5841
-    if(domNode) {
-      Simulate.click(domNode);
-    }
+    const node = getComponent(render(props), 'close');
+    click(node);
   });
 
   it('should call select callback for country', (done) => {
@@ -77,9 +74,9 @@ describe('components/SelectLocation', () => {
         }
       }
     });
-    const elements = ReactTestUtils.scryRenderedDOMComponentsWithClass(render(props), 'select-location__cell');
+    const elements = getComponent(render(props), 'country');
     expect(elements).to.have.length(1);
-    Simulate.click(elements[0]);
+    click(elements.at(0));
   });
 
   it('should call select callback for city', (done) => {
@@ -95,9 +92,17 @@ describe('components/SelectLocation', () => {
         }
       }
     });
-    const elements = ReactTestUtils.scryRenderedDOMComponentsWithClass(render(props), 'select-location__sub-cell');
+    const elements = getComponent(render(props), 'city');
     expect(elements).to.have.length(2);
-    Simulate.click(elements[0]);
+    click(elements.at(0));
   });
 
 });
+
+function getComponent(container, testName) {
+  return container.findWhere( n => n.prop('testName') === testName);
+}
+
+function click(component) {
+  component.prop('onPress')();
+}