Merge pull request namespace-ee#525 from gaston-niglia/fix/unsubscribing-markers

TimelineMarkers: Unsubscribing markers correctly when hidden

Author: Ilaiwi

__tests__/components/Markers/TimelineMarkers.test.js

@@ -3,6 +3,7 @@ import { render } from 'react-testing-library'
 import 'jest-dom/extend-expect'
 import TimelineMarkers from 'lib/markers/public/TimelineMarkers'
 import TodayMarker from 'lib/markers/public/TodayMarker'
+import CustomMarker from 'lib/markers/public/CustomMarker'
 import { RenderWrapper } from 'test-utility/marker-renderer'
 
 describe('TimelineMarkers', () => {
@@ -23,4 +24,27 @@ describe('TimelineMarkers', () => {
       </RenderWrapper>
     )
   })
+
+  it('is unsubscribed on unmounting after passing new date then hide it', ()=>{
+    const defaultCustomMarkerTestId = 'default-customer-marker-id'
+    const { queryByTestId, rerender } = render(
+      <RenderWrapper>
+        <TimelineMarkers>
+          <CustomMarker date={1000} />
+        </TimelineMarkers>
+      </RenderWrapper>)
+
+    rerender(<RenderWrapper>
+      <TimelineMarkers>
+        <CustomMarker date={2000} />
+      </TimelineMarkers>
+    </RenderWrapper>)
+
+    rerender(<RenderWrapper>
+      <TimelineMarkers>
+      </TimelineMarkers>
+    </RenderWrapper>)
+
+    expect(queryByTestId(defaultCustomMarkerTestId)).not.toBeInTheDocument()
+  })
 })

src/lib/markers/TimelineMarkersContext.js

@@ -42,7 +42,7 @@ export class TimelineMarkersProvider extends React.Component {
       unsubscribe: () => {
         this.setState(state => {
           return {
-            markers: state.markers.filter(marker => marker !== newMarker)
+            markers: state.markers.filter(marker => marker.id !== newMarker.id)
           }
         })
       },