Skip to content

Commit

Permalink
WIP test and lint updates
Browse files Browse the repository at this point in the history
  • Loading branch information
Kenneth G. Franqueiro committed Aug 13, 2018
1 parent 2402b84 commit d641cea
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 138 deletions.
11 changes: 5 additions & 6 deletions packages/mdc-tab-indicator/mdc-tab-indicator.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,16 +58,15 @@
transition: 250ms transform $mdc-animation-standard-curve-timing-function;
}

.mdc-tab-indicator--fade > .mdc-tab-indicator__content,
// --no-transition is applied in cases where styles need to be applied immediately to set up a transition
.mdc-tab-indicator--no-transition > .mdc-tab-indicator__content {
transition: none;
}

.mdc-tab-indicator--fade > .mdc-tab-indicator__content {
transition: 150ms opacity linear;
}

.mdc-tab-indicator--active.mdc-tab-indicator--fade > .mdc-tab-indicator__content {
transition-delay: 100ms;
}

// --no-transition is applied in cases where styles need to be applied immediately to set up a transition
.mdc-tab-indicator--no-transition > .mdc-tab-indicator__content {
transition: none;
}
49 changes: 0 additions & 49 deletions test/unit/mdc-tab-indicator/fading-foundation.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,70 +17,21 @@

import td from 'testdouble';

import {captureHandlers} from '../helpers/foundation';
import {setupFoundationTest} from '../helpers/setup';
import MDCFadingTabIndicatorFoundation from '../../../packages/mdc-tab-indicator/fading-foundation';

suite('MDCFadingTabIndicatorFoundation');

const setupTest = () => setupFoundationTest(MDCFadingTabIndicatorFoundation);

test('#activate registers a transitionend handler', () => {
const {foundation, mockAdapter} = setupTest();
foundation.activate();
td.verify(mockAdapter.registerEventHandler('transitionend', td.matchers.isA(Function)));
});

test(`#activate adds the ${MDCFadingTabIndicatorFoundation.cssClasses.ACTIVE} class`, () => {
const {foundation, mockAdapter} = setupTest();
foundation.activate();
td.verify(mockAdapter.addClass(MDCFadingTabIndicatorFoundation.cssClasses.ACTIVE));
});

test(`#activate adds the ${MDCFadingTabIndicatorFoundation.cssClasses.FADING_ACTIVATE} class`, () => {
const {foundation, mockAdapter} = setupTest();
foundation.activate();
td.verify(mockAdapter.addClass(MDCFadingTabIndicatorFoundation.cssClasses.FADING_ACTIVATE));
});

test('#deactivate registers a transitionend handler', () => {
const {foundation, mockAdapter} = setupTest();
foundation.deactivate();
td.verify(mockAdapter.registerEventHandler('transitionend', td.matchers.isA(Function)));
});

test(`#deactivate removes the ${MDCFadingTabIndicatorFoundation.cssClasses.ACTIVE} class`, () => {
const {foundation, mockAdapter} = setupTest();
foundation.deactivate();
td.verify(mockAdapter.removeClass(MDCFadingTabIndicatorFoundation.cssClasses.ACTIVE));
});

test(`#deactivate adds the ${MDCFadingTabIndicatorFoundation.cssClasses.FADING_DEACTIVATE} class`, () => {
const {foundation, mockAdapter} = setupTest();
foundation.deactivate();
td.verify(mockAdapter.addClass(MDCFadingTabIndicatorFoundation.cssClasses.FADING_DEACTIVATE));
});

test('on transitionend, deregister the transitionend handler', () => {
const {foundation, mockAdapter} = setupTest();
const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
foundation.activate();
handlers.transitionend();
td.verify(mockAdapter.deregisterEventHandler('transitionend', td.matchers.isA(Function)));
});

test(`on transitionend, remove the ${MDCFadingTabIndicatorFoundation.cssClasses.FADING_ACTIVATE} class`, () => {
const {foundation, mockAdapter} = setupTest();
const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
foundation.activate();
handlers.transitionend();
td.verify(mockAdapter.removeClass(MDCFadingTabIndicatorFoundation.cssClasses.FADING_ACTIVATE));
});

