feat(slider): Adds value property to the component and foundation

Author: pgbross

packages/mdc-slider/README.md

@@ -114,6 +114,11 @@ respectively.
 
 Cleans up handlers when slider is destroyed
 
+##### MDCCheckbox.value
+
+String. Returns the slider's value. Setting this property will update the underlying input control.
+element.
+
 
 ### Slider Events
 
@@ -153,6 +158,16 @@ Returns a boolean specifying whether or not the input is disabled.
 
 Updates the input's disabled state.
 
+##### MDCCheckboxFoundation.getValue() => string
+
+Returns the value of `adapter.getNativeControl().value`. Returns `null` if `getNativeControl()`
+does not return an object.
+
+##### MDCCheckboxFoundation.setValue(value: string) => void
+
+Sets the value of `adapter.getNativeControl().value`. Does nothing if `getNativeControl()` does
+not return an object.
+
 ### Theming
 
 MDC Slider components use the configured theme's primary color for its thumb and track.

packages/mdc-slider/continuous/foundation.js

@@ -30,22 +30,22 @@ export default class MDCSliderFoundation extends MDCFoundation {
 
   static get defaultAdapter() {
     return {
-      addClass: ( /* className: string */ ) => {},
-      removeClass: ( /* className: string */ ) => {},
-      hasClass: ( /* className: string */ ) => {},
-      addInputClass: ( /* className: string */ ) => {},
-      removeInputClass: ( /* className: string */ ) => {},
-      getNativeInput: ( /* HTMLInputElement */ ) => {},
-      registerHandler: ( /* type: string, handler: EventListener */ ) => {},
-      deregisterHandler: ( /* type: string, handler: EventListener */ ) => {},
-      registerRootHandler: ( /* type: string, handler: EventListener */ ) => {},
-      deregisterRootHandler: ( /* type: string, handler: EventListener */ ) => {},
-      setAttr: ( /* name: string, value: string */ ) => {},
-      setLowerStyle: ( /* name: string, value: number */ ) => {},
-      setUpperStyle: ( /* name: string, value: number */ ) => {},
-      hasNecessaryDom: ( /* boolean */ ) => false,
-      notifyChange: ( /* evtData: {value: number} */ ) => {},
-      detectIsIE: ( /* boolean */ ) => {},
+      addClass: (/* className: string */) => {},
+      removeClass: (/* className: string */) => {},
+      hasClass: (/* className: string */) => {},
+      addInputClass: (/* className: string */) => {},
+      removeInputClass: (/* className: string */) => {},
+      getNativeInput: (/* HTMLInputElement */) => {},
+      registerHandler: (/* type: string, handler: EventListener */) => {},
+      deregisterHandler: (/* type: string, handler: EventListener */) => {},
+      registerRootHandler: (/* type: string, handler: EventListener */) => {},
+      deregisterRootHandler: (/* type: string, handler: EventListener */) => {},
+      setAttr: (/* name: string, value: string */) => {},
+      setLowerStyle: (/* name: string, value: number */) => {},
+      setUpperStyle: (/* name: string, value: number */) => {},
+      hasNecessaryDom: (/* boolean */) => false,
+      notifyChange: (/* evtData: {value: number} */) => {},
+      detectIsIE: (/* boolean */) => {},
     };
   }
 
@@ -218,6 +218,16 @@ export default class MDCSliderFoundation extends MDCFoundation {
   getNativeInput() {
     return this.adapter_.getNativeInput() || {
       disabled: false,
+      value: null,
     };
   }
+
+  getValue() {
+    return this.getNativeInput().value;
+  }
+
+  setValue(value) {
+    this.getNativeInput().value = value;
+    this.updateValueStyles_();
+  }
 }

packages/mdc-slider/continuous/index.js

@@ -75,4 +75,12 @@ export class MDCSlider extends MDCComponent {
   set disabled(disabled) {
     this.foundation_.setDisabled(disabled);
   }
+
+  get value() {
+    return this.foundation_.getValue();
+  }
+
+  set value(value) {
+    this.foundation_.setValue(value);
+  }
 }

test/unit/mdc-slider/foundation.test.js

@@ -351,3 +351,29 @@ test('on mouseup calls target.blur()', () => {
   handlers.mouseup(evt);
   td.verify(evt.target.blur());
 });
+
+test('#getValue returns the value of getNativeInput.value', () => {
+  const { foundation, mockAdapter } = setupTest();
+  td.when(mockAdapter.getNativeInput()).thenReturn({ value: 'value' });
+  assert.equal(foundation.getValue(), 'value');
+});
+
+test('#getValue returns null if getNativeInput() does not return anything', () => {
+  const { foundation, mockAdapter } = setupTest();
+  td.when(mockAdapter.getNativeInput()).thenReturn(null);
+  assert.isNull(foundation.getValue());
+});
+
+test('#setValue sets the value of getNativeInput.value', () => {
+  const { foundation, mockAdapter } = setupTest();
+  const nativeControl = { value: null, max: 100, min: 0 };
+  td.when(mockAdapter.getNativeInput()).thenReturn(nativeControl);
+  foundation.setValue('49');
+  assert.equal(nativeControl.value, '49');
+});
+
+test('#setValue exits gracefully if getNativeInput() does not return anything', () => {
+  const { foundation, mockAdapter } = setupTest();
+  td.when(mockAdapter.getNativeInput()).thenReturn(null);
+  assert.doesNotThrow(() => foundation.setValue('new value'));
+});

test/unit/mdc-slider/mdc-slider.test.js

@@ -14,17 +14,19 @@
  * limitations under the License.
  */
 
-import {assert} from 'chai';
+/* eslint object-curly-spacing: [error, always, { "objectsInObjects": false }], arrow-parens: [error, as-needed] */
+
+import { assert } from 'chai';
 import bel from 'bel';
 import domEvents from 'dom-events';
 import td from 'testdouble';
-
-import {MDCSlider} from '../../../packages/mdc-slider';
+import { strings } from '../../../packages/mdc-slider/continuous/constants';
+import { MDCSlider } from '../../../packages/mdc-slider';
 
 function getFixture() {
   return bel`
   <div class="mdc-slider">
-    <input type="range" class="mdc-slider__input">
+    <input type="range" class="mdc-slider__input" min="0" max="100">
     <div class="mdc-slider__background">
       <div class="mdc-slider__background-lower"></div>
       <div class="mdc-slider__background-upper"></div>
@@ -42,11 +44,11 @@ test('attachTo returns a component instance', () => {
 function setupTest() {
   const root = getFixture();
   const component = new MDCSlider(root);
-  return {root, component};
+  return { root, component };
 }
 
 test('get/set disabled updates the input element', () => {
-  const {root, component} = setupTest();
+  const { root, component } = setupTest();
   const input = root.querySelector('.mdc-slider__input');
   component.disabled = true;
   assert.isOk(input.disabled);
@@ -55,109 +57,114 @@ test('get/set disabled updates the input element', () => {
 });
 
 test('get disabled gets state', () => {
-  const {component} = setupTest();
+  const { component } = setupTest();
   component.disabled = true;
   assert.isOk(component.disabled);
   component.disabled = false;
   assert.isNotOk(component.disabled);
 });
 
 test('#adapter.addClass adds a class to the root element', () => {
-  const {root, component} = setupTest();
+  const { root, component } = setupTest();
   component.getDefaultFoundation().adapter_.addClass('foo');
   assert.isOk(root.classList.contains('foo'));
 });
 
 test('#adapter.removeClass removes a class from the root element', () => {
-  const {root, component} = setupTest();
+  const { root, component } = setupTest();
   root.classList.add('foo');
   component.getDefaultFoundation().adapter_.removeClass('foo');
   assert.isNotOk(root.classList.contains('foo'));
 });
 
 test('#adapter.addInputClass adds a class to the input element', () => {
-  const {root, component} = setupTest();
+  const { root, component } = setupTest();
   const input = root.querySelector('.mdc-slider__input');
   component.getDefaultFoundation().adapter_.addInputClass('foo');
   assert.isOk(input.classList.contains('foo'));
 });
 
 test('#adapter.removeInputClass removes a class from the input element', () => {
-  const {root, component} = setupTest();
+  const { root, component } = setupTest();
   const input = root.querySelector('.mdc-slider__input');
   input.classList.add('foo');
   component.getDefaultFoundation().adapter_.removeInputClass('foo');
   assert.isNotOk(input.classList.contains('foo'));
 });
 
 test('#adapter.registerHandler adds an event handler on the input element', () => {
-  const {root, component} = setupTest();
+  const { root, component } = setupTest();
   const handler = td.func('fooHandler');
   component.getDefaultFoundation().adapter_.registerHandler('foo', handler);
   domEvents.emit(root.querySelector('.mdc-slider__input'), 'foo');
   td.verify(handler(td.matchers.anything()));
 });
 
 test('#adapter.deregisterHandler removes an event handler from the input element', () => {
-  const {root, component} = setupTest();
+  const { root, component } = setupTest();
   const input = root.querySelector('.mdc-slider__input');
   const handler = td.func('fooHandler');
   input.addEventListener('foo', handler);
   component.getDefaultFoundation().adapter_.deregisterHandler('foo', handler);
   domEvents.emit(input, 'foo');
-  td.verify(handler(td.matchers.anything()), {times: 0});
+  td.verify(handler(td.matchers.anything()), { times: 0 });
 });
 
 test('#adapter.registerRootHandler adds an event handler on the root element', () => {
-  const {root, component} = setupTest();
+  const { root, component } = setupTest();
   const handler = td.func('fooHandler');
   component.getDefaultFoundation().adapter_.registerRootHandler('foo', handler);
   domEvents.emit(root, 'foo');
   td.verify(handler(td.matchers.anything()));
 });
 
 test('#adapter.deregisterRootHandler removes an event handler from the root element', () => {
-  const {root, component} = setupTest();
+  const { root, component } = setupTest();
   const handler = td.func('fooHandler');
   root.addEventListener('foo', handler);
   component.getDefaultFoundation().adapter_.deregisterRootHandler('foo', handler);
   domEvents.emit(root, 'foo');
-  td.verify(handler(td.matchers.anything()), {times: 0});
+  td.verify(handler(td.matchers.anything()), { times: 0 });
 });
 
 test('#adapter.getNativeInput returns the component input element', () => {
-  const {root, component} = setupTest();
-  assert.equal(
-    component.getDefaultFoundation().adapter_.getNativeInput(),
-    root.querySelector('.mdc-slider__input')
-  );
+  const { root, component } = setupTest();
+  assert.equal(component.getDefaultFoundation().adapter_.getNativeInput(), root.querySelector('.mdc-slider__input'));
 });
 
 test('#adapter.setAttr sets an attribute to a certain value on the input element', () => {
-  const {root, component} = setupTest();
+  const { root, component } = setupTest();
   const input = root.querySelector('.mdc-slider__input');
   component.getDefaultFoundation().adapter_.setAttr('aria-valuenow', 'foo');
   assert.equal(input.getAttribute('aria-valuenow'), 'foo');
 });
 
 test('adapter#setLowerStyle sets the given style propertyName to the given value', () => {
-  const {component, root} = setupTest();
+  const { component, root } = setupTest();
   const lower = root.querySelector('.mdc-slider__background-lower');
   component.getDefaultFoundation().adapter_.setLowerStyle('flex', '0.5 1 0%');
   assert.equal(lower.style.getPropertyValue('flex'), '0.5 1 0%');
 });
 
 test('adapter#setUpperStyle sets the given style propertyName to the given value', () => {
-  const {component, root} = setupTest();
+  const { component, root } = setupTest();
   const upper = root.querySelector('.mdc-slider__background-upper');
   component.getDefaultFoundation().adapter_.setUpperStyle('flex', '0.5 1 0%');
   assert.equal(upper.style.getPropertyValue('flex'), '0.5 1 0%');
 });
 
 test('#adapter.notifyChange broadcasts a "MDCSlider:change" custom event', () => {
-  const {root, component} = setupTest();
+  const { root, component } = setupTest();
   const handler = td.func('custom event handler');
   root.addEventListener('MDCSlider:change', handler);
   component.getDefaultFoundation().adapter_.notifyChange({});
   td.verify(handler(td.matchers.anything()));
 });
+
+test('get/set value updates the value of the native checkbox element', () => {
+  const { root, component } = setupTest();
+  const cb = root.querySelector(strings.INPUT_SELECTOR);
+  component.value = '59';
+  assert.equal(cb.value, '59');
+  assert.equal(component.value, cb.value);
+});