Fix: Empty resource items array was breaking drawer load and added resource e2e tests (Issue/111)

templates/resources.jsx

@@ -12,7 +12,7 @@ export default function Resources (props) {
   const _globals = Adapt.course.get('_globals');
 
   function resourcesHasMultipleTypes(resources) {
-    if (resources.length === 1) return false;
+    if (resources.length < 2) return false;
 
     const allSameType = resources.every(_.matcher({ _type: resources[0]._type }));
     return !allSameType;

templates/resourcesItem.jsx

@@ -31,13 +31,14 @@ export default function ResourcesItem (props) {
   }
 
   return (
-    <div className={classes([
-      'resources__item drawer__item',
-      `is-${_type}`,
-      _isGlobal && 'is-global',
-      (!['all', _type].includes(selectedFilter)) && 'u-display-none'
-    ])}
-    role="listitem">
+    <div
+      className={classes([
+        'resources__item drawer__item',
+        `is-${_type}`,
+        _isGlobal && 'is-global',
+        (!['all', _type].includes(selectedFilter)) && 'u-display-none'
+      ])}
+      role="listitem">
 
       <a href={_link} className="resources__item-btn drawer__item-btn"
         data-type={_type}

test/e2e/helpers.js

@@ -0,0 +1,24 @@
+export const checkDrawerLength = (count, filter = 'All', title = 'Menu Page') => {
+  cy.task('log', ` - Checking '${filter}' filter contains ${count} items on page '${title}'`);
+  cy.get('.drawer__item').not('.u-display-none').should('have.length', count);
+};
+
+export const getItemsTypes = (resourceItems) => {
+  return resourceItems.reduce((types, item) => {
+    if (!types.includes(item._type)) {
+      types.push(item._type);
+    }
+
+    return types;
+  }, []);
+};
+
+export const getItemsCount = (resourceItems, itemsTypes) => {
+  const itemsCount = {};
+
+  itemsTypes.forEach(type => {
+    itemsCount[type] = resourceItems.filter(item => item?._type === type).length;
+  });
+
+  return itemsCount;
+};

test/e2e/menuResources.cy.js

@@ -0,0 +1,49 @@
+import { checkDrawerLength, getItemsCount, getItemsTypes } from './helpers'
+
+describe('Resources - Menu', function () {
+  beforeEach(function () {
+    cy.getData();
+
+    cy.visit('/');
+    cy.get('button.nav__drawer-btn').click();
+  });
+
+  it(`should show the correct number of items`, function () {
+    checkDrawerLength(this.data.course._resources?._resourcesItems?.length);
+  });
+
+  it('should display the correct amount of items in each tab', function () {
+    cy.get('button.is-selected[id="resources__show-all"]').should('exist');
+
+    const itemTypes = getItemsTypes(this.data.course._resources?._resourcesItems);
+    const itemsCount = getItemsCount(this.data.course._resources?._resourcesItems, itemTypes);
+
+    itemTypes.forEach((type) => {
+      cy.get(`button[id="resources__show-${type}"]`).should('exist').click();
+      checkDrawerLength(itemsCount[type], type);
+    });
+  });
+
+  it('should display the correct resource items', function () {
+    cy.get('.drawer__item').each(function ($item, index) {
+      const { _link, description, title } = this.data.course._resources?._resourcesItems[index];
+
+      cy.get($item).within(() => {
+        cy.testContainsOrNotExists('.resources__item-title', title);
+        cy.testContainsOrNotExists('.resources__item-body', description);
+
+        cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'href', _link);
+      });
+    });
+  });
+
+  it('should be able to close the drawer by clicking X', () => {
+    cy.get('button.drawer__close-btn').click();
+    cy.get('.drawer').should('have.attr', 'aria-expanded', 'false');
+  });
+
+  it('should be able to close the drawer by hitting ESC', () => {
+    cy.get('.drawer').type('{esc}');
+    cy.get('.drawer').should('have.attr', 'aria-expanded', 'false');
+  });
+});

test/e2e/pageResources.cy.js

@@ -0,0 +1,80 @@
+import { checkDrawerLength, getItemsCount, getItemsTypes } from './helpers'
+
+describe('Resources - Pages', function () {
+  beforeEach(function () {
+    cy.getData();
+  });
+
+  it(`should show the correct number of items on each page`, function () {
+    const pages = this.data.contentObjects.filter(item => item._type === 'page');
+    pages.forEach((page, index) => {
+      cy.visit(`#/id/${page._id}`);
+      cy.get('button.nav__drawer-btn').click();
+
+      const pageResourceItems = page._resources?._resourceItems || [];
+      const resourceItems = [ ...this.data.course._resources?._resourcesItems, ...pageResourceItems ];
+
+      checkDrawerLength(resourceItems.length, 'All', page.displayTitle);
+    });
+  });
+
+  it('should display the correct amount of items in each tab for each page', function () {
+    const pages = this.data.contentObjects.filter(item => item._type === 'page');
+    pages.forEach((page, index) => {
+      cy.visit(`#/id/${page._id}`);
+      cy.get('button.nav__drawer-btn').click();
+      cy.get('button.is-selected[id="resources__show-all"]').should('exist');
+
+      const pageResourceItems = page._resources?._resourceItems || [];
+      const resourceItems = [ ...this.data.course._resources?._resourcesItems, ...pageResourceItems ];
+      const itemTypes = getItemsTypes(resourceItems);
+      const itemsCount = getItemsCount(resourceItems, itemTypes);
+
+      itemTypes.forEach((type) => {
+        cy.get(`button[id="resources__show-${type}"]`).should('exist').click();
+        checkDrawerLength(itemsCount[type], type, page.displayTitle);
+      });
+    });
+  });
+
+  it('should display the correct resource items on each page', function () {
+    const pages = this.data.contentObjects.filter(item => item._type === 'page');
+    pages.forEach((page, index) => {
+      cy.visit(`#/id/${page._id}`);
+      cy.get('button.nav__drawer-btn').click();
+
+      const pageResourceItems = page._resources?._resourceItems || [];
+      const resourceItems = [ ...this.data.course._resources?._resourcesItems, ...pageResourceItems ];
+
+      cy.get('.drawer__item').each(($item, index) => {
+        const { _link, description, title } = resourceItems[index];
+
+        cy.get($item).within(() => {
+          cy.testContainsOrNotExists('.resources__item-title', title);
+          cy.testContainsOrNotExists('.resources__item-body', description);
+          cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'href', _link);
+        });
+      });
+    });
+  });
+
+  it('should be able to close the drawer by clicking X on each page', function () {
+    const pages = this.data.contentObjects.filter(item => item._type === 'page');
+    pages.forEach((page, index) => {
+      cy.visit(`#/id/${page._id}`);
+      cy.get('button.nav__drawer-btn').click();
+      cy.get('button.drawer__close-btn').click();
+      cy.get('.drawer').should('have.attr', 'aria-expanded', 'false');
+    });
+  });
+
+  it('should be able to close the drawer by hitting ESC on each page', function () {
+    const pages = this.data.contentObjects.filter(item => item._type === 'page');
+    pages.forEach((page, index) => {
+      cy.visit(`#/id/${page._id}`);
+      cy.get('button.nav__drawer-btn').click();
+      cy.get('.drawer').type('{esc}');
+      cy.get('.drawer').should('have.attr', 'aria-expanded', 'false');
+    });
+  });
+});