fix(list): Added unit tests for component and foundation

material-components · Dec 6, 2018 · 1d4f896 · 1d4f896
1 parent b39a6b1
commit 1d4f896
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/packages/mdc-list/index.js b/packages/mdc-list/index.js
@@ -206,10 +206,7 @@ class MDCList extends MDCComponent {
     return new MDCListFoundation(/** @type {!MDCListAdapter} */ (Object.assign({
       getListItemCount: () => this.listElements.length,
       getFocusedElementIndex: () => this.listElements.indexOf(document.activeElement),
-      getAttributeForElementIndex: (index, attr) => {
-        const element = this.listElements[index];
-        return element.getAttribute(attr);
-      },
+      getAttributeForElementIndex: (index, attr) => this.listElements[index].getAttribute(attr),
       setAttributeForElementIndex: (index, attr, value) => {
         const element = this.listElements[index];
         if (element) {

diff --git a/test/unit/mdc-list/foundation.test.js b/test/unit/mdc-list/foundation.test.js
@@ -42,10 +42,10 @@ test('exports cssClasses', () => {
 
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCListFoundation, [
-    'getListItemCount', 'getFocusedElementIndex', 'setAttributeForElementIndex',
+    'getListItemCount', 'getFocusedElementIndex', 'getAttributeForElementIndex', 'setAttributeForElementIndex',
     'removeAttributeForElementIndex', 'addClassForElementIndex', 'removeClassForElementIndex',
     'focusItemAtIndex', 'setTabIndexForListItemChildren', 'followHref', 'hasRadioAtIndex',
-    'hasCheckboxAtIndex', 'isCheckboxCheckedAtIndex', 'setCheckedCheckboxOrRadioAtIndex',
+    'hasCheckboxAtIndex', 'isCheckboxCheckedAtIndex', 'setCheckedCheckboxOrRadioAtIndex', 'notifyAction',
   ]);
 });
 
@@ -434,6 +434,7 @@ test('#handleKeydown space/enter key call adapter.followHref regardless of singl
   td.when(mockAdapter.getListItemCount()).thenReturn(3);
   td.when(mockAdapter.hasRadioAtIndex(0)).thenReturn(false);
   td.when(mockAdapter.hasCheckboxAtIndex(0)).thenReturn(false);
+  td.when(mockAdapter.getAttributeForElementIndex(0, 'href')).thenReturn('http://test.url');
   foundation.setSingleSelection(false);
   foundation.handleKeydown(event, true, 0);
   foundation.setSingleSelection(true);
@@ -472,6 +473,19 @@ test('#handleKeydown enter key does not cause preventDefault to be called if sin
   td.verify(preventDefault(), {times: 0});
 });
 
+test('#handleKeydown notifies of action when enter key pressed on list item ', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const preventDefault = td.func('preventDefault');
+  const target = {classList: ['mdc-list-item']};
+  const event = {key: 'Enter', target, preventDefault};
+
+  td.when(mockAdapter.getFocusedElementIndex()).thenReturn(0);
+  td.when(mockAdapter.getListItemCount()).thenReturn(3);
+  foundation.handleKeydown(event, true, 0);
+
+  td.verify(mockAdapter.notifyAction(0), {times: 1});
+});
+
 test('#handleKeydown space key is triggered when singleSelection is true selects the list item', () => {
   const {foundation, mockAdapter} = setupTest();
   const preventDefault = td.func('preventDefault');
@@ -592,6 +606,15 @@ test('#handleClick when singleSelection=false on a list item should not cause th
   td.verify(mockAdapter.setAttributeForElementIndex(1, 'tabindex', 0), {times: 0});
 });
 
+test('#handleClick notifies of action when clicked on list item.', () => {
+  const {foundation, mockAdapter} = setupTest();
+
+  td.when(mockAdapter.getListItemCount()).thenReturn(3);
+  foundation.handleClick(1, false);
+
+  td.verify(mockAdapter.notifyAction(1), {times: 1});
+});
+
 test('#handleClick when singleSelection=true on a list item should cause the list item to be selected', () => {
   const {foundation, mockAdapter} = setupTest();
 

diff --git a/test/unit/mdc-list/mdc-list.test.js b/test/unit/mdc-list/mdc-list.test.js
@@ -26,6 +26,7 @@ import {assert} from 'chai';
 import td from 'testdouble';
 import bel from 'bel';
 import {MDCList, MDCListFoundation} from '../../../packages/mdc-list/index';
+import {strings} from '../../../packages/mdc-list/constants';
 
 function getFixture() {
   return bel`
@@ -122,6 +123,16 @@ test('adapter#getFocusedElementIndex returns the index of the currently selected
   document.body.removeChild(root);
 });
 
+test('adapter#getAttributeForElementIndex returns the attribute value of element index', () => {
+  const {root, component} = setupTest();
+  document.body.appendChild(root);
+  const targetNode = root.querySelectorAll('.mdc-list-item')[1];
+  const testUrl = 'http://test.url';
+  targetNode.setAttribute('href', testUrl);
+  assert.equal(testUrl, component.getDefaultFoundation().adapter_.getAttributeForElementIndex(1, 'href'));
+  document.body.removeChild(root);
+});
+
 test('adapter#setAttributeForElementIndex does nothing if the element at index does not exist', () => {
   const {root, component} = setupTest();
   document.body.appendChild(root);
@@ -434,3 +445,15 @@ test('adapter#setCheckedCheckboxOrRadioAtIndex toggles the radio on list item',
   assert.isFalse(radio.checked);
   document.body.removeChild(root);
 });
+
+test('adapter#notifyAction emits action event', () => {
+  const {component} = setupTest();
+
+  const handler = td.func('notifyActionHandler');
+
+  component.listen(strings.ACTION_EVENT, handler);
+  component.getDefaultFoundation().adapter_.notifyAction(3);
+  component.unlisten(strings.ACTION_EVENT, handler);
+
+  td.verify(handler(td.matchers.anything()));
+});