1 files changed, 104 insertions, 18 deletions
diff --git a/spec/frontend/vue_shared/components/local_storage_sync_spec.js b/spec/frontend/vue_shared/components/local_storage_sync_spec.js
index 5470171a21e..3ff4c0917f2 100644
--- a/spec/frontend/vue_shared/components/local_storage_sync_spec.js
+++ b/spec/frontend/vue_shared/components/local_storage_sync_spec.js
@@ -12,7 +12,9 @@ describe('Local Storage Sync', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
+    if (wrapper) {
+      wrapper.destroy();
+    }
     wrapper = null;
     localStorage.clear();
   });
@@ -45,23 +47,23 @@ describe('Local Storage Sync', () => {
       expect(wrapper.emitted('input')).toBeFalsy();
     });
 
-    it('saves updated value to localStorage', () => {
-      createComponent({
-        props: {
-          storageKey,
-          value: 'ascending',
-        },
-      });
-
-      const newValue = 'descending';
-      wrapper.setProps({
-        value: newValue,
-      });
-
-      return wrapper.vm.$nextTick().then(() => {
-        expect(localStorage.getItem(storageKey)).toBe(newValue);
-      });
-    });
+    it.each('foo', 3, true, ['foo', 'bar'], { foo: 'bar' })(
+      'saves updated value to localStorage',
+      newValue => {
+        createComponent({
+          props: {
+            storageKey,
+            value: 'initial',
+          },
+        });
+
+        wrapper.setProps({ value: newValue });
+
+        return wrapper.vm.$nextTick().then(() => {
+          expect(localStorage.getItem(storageKey)).toBe(String(newValue));
+        });
+      },
+    );
 
     it('does not save default value', () => {
       const value = 'ascending';
@@ -125,4 +127,88 @@ describe('Local Storage Sync', () => {
       });
     });
   });
+
+  describe('with "asJson" prop set to "true"', () => {
+    const storageKey = 'testStorageKey';
+
+    describe.each`
+      value             | serializedValue
+      ${null}           | ${'null'}
+      ${''}             | ${'""'}
+      ${true}           | ${'true'}
+      ${false}          | ${'false'}
+      ${42}             | ${'42'}
+      ${'42'}           | ${'"42"'}
+      ${'{ foo: '}      | ${'"{ foo: "'}
+      ${['test']}       | ${'["test"]'}
+      ${{ foo: 'bar' }} | ${'{"foo":"bar"}'}
+    `('given $value', ({ value, serializedValue }) => {
+      describe('is a new value', () => {
+        beforeEach(() => {
+          createComponent({
+            props: {
+              storageKey,
+              value: 'initial',
+              asJson: true,
+            },
+          });
+
+          wrapper.setProps({ value });
+
+          return wrapper.vm.$nextTick();
+        });
+
+        it('serializes the value correctly to localStorage', () => {
+          expect(localStorage.getItem(storageKey)).toBe(serializedValue);
+        });
+      });
+
+      describe('is already stored', () => {
+        beforeEach(() => {
+          localStorage.setItem(storageKey, serializedValue);
+
+          createComponent({
+            props: {
+              storageKey,
+              value: 'initial',
+              asJson: true,
+            },
+          });
+        });
+
+        it('emits an input event with the deserialized value', () => {
+          expect(wrapper.emitted('input')).toEqual([[value]]);
+        });
+      });
+    });
+
+    describe('with bad JSON in storage', () => {
+      const badJSON = '{ badJSON';
+
+      beforeEach(() => {
+        jest.spyOn(console, 'warn').mockImplementation();
+        localStorage.setItem(storageKey, badJSON);
+
+        createComponent({
+          props: {
+            storageKey,
+            value: 'initial',
+            asJson: true,
+          },
+        });
+      });
+
+      it('should console warn', () => {
+        // eslint-disable-next-line no-console
+        expect(console.warn).toHaveBeenCalledWith(
+          `[gitlab] Failed to deserialize value from localStorage (key=${storageKey})`,
+          badJSON,
+        );
+      });
+
+      it('should not emit an input event', () => {
+        expect(wrapper.emitted('input')).toBeUndefined();
+      });
+    });
+  });
 });