Merge pull request #1654 from arrlancore/Refactor/MeasurementText--St…

…reetMetaGeoTag--SegementLabelContainer Refactor for measurement text & street meta geo tag & segement label container
streetmix · Nov 15, 2019 · b2dfe6c · b2dfe6c
2 parents 0d928c9 + 2eb0a5a
commit b2dfe6c
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 133 deletions.
diff --git a/assets/scripts/segments/__tests__/SegmentLabelContainer.test.js b/assets/scripts/segments/__tests__/SegmentLabelContainer.test.js
@@ -1,8 +1,11 @@
 /* eslint-env jest */
 import React from 'react'
-import { shallow } from 'enzyme'
 import SegmentLabelContainer from '../SegmentLabelContainer'
-import { SETTINGS_UNITS_IMPERIAL, SETTINGS_UNITS_METRIC } from '../../users/constants'
+import {
+  SETTINGS_UNITS_IMPERIAL,
+  SETTINGS_UNITS_METRIC
+} from '../../users/constants'
+import { renderWithReduxAndIntl } from '../../../../test/helpers/render'
 
 const testProps = {
   label: 'foo',
@@ -13,28 +16,42 @@ const testProps = {
 
 describe('SegmentLabelContainer', () => {
   it('renders string label', () => {
-    const wrapper = shallow(<SegmentLabelContainer {...testProps} label="bar" />)
-    expect(wrapper).toMatchSnapshot()
+    const { asFragment } = renderWithReduxAndIntl(
+      <SegmentLabelContainer {...testProps} label="bar" />
+    )
+    expect(asFragment()).toMatchSnapshot()
   })
 
   it('renders React element label', () => {
     const TestComponent = <span>bar</span>
-    const wrapper = shallow(<SegmentLabelContainer {...testProps} label={TestComponent} />)
-    expect(wrapper).toMatchSnapshot()
+    const { asFragment } = renderWithReduxAndIntl(
+      <SegmentLabelContainer {...testProps} label={TestComponent} />
+    )
+    expect(asFragment()).toMatchSnapshot()
   })
 
   it('renders correct grid styling in metric', () => {
-    const wrapper = shallow(<SegmentLabelContainer {...testProps} />)
-    expect(wrapper).toMatchSnapshot()
+    const { asFragment } = renderWithReduxAndIntl(
+      <SegmentLabelContainer {...testProps} />
+    )
+    expect(asFragment()).toMatchSnapshot()
   })
 
   it('renders correct grid styling in imperial', () => {
-    const wrapper = shallow(<SegmentLabelContainer {...testProps} units={SETTINGS_UNITS_IMPERIAL} />)
-    expect(wrapper).toMatchSnapshot()
+    const { asFragment } = renderWithReduxAndIntl(
+      <SegmentLabelContainer {...testProps} units={SETTINGS_UNITS_IMPERIAL} />
+    )
+    expect(asFragment()).toMatchSnapshot()
   })
 
   it('renders editable label', () => {
-    const wrapper = shallow(<SegmentLabelContainer {...testProps} editable editSegmentLabel={() => {}} />)
-    expect(wrapper).toMatchSnapshot()
+    const { asFragment } = renderWithReduxAndIntl(
+      <SegmentLabelContainer
+        {...testProps}
+        editable
+        editSegmentLabel={() => {}}
+      />
+    )
+    expect(asFragment()).toMatchSnapshot()
   })
 })
diff --git a/assets/scripts/segments/__tests__/__snapshots__/SegmentLabelContainer.test.js.snap b/assets/scripts/segments/__tests__/__snapshots__/SegmentLabelContainer.test.js.snap
@@ -1,123 +1,123 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SegmentLabelContainer renders React element label 1`] = `
-<div
-  className="segment-label-container"
->
-  <span
-    className="segment-label"
+<DocumentFragment>
+  <div
+    class="segment-label-container"
   >
-    <span>
-      bar
+    <span
+      class="segment-label"
+    >
+      <span>
+        bar
+      </span>
     </span>
-  </span>
-  <span
-    className="segment-width"
-  >
-    <Memo()
-      locale="en"
-      units={2}
-      value={1}
+    <span
+      class="segment-width"
+    >
+      <span>
+        0.3 m
+      </span>
+    </span>
+    <span
+      class="segment-grid units-metric"
     />
-  </span>
-  <span
-    className="segment-grid units-metric"
-  />
-</div>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`SegmentLabelContainer renders correct grid styling in imperial 1`] = `
-<div
-  className="segment-label-container"
->
-  <span
-    className="segment-label"
-  >
-    foo
-  </span>
-  <span
-    className="segment-width"
+<DocumentFragment>
+  <div
+    class="segment-label-container"
   >
-    <Memo()
-      locale="en"
-      units={1}
-      value={1}
+    <span
+      class="segment-label"
+    >
+      foo
+    </span>
+    <span
+      class="segment-width"
+    >
+      <span>
+        1′
+      </span>
+    </span>
+    <span
+      class="segment-grid units-imperial"
     />
-  </span>
-  <span
-    className="segment-grid units-imperial"
-  />
-</div>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`SegmentLabelContainer renders correct grid styling in metric 1`] = `
-<div
-  className="segment-label-container"
->
-  <span
-    className="segment-label"
+<DocumentFragment>
+  <div
+    class="segment-label-container"
   >
-    foo
-  </span>
-  <span
-    className="segment-width"
-  >
-    <Memo()
-      locale="en"
-      units={2}
-      value={1}
+    <span
+      class="segment-label"
+    >
+      foo
+    </span>
+    <span
+      class="segment-width"
+    >
+      <span>
+        0.3 m
+      </span>
+    </span>
+    <span
+      class="segment-grid units-metric"
     />
-  </span>
-  <span
-    className="segment-grid units-metric"
-  />
-</div>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`SegmentLabelContainer renders editable label 1`] = `
-<div
-  className="segment-label-container"
->
-  <span
-    className="segment-label"
-  >
-    foo
-  </span>
-  <span
-    className="segment-width"
+<DocumentFragment>
+  <div
+    class="segment-label-container"
   >
-    <Memo()
-      locale="en"
-      units={2}
-      value={1}
+    <span
+      class="segment-label"
+    >
+      foo
+    </span>
+    <span
+      class="segment-width"
+    >
+      <span>
+        0.3 m
+      </span>
+    </span>
+    <span
+      class="segment-grid units-metric"
     />
-  </span>
-  <span
-    className="segment-grid units-metric"
-  />
-</div>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`SegmentLabelContainer renders string label 1`] = `
-<div
-  className="segment-label-container"
->
-  <span
-    className="segment-label"
+<DocumentFragment>
+  <div
+    class="segment-label-container"
   >
