Test Driven Development with Dart/Flutter

[SimonLab]

TDD allow us to think first of which features/functions we want to test. We first write the test which will test a specific aspect of the application. At this stage the test will fail as there is nothing to test yet. We then write the implementation to make the test pass and check that the test are working correctly. Once we know the test is valid we can refactor if necessary. Finally we iterate this process with the other features of the application to arrive at a fully tested application.

Dart documentation for testing: https://dart.dev/guides/testing Flutter documentation for testing: https://flutter.dev/docs/testing

Tasks

• [x] 1. Learn how to do TDD in Dart/Flutter following all the available tutorials.
  • [ ] Share links to all the tutorials you find/follow
  • [ ] Include all the links in the "Relevant Reading" section at the end of /tdd-example/README.md
• [ ] 2. Document the process of doing TDD with a complete example that others can follow. Get inspiration from the existing @dwyl examples. e.g:
  • https://github.com/dwyl/learn-tdd#how
  • https://github.com/dwyl/learn-elm-architecture-in-javascript#how
  • https://github.com/dwyl/phoenix-chat-example#how

The example must:

• [ ] Take the learner through building a basic app from scratch e.g. calculator or counter

• [ ] create a new folder inside learn-flutter called /tdd-example

• [ ] create a new flutter project with all the code.

• [ ] inside the /tdd-example create README.md e.g: /tdd-example/README.md that will contain step-by-step instructions for how to:

  • [ ] define the goal of the basic app that is being created.
  • [ ] write the test(s)
  • [ ] watch it fail
  • [ ] write the code to make the test pass.
  • [ ] include the screenshots of the device screen with the counter or calculator working.

• [ ] 3. Finally, in the https://github.com/dwyl/learn-flutter#flutter-application-test which should be renamed just "Testing" you should link to the tdd-example so that people can follow it to understand the basics of TDD/Testing in flutter.

[nelsonic]

@miguelmartins17 please remember to post comments as you go through any tutorials so that we can all learn. Thanks! 👍

[miguelmartins17]

@SimonLab Sorry for interrupting your work, I don't know if you still remember this tutorial, but if so, the folders "domain", "data" and "presentation" are used for all projects in Flutter with TDD or is it specific for this ? I couldn't understand, if they are folders for all projects. 💭

[nelsonic]

@miguelmartins17 good question. 👍 These folders are used to organise code in a "Good Architecture". It's a convention not a rule. They are not specific to Flutter or to TDD in Flutter. (you can still do TDD in Flutter without these folders...)

Other Programming languages (e.g: Java) follow this pattern. You will sometimes see it described as "Controller, Model, View" (or more commonly "Model View Controller" ("MVC"))

Where:

• Model == Data -> the data created/stored by the App. in the Todo list example the "Todo items".
• Controller == Domain -> the application logic that controls how the app works. Classes & Functions
• View == Presentation -> the UI the user sees an interacts with. The UI widgets on the screen

You don't need to follow this folder structure in order to do TDD in Flutter and not using these folders does not automatically mean your flutter app is "bad". It's just one of the more popular patterns that people tend to follow. In other programming languages/frameworks there is only one way to build an App.

e.g: in Elm there is the "Elm Architecture" that all Elm apps follow. Which is "Update > Model > View" (a variant of MVC). See: https://github.com/dwyl/learn-elm-architecture-in-javascript#what Once you know the pattern, it makes building apps and reading other people's code much easier/faster.

So to answer your question: No, you don't have to use use these folders for all projects. But if you want more people to understand your project, it's highly recommended that you follow some convention/pattern. This one is a good one to follow because it's widely accepted as a "standard" way to structure an application. see: https://www.martinfowler.com/bliki/PresentationDomainDataLayering.html

[miguelmartins17]

@nelsonic So in general the goal of using the folders in this way would be to follow a standard pattern so that everyone understands. 🤔

[miguelmartins17]

