1 files changed, 115 insertions, 0 deletions
diff --git a/spec/frontend/airflow/dags/components/dags_spec.js b/spec/frontend/airflow/dags/components/dags_spec.js
new file mode 100644
index 00000000000..f9cf4fc87af
--- /dev/null
+++ b/spec/frontend/airflow/dags/components/dags_spec.js
@@ -0,0 +1,115 @@
+import { GlAlert, GlPagination, GlTableLite } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import { TEST_HOST } from 'helpers/test_constants';
+import AirflowDags from '~/airflow/dags/components/dags.vue';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import { mockDags } from './mock_data';
+
+describe('AirflowDags', () => {
+  let wrapper;
+
+  const createWrapper = (
+    dags = [],
+    pagination = { page: 1, isLastPage: false, per_page: 2, totalItems: 0 },
+  ) => {
+    wrapper = mountExtended(AirflowDags, {
+      propsData: {
+        dags,
+        pagination,
+      },
+    });
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findEmptyState = () => wrapper.findByText('There are no DAGs to show');
+  const findPagination = () => wrapper.findComponent(GlPagination);
+
+  describe('default (no dags)', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('shows incubation warning', () => {
+      expect(findAlert().exists()).toBe(true);
+    });
+
+    it('shows empty state', () => {
+      expect(findEmptyState().exists()).toBe(true);
+    });
+
+    it('does not show pagination', () => {
+      expect(findPagination().exists()).toBe(false);
+    });
+  });
+
+  describe('with dags', () => {
+    const createWrapperWithDags = (pagination = {}) => {
+      createWrapper(mockDags, {
+        page: 1,
+        isLastPage: false,
+        per_page: 2,
+        totalItems: 5,
+        ...pagination,
+      });
+    };
+
+    const findDagsData = () => {
+      return wrapper
+        .findComponent(GlTableLite)
+        .findAll('tbody tr')
+        .wrappers.map((tr) => {
+          return tr.findAll('td').wrappers.map((td) => {
+            const timeAgo = td.findComponent(TimeAgo);
+
+            if (timeAgo.exists()) {
+              return {
+                type: 'time',
+                value: timeAgo.props('time'),
+              };
+            }
+
+            return {
+              type: 'text',
+              value: td.text(),
+            };
+          });
+        });
+    };
+
+    it('renders the table of Dags with data', () => {
+      createWrapperWithDags();
+
+      expect(findDagsData()).toEqual(
+        mockDags.map((x) => [
+          { type: 'text', value: x.dag_name },
+          { type: 'text', value: x.schedule },
+          { type: 'time', value: x.next_run },
+          { type: 'text', value: String(x.is_active) },
+          { type: 'text', value: String(x.is_paused) },
+          { type: 'text', value: x.fileloc },
+        ]),
+      );
+    });
+
+    describe('Pagination behaviour', () => {
+      it.each`
+        pagination                       | expected
+        ${{}}                            | ${{ value: 1, prevPage: null, nextPage: 2 }}
+        ${{ page: 2 }}                   | ${{ value: 2, prevPage: 1, nextPage: 3 }}
+        ${{ isLastPage: true, page: 2 }} | ${{ value: 2, prevPage: 1, nextPage: null }}
+      `('with $pagination, sets pagination props', ({ pagination, expected }) => {
+        createWrapperWithDags({ ...pagination });
+
+        expect(findPagination().props()).toMatchObject(expected);
+      });
+
+      it('generates link for each page', () => {
+        createWrapperWithDags();
+
+        const generateLink = findPagination().props('linkGen');
+
+        expect(generateLink(3)).toBe(`${TEST_HOST}/?page=3`);
+      });
+    });
+  });
+});