Priority Queue: Invoke callback when flushing queue

packages/priority-queue/src/index.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import requestIdleCallback from './request-idle-callback';
+
 /**
  * Enqueued callback to invoke once idle time permits.
  *
@@ -31,9 +36,6 @@
  * @property {WPPriorityQueueFlush} flush Flush queue for context.
  */
 
-/** @type {typeof window.requestIdleCallback|typeof window.requestAnimationFrame} */
-const requestIdleCallback = window.requestIdleCallback ? window.requestIdleCallback : window.requestAnimationFrame;
-
 /**
  * Creates a context-aware queue that only executes
  * the last task of a given context.
@@ -127,9 +129,11 @@ export const createQueue = () => {
 			return false;
 		}
 
-		elementsMap.delete( element );
 		const index = waitingList.indexOf( element );
 		waitingList.splice( index, 1 );
+		const callback = /** @type {WPPriorityQueueCallback} */ ( elementsMap.get( element ) );
+		elementsMap.delete( element );
+		callback();
 
 		return true;
 	};

packages/priority-queue/src/request-idle-callback.js

@@ -0,0 +1,14 @@
+/**
+ * @return {typeof window.requestIdleCallback|typeof window.requestAnimationFrame|((callback:(timestamp:number)=>void)=>void)}
+ */
+export function createRequestIdleCallback() {
+	if ( typeof 'window' === undefined ) {
+		return ( callback ) => {
+			setTimeout( () => callback( Date.now() ), 0 );
+		};
+	}
+
+	return window.requestIdleCallback || window.requestAnimationFrame;
+}
+
+export default createRequestIdleCallback();

packages/priority-queue/src/test/index.js

@@ -0,0 +1,96 @@
+/**
+ * Internal dependencies
+ */
+import { createQueue } from '../';
+import requestIdleCallback from '../request-idle-callback';
+
+jest.mock( '../request-idle-callback', () => {
+	const emitter = new ( require.requireActual( 'events' ).EventEmitter )();
+
+	return Object.assign(
+		( callback ) => emitter.once( 'tick', () => callback( Date.now() ) ),
+		{ tick: () => emitter.emit( 'tick' ) },
+	);
+} );
+
+describe( 'createQueue', () => {
+	let queue;
+	beforeEach( () => {
+		queue = createQueue();
+	} );
+
+	describe( 'add', () => {
+		it( 'runs callback after processing waiting queue', () => {
+			const callback = jest.fn();
+
+			queue.add( {}, callback );
+
+			expect( callback ).not.toHaveBeenCalled();
+			requestIdleCallback.tick();
+			expect( callback ).toHaveBeenCalled();
+		} );
+
+		it( 'runs callbacks in order by distinct added element', () => {
+			const elementA = {};
+			const elementB = {};
+			const callbackElementA = jest.fn();
+			const callbackElementB = jest.fn();
+			queue.add( elementA, callbackElementA );
+			queue.add( elementB, callbackElementB );
+
+			expect( callbackElementA ).not.toHaveBeenCalled();
+			expect( callbackElementB ).not.toHaveBeenCalled();
+
+			// ElementA was added first, and should be called first after tick.
+			requestIdleCallback.tick();
+			expect( callbackElementA ).toHaveBeenCalledTimes( 1 );
+			expect( callbackElementB ).not.toHaveBeenCalled();
+
+			// ElementB will be be processed after second tick.
+			requestIdleCallback.tick();
+			expect( callbackElementA ).toHaveBeenCalledTimes( 1 );
+			expect( callbackElementB ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'calls most recently added callback if added for same element', () => {
+			const element = {};
+			const callbackOne = jest.fn();
+			const callbackTwo = jest.fn();
+			queue.add( element, callbackOne );
+			queue.add( element, callbackTwo );
+
+			expect( callbackOne ).not.toHaveBeenCalled();
+			expect( callbackTwo ).not.toHaveBeenCalled();
+
+			requestIdleCallback.tick();
+			expect( callbackOne ).not.toHaveBeenCalled();
+			expect( callbackTwo ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+
+	describe( 'flush', () => {
+		it( 'invokes all callbacks associated with element', () => {
+			const elementA = {};
+			const elementB = {};
+			const callbackElementA = jest.fn();
+			const callbackElementB = jest.fn();
+			queue.add( elementA, callbackElementA );
+			queue.add( elementB, callbackElementB );
+
+			expect( callbackElementA ).not.toHaveBeenCalled();
+			expect( callbackElementB ).not.toHaveBeenCalled();
+
+			queue.flush( elementA );
+
+			// Only ElementA callback should have been called (synchronously).
+			expect( callbackElementA ).toHaveBeenCalledTimes( 1 );
+			expect( callbackElementB ).not.toHaveBeenCalled();
+
+			// Verify that callback still called only once after tick (verify
+			// removal).
+			requestIdleCallback.tick();
+			expect( callbackElementA ).toHaveBeenCalledTimes( 1 );
+			expect( callbackElementB ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+} );