test(`on transitionend, remove the ${MDCFadingTabIndicatorFoundation.cssClasses.FADING_DEACTIVATE} class`, () => {
const {foundation, mockAdapter} = setupTest();
const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
foundation.activate();
handlers.transitionend();
td.verify(mockAdapter.removeClass(MDCFadingTabIndicatorFoundation.cssClasses.FADING_DEACTIVATE));
});
9 changes: 4 additions & 5 deletions test/unit/mdc-tab-indicator/foundation.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ test('exports strings', () => {

test('defaultAdapter returns a complete adapter implementation', () => {
verifyDefaultAdapter(MDCTabIndicatorFoundation, [
'registerEventHandler', 'deregisterEventHandler',
'addClass', 'removeClass',
'setContentStyleProperty',
'computeContentClientRect',
Expand All @@ -52,13 +51,13 @@ test('#computeContentClientRect returns the client rect', () => {
test('#activate is abstract and does nothing', () => {
const {foundation, mockAdapter} = setupTest();
foundation.activate();
td.verify(mockAdapter.addClass, {times: 0});
td.verify(mockAdapter.removeClass, {times: 0});
td.verify(mockAdapter.addClass(td.matchers.isA(String)), {times: 0});
td.verify(mockAdapter.removeClass(td.matchers.isA(String)), {times: 0});
});

test('#deactivate is abstract and does nothing', () => {
const {foundation, mockAdapter} = setupTest();
foundation.deactivate();
td.verify(mockAdapter.addClass, {times: 0});
td.verify(mockAdapter.removeClass, {times: 0});
td.verify(mockAdapter.addClass(td.matchers.isA(String)), {times: 0});
td.verify(mockAdapter.removeClass(td.matchers.isA(String)), {times: 0});
});
18 changes: 0 additions & 18 deletions test/unit/mdc-tab-indicator/mdc-tab-indicator.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
import bel from 'bel';
import {assert} from 'chai';
import td from 'testdouble';
import domEvents from 'dom-events';

import {
MDCTabIndicator,
Expand Down Expand Up @@ -69,23 +68,6 @@ test('#adapter.removeClass removes a class to the root element', () => {
assert.isFalse(root.classList.contains('foo'));
});

test('#adapter.registerEventHandler adds an event listener on the root element', () => {
const {root, component} = setupTest();
const handler = td.func('transitionend handler');
component.getDefaultFoundation().adapter_.registerEventHandler('transitionend', handler);
domEvents.emit(root, 'transitionend');
td.verify(handler(td.matchers.anything()));
});

test('#adapter.deregisterEventHandler remoes an event listener from the root element', () => {
const {root, component} = setupTest();
const handler = td.func('transitionend handler');
root.addEventListener('transitionend', handler);
component.getDefaultFoundation().adapter_.deregisterEventHandler('transitionend', handler);
domEvents.emit(root, 'transitionend');
td.verify(handler(td.matchers.anything()), {times: 0});
});

test('#adapter.computeContentClientRect returns the root element client rect', () => {
const {component, root, content} = setupTest();
document.body.appendChild(root);
Expand Down
66 changes: 6 additions & 60 deletions test/unit/mdc-tab-indicator/sliding-foundation.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@

import td from 'testdouble';

import {captureHandlers} from '../helpers/foundation';
import {setupFoundationTest} from '../helpers/setup';
import {createMockRaf} from '../helpers/raf';
import MDCSlidingTabIndicatorFoundation from '../../../packages/mdc-tab-indicator/sliding-foundation';

suite('MDCSlidingTabIndicatorFoundation');
Expand All @@ -29,45 +27,23 @@ const setupTest = () => setupFoundationTest(MDCSlidingTabIndicatorFoundation);
test(`#activate adds the ${MDCSlidingTabIndicatorFoundation.cssClasses.ACTIVE} class`, () => {
const {foundation, mockAdapter} = setupTest();
td.when(mockAdapter.computeContentClientRect()).thenReturn({width: 100, left: 10});
foundation.activate({width: 90, left: 25});
td.verify(mockAdapter.addClass(MDCSlidingTabIndicatorFoundation.cssClasses.ACTIVE));
});

test('#activate sets the transform property', () => {
const {foundation, mockAdapter} = setupTest();
td.when(mockAdapter.computeContentClientRect()).thenReturn({width: 100, left: 10});
foundation.activate({width: 90, left: 25});
td.verify(mockAdapter.setContentStyleProperty('transform', 'translateX(15px) scaleX(0.9)'));
});

test('#activate registers a transitionend handler', () => {
const {foundation, mockAdapter} = setupTest();
td.when(mockAdapter.computeContentClientRect()).thenReturn({width: 100, left: 10});
foundation.activate({width: 90, left: 25});
td.verify(mockAdapter.registerEventHandler('transitionend', td.matchers.isA(Function)));
td.verify(mockAdapter.addClass(MDCSlidingTabIndicatorFoundation.cssClasses.ACTIVE));
});

test(`#activate adds the ${MDCSlidingTabIndicatorFoundation.cssClasses.SLIDING_ACTIVATE} class`, () => {
test('#activate sets the transform property with no transition, then transitions it back', () => {
const {foundation, mockAdapter} = setupTest();
const raf = createMockRaf();
td.when(mockAdapter.computeContentClientRect()).thenReturn({width: 100, left: 10});
foundation.activate({width: 90, left: 25});
raf.flush();
raf.restore();
td.verify(mockAdapter.addClass(MDCSlidingTabIndicatorFoundation.cssClasses.SLIDING_ACTIVATE));
});

test('#activate resets the transform property', () => {
const {foundation, mockAdapter} = setupTest();
const raf = createMockRaf();
td.when(mockAdapter.computeContentClientRect()).thenReturn({width: 100, left: 10});
foundation.activate({width: 90, left: 25});
raf.flush();
raf.restore();
td.verify(mockAdapter.addClass(MDCSlidingTabIndicatorFoundation.cssClasses.NO_TRANSITION));
td.verify(mockAdapter.setContentStyleProperty('transform', 'translateX(15px) scaleX(0.9)'));
td.verify(mockAdapter.removeClass(MDCSlidingTabIndicatorFoundation.cssClasses.NO_TRANSITION));
td.verify(mockAdapter.setContentStyleProperty('transform', ''));
});

test('#activate does not modify transform if no client rect is passed', () => {
test('#activate does not modify transform and does not transition if no client rect is passed', () => {
const {foundation, mockAdapter} = setupTest();
foundation.activate();
td.verify(mockAdapter.setContentStyleProperty('transform', td.matchers.isA(String)), {times: 0});
Expand All @@ -78,33 +54,3 @@ test(`#deactivate removes the ${MDCSlidingTabIndicatorFoundation.cssClasses.ACTI
foundation.deactivate();
td.verify(mockAdapter.removeClass(MDCSlidingTabIndicatorFoundation.cssClasses.ACTIVE));
});

test(`#deactivate removes the ${MDCSlidingTabIndicatorFoundation.cssClasses.SLIDING_ACTIVATE} class`, () => {
const {foundation, mockAdapter} = setupTest();
foundation.deactivate();
td.verify(mockAdapter.removeClass(MDCSlidingTabIndicatorFoundation.cssClasses.SLIDING_ACTIVATE));
});

test('#deactivate deregisters the transitionend handler', () => {
const {foundation, mockAdapter} = setupTest();
foundation.deactivate();
td.verify(mockAdapter.deregisterEventHandler('transitionend', td.matchers.isA(Function)));
});

test('on transitionend, deregister the transitionend handler', () => {
const {foundation, mockAdapter} = setupTest();
const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
td.when(mockAdapter.computeContentClientRect()).thenReturn({width: 100, left: 10});
foundation.activate({width: 90, left: 25});
handlers.transitionend();
td.verify(mockAdapter.deregisterEventHandler('transitionend', td.matchers.isA(Function)));
});

test(`on transitionend, remove the ${MDCSlidingTabIndicatorFoundation.cssClasses.SLIDING_ACTIVATE} class`, () => {
const {foundation, mockAdapter} = setupTest();
const handlers = captureHandlers(mockAdapter, 'registerEventHandler');
td.when(mockAdapter.computeContentClientRect()).thenReturn({width: 100, left: 10});
foundation.activate({width: 90, left: 25});
handlers.transitionend();
td.verify(mockAdapter.removeClass(MDCSlidingTabIndicatorFoundation.cssClasses.SLIDING_ACTIVATE));
});

0 comments on commit d641cea

Please sign in to comment.