learningtribes-studio-frontend 1.4.2-alpha.3 → 1.4.2-alpha.5

package/src/components/AssetsList/AssetsList.test.jsx

@@ -2,10 +2,8 @@ import React from 'react';
 
 import AssetsList from './index';
 import { courseDetails, testAssetsList } from '../../utils/testConstants';
-import messages from './displayMessages';
-import { mountWithIntl } from '../../utils/i18n/enzymeHelper';
+import { shallowWithIntl } from '../../utils/i18n/enzymeHelper';
 import { paginationInitial, selectInitial } from '../../data/reducers/assets';
-import WrappedMessage from '../../utils/i18n/formattedMessageWrapper';
 
 const paginationMetadata = {
   ...paginationInitial,
@@ -22,24 +20,25 @@ const defaultProps = {
 
 let items;
 let list;
-let wrapper = mountWithIntl(
+let wrapper = shallowWithIntl(
   <AssetsList
     {...defaultProps}
   />);
 
 const selectAssetSpy = jest.fn();
 
-// use to re-find the following variables after a change is made that would affect them
+const mouseDown = node => node.simulate('mouseDown', { preventDefault() {} });
+const keyDown = (node, key) => node.simulate('keyDown', { key, preventDefault() {} });
+
 const updateConstants = () => {
   wrapper.update();
 
-  items = wrapper.find('ol li');
-  list = wrapper.find('ol');
+  items = wrapper.find('[role="option"]');
+  list = wrapper.find('[role="listbox"]');
 };
 
-// use to remount the AssetsList at the start of a test for a clean slate
 const resetWrapper = () => {
-  wrapper = mountWithIntl(
+  wrapper = shallowWithIntl(
     <AssetsList
       {...defaultProps}
     />);
@@ -55,132 +54,93 @@ describe('AssetsList', () => {
   });
 
   describe('renders', () => {
-    describe('a list header with', () => {
-      const header = wrapper.find('.list-header');
-
-      it('a list header', () => {
-        expect(header).toHaveLength(1);
-      });
+    it('no list header', () => {
+      expect(wrapper.find('.list-header')).toHaveLength(0);
+    });
 
-      it('a Name label', () => {
-        const nameLabelText = header.find('#name-header WrappedMessage');
-        expect(nameLabelText).toHaveLength(1);
-        expect(nameLabelText.prop('message')).toEqual(messages.assetsListNameLabel);
-      });
+    it('no date-added labels', () => {
+      expect(wrapper.find('#date-added-header')).toHaveLength(0);
+      expect(wrapper.find('[id^="asset-date-"]')).toHaveLength(0);
+    });
 
-      it('a Date Added label', () => {
-        const dateAddedLabelText = header.find('#date-added-header WrappedMessage');
-        expect(dateAddedLabelText).toHaveLength(1);
-        expect(dateAddedLabelText.prop('message')).toEqual(messages.assetsListDateLabel);
-      });
+    it('no ordered list markup', () => {
+      expect(wrapper.find('ol')).toHaveLength(0);
+      expect(wrapper.find('li')).toHaveLength(0);
     });
 
-    describe('a list with', () => {
-      it('an ordered list', () => {
+    describe('a grid with', () => {
+      it('one listbox', () => {
         expect(list).toHaveLength(1);
       });
 
-      it('correct number of list items', () => {
-        expect(items).toHaveLength(defaultProps.paginationMetadata.pageSize);
+      it('correct number of options', () => {
+        expect(items).toHaveLength(defaultProps.assetsList.length);
       });
 
       items.forEach((item, index) => {
-        describe(`a list item for ${defaultProps.assetsList[index].display_name} with`, () => {
-          describe('a correct thumbnail element with', () => {
-            const thumbnailElement = item.find('span').first();
-            const thumbnailElementContainer = thumbnailElement.find('div');
-
-            it('a thumbnail element', () => {
-              expect(thumbnailElement).toHaveLength(1);
-            });
-
-            it('an aria-hidden attribute', () => {
-              expect(thumbnailElement.prop('aria-hidden')).toEqual(true);
-            });
-
-            it('a thumbnail element', () => {
-              expect(thumbnailElement).toHaveLength(1);
-            });
+        const asset = defaultProps.assetsList[index];
 
-            it('a thumbnail element container', () => {
-              expect(thumbnailElementContainer).toHaveLength(1);
-            });
-
-            it('an assets-list-image-preview-container className', () => {
-              expect(thumbnailElementContainer.prop('className').includes('assets-list-image-preview-container')).toEqual(true);
-            });
-
-            const thumbnail = defaultProps.assetsList[index].thumbnail;
-
-            if (thumbnail) {
-              describe('an img element with', () => {
-                const imagePreviewElement = thumbnailElementContainer.find('img');
-
-                it('an img element', () => {
-                  expect(imagePreviewElement).toHaveLength(1);
-                });
-
-                it('an assets-list-image-preview-image className', () => {
-                  expect(imagePreviewElement.prop('className').includes('assets-list-image-preview-image')).toEqual(true);
-                });
-
-                it('an empty alt', () => {
-                  expect(imagePreviewElement.prop('alt')).toEqual('');
-                });
-
-                it('correct src when courseDetails.base_url is defined', () => {
-                  expect(imagePreviewElement.prop('src')).toEqual(`${defaultProps.courseDetails.base_url}${thumbnail}`);
-                });
+        describe(`an option for ${asset.display_name} with`, () => {
+          it('a file type badge', () => {
+            const badge = item.find('.file-type-badge');
+            expect(badge).toHaveLength(1);
+            expect(badge.text()).toEqual(asset.display_name.split('.').pop());
+          });
 
-                it('correct src when courseDetails.base_url is not defined', () => {
-                  const newCourseDetails = { ...defaultProps.courseDetails };
+          if (asset.thumbnail) {
+            describe('a thumbnail with', () => {
+              const imagePreviewElement = item.find('img.asset-thumbnail');
 
-                  newCourseDetails.base_url = '';
+              it('an img element', () => {
+                expect(imagePreviewElement).toHaveLength(1);
+              });
 
-                  wrapper.setProps({
-                    courseDetails: newCourseDetails,
-                  });
+              it('an empty alt', () => {
+                expect(imagePreviewElement.prop('alt')).toEqual('');
+              });
 
-                  expect(imagePreviewElement.prop('src')).toEqual(`${defaultProps.courseDetails.base_url}${thumbnail}`);
-                });
+              it('uses lazy loading', () => {
+                expect(imagePreviewElement.prop('loading')).toEqual('lazy');
               });
-            } else {
-              describe('a noImagePreview element with', () => {
-                const noImagePreviewElement = thumbnailElementContainer.find('[data-identifier="asset-image-thumbnail"]');
 
-                it('a noImagePreview element', () => {
-                  expect(noImagePreviewElement).toHaveLength(1);
-                });
+              it('correct src when courseDetails.base_url is defined', () => {
+                expect(imagePreviewElement.prop('src')).toEqual(`${defaultProps.courseDetails.base_url}${asset.thumbnail}`);
+              });
 
-                it('a text-center className', () => {
-                  expect(noImagePreviewElement.prop('className').includes('text-center')).toEqual(true);
+              it('correct src when courseDetails.base_url is not defined', () => {
+                wrapper.setProps({
+                  courseDetails: {
+                    ...defaultProps.courseDetails,
+                    base_url: '',
+                  },
                 });
+                updateConstants();
 
-                it('correct text', () => {
-                  const noImagePreviewElementText = thumbnailElementContainer.find(WrappedMessage);
-                  expect(noImagePreviewElementText.prop('message')).toEqual(messages.assetsListNoPreview);
-                });
+                expect(items.at(index).find('img.asset-thumbnail').prop('src')).toEqual(asset.thumbnail);
               });
-            }
-          });
+            });
+          } else {
+            it('an icon when there is no thumbnail', () => {
+              expect(item.find('img.asset-thumbnail')).toHaveLength(0);
+              expect(item.find('.asset-icon i.far.fa-image')).toHaveLength(1);
+            });
+          }
 
-          it('a display name element', () => {
-            const displayNameElement = item.find(`#asset-name-${index}`);
+          it('a display name', () => {
+            const displayNameElement = item.find('.asset-name');
             expect(displayNameElement).toHaveLength(1);
-            expect(displayNameElement.text()).toEqual(defaultProps.assetsList[index].display_name);
+            expect(displayNameElement.text()).toEqual(asset.display_name);
           });
 
-          it('a date added element', () => {
-            const dateAddedElement = item.find(`#asset-date-${index}`);
-            expect(dateAddedElement).toHaveLength(1);
-            expect(dateAddedElement.text()).toEqual(defaultProps.assetsList[index].date_added);
+          it('no date added element', () => {
+            expect(item.text()).not.toEqual(expect.stringContaining(asset.date_added));
           });
         });
       });
     });
   });
 
-  describe('AssetsList', () => {
+  describe('selection state', () => {
     it('this.state.selectedAssetIndex is -1 by default', () => {
       expect(wrapper.state('selectedAssetIndex')).toEqual(-1);
     });
@@ -202,10 +162,10 @@ describe('AssetsList', () => {
       expect(wrapper.state('selectedAssetIndex')).toEqual(-1);
     });
 
-    it('this.state.selectedAssetIndex is reset to to original index on pageChange to selectedAssetPage', () => {
+    it('this.state.selectedAssetIndex is reset to original index on pageChange to selectedAssetPage', () => {
       const assetIndex = 1;
 
-      items.at(assetIndex).simulate('mouseDown');
+      mouseDown(items.at(assetIndex));
 
       wrapper.setProps({
         selectedAsset: defaultProps.assetsList[assetIndex],
@@ -231,7 +191,6 @@ describe('AssetsList', () => {
 
       wrapper.setProps({
         paginationMetadata: newPaginationData,
-
       });
 
       expect(wrapper.state('selectedAssetIndex')).toEqual(assetIndex);
@@ -258,17 +217,31 @@ describe('AssetsList', () => {
     it('this.state.selectedAssetIndex is set by clicking on a listbox option', () => {
       const assetIndex = 1;
 
-      items.at(assetIndex).simulate('mouseDown');
+      mouseDown(items.at(assetIndex));
 
       expect(wrapper.state('selectedAssetIndex')).toEqual(assetIndex);
     });
 
     it('this.state.selectedAssetPage is set by clicking on a listbox option', () => {
-      items.at(1).simulate('mouseDown');
+      mouseDown(items.at(1));
 
       expect(wrapper.state('selectedAssetPage')).toEqual(0);
     });
 
+    it('scrolls the selected option into view', () => {
+      const scrollIntoView = jest.fn();
+      wrapper.instance().listRef = {
+        querySelector: () => ({ scrollIntoView }),
+      };
+
+      wrapper.setState({
+        selectedAssetIndex: 2,
+      });
+
+      expect(scrollIntoView).toHaveBeenCalledTimes(1);
+      expect(scrollIntoView).toHaveBeenCalledWith({ block: 'nearest', inline: 'nearest' });
+    });
+
     it('onAssetClick calls selectAsset prop', () => {
       const assetIndex = 1;
 
@@ -276,7 +249,7 @@ describe('AssetsList', () => {
         selectAsset: selectAssetSpy,
       });
 
-      items.at(assetIndex).simulate('mouseDown');
+      mouseDown(items.at(assetIndex));
 
       expect(selectAssetSpy).toHaveBeenCalledTimes(1);
       expect(selectAssetSpy).toHaveBeenCalledWith(defaultProps.assetsList[assetIndex]);
@@ -286,8 +259,8 @@ describe('AssetsList', () => {
   });
 
   describe('List Box', () => {
-    it('has list-group className', () => {
-      expect(list.prop('className').includes('list-group')).toEqual(true);
+    it('has assets-grid className', () => {
+      expect(list.prop('className').includes('assets-grid')).toEqual(true);
     });
 
     it('has listbox role', () => {
@@ -368,31 +341,31 @@ describe('AssetsList', () => {
     });
 
     describe('has a key handler', () => {
-      const lastSelectableIndex = defaultProps.paginationMetadata.pageSize - 1;
+      const lastSelectableIndex = defaultProps.assetsList.length - 1;
 
-      describe('arrow down', () => {
-        it('arrow down increments this.state.selectedAssetIndex if last asset is not selected', () => {
+      describe('arrow right', () => {
+        it('arrow right increments this.state.selectedAssetIndex if last asset is not selected', () => {
           expect(wrapper.state('selectedAssetIndex')).toEqual(-1);
 
-          list.simulate('keyDown', { key: 'ArrowDown' });
+          keyDown(list, 'ArrowRight');
 
           expect(wrapper.state('selectedAssetIndex')).toEqual(0);
         });
 
-        it('arrow down sets this.state.selectedAssetPage if last asset is selected', () => {
+        it('arrow right sets this.state.selectedAssetPage if last asset is not selected', () => {
           expect(wrapper.state('selectedAssetPage')).toEqual(-1);
 
-          list.simulate('keyDown', { key: 'ArrowDown' });
+          keyDown(list, 'ArrowRight');
 
           expect(wrapper.state('selectedAssetPage')).toEqual(0);
         });
 
-        it('arrow down calls selectAsset prop if last asset is not selected', () => {
+        it('arrow right calls selectAsset prop if last asset is not selected', () => {
           wrapper.setProps({
             selectAsset: selectAssetSpy,
           });
 
-          list.simulate('keyDown', { key: 'ArrowDown' });
+          keyDown(list, 'ArrowRight');
 
           expect(selectAssetSpy).toHaveBeenCalledTimes(1);
           expect(selectAssetSpy).toHaveBeenCalledWith(defaultProps.assetsList[0]);
@@ -400,27 +373,27 @@ describe('AssetsList', () => {
           selectAssetSpy.mockClear();
         });
 
-        it('arrow down does not increment this.state.selectedAssetIndex if last asset is selected', () => {
+        it('arrow right does not increment this.state.selectedAssetIndex if last asset is selected', () => {
           wrapper.setState({
             selectedAssetIndex: lastSelectableIndex,
           });
 
-          list.simulate('keyDown', { key: 'ArrowDown' });
+          keyDown(list, 'ArrowRight');
 
           expect(wrapper.state('selectedAssetIndex')).toEqual(lastSelectableIndex);
         });
 
-        it('arrow down does not change this.state.selectedAssetPage if last asset is selected', () => {
+        it('arrow right does not change this.state.selectedAssetPage if last asset is selected', () => {
           wrapper.setState({
             selectedAssetIndex: lastSelectableIndex,
           });
 
-          list.simulate('keyDown', { key: 'ArrowDown' });
+          keyDown(list, 'ArrowRight');
 
           expect(wrapper.state('selectedAssetPage')).toEqual(-1);
         });
 
-        it('arrow down does not call selectAsset prop if last asset is selected', () => {
+        it('arrow right does not call selectAsset prop if last asset is selected', () => {
           wrapper.setProps({
             selectAsset: selectAssetSpy,
           });
@@ -429,7 +402,7 @@ describe('AssetsList', () => {
             selectedAssetIndex: lastSelectableIndex,
           });
 
-          list.simulate('keyDown', { key: 'ArrowDown' });
+          keyDown(list, 'ArrowRight');
 
           expect(selectAssetSpy).toHaveBeenCalledTimes(0);
 
@@ -437,28 +410,28 @@ describe('AssetsList', () => {
         });
       });
 
-      describe('arrow up', () => {
+      describe('arrow left', () => {
         it('decrements this.state.selectedAssetIndex if first asset is not selected', () => {
           wrapper.setState({
             selectedAssetIndex: lastSelectableIndex,
           });
 
-          list.simulate('keyDown', { key: 'ArrowUp' });
+          keyDown(list, 'ArrowLeft');
 
           expect(wrapper.state('selectedAssetIndex')).toEqual(lastSelectableIndex - 1);
         });
 
-        it('arrow up sets this.state.selectedAssetPage if first asset is not selected', () => {
+        it('arrow left sets this.state.selectedAssetPage if first asset is not selected', () => {
           wrapper.setState({
             selectedAssetIndex: lastSelectableIndex,
           });
 
-          list.simulate('keyDown', { key: 'ArrowUp' });
+          keyDown(list, 'ArrowLeft');
 
           expect(wrapper.state('selectedAssetPage')).toEqual(0);
         });
 
-        it('arrow up calls selectAsset prop if first asset is not selected', () => {
+        it('arrow left calls selectAsset prop if first asset is not selected', () => {
           wrapper.setProps({
             selectAsset: selectAssetSpy,
           });
@@ -467,7 +440,7 @@ describe('AssetsList', () => {
             selectedAssetIndex: lastSelectableIndex,
           });
 
-          list.simulate('keyDown', { key: 'ArrowUp' });
+          keyDown(list, 'ArrowLeft');
 
           expect(selectAssetSpy).toHaveBeenCalledTimes(1);
           expect(selectAssetSpy)
@@ -476,32 +449,36 @@ describe('AssetsList', () => {
           selectAssetSpy.mockClear();
         });
 
-        it('arrow up does not decrement this.state.selectedAssetIndex if first asset is selected', () => {
+        it('arrow left does not decrement this.state.selectedAssetIndex if first asset is selected', () => {
           wrapper.setState({
             selectedAssetIndex: 0,
           });
 
-          list.simulate('keyDown', { key: 'ArrowUp' });
+          keyDown(list, 'ArrowLeft');
 
           expect(wrapper.state('selectedAssetIndex')).toEqual(0);
         });
 
-        it('arrow up does not change this.state.selectedAssetPage if first asset is selected', () => {
+        it('arrow left does not change this.state.selectedAssetPage if first asset is selected', () => {
           wrapper.setState({
             selectedAssetIndex: 0,
           });
 
-          list.simulate('keyDown', { key: 'ArrowUp' });
+          keyDown(list, 'ArrowLeft');
 
           expect(wrapper.state('selectedAssetPage')).toEqual(-1);
         });
 
-        it('arrow up does not call selectAsset prop if first asset is selected', () => {
+        it('arrow left does not call selectAsset prop if first asset is selected', () => {
           wrapper.setProps({
             selectAsset: selectAssetSpy,
           });
 
-          list.simulate('keyDown', { key: 'ArrowUp' });
+          wrapper.setState({
+            selectedAssetIndex: 0,
+          });
+
+          keyDown(list, 'ArrowLeft');
 
           expect(selectAssetSpy).toHaveBeenCalledTimes(0);
 
@@ -515,8 +492,8 @@ describe('AssetsList', () => {
     items.forEach((item, index) => {
       describe(`list box option at index ${index} has correct static props`, () => {
         it('className', () => {
-          expect(item.prop('className').includes('list-group-item list-group-item-action')).toEqual(true);
-          expect(item.prop('className').includes('active')).toEqual(false);
+          expect(item.prop('className').includes('asset-grid-item')).toEqual(true);
+          expect(item.prop('className').includes('selected')).toEqual(false);
         });
 
         it('id', () => {
@@ -531,13 +508,17 @@ describe('AssetsList', () => {
           expect(item.prop('tabIndex')).toEqual('-1');
         });
 
-        it('aria-labelledby', () => {
-          expect(item.prop('aria-labelledby')).toEqual(`name-header asset-name-${index} date-added-header asset-date-${index}`);
+        it('aria-label', () => {
+          expect(item.prop('aria-label')).toEqual(defaultProps.assetsList[index].display_name);
+        });
+
+        it('no aria-labelledby', () => {
+          expect(item.prop('aria-labelledby')).toBeUndefined();
         });
       });
     });
 
-    it('has active className when selected', () => {
+    it('has selected className when selected', () => {
       const selectedAssetIndex = 2;
       const selectedAsset = defaultProps.assetsList[selectedAssetIndex];
 
@@ -547,7 +528,7 @@ describe('AssetsList', () => {
 
       updateConstants();
 
-      expect(items.at(selectedAssetIndex).prop('className').includes('active')).toEqual(true);
+      expect(items.at(selectedAssetIndex).prop('className').includes('selected')).toEqual(true);
     });
 
     it('has aria-selected attribute when selected', () => {
@@ -564,4 +545,3 @@ describe('AssetsList', () => {
     });
   });
 });
-

package/src/components/AssetsList/index.jsx

@@ -2,8 +2,6 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import WrappedMessage from '../../utils/i18n/formattedMessageWrapper';
-import messages from './displayMessages';
 import styles from './AssetsList.scss';
 
 const initialState = {
@@ -51,6 +49,12 @@ export default class AssetsList extends React.Component {
     }
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.selectedAssetIndex !== this.state.selectedAssetIndex) {
+      this.scrollSelectedOptionIntoView();
+    }
+  }
+
   onAssetClick = (asset, index) => {
     this.setState({
       selectedAssetIndex: index,
@@ -118,6 +122,7 @@ export default class AssetsList extends React.Component {
               className={styles['asset-thumbnail']}
               src={previewSrc}
               alt=""
+              loading="lazy"
             />
           ) : (
             <div className={styles['asset-icon']}>
@@ -142,6 +147,18 @@ export default class AssetsList extends React.Component {
   getSelectedAssetIndex = (assetsList, selectedAsset) => (assetsList.findIndex(
     asset => asset.id === selectedAsset.id));
 
+  scrollSelectedOptionIntoView = () => {
+    if (!this.listRef || this.state.selectedAssetIndex < 0) {
+      return;
+    }
+
+    const option = this.listRef.querySelector(`#asset-list-option-${this.state.selectedAssetIndex}`);
+
+    if (option && typeof option.scrollIntoView === 'function') {
+      option.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }
+  }
+
   handleKeyDown = (e) => {
     switch (e.key) {
       case 'ArrowRight': {
@@ -184,6 +201,7 @@ export default class AssetsList extends React.Component {
         className={styles['assets-grid']}
         onFocus={this.onListBoxFocus}
         onKeyDown={this.handleKeyDown}
+        ref={(node) => { this.listRef = node; }}
         role="listbox"
         tabIndex="0"
       >

package/src/components/EditImageModal/EditImageModal.scss

@@ -1,5 +1,6 @@
 @import 'edx-bootstrap';
 
+.edit-image-modal {
 // Remove negative margins in Bootstrap v4.0.0 so the body does not extend outside the modal
 .modal-body .row {
   margin: 0;
@@ -170,3 +171,4 @@
     color: #09092d;
   }
 }
+}