1 files changed, 119 insertions, 0 deletions
diff --git a/spec/frontend/behaviors/markdown/render_json_table_spec.js b/spec/frontend/behaviors/markdown/render_json_table_spec.js
new file mode 100644
index 00000000000..488492479f3
--- /dev/null
+++ b/spec/frontend/behaviors/markdown/render_json_table_spec.js
@@ -0,0 +1,119 @@
+import { nextTick } from 'vue';
+import { renderJSONTable } from '~/behaviors/markdown/render_json_table';
+
+describe('behaviors/markdown/render_json_table', () => {
+  let element;
+
+  const TEST_DATA = {
+    fields: [
+      { label: 'Field 1', key: 'a' },
+      { label: 'F 2', key: 'b' },
+      { label: 'F 3', key: 'c' },
+    ],
+    items: [
+      {
+        a: '1',
+        b: 'b',
+        c: 'c',
+      },
+      {
+        a: '2',
+        b: 'd',
+        c: 'e',
+      },
+    ],
+  };
+  const TEST_LABELS = TEST_DATA.fields.map((x) => x.label);
+
+  const tableAsData = (table) => ({
+    head: Array.from(table.querySelectorAll('thead th')).map((td) => td.textContent),
+    body: Array.from(table.querySelectorAll('tbody > tr')).map((tr) =>
+      Array.from(tr.querySelectorAll('td')).map((x) => x.textContent),
+    ),
+  });
+
+  const createTestSubject = async (json) => {
+    if (element) {
+      throw new Error('element has already been initialized');
+    }
+
+    const parent = document.createElement('div');
+    const pre = document.createElement('pre');
+
+    pre.textContent = json;
+    parent.appendChild(pre);
+
+    document.body.appendChild(parent);
+    renderJSONTable([parent]);
+
+    element = parent;
+
+    jest.runAllTimers();
+
+    await nextTick();
+  };
+
+  const findPres = () => document.querySelectorAll('pre');
+  const findTables = () => document.querySelectorAll('table');
+  const findAlerts = () => document.querySelectorAll('.gl-alert');
+  const findInputs = () => document.querySelectorAll('.gl-form-input');
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+    element = null;
+  });
+
+  describe('default', () => {
+    beforeEach(async () => {
+      await createTestSubject(JSON.stringify(TEST_DATA, null, 2));
+    });
+
+    it('removes pre', () => {
+      expect(findPres()).toHaveLength(0);
+    });
+
+    it('replaces pre with table', () => {
+      const tables = findTables();
+
+      expect(tables).toHaveLength(1);
+      expect(tableAsData(tables[0])).toEqual({
+        head: TEST_LABELS,
+        body: [
+          ['1', 'b', 'c'],
+          ['2', 'd', 'e'],
+        ],
+      });
+    });
+
+    it('does not show filter', () => {
+      expect(findInputs()).toHaveLength(0);
+    });
+  });
+
+  describe('with invalid json', () => {
+    beforeEach(() => {
+      createTestSubject('funky but not json');
+    });
+
+    it('preserves pre', () => {
+      expect(findPres()).toHaveLength(1);
+    });
+
+    it('shows alert', () => {
+      const alerts = findAlerts();
+
+      expect(alerts).toHaveLength(1);
+      expect(alerts[0].textContent).toMatchInterpolatedText('Unable to parse JSON');
+    });
+  });
+
+  describe('with filter set', () => {
+    beforeEach(() => {
+      createTestSubject(JSON.stringify({ ...TEST_DATA, filter: true }));
+    });
+
+    it('shows filter', () => {
+      expect(findInputs()).toHaveLength(1);
+    });
+  });
+});