Harness Support for Functional Widgets and Middleware

[agubler]

Type: feature

The following has been addressed in the PR:

• There is a related issue
• All code has been formatted with prettier as per the readme code style guidelines
• Unit or Functional tests are included in the PR

Description:

Harness support for functional widgets and middleware. Introduces a new options argument to the harness that can be used to specify mocks for the widget under tests middleware. The middleware argument accepts a tuple with the "real" middleware function, against the mock middleware function.

const h = harness(() => <MyWidget />, { 
	middleware: [ [ realMiddleware, mockMiddleware ] ] 
});

Mock middleware are also middleware created using the @dojo/framework/core/vdom#create function.

Core middleware from @dojo/framework/core/vdom, such as diffProperty, invalidator, destroy are automatically mocked by the harness.

There are mock factories for resize, intersection and node available from @dojo/framework/testing/mocks/middleware, these are used like this:

const resizeMock = createResizeMock();
const factory = create({ resize });
const App = factory(({ middleware: { resize } }) => {
	const rects = resize.get('root');
	return <div key="root">{JSON.stringify(rects)}</div>;
});
const h = harness(() => <App key="app" />, { middleware: [[resize, resizeMock]] });
h.expect(() => <div key="root">null</div>);
resizeMock('root', { width: 100 });
h.expect(() => <div key="root">{`{"width":100}`}</div>);
resizeMock('root', { width: 101 });
h.expect(() => <div key="root">{`{"width":101}`}</div>);

Related to #352