@rancher/shell 3.0.12-rc.6 → 3.0.12-rc.7

package/store/__tests__/slideInPanel.test.ts

@@ -1,11 +1,19 @@
-import slideInPanelStore from '../slideInPanel';
+import slideInPanel, { SlideInPanelState } from '@shell/store/slideInPanel';
 
-describe('slideInPanel store', () => {
-  let s: ReturnType<typeof slideInPanelStore.state>;
-  const fakeComponent = { name: 'FakePanel' } as any;
+const MockComponentA = { template: '<div>A</div>' };
+const MockComponentB = { template: '<div>B</div>' };
+
+const { state: stateFactory, mutations, getters } = slideInPanel;
+
+function createState(overrides: Partial<SlideInPanelState> = {}): SlideInPanelState {
+  return {
+    ...stateFactory(),
+    ...overrides
+  };
+}
 
+describe('slideInPanel store', () => {
   beforeEach(() => {
-    s = slideInPanelStore.state();
     jest.useFakeTimers();
   });
 
@@ -14,74 +22,166 @@ describe('slideInPanel store', () => {
   });
 
   describe('state', () => {
-    it('returns initial default state', () => {
-      expect(s.isOpen).toBe(false);
-      expect(s.isClosing).toBe(false);
-      expect(s.component).toBeNull();
-      expect(s.componentProps).toStrictEqual({});
+    it('returns correct initial state', () => {
+      const result = stateFactory();
+
+      expect(result).toStrictEqual({
+        isOpen:         false,
+        isClosing:      false,
+        component:      null,
+        componentProps: {}
+      });
+    });
+  });
+
+  describe('getters', () => {
+    it('returns isOpen from state', () => {
+      const state = createState({ isOpen: true });
+
+      expect(getters.isOpen(state, {}, {}, {})).toStrictEqual(true);
+    });
+
+    it('returns isClosing from state', () => {
+      const state = createState({ isClosing: true });
+
+      expect(getters.isClosing(state, {}, {}, {})).toStrictEqual(true);
+    });
+
+    it('returns component from state', () => {
+      const state = createState({ component: MockComponentA as any });
+
+      expect(getters.component(state, {}, {}, {})).toStrictEqual(MockComponentA);
+    });
+
+    it('returns componentProps from state', () => {
+      const props = { title: 'Test' };
+      const state = createState({ componentProps: props });
+
+      expect(getters.componentProps(state, {}, {}, {})).toStrictEqual(props);
     });
   });
 
   describe('mutations', () => {
     describe('open', () => {
-      it('sets isOpen to true', () => {
-        slideInPanelStore.mutations.open(s, { component: fakeComponent });
+      it('sets isOpen to true and stores component and props', () => {
+        const state = createState();
+        const props = { title: 'Test Panel' };
 
-        expect(s.isOpen).toBe(true);
-      });
-
-      it('stores the component reference', () => {
-        slideInPanelStore.mutations.open(s, { component: fakeComponent });
+        mutations.open(state, { component: MockComponentA, componentProps: props });
 
-        expect(s.component).toBe(fakeComponent);
+        expect(state.isOpen).toStrictEqual(true);
+        expect(state.component).toStrictEqual(MockComponentA);
+        expect(state.componentProps).toStrictEqual(props);
       });
 
-      it('sets componentProps from payload', () => {
-        slideInPanelStore.mutations.open(s, { component: fakeComponent, componentProps: { title: 'Test' } });
+      it('defaults componentProps to empty object when not provided', () => {
+        const state = createState();
 
-        expect(s.componentProps).toStrictEqual({ title: 'Test' });
+        mutations.open(state, { component: MockComponentA });
+
+        expect(state.componentProps).toStrictEqual({});
       });
 
-      it('defaults componentProps to empty object when not provided', () => {
-        slideInPanelStore.mutations.open(s, { component: fakeComponent });
+      it('resets isClosing to false', () => {
+        const state = createState({ isClosing: true });
 
-        expect(s.componentProps).toStrictEqual({});
+        mutations.open(state, { component: MockComponentA });
+
+        expect(state.isClosing).toStrictEqual(false);
       });
     });
 
     describe('close', () => {
-      beforeEach(() => {
-        slideInPanelStore.mutations.open(s, { component: fakeComponent, componentProps: { title: 'Test' } });
+      it('sets isClosing to true and isOpen to false immediately', () => {
+        const state = createState({ isOpen: true, component: MockComponentA as any });
+
+        mutations.close(state);
+
+        expect(state.isClosing).toStrictEqual(true);
+        expect(state.isOpen).toStrictEqual(false);
+        expect(state.component).toStrictEqual(MockComponentA);
       });
 
-      it('sets isClosing to true immediately', () => {
-        slideInPanelStore.mutations.close(s);
+      it('retains component and componentProps before the 500ms delay elapses', () => {
+        const state = createState({
+          isOpen:         true,
+          component:      MockComponentA as any,
+          componentProps: { title: 'Test' }
+        });
+
+        mutations.close(state);
+        jest.advanceTimersByTime(499);
 
-        expect(s.isClosing).toBe(true);
+        expect(state.component).toStrictEqual(MockComponentA);
+        expect(state.componentProps).toStrictEqual({ title: 'Test' });
+        expect(state.isClosing).toStrictEqual(true);
       });
 
-      it('sets isOpen to false immediately', () => {
-        slideInPanelStore.mutations.close(s);
+      it('clears component and props after 500ms transition', () => {
+        const state = createState({
+          isOpen:         true,
+          component:      MockComponentA as any,
+          componentProps: { title: 'Test' }
+        });
 
-        expect(s.isOpen).toBe(false);
+        mutations.close(state);
+
+        expect(state.component).toStrictEqual(MockComponentA);
+        expect(state.componentProps).toStrictEqual({ title: 'Test' });
+
+        jest.advanceTimersByTime(500);
+
+        expect(state.component).toStrictEqual(null);
+        expect(state.componentProps).toStrictEqual({});
+        expect(state.isClosing).toStrictEqual(false);
       });
+    });
 
-      it('retains component and componentProps before the 500ms delay elapses', () => {
-        slideInPanelStore.mutations.close(s);
-        jest.advanceTimersByTime(499);
+    describe('close-then-open race condition', () => {
+      it('does not leave an untracked timer when close is called twice before open', () => {
+        const state = createState({
+          isOpen:    true,
+          component: MockComponentA as any
+        });
+
+        mutations.close(state);
+        mutations.close(state);
+        mutations.open(state, { component: MockComponentB, componentProps: { title: 'Panel B' } });
+
+        expect(state.isOpen).toStrictEqual(true);
+        expect(state.isClosing).toStrictEqual(false);
+        expect(state.component).toStrictEqual(MockComponentB);
+
+        jest.advanceTimersByTime(500);
 
-        expect(s.component).toBe(fakeComponent);
-        expect(s.componentProps).toStrictEqual({ title: 'Test' });
-        expect(s.isClosing).toBe(true);
+        // Neither of the two stale close timers should fire and clear the newly opened panel
+        expect(state.component).toStrictEqual(MockComponentB);
+        expect(state.isClosing).toStrictEqual(false);
       });
 
-      it('clears component, componentProps and isClosing after 500ms', () => {
-        slideInPanelStore.mutations.close(s);
+      it('cancels pending close timer when open is called', () => {
+        const state = createState({
+          isOpen:    true,
+          component: MockComponentA as any
+        });
+
+        mutations.close(state);
+
+        expect(state.isOpen).toStrictEqual(false);
+        expect(state.isClosing).toStrictEqual(true);
+
+        mutations.open(state, { component: MockComponentB, componentProps: { title: 'Panel B' } });
+
+        expect(state.isOpen).toStrictEqual(true);
+        expect(state.isClosing).toStrictEqual(false);
+        expect(state.component).toStrictEqual(MockComponentB);
+        expect(state.componentProps).toStrictEqual({ title: 'Panel B' });
+
         jest.advanceTimersByTime(500);
 
-        expect(s.component).toBeNull();
-        expect(s.componentProps).toStrictEqual({});
-        expect(s.isClosing).toBe(false);
+        expect(state.component).toStrictEqual(MockComponentB);
+        expect(state.componentProps).toStrictEqual({ title: 'Panel B' });
+        expect(state.isClosing).toStrictEqual(false);
       });
     });
   });