From 8768ce477baf302702388138d267a23ed610971a Mon Sep 17 00:00:00 2001
From: Maciej Rybaniec <maciej.rybaniec@gmail.com>
Date: Thu, 8 Oct 2020 12:02:31 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20funnel=20state=20reset?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FunnelSteps/FunnelSteps.test.tsx          | 75 +++++++++++++++++++
 .../components/FunnelSteps/FunnelSteps.tsx    |  6 ++
 2 files changed, 81 insertions(+)
 create mode 100644 lib/js/app/queryCreator/components/FunnelSteps/FunnelSteps.test.tsx

diff --git a/lib/js/app/queryCreator/components/FunnelSteps/FunnelSteps.test.tsx b/lib/js/app/queryCreator/components/FunnelSteps/FunnelSteps.test.tsx
new file mode 100644
index 000000000..fa99039d0
--- /dev/null
+++ b/lib/js/app/queryCreator/components/FunnelSteps/FunnelSteps.test.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render as rtlRender, fireEvent } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+
+import FunnelSteps from './FunnelSteps';
+
+jest.mock('uuid', () => {
+  return {
+    v4: jest.fn(() => 'id'),
+  };
+});
+
+const render = (storeState: any = {}) => {
+  const mockStore = configureStore([]);
+  const state = {
+    query: {
+      steps: [],
+    },
+    ...storeState,
+  };
+
+  const store = mockStore({ ...state });
+
+  const wrapper = rtlRender(
+    <Provider store={store}>
+      <FunnelSteps />
+    </Provider>
+  );
+
+  return {
+    store,
+    wrapper,
+  };
+};
+
+test('allows user to add funnel step', () => {
+  const {
+    wrapper: { getByTestId },
+    store,
+  } = render();
+
+  const button = getByTestId('add-step-button');
+  fireEvent.click(button);
+
+  expect(store.getActions()).toMatchInlineSnapshot(`
+    Array [
+      Object {
+        "payload": Object {
+          "id": "id",
+        },
+        "type": "@query-creator/ADD_FUNNEL_STEP",
+      },
+    ]
+  `);
+});
+
+test('resets funnel steps', () => {
+  const {
+    wrapper: { unmount },
+    store,
+  } = render();
+  unmount();
+
+  expect(store.getActions()).toMatchInlineSnapshot(`
+    Array [
+      Object {
+        "payload": Object {
+          "steps": Array [],
+        },
+        "type": "@query-creator/SET_FUNNEL_STEPS",
+      },
+    ]
+  `);
+});
diff --git a/lib/js/app/queryCreator/components/FunnelSteps/FunnelSteps.tsx b/lib/js/app/queryCreator/components/FunnelSteps/FunnelSteps.tsx
index 0dba84271..50beebd48 100644
--- a/lib/js/app/queryCreator/components/FunnelSteps/FunnelSteps.tsx
+++ b/lib/js/app/queryCreator/components/FunnelSteps/FunnelSteps.tsx
@@ -12,6 +12,7 @@ import text from './text.json';
 import FunnelStep from '../FunnelStep';
 import {
   addFunnelStep,
+  setFunnelSteps,
   removeFunnelStep,
   getFunnelSteps,
   changeFunnelStepsOrder,
@@ -49,6 +50,10 @@ const FunnelSteps: FC<{}> = () => {
         setDragMode(false);
       },
     });
+
+    return () => {
+      dispatch(setFunnelSteps([]));
+    };
   }, []);
 
   return (
@@ -94,6 +99,7 @@ const FunnelSteps: FC<{}> = () => {
         )}
       <AddStep
         className="add-step"
+        data-testid="add-step-button"
         onClick={() => {
           const stepId = uuid();
           dispatch(addFunnelStep(stepId));