Flutter unit testing - unable to pump full widget tree - unit-testing

I am just getting started with unit testing in Flutter, and I have hit a bit of a wall. I have a fairly simple app located here:
https://github.com/chuckntaylor/kwjs_flutter_demo
The app is essentially a list view of events where you can tap on one to read more details about the event.
I have two screens for this: events_screen.dart for the list view, and event_screen.dart for the details. I have been trying to write my tests in events_screen_test.dart
My testing difficulties are with the events screen (the list view). After running await tester.pumpWidget(MaterialApp(home: EventsScreen()) I can use find.text('Events') for example to find the title in the AppBar, but I cannot find any of the elements that make up the list.
To clarify further. I am using get_it as a serviceLocator to get the viewModel for the EventsScreen when it loads. The viewModel is the ChangeNotifierProvider, and EventsScreen contains a Consumer to update the list. in EventsScreen initState(), it calls loadEvents() on the viewModel. After loadEvents() is done, the viewModel calls notifyListeners(), so that EventsScreen can update.
How do I ensure that all these steps occur so that I can properly test if the EventsScreen is rendering properly?
I could be approaching this all wrong, so any advice is appreciated.

I have solved my problem, but perhaps someone can shed some light on this. In the end I executed:
await tester.pumpWidget(MaterialApp(home: EventsScreen(),));
// followed immediately by this second pump without arguments
await tester.pump();
At this point, the Widget tree was complete and I could create Finders as I hoped and could run all my expect statements without issue.
I am not sure exactly why this works though.

As you saw calling tester.pump(), after tester.pumpWidget(), do the job. This works for the following reason: you wrote you are using a Provider, and you run a notifyListener after the data are fetched. Now in a normal application run, you see the widget rebuild since you are using a consumer to that provider. In the test environment, this does not occur if you don't explicitly call a "time advance". You can do it calling await tester.pump() (as you did) and this asks to run a new frame on screen, so now you have your list rendered.

Related

Recent MapView issue in Expo standalone Android

This is a new issue, seemingly something to do with google maps API - came out of nowhere for us. It seems impossible but our production app suddenly started throwing an occasional error on our startup screen. Our startup screen is mostly a google Map, which is MapView for expo.
Uncaught Error: Error using newLatLngBounds(LatLngBounds, int): Map size can't be 0. Most likely, layout has not yet occured for the map view. Either wait until layout has occurre or use newLatLngBounds(LatLngBounds, int, int, int) which allows you to specify the map's dimensions.
This only happens on our Android standalone app, through Expo it works fine.
We followed the docs for Android: https://docs.expo.io/versions/v34.0.0/workflow/configuration/#android - we’ve went through these steps. To the best of our knowledge we’ve done the process twice with different API keys, and we get the same result.
We’ve tried fixes suggested here, namely setting height and width based on dimensions, setting flex:1, and setting initialLocation. We use onReady to call the initial start method. Nothing seems to work.
The github link above does have someone running into this as of today. Any ideas how to even debug this?
We just removed everything except the map, including removing markers - and it works. We found the issue only happens when we add a marker with a coordinate, we reproduced this on a new brand new expo app by passing in coordinates to the map, and that caused it to crash on Android (most of the time, but not all) when we build and loaded the APK.
Adding markers through the onReady attribute of a map also didn't stop the crashes.
Turns out it's a non-documented method called onLayout, which is only referenced in the doc for fitToCoordinates. It mentions if this function is called to early then it causes a crash, and you may need to use onLayout. We never called fitToCoordinates but apparently something else inside the MapView does.
Someone put the issue here.
We moved our marker creation logic from onReady to onLayout and it worked.
<MapView
testID="map"
style={{flex: 1}}
onMapReady={this.onMapReady}>
{this.mapIsReady && <Marker
key={id}
coordinate={coordinate}/> }
</MapView>
To:
<MapView
...
onLayout={this.onMapReady}
No more crashes...

unit testing in redux

So the docs suggest using a mock store, but it's just recording all the actions and is not connected to any reducer. I basically just want to unit a test a component, and see that given an action has been dispatched, it changed- something like(in the most general way to describe):
expect(counter.props).to.equal(1)
dispatch(increment())
expect(counter.props).to.equal(2)
any ideas? thanks
There's a couple factors involved here.
First, even in normal rendering and usage, dispatching an action does not immediately update a component's props. The wrapper components generated by connect are immediately notified after the action is dispatched, but the actual re-rendering of the wrapped component generally gets batched up and queued by React. So, dispatching an action on one line will not be reflected in the props on the next line.
Second, ideally the "plain" component shouldn't actually know anything about Redux itself. It just knows that it's getting some data as props, and when an event like a button click occurs, calls some function it was given as a prop. So, testing the component should be independent from testing anything Redux-related.
If it helps, I have a whole bunch of articles on React and Redux-related testing as part of my React/Redux links list. Some of those articles might help give you some ideas.

Calling a function after another function is called

I'm programming a controller for use with Ableton Live 8 using the Python-based API. In my code I use a method provided in the API to watch for changes in a property's value, and call a function whenever the value changes. My goal is to change the color of the clip when the value change is noticed.
I have my code completed, and it compiles without error. From Ableton's log:
742234 ms. RemoteScriptError: RuntimeError
742234 ms. RemoteScriptError: :
742234 ms. RemoteScriptError: Changes cannot be triggered by notifications
742234 ms. RemoteScriptError:
It appears this is the result of using the built-in notification system to make a change to the live set during notification. Triggering the actual change AFTER the listening function has finished executing should work. Is this possible using Python?
Edit for clarification:
currently we have
value change noticed, function called
function attempts to change the clips color (results in error)
we need
listener notices value change, function called
function finds the new color value
function execution ends
another function is called outside the listener's scope, and changes the clips color
I did a lot in M4L and know this error by heart :)
I'm afraid you can't do anything about that - to my noob eyes it looks like a built-in security mechanism so you can't loop (Something changed? Change it! Something changed...).
In M4L i used Javascript Tasks to separate the steps (Tasks forget nearly everything),
something like
Observer -> Something changed
Create a Task that reacts
task.execute() or task.schedule(time)
Maybe the python threading module can achieve something similar?
BTW, if you happen to understand anything about the _Framework-Tasks, let me know.
I was having the same issue trying to delete a track from a clip stop listener, then I found this thread and followed #user2323980 suggestion.
There seems to be a "_tasks" object on every Framework class (I found it throught log_message inside ClipSlotComponent and ControlSurface) that handles concurrency between tasks. And it's really simple to use it:
self._tasks.add(Task.run(func, args))
I found some uses of it on Push and MK2 scripts, those are good references.

