@rancher/shell 3.0.12-rc.5 → 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);
       });
     });
   });

package/store/__tests__/ui-context.test.ts

@@ -0,0 +1,255 @@
+import { state, getters, mutations, actions } from '../ui-context';
+
+describe('ui-context store', () => {
+  describe('state', () => {
+    it('returns initial state with empty elements and zero idCounter', () => {
+      expect(state()).toStrictEqual({ idCounter: 0, elements: {} });
+    });
+
+    it('returns a fresh object on each call', () => {
+      const s1 = state();
+      const s2 = state();
+
+      expect(s1).not.toBe(s2);
+    });
+  });
+
+  describe('getters', () => {
+    describe('all', () => {
+      it('returns empty array when no elements exist', () => {
+        expect(getters.all(state())).toStrictEqual([]);
+      });
+
+      it('returns contexts sorted alphabetically by tag', () => {
+        const s = state();
+
+        s.elements = {
+          1: { id: 1, context: { tag: 'z-tag', value: 'a' } },
+          2: { id: 2, context: { tag: 'a-tag', value: 'b' } },
+          3: { id: 3, context: { tag: 'm-tag', value: 'c' } },
+        } as any;
+
+        const result = getters.all(s);
+
+        expect(result.map((c: any) => c.tag)).toStrictEqual(['a-tag', 'm-tag', 'z-tag']);
+      });
+
+      it('sorts contexts without tag before tagged contexts', () => {
+        const s = state();
+
+        s.elements = {
+          1: { id: 1, context: { tag: 'b-tag', value: 'a' } },
+          2: { id: 2, context: { value: 'b' } },
+        } as any;
+
+        const result = getters.all(s);
+
+        expect(result[0]).toStrictEqual({ value: 'b' });
+        expect(result[1].tag).toBe('b-tag');
+      });
+
+      it('returns context objects, not full element wrappers', () => {
+        const context = { tag: 'my-tag', value: 'test-val' };
+        const s = state();
+
+        s.elements = { 1: { id: 1, context } } as any;
+
+        expect(getters.all(s)).toStrictEqual([context]);
+      });
+    });
+  });
+
+  describe('mutations', () => {
+    describe('add', () => {
+      it('adds element to state', () => {
+        const s = state();
+        const element = { id: 1, context: { tag: 'test', value: 'val' } };
+
+        mutations.add(s, element);
+
+        expect(s.elements[1]).toStrictEqual(element);
+      });
+
+      it('adds multiple elements without overwriting', () => {
+        const s = state();
+        const e1 = { id: 1, context: { tag: 'a', value: 1 } };
+        const e2 = { id: 2, context: { tag: 'b', value: 2 } };
+
+        mutations.add(s, e1);
+        mutations.add(s, e2);
+
+        expect(Object.keys(s.elements)).toStrictEqual(['1', '2']);
+      });
+    });
+
+    describe('update', () => {
+      it('updates context of existing element', () => {
+        const s = state();
+
+        s.elements[1] = { id: 1, context: { tag: 'test', value: 'original' } };
+        mutations.update(s, { id: 1, context: { tag: 'test', value: 'updated' } });
+
+        expect(s.elements[1].context).toStrictEqual({ tag: 'test', value: 'updated' });
+      });
+
+      it('does nothing when element id is not found', () => {
+        const s = state();
+        const element = { id: 1, context: { tag: 'test', value: 'val' } };
+
+        s.elements[1] = element;
+        mutations.update(s, { id: 999, context: { tag: 'other', value: 'new' } });
+
+        expect(s.elements[1]).toStrictEqual(element);
+      });
+    });
+
+    describe('remove', () => {
+      it('removes element from state by id', () => {
+        const s = state();
+        const element = { id: 1, context: { tag: 'test', value: 'val' } };
+
+        s.elements[1] = element;
+        mutations.remove(s, element);
+
+        expect(s.elements[1]).toBeUndefined();
+      });
+
+      it('leaves other elements intact when removing one', () => {
+        const s = state();
+        const e1 = { id: 1, context: { tag: 'a', value: 1 } };
+        const e2 = { id: 2, context: { tag: 'b', value: 2 } };
+
+        s.elements[1] = e1;
+        s.elements[2] = e2;
+        mutations.remove(s, e1);
+
+        expect(s.elements[2]).toStrictEqual(e2);
+      });
+    });
+  });
+
+  describe('actions', () => {
+    const makeStore = () => {
+      const s = state() as any;
+      const commit = jest.fn((mutation: string, payload: any) => {
+        (mutations as any)[mutation](s, payload);
+      });
+
+      return { s, commit };
+    };
+
+    describe('add', () => {
+      it.each([
+        {
+          desc: 'undefined context',
+          ctx:  undefined as any,
+        },
+        {
+          desc: 'null context',
+          ctx:  null as any,
+        },
+        {
+          desc: 'missing tag property',
+          ctx:  { value: 'something' } as any,
+        },
+        {
+          desc: 'empty string tag',
+          ctx:  { value: 'something', tag: '' } as any,
+        },
+        {
+          desc: 'missing value property',
+          ctx:  { tag: 'test' } as any,
+        },
+        {
+          desc: 'explicit undefined value',
+          ctx:  { tag: 'test', value: undefined } as any,
+        },
+      ])('throws for invalid context: $desc', ({ ctx }) => {
+        const { s, commit } = makeStore();
+
+        expect(() => actions.add({ commit, state: s }, ctx)).toThrow('[ui-context]');
+      });
+
+      it('commits add and returns generated id for valid context', () => {
+        const { s, commit } = makeStore();
+        const ctx = { tag: 'my-tag', value: 'my-value' };
+
+        const id = actions.add({ commit, state: s }, ctx);
+
+        expect(id).toBe('ctx-0');
+        expect(commit).toHaveBeenCalledWith('add', { id: 'ctx-0', context: ctx });
+      });
+
+      it('increments idCounter on successive calls', () => {
+        const { s, commit } = makeStore();
+        const ctx = { tag: 't', value: 'v' };
+
+        const id1 = actions.add({ commit, state: s }, ctx);
+        const id2 = actions.add({ commit, state: s }, ctx);
+
+        expect(id1).toBe('ctx-0');
+        expect(id2).toBe('ctx-1');
+      });
+
+      it.each([
+        {
+          desc: 'null value',
+          ctx:  { tag: 'test', value: null },
+        },
+        {
+          desc: 'false value',
+          ctx:  { tag: 'test', value: false },
+        },
+        {
+          desc: 'zero value',
+          ctx:  { tag: 'test', value: 0 },
+        },
+        {
+          desc: 'empty string value',
+          ctx:  { tag: 'test', value: '' },
+        },
+      ])('does not throw for valid context with $desc', ({ ctx }) => {
+        const { s, commit } = makeStore();
+
+        expect(() => actions.add({ commit, state: s }, ctx as any)).not.toThrow();
+      });
+    });
+
+    describe('update', () => {
+      it('throws when element id is not found in state', () => {
+        const { s, commit } = makeStore();
+
+        expect(() => actions.update({ commit, state: s }, { id: 42, context: { tag: 't', value: 'v' } } as any)).toThrow('[ui-context]');
+      });
+
+      it('commits update for existing element', () => {
+        const { s, commit } = makeStore();
+
+        s.elements[1] = { id: 1, context: { tag: 'test', value: 'original' } };
+        const updated = { id: 1, context: { tag: 'test', value: 'updated' } };
+
+        actions.update({ commit, state: s }, updated as any);
+
+        expect(commit).toHaveBeenCalledWith('update', updated);
+      });
+    });
+
+    describe('remove', () => {
+      it('throws when element id is not found in state', () => {
+        const { s, commit } = makeStore();
+
+        expect(() => actions.remove({ commit, state: s }, 999 as any)).toThrow('[ui-context]');
+      });
+
+      it('commits remove with the found element', () => {
+        const { s, commit } = makeStore();
+        const element = { id: 1, context: { tag: 'test', value: 'val' } };
+
+        s.elements[1] = element;
+        actions.remove({ commit, state: s }, 1 as any);
+
+        expect(commit).toHaveBeenCalledWith('remove', element);
+      });
+    });
+  });
+});