katello 3.8.0.rc1 → 3.8.0.rc2

data/webpack/scenes/Subscriptions/components/SubscriptionsTable/SubscriptionsTableHelpers.js

@@ -1,15 +1,22 @@
 const buildTableRow = (subscription, availableQuantities, updatedQuantity) => {
+  const availableQuantityLoaded = !!availableQuantities;
+  const availableQuantity = availableQuantityLoaded
+    ? availableQuantities[subscription.id]
+    : null;
+
   if (updatedQuantity[subscription.id]) {
     return {
       ...subscription,
       entitlementsChanged: true,
       quantity: updatedQuantity[subscription.id],
-      availableQuantity: availableQuantities[subscription.id],
+      availableQuantity,
+      availableQuantityLoaded,
     };
   }
   return {
     ...subscription,
-    availableQuantity: availableQuantities[subscription.id],
+    availableQuantity,
+    availableQuantityLoaded,
   };
 };
 
@@ -27,10 +34,10 @@ const buildTableRowsFromGroup = (subscriptionGroup, availableQuantities, updated
   return [buildTableRow(firstSubscription, availableQuantities, updatedQuantity)];
 };
 
-export const buildTableRows = (groupdSubscriptions, availableQuantities, updatedQuantity) => {
+export const buildTableRows = (groupedSubscriptions, availableQuantities, updatedQuantity) => {
   const rows = [];
 
-  Object.values(groupdSubscriptions).forEach(subscriptionGroup =>
+  Object.values(groupedSubscriptions).forEach(subscriptionGroup =>
     rows.push(...buildTableRowsFromGroup(subscriptionGroup, availableQuantities, updatedQuantity)));
 
   return rows;

data/webpack/scenes/Subscriptions/components/SubscriptionsTable/SubscriptionsTableSchema.js

@@ -97,9 +97,9 @@ export const createSubscriptionsTableSchema = (
     },
     cell: {
       formatters: [
-        cell => (
+        (value, { rowData }) => (
           <td>
-            <Icon type="fa" name={cell.virt_who ? 'check' : 'minus'} />
+            <Icon type="fa" name={rowData.virt_who ? 'check' : 'minus'} />
           </td>
         ),
       ],

data/webpack/scenes/Subscriptions/components/SubscriptionsTable/__tests__/EntitlementsInlineEditFormatter.test.js

@@ -0,0 +1,110 @@
+// import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import editFormatter from '../EntitlementsInlineEditFormatter';
+
+describe('EntitlementsInlineEditFormatter', () => {
+  const data = rowData => ({
+    rowData,
+  });
+
+  const mockController = (options = {}) => {
+    const { editing = true, changed = false } = options;
+    return {
+      isEditing: () => editing,
+      hasChanged: () => changed,
+    };
+  };
+
+  describe('edit mode', () => {
+    describe('when available quantities are being loaded', () => {
+      it('renders spinner', async () => {
+        const controller = mockController();
+        const value = 100;
+        const formatter = editFormatter(controller)(value, data({
+          availableQuantityLoaded: false,
+        }));
+
+        expect(toJson(shallow(formatter))).toMatchSnapshot();
+      });
+    });
+
+    describe('when available quantities are loaded', () => {
+      it('renders edit field and max available', async () => {
+        const controller = mockController();
+        const value = 100;
+        const formatter = editFormatter(controller)(value, data({
+          availableQuantityLoaded: true,
+          availableQuantity: 500,
+        }));
+
+        expect(toJson(shallow(formatter))).toMatchSnapshot();
+      });
+
+      it('renders edit field and unlimited message', async () => {
+        const controller = mockController();
+        const value = 100;
+        const formatter = editFormatter(controller)(value, data({
+          availableQuantityLoaded: true,
+          availableQuantity: -1,
+        }));
+
+        expect(toJson(shallow(formatter))).toMatchSnapshot();
+      });
+
+      it('renders validation message', async () => {
+        const controller = mockController();
+        const value = 200;
+        const formatter = editFormatter(controller)(value, data({
+          availableQuantityLoaded: true,
+          availableQuantity: 100,
+        }));
+
+        expect(toJson(shallow(formatter))).toMatchSnapshot();
+      });
+
+      it('renders changed values', async () => {
+        const controller = mockController({ changed: true });
+        const value = 100;
+        const formatter = editFormatter(controller)(value, data({
+          availableQuantityLoaded: true,
+          availableQuantity: 200,
+        }));
+
+        expect(toJson(shallow(formatter))).toMatchSnapshot();
+      });
+    });
+
+    describe('when available quantities failed to load', () => {
+      it('renders just the edit field', async () => {
+        const controller = mockController();
+        const value = 200;
+        const formatter = editFormatter(controller)(value, data({
+          availableQuantityLoaded: true,
+        }));
+
+        expect(toJson(shallow(formatter))).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('value mode', () => {
+    it('renders the value', async () => {
+      const controller = mockController({ editing: false });
+      const value = 200;
+      const formatter = editFormatter(controller)(value, data({}));
+
+      expect(toJson(shallow(formatter))).toMatchSnapshot();
+    });
+
+    it('renders unlimited for -1', async () => {
+      const controller = mockController({ editing: false });
+      const value = 200;
+      const formatter = editFormatter(controller)(value, data({
+        available: -1,
+      }));
+
+      expect(toJson(shallow(formatter))).toMatchSnapshot();
+    });
+  });
+});

data/webpack/scenes/Subscriptions/components/SubscriptionsTable/__tests__/SubscriptionsTable.test.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render, mount } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import { MemoryRouter } from 'react-router-dom';
 import SubscriptionsTable from '../SubscriptionsTable';
 import { successState, loadingState, emptyState } from '../../../__tests__/subscriptions.fixtures';
 import { loadSubscriptions, updateQuantity } from '../../../SubscriptionActions';
 
+jest.mock('../../../../../move_to_foreman/foreman_toast_notifications');
+jest.useFakeTimers();
 describe('subscriptions table', () => {
   it('should render a table', async () => {
     // Wrapping SubscriptionTable in MemoryRouter here since it contains
@@ -20,16 +22,23 @@ describe('subscriptions table', () => {
             onSubscriptionDeleteModalClose={() => { }}
             onDeleteSubscriptions={() => {}}
             toggleDeleteButton={() => {}}
+            emptyState={{}}
           />
                         </MemoryRouter>);
     expect(toJson(page)).toMatchSnapshot();
   });
-  /* eslint-enable react/jsx-indent */
 
   it('should render an empty state', async () => {
+    const emptyStateData = {
+      header: __('Yay empty state'),
+      description: __('There is nothing to see here'),
+    };
+
+    /* eslint-disable react/jsx-indent */
     const page = render(<MemoryRouter>
       <SubscriptionsTable
         subscriptions={emptyState}
+        emptyState={emptyStateData}
         loadSubscriptions={loadSubscriptions}
         updateQuantity={updateQuantity}
         subscriptionDeleteModalOpen={false}
@@ -40,9 +49,10 @@ describe('subscriptions table', () => {
                         </MemoryRouter>);
     expect(toJson(page)).toMatchSnapshot();
   });
+  /* eslint-enable react/jsx-indent */
 
   it('should render a loading state', async () => {
-    const page = render(<SubscriptionsTable
+    const page = mount(<SubscriptionsTable
       subscriptions={loadingState}
       loadSubscriptions={loadSubscriptions}
       updateQuantity={updateQuantity}
@@ -50,7 +60,10 @@ describe('subscriptions table', () => {
       onSubscriptionDeleteModalClose={() => { }}
       onDeleteSubscriptions={() => {}}
       toggleDeleteButton={() => {}}
+      emptyState={{}}
     />);
+    jest.runAllTimers();
+    page.update();
     expect(toJson(page)).toMatchSnapshot();
   });
 });

data/webpack/scenes/Subscriptions/components/SubscriptionsTable/__tests__/__snapshots__/EntitlementsInlineEditFormatter.test.js.snap

@@ -0,0 +1,228 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EntitlementsInlineEditFormatter edit mode when available quantities are being loaded renders spinner 1`] = `
+<td
+  className="editable editing"
+>
+  <Spinner
+    className=""
+    inline={false}
+    inverse={false}
+    loading={true}
+    size="xs"
+  >
+    <FormGroup
+      bsClass="form-group"
+    >
+      <FormControl
+        bsClass="form-control"
+        componentClass="input"
+        defaultValue={100}
+        onBlur={[Function]}
+        type="text"
+      />
+      <HelpBlock
+        bsClass="help-block"
+      >
+        <div
+          className="validationMessages"
+        />
+      </HelpBlock>
+    </FormGroup>
+  </Spinner>
+</td>
+`;
+
+exports[`EntitlementsInlineEditFormatter edit mode when available quantities are loaded renders changed values 1`] = `
+<td
+  className="editable editing changed"
+>
+  <Spinner
+    className=""
+    inline={false}
+    inverse={false}
+    loading={false}
+    size="xs"
+  >
+    <FormGroup
+      bsClass="form-group"
+    >
+      <FormControl
+        bsClass="form-control"
+        componentClass="input"
+        defaultValue={100}
+        onBlur={[Function]}
+        type="text"
+      />
+      <HelpBlock
+        bsClass="help-block"
+      >
+        Max 200
+        <div
+          className="validationMessages"
+        />
+      </HelpBlock>
+    </FormGroup>
+  </Spinner>
+</td>
+`;
+
+exports[`EntitlementsInlineEditFormatter edit mode when available quantities are loaded renders edit field and max available 1`] = `
+<td
+  className="editable editing"
+>
+  <Spinner
+    className=""
+    inline={false}
+    inverse={false}
+    loading={false}
+    size="xs"
+  >
+    <FormGroup
+      bsClass="form-group"
+    >
+      <FormControl
+        bsClass="form-control"
+        componentClass="input"
+        defaultValue={100}
+        onBlur={[Function]}
+        type="text"
+      />
+      <HelpBlock
+        bsClass="help-block"
+      >
+        Max 500
+        <div
+          className="validationMessages"
+        />
+      </HelpBlock>
+    </FormGroup>
+  </Spinner>
+</td>
+`;
+
+exports[`EntitlementsInlineEditFormatter edit mode when available quantities are loaded renders edit field and unlimited message 1`] = `
+<td
+  className="editable editing"
+>
+  <Spinner
+    className=""
+    inline={false}
+    inverse={false}
+    loading={false}
+    size="xs"
+  >
+    <FormGroup
+      bsClass="form-group"
+    >
+      <FormControl
+        bsClass="form-control"
+        componentClass="input"
+        defaultValue={100}
+        onBlur={[Function]}
+        type="text"
+      />
+      <HelpBlock
+        bsClass="help-block"
+      >
+        Unlimited
+        <div
+          className="validationMessages"
+        />
+      </HelpBlock>
+    </FormGroup>
+  </Spinner>
+</td>
+`;
+
+exports[`EntitlementsInlineEditFormatter edit mode when available quantities are loaded renders validation message 1`] = `
+<td
+  className="editable editing"
+>
+  <Spinner
+    className=""
+    inline={false}
+    inverse={false}
+    loading={false}
+    size="xs"
+  >
+    <FormGroup
+      bsClass="form-group"
+      validationState="error"
+    >
+      <FormControl
+        bsClass="form-control"
+        componentClass="input"
+        defaultValue={200}
+        onBlur={[Function]}
+        type="text"
+      />
+      <HelpBlock
+        bsClass="help-block"
+      >
+        Max 100
+        <div
+          className="validationMessages"
+        >
+          Exceeds available quantity
+        </div>
+      </HelpBlock>
+    </FormGroup>
+  </Spinner>
+</td>
+`;
+
+exports[`EntitlementsInlineEditFormatter edit mode when available quantities failed to load renders just the edit field 1`] = `
+<td
+  className="editable editing"
+>
+  <Spinner
+    className=""
+    inline={false}
+    inverse={false}
+    loading={false}
+    size="xs"
+  >
+    <FormGroup
+      bsClass="form-group"
+    >
+      <FormControl
+        bsClass="form-control"
+        componentClass="input"
+        defaultValue={200}
+        onBlur={[Function]}
+        type="text"
+      />
+      <HelpBlock
+        bsClass="help-block"
+      >
+        <div
+          className="validationMessages"
+        />
+      </HelpBlock>
+    </FormGroup>
+  </Spinner>
+</td>
+`;
+
+exports[`EntitlementsInlineEditFormatter value mode renders the value 1`] = `
+<td
+  className="editable"
+>
+  <div
+    className="input"
+    onClick={[Function]}
+    onKeyPress={[Function]}
+    role="textbox"
+    tabIndex={0}
+  >
+    200
+  </div>
+</td>
+`;
+
+exports[`EntitlementsInlineEditFormatter value mode renders unlimited for -1 1`] = `
+<td>
+  Unlimited
+</td>
+`;