Stack Empty issue on concurrent use of MVC application

We recently developed a new ASP.NET MVC 4 web application (C#/Visual Studio). After local testing and debugging we deployed it to production, and then started getting more and more health monitoring mails. These had different Exception messages:
Stack Empty.
Collection was modified; enumeration operation may not execute.
Item has already been added. Key in dictionary: 'ALL_HTTP' Key being added: 'ALL_HTTP' (other keys also mentioned).
Value does not fall within the expected range.
E.g. a whole series of error types we could not simply resolve or reproduce. The 'Stack Empty' is the one occurring most, several 100 times per day (e.g. for 1-10% of users) so we focus on this one, as the other errors seem related. Here is a partial stack trace:
Exception information:
Exception type: System.InvalidOperationException
Exception message: Stack empty.
...
Stack trace: at System.ThrowHelper.ThrowInvalidOperationException(ExceptionResource resource)
at System.Collections.Generic.Stack`1.Pop()
at System.Web.WebPages.TemplateStack.Pop(HttpContextBase httpContext)
As shown stack trace are mostly located completely in the MVC framwork (System.Web). The only place in our own code that regularly occured in some stack traces were in the views (.cshtml files) of the requested URL and then in a #Html.RenderAction() call. By now we have refactored a lot of these to RenderPartial() calls. This lead to no more views in the stack trace, though some RenderPartial now also gave some
Searching for this error indicated concurrency/parallel execution is the cause. This matches the fact that we initially could not reproduce the error locally, but it did happen on production. We have done no load testing, but by now have been able to reproduce the error on a local developer system by starting a lot of applications/requests simultaneously. However in our code NOTHING is done with explicit parallel instructions.
This seems to be related with MVC view's NOT being thread safe. However it is hard to imagine nobody else would have encountered this. We have a few thousand visitors a day, roughly 30+ active users at any moment. Sadly this number is now falling due to decreasing Google ranking (related to this problem).
Does anyone knows a solution/approach to this problem?
I am developing a ASP.NET MVC 4 application and I also came across the errors that you mention. Although they are different they seem to have the same source. After spending several hours trying to find the reason (and a lot of code changes) I have started my analysis from scratch.
Since I am using a Custom Route and there is a handler for that route that checks several things and also accesses the database I started by commenting database access. Opening several browser tabs very quickly (with IISExpress > Show All Application window or by Ctrl+Click in a link) I was happy to see that all the pages were shown properly, instead of several random error messages. Tried that a few times to be sure and concluded that something was wrong while accessing the DB.
public class MyNewRouteHandler : IRouteHandler {
IHttpHandler MvcHandler;
public IHttpHandler GetHttpHandler(RequestContext requestContext) {
MvcHandler = new MvcHandler(requestContext);
// some checkings and
// some database access code
// that was commented
return MvcHandler;
}
}
A colleague suggested that I added a small Thread sleep inside this method: GetHttpHandler. That line made the errors appear again, suggesting that the problem was not related to DB... When I did that I saw that MvcHandler object was being defined as a class property and that could be a source of what appeared to be a concurrency issue (only when multiple almost consecutive accesses were executed, the problem was shown). Moved the MvcHandler object to a local object inside the method.
public class MyNewRouteHandler : IRouteHandler {
public IHttpHandler GetHttpHandler(RequestContext requestContext) {
IHttpHandler MvcHandler = new MvcHandler(requestContext);
// some checkings and
// some database access code
// that was commented
return MvcHandler;
}
}
And after testing, no more errors. Uncommented all my code that accessed the DB (and did other checkings) and still no more errors found. Almost 3 days have gone by and everything still working properly.
This way of doing a Custom Route Handler did solve my most of my errors but I still have a few left and with new messages. One of them pointed to a code line in my Custom Route Handler and all of them had in common the fact that a Dictionary was being handled by the MVC framework, so... do I still have a concurrency problem?
I assumed so and all my method properties were moved inside the public IHttpHandler GetHttpHandler(RequestContext requestContext) method, not only the one mentioned before. One of them was the RouteData collection... Finally and after 2 days it seems that no more errors are showing.

Ember.js: Where is the "start" button?

I'm used to thinking about a single-page application startup happening like this: 1. Bootstrap some data into critical models, 2. Instantiate a master controller, and 3. Call it's render() method to kick things off.
How is this accomplished with Ember? Following the (meager, sigh) examples in the documentation, it seems like things sort of kick off on their own when the page loads -- templates are compiled, views render like magic when the page loads. I feel like I am missing something fundamental. It there an example online of a more complex app, say something with tabbed or dynamically loaded views?
Lightbulb, going off it is not.
I've started a blog series about getting up and running with Ember on Rails. Here's Part 1:
http://www.cerebris.com/blog/2012/01/24/beginning-ember-js-on-rails-part-1/
I hope you'll find it useful, even if you're not planning to use Ember with Rails. Most of the interesting details are client-side and thus server-independent. The posts so far cover creating an Ember.Application object, loading data dynamically through a REST interface, and then rendering an Ember view on a page in handlebars. I hope it's enough to get you started.
When you extend an ember Application object you can provide a ready function which will be called when the application starts. You have to make sure to call this._super() or else it will break your application. Check out my sample sproucore 2.0 application (ember is the new name of sproutcore 2.0).
The way that ember works is that it sets up a run loop which responds to events. Whenever an event fires, the run loop basically calls the necessary handlers and runs any bindings that need to be updated. Since everything typically happens in the run loop you often don't really write any code to update things. Instead you write bindings which are fired when needed.
Another thing I've done is use an Em.StateManager to bootstrap.
App.Loader = Em.StateManager.create({
start: Em.State.create({
enter: function(mgmt, ctx) {
// this code will execute right away, automatically
}
})
});
Since you use create instead of extend, the object will be instantiated immediately. If you define a state called start, it will be recognized as the default initial state (or you can specify another one by name). So the new StateManager object will immediately enter the initial state, and when the StateManager enters a new state, it will always look for a method of that state called enter and fire it if present.
A state manager is the natural place to initialize your app because the object provides ways for you to micromanage execution order during an async loading process without entangling yourself in too many callbacks.