215 templates list skeleton (#251)

* adding package-lock.json

* deleted unsured file

* Removes and unused file

* Fixes errant styling change

* Fixes an error and uses a prop that PF recognizes

* Updates PR to use API Modules

*  Fixes PR Issues

* Addes tests to Templates

* Addresses PR Issues

* Revert package-lock.json

__tests__/pages/Templates.test.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
+import Templates from '../../src/pages/Templates/Templates';
 import { mountWithContexts } from '../enzymeHelpers';
-import Templates from '../../src/pages/Templates';
 
 describe('<Templates />', () => {
   let pageWrapper;
-  let pageSections;
-  let title;
 
   beforeEach(() => {
     pageWrapper = mountWithContexts(<Templates />);
-    pageSections = pageWrapper.find('PageSection');
-    title = pageWrapper.find('Title');
   });
 
   afterEach(() => {
@@ -19,11 +15,5 @@ describe('<Templates />', () => {
 
   test('initially renders without crashing', () => {
     expect(pageWrapper.length).toBe(1);
-    expect(pageSections.length).toBe(2);
-    expect(title.length).toBe(1);
-    expect(title.props().size).toBe('2xl');
-    pageSections.forEach(section => {
-      expect(section.props().variant).toBeDefined();
-    });
   });
 });

__tests__/pages/Templates/Templates.test.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { mountWithContexts } from '../../enzymeHelpers';
+import Templates from '../../../src/pages/Templates/Templates';
+
+describe('<Templates />', () => {
+  test('initially renders succesfully', () => {
+    mountWithContexts(
+      <Templates />
+    );
+  });
+});

__tests__/pages/Templates/TemplatesList.test.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { mountWithContexts } from '../../enzymeHelpers';
+import TemplatesList, { _TemplatesList } from '../../../src/pages/Templates/TemplatesList';
+
+jest.mock('../../../src/api');
+
+const setDefaultState = (templatesList) => {
+  templatesList.setState({
+    itemCount: mockUnifiedJobTemplatesFromAPI.length,
+    isLoading: false,
+    isInitialized: true,
+    selected: [],
+    templates: mockUnifiedJobTemplatesFromAPI,
+  });
+  templatesList.update();
+};
+
+const mockUnifiedJobTemplatesFromAPI = [{
+  id: 1,
+  name: 'Template 1',
+  url: '/templates/job_template/1',
+  type: 'job_template',
+  summary_fields: {
+    inventory: {},
+    project: {},
+  }
+},
+{
+  id: 2,
+  name: 'Template 2',
+  url: '/templates/job_template/2',
+  type: 'job_template',
+  summary_fields: {
+    inventory: {},
+    project: {},
+  }
+},
+{
+  id: 3,
+  name: 'Template 3',
+  url: '/templates/job_template/3',
+  type: 'job_template',
+  summary_fields: {
+    inventory: {},
+    project: {},
+  }
+}];
+
+describe('<TemplatesList />', () => {
+  test('initially renders succesfully', () => {
+    mountWithContexts(
+      <TemplatesList
+        match={{ path: '/templates', url: '/templates' }}
+        location={{ search: '', pathname: '/templates' }}
+      />
+    );
+  });
+  test('Templates are retrieved from the api and the components finishes loading', async (done) => {
+    const readTemplates = jest.spyOn(_TemplatesList.prototype, 'readUnifiedJobTemplates');
+
+    const wrapper = mountWithContexts(<TemplatesList />).find('TemplatesList');
+
+    expect(wrapper.state('isLoading')).toBe(true);
+    await expect(readTemplates).toHaveBeenCalled();
+    wrapper.update();
+    expect(wrapper.state('isLoading')).toBe(false);
+    done();
+  });
+
+  test('handleSelect is called when a template list item is selected', async () => {
+    const handleSelect = jest.spyOn(_TemplatesList.prototype, 'handleSelect');
+
+    const wrapper = mountWithContexts(<TemplatesList />);
+
+    const templatesList = wrapper.find('TemplatesList');
+    setDefaultState(templatesList);
+
+    expect(templatesList.state('isLoading')).toBe(false);
+    wrapper.find('DataListCheck#select-jobTemplate-1').props().onChange();
+    expect(handleSelect).toBeCalled();
+    templatesList.update();
+    expect(templatesList.state('selected').length).toBe(1);
+  });
+
+  test('handleSelectAll is called when a template list item is selected', async () => {
+    const handleSelectAll = jest.spyOn(_TemplatesList.prototype, 'handleSelectAll');
+
+    const wrapper = mountWithContexts(<TemplatesList />);
+
+    const templatesList = wrapper.find('TemplatesList');
+    setDefaultState(templatesList);
+
+    expect(templatesList.state('isLoading')).toBe(false);
+    wrapper.find('Checkbox#select-all').props().onChange(true);
+    expect(handleSelectAll).toBeCalled();
+    wrapper.update();
+    expect(templatesList.state('selected').length).toEqual(templatesList.state('templates')
+      .length);
+  });
+});

__tests__/pages/Templates/components/TemplatesListItem.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { mountWithContexts } from '../../../enzymeHelpers';
+import TemplatesListItem from '../../../../src/pages/Templates/components/TemplateListItem';
+
+describe('<TemplatesListItem />', () => {
+  test('initially render successfully', () => {
+    mountWithContexts(<TemplatesListItem
+      template={{
+        id: 1,
+        name: 'Template 1',
+        url: '/templates/job_template/1',
+        type: 'job_template'
+      }}
+    />);
+  });
+});