DEV guestsList test, scroll event

RedHatInsights · Jan 19, 2022 · 2803a5e · 2803a5e
1 parent 6d9d28f
commit 2803a5e
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 26 deletions.
diff --git a/src/components/guestsList/__tests__/__snapshots__/guestsList.test.js.snap b/src/components/guestsList/__tests__/__snapshots__/guestsList.test.js.snap
@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`GuestsList Component should handle an onScroll event: scroll event 1`] = `
+Array [
+  Array [
+    Object {
+      "target": Object {
+        "clientHeight": 100,
+        "scrollHeight": 200,
+        "scrollTop": 100,
+      },
+    },
+  ],
+]
+`;
+
 exports[`GuestsList Component should handle multiple display states: fulfilled 1`] = `
 <div
   className="fadein "
@@ -95,7 +109,9 @@ exports[`GuestsList Component should handle variations in data: filtered data 1`
           Array [
             Object {
               "title": "t(curiosity-inventory.header, {\\"context\\":\\"lorem\\"})",
-              "transforms": Array [],
+              "transforms": Array [
+                [Function],
+              ],
             },
           ]
         }

diff --git a/src/components/guestsList/__tests__/guestsList.test.js b/src/components/guestsList/__tests__/guestsList.test.js
@@ -31,7 +31,7 @@ describe('GuestsList Component', () => {
 
     component.setProps({
       useProductInventoryGuestsConfig: () => ({
-        filters: [{ id: 'lorem' }]
+        filters: [{ id: 'lorem', cellWidth: 20 }]
       })
     });
 
@@ -61,4 +61,32 @@ describe('GuestsList Component', () => {
 
     expect(component).toMatchSnapshot('fulfilled');
   });
+
+  it('should handle an onScroll event', async () => {
+    const mockOnScroll = jest.fn();
+    const props = {
+      id: 'lorem',
+      numberOfGuests: 200,
+      useOnScroll: () => mockOnScroll,
+      useGetGuestsInventory: () => ({
+        fulfilled: true,
+        data: {
+          data: [{ lorem: 'ipsum', dolor: 'sit' }]
+        }
+      })
+    };
+
+    const component = await shallowHookComponent(<GuestsList {...props} />);
+    component
+      .find('.curiosity-table-scroll-list')
+      .simulate('scroll', { target: { scrollHeight: 200, scrollTop: 100, clientHeight: 100 } });
+
+    component.setProps({
+      useGetGuestsInventory: () => ({
+        pending: true
+      })
+    });
+
+    expect(mockOnScroll.mock.calls).toMatchSnapshot('scroll event');
+  });
 });
diff --git a/src/components/guestsList/guestsList.js b/src/components/guestsList/guestsList.js
@@ -19,6 +19,7 @@ import { DEFAULT_OFFSET, useGetGuestsInventory, useOnScroll } from './guestsList
  * @param {number} props.numberOfGuests
  * @param {object} props.session
  * @param {Function} props.useGetGuestsInventory
+ * @param {Function} props.useOnScroll
  * @param {Function} props.useProductInventoryGuestsQuery
  * @param {Function} props.useProductInventoryGuestsConfig
  * @fires onScroll
@@ -31,6 +32,7 @@ const GuestsList = ({
   numberOfGuests,
   session,
   useGetGuestsInventory: useAliasGetGuestsInventory,
+  useOnScroll: useAliasOnScroll,
   useProductInventoryGuestsQuery: useAliasProductInventoryGuestsQuery,
   useProductInventoryGuestsConfig: useAliasProductInventoryGuestsConfig
 }) => {
@@ -43,7 +45,7 @@ const GuestsList = ({
   const { error, pending, data = {} } = useAliasGetGuestsInventory(id);
   const { data: listData = [] } = data;
 
-  const onScroll = useOnScroll(id, () => {
+  const onScroll = useAliasOnScroll(id, () => {
     const updatedData = [...previousData, ...(listData || [])];
     setPreviousData(updatedData);
   });
@@ -146,8 +148,9 @@ const GuestsList = ({
 /**
  * Prop types.
  *
- * @type {{useProductInventoryGuestsConfig: Function, session: object, defaultOffset: number, numberOfGuests: number,
- *     id: string, useGetGuestsInventory: Function, useProductInventoryGuestsQuery: Function, defaultPerPage: number}}
+ * @type {{useProductInventoryGuestsConfig: Function, session: object, defaultOffset: number, useOnScroll: Function,
+ *     numberOfGuests: number, id: string, useGetGuestsInventory: Function, useProductInventoryGuestsQuery: Function,
+ *     defaultPerPage: number}}
  */
 GuestsList.propTypes = {
   defaultOffset: PropTypes.number,
@@ -156,21 +159,23 @@ GuestsList.propTypes = {
   numberOfGuests: PropTypes.number.isRequired,
   session: PropTypes.object,
   useGetGuestsInventory: PropTypes.func,
+  useOnScroll: PropTypes.func,
   useProductInventoryGuestsConfig: PropTypes.func,
   useProductInventoryGuestsQuery: PropTypes.func
 };
 
 /**
  * Default props.
  *
- * @type {{useProductInventoryGuestsConfig: Function, session: object, defaultOffset: number,
+ * @type {{useProductInventoryGuestsConfig: Function, session: object, defaultOffset: number, useOnScroll: Function,
  *     useGetGuestsInventory: Function, useProductInventoryGuestsQuery: Function, defaultPerPage: number}}
  */
 GuestsList.defaultProps = {
   defaultOffset: DEFAULT_OFFSET,
   defaultPerPage: 5,
   session: {},
   useGetGuestsInventory,
+  useOnScroll,
   useProductInventoryGuestsConfig,
   useProductInventoryGuestsQuery
 };

diff --git a/src/components/inventoryList/__tests__/inventoryCard.test.js b/src/components/inventoryList/__tests__/inventoryCard.test.js
@@ -175,24 +175,4 @@ describe('InventoryCard Component', () => {
 
     expect(component.find(Table)).toMatchSnapshot('number of guests, id, and NO expandable guests display');
   });
-
-  /*
-  it('should handle updating api data when query, or product id is updated', async () => {
-    const props = {
-      query: { lorem: 'ipsum' },
-      productId: 'lorem',
-      getInstancesInventory: jest.fn()
-    };
-
-    const component = await mountHookComponent(<InventoryCard {...props} />);
-
-    component.setProps({
-      query: { dolor: 'sit' },
-      productId: 'dolor'
-    });
-
-    expect(props.getInstancesInventory).toHaveBeenCalledTimes(2);
-    expect(props.getInstancesInventory.mock.calls).toMatchSnapshot('getInstancesInventory');
-  });
-  */
 });