-    bar
-  </span>
-  <span
-    className="segment-width"
-  >
-    <Memo()
-      locale="en"
-      units={2}
-      value={1}
+    <span
+      class="segment-label"
+    >
+      bar
+    </span>
+    <span
+      class="segment-width"
+    >
+      <span>
+        0.3 m
+      </span>
+    </span>
+    <span
+      class="segment-grid units-metric"
     />
-  </span>
-  <span
-    className="segment-grid units-metric"
-  />
-</div>
+  </div>
+</DocumentFragment>
 `;
diff --git a/assets/scripts/streets/__tests__/StreetMetaGeotag.test.js b/assets/scripts/streets/__tests__/StreetMetaGeotag.test.js
@@ -1,16 +1,14 @@
 /* eslint-env jest */
 import React from 'react'
 import StreetMetaGeotag from '../StreetMetaGeotag'
-import { shallow } from 'enzyme'
+import { renderWithReduxAndIntl } from '../../../../test/helpers/render'
 
 describe('StreetMetaGeotag', () => {
   it('renders without crashing', () => {
-    const wrapper = shallow(
-      <StreetMetaGeotag.WrappedComponent
-        street={{}}
-      />
+    const { container } = renderWithReduxAndIntl(
+      <StreetMetaGeotag.WrappedComponent street={{}} />
     )
-    expect(wrapper.exists()).toEqual(true)
+    expect(container.childNodes).toBeDefined()
   })
 
   describe('geotag label', () => {
@@ -24,29 +22,31 @@ describe('StreetMetaGeotag', () => {
         }
       }
 
-      const wrapper = shallow(
+      const { container } = renderWithReduxAndIntl(
         <StreetMetaGeotag.WrappedComponent
           street={testStreet}
           editable={false}
           enableLocation
           locale={{}}
         />
       )
-
-      expect(wrapper.find('.street-metadata-map a').length).toEqual(0)
+      expect(
+        container.querySelectorAll('.street-metadata-map a').length
+      ).toEqual(0)
     })
 
     it('does not display geotag label if no location and application is read only', () => {
-      const wrapper = shallow(
+      const { container } = renderWithReduxAndIntl(
         <StreetMetaGeotag.WrappedComponent
           street={{}}
           editable={false}
           enableLocation
           locale={{}}
         />
       )
-
-      expect(wrapper.find('.street-metadata-map').length).toEqual(0)
+      expect(container.querySelectorAll('.street-metadata-map').length).toEqual(
+        0
+      )
     })
 
     it.todo('displays the correct label for a given location hierarchy')