@nelsonic I think I've realized it's not mandatory but it's recommended to follow a standard pattern. Even for us developers can help in the organization of the application, besides that it will be easier to explain it that way.

[nelsonic]

@miguelmartins17 yeah, it's just a standard way to organise your project so that other people know where to look for things when they join your team. If they want to understand/update the visual part of the app they would look in the /presentation folder.

Computer programming is complex enough without every project being structured differently. These kinds of conventions make working in teams much more efficient.

You don't have to think about the keyboard layout on your computer/keyboard because there is "standard layout" convention. There are alternatives, but they are rare.

[miguelmartins17]

@nelsonic Thank you for your help. I will continue if there is any doubt, I will ask here or open an issue. 😄

[miguelmartins17]

@nelsonic I think the purpose of this issue would be to summarize the two articles below that are done and I opened a pull request, tell me if I can already pass it as done.

https://github.com/dwyl/learn-dart/pull/13/files

https://github.com/dwyl/learn-dart/pull/12

[nelsonic]

@miguelmartins17 PR https://github.com/dwyl/learn-dart/pull/13 does not have a description and has not been assigned for review so it's not "done". You have prepared the dough to make some bread, but it's not bread yet.

PR https://github.com/dwyl/learn-dart/pull/12 has a description but also has not been assigned for review.

[miguelmartins17]

@nelsonic I don't think I'm allowed to give assignee to anyone, I can't pass to anyone, I tried before.

[nelsonic]

@miguelmartins17 you had write access to the repo:

Your permissions have been updated to admin:

You should be able to assign and add labels. 👍

In future, when you are unable to perform an action, please proactively alert us. 💭

[miguelmartins17]

When I click on Assignee nothing happens.

[nelsonic]

@miguelmartins17 please refresh/reload the page for the permission change to take effect. If it still does not work, comment on the PR. At the very least update the description of PR 13 so it looks complete.

[miguelmartins17]

@nelsonic I've updated the description, the assignees still don't work. https://github.com/dwyl/learn-dart/pull/13

[nelsonic]

Ah ... PEBKAC I added permissions to the flutter-todo-list-tutorial not learn-dart ... You are now admin on learn-dart so you should be able to assign. ✅

[miguelmartins17]

@nelsonic Now that the two PRs I put in have been reviewed, can we get this issue done?

[nelsonic]

@miguelmartins17 the two PRs you created are good but they don't have complete code examples just "snippets" of code which are not enough for a complete beginner to learn from.

I understand that you are keen to close the issue to show progress. but we haven't added either of the two links @SimonLab shared above to any README.md which are the two main/official sources of info on TDD/Testing in Flutter/Dart.

Right now the summary of TDD/testing in https://github.com/dwyl/learn-flutter is this paragraph: That is a superficial mention of what testing is but does not go into any detail of how to do TDD in Flutter.

You have checked off the two sample check list items "Hour 1" and "Hour 2" which we created in Standup on Monday to illustrate how to create checklists in GitHub issues. These aren't real tasks. What does "Hour 1" and "Hour 2" mean? It's almost like you are not taking this seriously and just want to rush things so you can say they are "done" but not actually make the effort to (a) learn for yourself or (b) create a document that will be helpful to others so they can learn things faster than you.

Until we have a comprehensive explanation/example of how to do TDD in Flutter (before building the todo list) we cannot consider this issue to be "done". Luckily you don't have to start with a "blank page" when writing about TDD in Flutter. You can draw "inspiration" from https://github.com/dwyl/learn-tdd#practical

[nelsonic]

@miguelmartins17 in the interest of keeping things clean (this issue already has a large thread of comments that are unrelated to TDD in Flutter), I have created https://github.com/dwyl/learn-flutter/issues/43 which has a comprehensive checklist of what needs to be done to consider the "TDD in Flutter" to be complete. Please pick up the issue and work on it as your next task. Thanks. ☀️