I learned this the hard way during my first major Flutter project. I had analytics data scattered across different instances, configuration settings that somehow got out of sync between screens, and log files that were being written to from multiple places simultaneously. The result? A buggy app with memory leaks and data inconsistencies that took weeks to untangle. This is where the Singleton design pattern becomes your best friend. It's like having a single, trusted manager for critical services in your app – ensuring there's only one instance of important classes and providing global access to them.

What is the Singleton Pattern?

The Singleton pattern is one of the most well-known design patterns in software engineering. At its core, it's deceptively simple: ensure a class has only one instance and provide a global point of access to that instance. Think of it like having a single CEO in a company. No matter how many departments need to communicate with the CEO, there's only one person in that role. Similarly, a Singleton ensures that no matter how many parts of your app need access to a particular service, there's only one instance of that service running.

When to Use Singleton (The Good Times)

The Singleton pattern shines in several specific scenarios:

1. Shared Resources Management When you need to manage access to shared resources like files, network connections, or hardware devices, Singleton ensures coordinated access and prevents conflicts.

2. Configuration Management Application settings and configuration data typically need to be consistent across your entire app. A Singleton configuration manager ensures all parts of your app access the same settings.

3. Logging Services Centralized logging is crucial for debugging and monitoring. A Singleton logger ensures all log entries go through the same service, maintaining consistency and proper file handling.

4. Caching Systems Cache managers need to maintain a single source of truth for cached data. Multiple cache instances could lead to inconsistent data and memory waste.

5. Service Locators When implementing service locator patterns, you typically want a single registry that manages and provides access to various services.

When to Avoid Singleton (The Dark Side)

Despite its usefulness, Singleton can become problematic when overused:

1. Testing Difficulties Singletons create global state, making unit testing challenging. They can introduce dependencies between tests and make it difficult to isolate components.

2. Hidden Dependencies When classes use Singletons directly, it's not immediately obvious what dependencies they have, making the code harder to understand and maintain.

3. Tight Coupling Overuse of Singletons can lead to tightly coupled code where classes depend directly on specific implementations rather than abstractions.

4. Concurrent Access Issues In multi-threaded environments, Singletons can introduce race conditions and require careful synchronization.

5. Violating Single Responsibility Principle Singletons often end up doing too much, violating the single responsibility principle and becoming "god objects."

Implementing Singleton in Dart: A Complete Example

enum LogLevel { debug, info, warning, error }

class Logger {
  // Singleton instance
  static final Logger _instance = Logger._internal();

  // Private constructor
  Logger._internal();

  // Factory constructor returns the same instance every time
  factory Logger() => _instance;

  void log(String message, [LogLevel level = LogLevel.info]) {
    final timestamp = DateTime.now().toIso8601String();
    final levelStr = level.toString().split('.').last.toUpperCase();
    print('[$timestamp] [$levelStr] $message');
  }
}

Understanding the Implementation

Let's break down the key components of our Singleton implementation:

1. Private Constructor The Logger._internal() constructor is private, preventing external instantiation of the class. This is crucial for maintaining the singleton guarantee.

2. Factory Constructor The factory Logger() constructor is the public interface for getting the singleton instance. It checks if an instance already exists and creates one only if necessary.

3. Static Instance Variable The _instance variable holds the single instance of the class. It's nullable initially and gets initialized on first access.

4. Thread Safety Considerations In Dart, the null-aware assignment operator (??=) provides basic thread safety for singleton creation. However, for more complex scenarios, you might need additional synchronization mechanisms.

Alternative Singleton Implementations in Dart

1. Eager Initialization

class EagerSingleton {
  static final EagerSingleton _instance = EagerSingleton._internal();

  EagerSingleton._internal();

  factory EagerSingleton() => _instance;
}

2. Using Static Final

class StaticSingleton {
  static final StaticSingleton instance = StaticSingleton._internal();

  StaticSingleton._internal();
}

3. With Async Initialization

class AsyncSingleton {
  static AsyncSingleton? _instance;
  static final Completer<AsyncSingleton> _completer = Completer<AsyncSingleton>();

  AsyncSingleton._internal();

  static Future<AsyncSingleton> getInstance() async {
    if (_instance == null) {
      _instance = AsyncSingleton._internal();
      await _instance!._initialize();
      _completer.complete(_instance);
    }
    return _completer.future;
  }

  Future<void> _initialize() async {
    // Perform async initialization
    await Future.delayed(Duration(seconds: 1));
  }
}

Common Misuse Patterns

1. The "Everything is a Singleton" Anti-pattern

I've seen developers make every service class a Singleton, thinking it's always better to have one instance. This leads to tightly coupled, hard-to-test code.

Bad Example:

// Don't do this!
class UserService {
  static UserService? _instance;
  UserService._internal();
  factory UserService() => _instance ??= UserService._internal();
}

class ProductService {
  static ProductService? _instance;
  ProductService._internal();
  factory ProductService() => _instance ??= ProductService._internal();
}

class CartService {
  static CartService? _instance;
  CartService._internal();
  factory CartService() => _instance ??= CartService._internal();
}

2. Singleton as a Glorified Global Variable

Using Singleton just to avoid passing parameters is a code smell. If you're not truly ensuring single instance semantics, you're probably misusing the pattern.

3. Mutable Singleton State

Making Singleton instances heavily mutable can lead to unexpected behavior and debugging nightmares.

4. Ignoring Disposal and Cleanup

Not properly managing resources in Singletons can lead to memory leaks and resource exhaustion.

Best Practices for Singleton in Dart

1. Use Dependency Injection When Possible

Instead of accessing Singletons directly, consider using dependency injection frameworks like get_it or provider.

// Using get_it for dependency injection
import 'package:get_it/get_it.dart';

final getIt = GetIt.instance;

void setupDependencies() {
  getIt.registerSingleton<Logger>(Logger());
}

class OrderService {
  final Logger logger;
  OrderService({required this.logger});
}

2. Make Singletons Immutable When Possible

If your Singleton doesn't need to change state, make it immutable.

3. Provide Clear Disposal Methods

Always provide ways to clean up resources:

class DatabaseService {
  // ... singleton implementation

  Future<void> dispose() async {
    await _connection?.close();
    _instance = null;
  }
}

4. Consider Using Abstract Interfaces

Make your Singletons implement interfaces to improve testability:

abstract class ILogger {
  void info(String message);
  void error(String message);
}

class Logger implements ILogger {
  // ... singleton implementation
}

5. Document Singleton Behavior

Always document why a class is a Singleton and what guarantees it provides.

Testing Strategies for Singletons

1. Reset Between Tests

void main() {
  tearDown(() {
    // Reset singleton state between tests
    Logger.instance.clearLogs();
  });
}

2. Use Dependency Injection for Testing

class TestableOrderService {
  final ILogger logger;
  TestableOrderService(this.logger);
}

3. Mock Singletons

class MockLogger implements ILogger {
  final List<String> logs = [];

  @override
  void info(String message) => logs.add('INFO: $message');

  @override
  void error(String message) => logs.add('ERROR: $message');
}

Real-world Considerations

In production Flutter apps, I've found that Singleton works well for:

• Analytics services - You want all events going through the same tracking instance

• Configuration managers - App settings should be consistent everywhere

• Cache managers - Shared cache state across the app

• Network clients - Reusing HTTP clients and connection pools

However, I avoid Singleton for:

• Business logic services - These should be injected dependencies

• UI state management - Use proper state management solutions

• Data repositories - These benefit from dependency injection for testing

Performance Considerations

From my experience with Flutter apps, Singletons can improve performance by:

• Reducing object creation overhead

• Sharing expensive resources like network connections

• Maintaining cache state across the application

However, they can hurt performance if:

• They hold onto large amounts of memory

• They prevent garbage collection of unused resources

• They create bottlenecks in multi-threaded scenarios

Conclusion

The Singleton pattern is a powerful tool that, like any tool, can be both helpful and harmful depending on how it's used. In Dart and Flutter development, it's particularly useful for managing shared resources, configuration, and services that truly benefit from having a single instance. The key is restraint. Not every class needs to be a Singleton, and global state should be used judiciously. When you do use Singleton, implement it properly with consideration for testing, resource management, and long-term maintainability. Remember that modern dependency injection frameworks often provide better alternatives to direct Singleton usage, offering the benefits of single instances while maintaining testability and loose coupling. As with any design pattern, the goal isn't to use Singleton everywhere, but to recognize when it's the right tool for the job and implement it thoughtfully.

Coming up next: In our next article, we'll explore the Factory design pattern in Dart. We'll see how Factory methods can help you create objects without specifying their exact classes, making your code more flexible and easier to extend. We'll build a practical example showing how to create different types of payment processors for our food delivery app, and discuss when Factory patterns shine compared to simple constructors. Stay tuned!

If you've ever built a moderately complex Flutter app, you've probably hit that moment where everything starts to feel... messy. Maybe your state management is tangled, your service classes are doing too much, or you're duplicating logic in multiple places. As the codebase grows, so does the pain.

These are signs of architectural drift — when a once-clear structure begins to dissolve under the weight of new features and rushed fixes. The good news? You're not alone, and there's a tried-and-true set of solutions to help: design patterns.

Design patterns aren’t magic wands or rigid blueprints. They're reusable solutions to common software design problems — kind of like best practices distilled into patterns. And yes, they absolutely apply to Dart and Flutter.

Let’s explore why design patterns are worth your time as a Dart developer, how they show up in real-world Flutter apps, and how they can make your architecture cleaner, leaner, and more maintainable.

What Are Design Patterns?

In plain terms, design patterns are general solutions to recurring problems in software design. They’re not chunks of copy-pasteable code but more like conceptual guides or best practices you can implement in different contexts.

The idea gained popularity through the Gang of Four (Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides), who documented 23 classic patterns grouped into three categories:

Creational Patterns – Deal with object creation logic.

Structural Patterns – Deal with object composition and relationships.

Behavioral Patterns – Deal with communication between objects.

Design patterns are language-agnostic, but can and should be adapted idiomatically in Dart — especially with Flutter’s component-driven architecture and reactive programming style.

Why Dart Developers Should Care

Flutter allows you to build rich UIs quickly, but without good structure, things can spiral fast. As your app grows, features become harder to isolate, test, and debug.

Here’s how design patterns help:

• Maintainability – Changes are easier when responsibilities are clearly separated.

• Reusability – Patterns can be reused across different projects or parts of the app.

• Scalability – Your codebase remains structured even as it grows.

• Separation of Concerns – Business logic, data layers, and UI are decoupled.

Example Problem

You might start by making network calls directly inside your widgets. Then, business logic spreads everywhere. When the backend changes or you need to cache data locally, your only option is a painful refactor. A Repository or Facade pattern would have saved the day.

Categories of Design Patterns (With Dart/Flutter Examples)

• Creational Patterns

How objects are created in a flexible, scalable way.

• Structural Patterns How objects and classes are composed to form larger structures.

• Behavioral Patterns How objects communicate and responsibilities are assigned.

Real-world Use Cases in Dart/Flutter

Let’s zoom into a few Dart-specific examples:

Singleton for app-wide services

class AuthService {
  static final AuthService _instance = AuthService._internal();
  factory AuthService() => _instance;
  AuthService._internal();

  User? _currentUser;
  bool get isAuthenticated => _currentUser != null;

  Future<void> login(String email, String password) {
    // Login implementation
  }
}

Factory for widget creation

abstract class ButtonFactory {
  Widget createButton(ButtonType type, String text, VoidCallback onPressed);
}

class MaterialButtonFactory implements ButtonFactory {
  @override
  Widget createButton(ButtonType type, String text, VoidCallback onPressed) {
    switch (type) {
      case ButtonType.primary:
        return ElevatedButton(onPressed: onPressed, child: Text(text));
      case ButtonType.secondary:
        return OutlinedButton(onPressed: onPressed, child: Text(text));
      case ButtonType.text:
        return TextButton(onPressed: onPressed, child: Text(text));
    }
  }
}

Observer via ValueNotifier or Stream

class CounterNotifier extends ValueNotifier<int> {
  CounterNotifier() : super(0);

  void increment() {
    value++;
  }

  void decrement() {
    value--;
  }
}

// Usage in widget
class CounterWidget extends StatelessWidget {
  final CounterNotifier counter;

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<int>(
      valueListenable: counter,
      builder: (context, count, child) {
        return Text('Count: $count');
      },
    );
  }
}

Facade to simplify complex APIs

class UserFacade {
  final ApiService _apiService;
  final DatabaseService _dbService;
  final CacheService _cacheService;

  UserFacade(this._apiService, this._dbService, this._cacheService);

  Future<User> getUser(String id) async {
    // Try cache first
    final cachedUser = await _cacheService.getUser(id);
    if (cachedUser != null) return cachedUser;

    // Try local database
    final dbUser = await _dbService.getUser(id);
    if (dbUser != null) {
      await _cacheService.setUser(dbUser);
      return dbUser;
    }

    // Fetch from API
    final apiUser = await _apiService.fetchUser(id);
    await _dbService.saveUser(apiUser);
    await _cacheService.setUser(apiUser);
    return apiUser;
  }
}

Decorator to enhance UI widgets

class LoadingDecorator extends StatelessWidget {
  final Widget child;
  final bool isLoading;

  const LoadingDecorator({
    required this.child,
    required this.isLoading,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        if (isLoading)
          Container(
            color: Colors.black26,
            child: Center(child: CircularProgressIndicator()),
          ),
      ],
    );
  }
}

Design Patterns and Clean Architecture

Clean Architecture emphasizes separation of concerns: UI, business logic, and data handling should live in distinct layers. Here’s how design patterns help:

Use Cases: Implemented using the Command or Strategy pattern to isolate logic.

Repositories: Abstract data sources using Factory, Facade, or Adapter patterns.

UI: Uses Observer or State patterns to react to changes.

The result? Code that’s easier to test, maintain, and expand.

Misconceptions and Anti-patterns

1. “Design patterns are too heavy.” No, they’re lightweight guidelines when used correctly. Use what makes sense — and keep it simple.

2. Overusing Singleton Not everything should be globally available. Overuse leads to tight coupling and poor testability.

3. Forcing patterns unnecessarily Don’t use a pattern just because you can. Apply them where there’s a clear need.

Series Preview / What’s Coming Next

This article kicks off a deep-dive series into Design Patterns in Dart/Flutter, where we’ll explore:

🔹 Creational Patterns – Singleton, Factory, Builder

🔹 Structural Patterns – Adapter, Facade, Decorator

🔹 Behavioral Patterns – Observer, Strategy, State

Each pattern will include:

• Real Dart/Flutter code

• Practical use cases

• When to use (and when not to)

• Common mistakes

Conclusion

Whether you're building a side project or leading a team on a production app, design patterns help you write cleaner, more scalable, and easier-to-understand Dart code.

They’re not academic fluff — they’re proven tools used by seasoned developers across industries.

💬 Now it’s your turn:

• Follow the series

• Share your favorite pattern

• Or suggest one you’d love to see covered next

• Let’s build apps that don’t just work — but scale beautifully.

See you in the next article! 💙

Steps

• Create different emulator devices you want to run your application on. e.g iOS devices, Android device

NB: I won't be showing how to create emulator devices, follow below link on how to create the emulator

How to create Android and iOS emulator device .

• Make sure all the devices are launched.i.e all devices for iOS and Android.

• Get ID for all your devices, to get the device id run flutter devices on your terminal to get your device id. [screenshot below]

• Create a launch configuration setting for your flutter project. [screenshot below]

• Create a device profile for each of the devices in the launch.json

{
      "name": "iPad Pro",
      "request": "launch",
      "type": "dart",
      "deviceId": "CE96E50B-A047-40D9-9921-1359CA2CF231"

}

NB: name is the profile name i.e device name although it can be any name. below is the sample configuration setting for my flutter app

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter",
      "request": "launch",
      "type": "dart"
    },
    {
      "name": "Android",
      "request": "launch",
      "type": "dart",
      "deviceId": "emulator-5554"
    },
    {
      "name": "iPhone",
      "request": "launch",
      "type": "dart",
      "deviceId": "iPhone"
    },
    {
      "name": "iPad Pro",
      "request": "launch",
      "type": "dart",
      "deviceId": "CE96E50B-A047-40D9-9921-1359CA2CF231"
    }
  ],
  "compounds": [
    {
      "name": "All Devices",
      "configurations": ["Android", "iPhone", "iPad Pro"]
    }
  ]
}

Official Flutter Youtube Channel

Flutter Youtube channel is a goto place to learn things about flutter, the Flutter team has published various content on flutter. you will get to know things about different widgets, Google IO videos content on flutter, Flutter Interact and lot more.

MTECHVIRAL

MTECHVIRAL is a youtube channel created and managed by Pawan Kumar known as imthepk, Pawan Kumar is the first Google Developer Expert in Indian and he is also an expert for web, firebase e.t.c. He has spent the last 2 years creating a lot of awesome content on flutter.

Fireship

Fireship has huge content that varies from the web, firebase, flutter e.t.c. Fireship is a goto place to learn various things as a flutter developer either beginner, intermediate or expert. Fireship was created and managed by Jeff Delaney. Jeff Delaney is a Google Developer Expert for firebase and he is passionate about creating content for the community.

Code With Andrea.

Andrea Bizzotto is a Google Developer Expert in Flutter, Udemy instructor and the founder of CodeWithAdrea Youtube channel. Andrea created the channel to be a better flutter developer and he has published videos on flutter for the community.

Marcus Ng

Marcus Ng is a mobile app developer specializing in building apps with Flutter and Swift. Marcus Ng is also an Udemy instructor and the founder of Marcus Ng youtube channel, he has published a lot of flutter content on his youtube channel. feel free to give his channel a shot.

Raja Yogan

Raja Yogan Youtube channel was created and managed by Raja Yogan himself. Raja Yogan is a Software Engineer, Consultant, and Architect in India, who is passionate about flutter, firebase, and mobile app development. Raja Yogan Youtube channel has a lot of flutter tutorials, tip, and trick you can learn as a flutter developer

Reso Coder

Reso Coder is a Youtube channel that has a lot of content for beginner, intermediate and expert alike. Subscribe to the channel so you can catch up with the upcoming video

Techie Blossom

Techie Bossom is a youtube channel that has a lot of amazing content around flutter, firebase, and web. if you are a beginner flutter developer who wants to build apps to have the experience, Techie Blossom youtube channel is for you.

FilledStacks

Another Youtube channel to explore its content is FilledStack. FilledStack has content dedicated to flutter alone, there are a lot of flutter widgets, tricks and tips you need to add to what you already know. Filledstack also has a dev blog where you can read and learn thing around flutter click here

The Net Ninja

The Net Ninja is a youtube channel that has a lot of amazing content not only flutter also various content across all areas on the web. The Net Ninja channel was created and managed by Shaun. Shaun is a Udemy instructor who is obsessed with technology and loves creating content around it.

Conclusion

I hope the above channels will help you to learn flutter faster and easier, if you have any other youtube channel that is not on the list please feel free to drop it in the comment box.

Steps to fix firebase plugin error

• Enable multiDex in your defaultConfig build.gradle file.

To enable multiDex, navigate to your android project folder. Inside your app folder, open your build.gradle file at the app level then add google support service at the defaultConfig section

multiDexEnabled true

overall default config should look like below

 defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.bloc_demo"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        multiDexEnabled true
    }

In your targetSdkVersion in the defaultConfig object change the value to 28 and in your compileSdkVersion at the android level declaration change the value to 28.

Add google service to your gradle file if not present, you can do so by using the below snippet

apply plugin: 'com.google.gms.google-services'

But in case you have any issue, below is how my gradle file look like:

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.google.gms.google-services'

android {
    compileSdkVersion 28

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.bloc_demo"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        multiDexEnabled true
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig signingConfigs.debug
        }
    }
}

flutter {
    source '../..'
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'com.google.firebase:firebase-analytics:17.2.0'

}

• Fixing and adding google service to build.gradle file at the project level

At the dependencies section in the build.gradle file, add google service to it if not present.

 classpath 'com.google.gms:google-services:4.2.0'

Below is how my build.gradle file at the project level look like in case you have any issue with the file

buildscript {
    ext.kotlin_version = '1.2.71'
    repositories {
        google()
        jcenter()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.2.0'

    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

• Enable AndroidX in your gradle.properties file

To enable AndroidX at the root level, open gradle.properties file and paste below snippet

android.useAndroidX=true
android.enableJetifier=true

Below is how my gradle.properties file looks like in case you want to compare with yours

org.gradle.jvmargs=-Xmx1536M
android.useAndroidX=true
android.enableJetifier=true

Conclusion

Wow! that's the end of the article if you get to this point, you would have definitely fix AndroidX error in your flutter application and your application is working well. If you have an issue or encounter any error, feel free to drop it in the comment box I will respond to it asap.

Before I dive into StreamBuilder let me quickly digress to Stream, StreamController, they are the building blocks of Streambuilder.

What is a Stream

Well, you are thinking, Is that stream I'm talking about! No it's not But think of it has the typical stream, A stream is an Event that's uncontrolled, that can be generated from a Future, network access, reading of files(local/network) e.t.c.which has an input(i.e where it's coming from) and output(i.e where it's going). You can also think of Stream as a pipe that has an input called the sink and output called stream. How to create a stream

• From Future: Stream.fromFuture(future); -From Iterable: Stream.fromIterable(Iterable <T> elements); -From StreamController

Read more about Stream:https://api.flutter.dev/flutter/dart-async/Stream-class.html

StreamController

the GIF image above explains a lot about StreamController, a StreamController allows you to have control over your Stream, i.e you can listen to a stream, add Stream to your StreamController, you can pause, stop your stream. if there are errors, StreamController allows you to catch those errors and handle them gracefully, StreamController gives you access to the 360-degree life cycle of a stream. StreamController API exposes some method such as: sink(which allows you to add data event) stream(the stream StreamController is controlling) map, transform (which allows you to modify or intercept your data before it emits out as a stream).

Adding Event via StreamController StreamController exposes a sink method which allows you to add item to the stream which will be emitted as a stream using stream method.

StreamController _streamController = StreamController();
//Add event/Data to the StreamController
_streamController.sink.add(data);  //NB: data can be any type i.e primitive/non-primitive

//data added to the Controller via the sink is emitted as Stream via stream method.
Stream strem = _streamController.stream;

Read more about stream https://api.flutter.dev/flutter/dart-async/StreamController-class.html.

StreamBuilder

StreamBuilder is a widget that allows you to convert your stream object to a widget. rebuilding widget is basically done using setState, but performance-wise it isn't efficient because setState rebuild the whole widget and every child(s) widget, come to think of it, if you only need to rebuild a single widget then setState is a bad idea, so using StreamBuilding is your best shot. You can rebuild a single widget of your choice without touching or rebuilding the whole widget family tree.

//let assume we have a stream will want to consume

 Stream stream =Stream.fromFuture(Favourite().getAllFavourite(data));
  StreamBuilder(
    stream: stream,
    builder: (BuildContext context, AsyncSnapshot snapshot){
      if(snapshot.data !=null){
        return Widget();
      }

    },
  );

NB: in the above snippet we try to convert our Stream to a widget, in the builder function which accepts BuildContext and AsyncSnapshot as a parameter it looks exactly like FutureBuilder if you are familiar with it. we can get access to our Stream data using snapshot.data.

if you want to check your connection state, maybe to perform a specific operation, you can do that with the below snippet;

StreamBuilder(
    stream: stream,
    builder: (BuildContext context, AsyncSnapshot snapshot){
      if(snapshot.connectionState == ConnectionState.active){
         // Your statement when the connection mode is in active state
      }
      else if(snapshot.connectionState == ConnectionState.done){
             //Your statement when the operation has finished execution
      }
      else if (snapshot.connectionState == ConnectionState.none){
           //Your statement when the connection is not available
      }
      else if( snapshot.connectionState == ConnectionState.waiting){
        //Your statement when the connection state is in waiting mode
      }
      else{
        // else Statement
      }
    },
  );

below is the demo of how I used Streambuilder on flutter boilerplate counter app instead of setState.

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  StreamController _streamController ;
  Stream _stream;

  @override
  void initState() {
    _streamController = StreamController();
    _stream= _streamController.stream;

  }

  void _incrementCounter() {
  _streamController.sink.add(_counter++);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
           StreamBuilder(
             stream: _stream,
             builder: (BuildContext context, AsyncSnapshot snapshot){

               return  Text(
               snapshot.data!=null ? snapshot.data.toString() : "0",
                 style: Theme.of(context).textTheme.display1,
               );
             }
           )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  @override
  void dispose() {

  }
}

you can check out the source code on Github: https://github.com/DAMMAK/flutter-counter-app-with-stream

Provider State management package

using a state management package allows you to manage your state globally in your application, it is more like having a global store where each page, widgets can connect directly to and access and manipulate data.

Steps:

1. How to install Provider Package add below snippet in your pubspec.yml file under the dependencies section

provider: ^3.1.0+1

OR

//to have the latest provider package
provider:

2. create a dart file that has all your theme definition

//theme.dart

ThemeData darkTheme = ThemeData.dark().copyWith(
    primaryColor: Color(0xff1f655d),
    accentColor: Color(0xff40bf7a),
    textTheme: TextTheme(
        title: TextStyle(color: Color(0xff40bf7a)),
        subtitle: TextStyle(color: Colors.white),
        subhead: TextStyle(color: Color(0xff40bf7a))),
    appBarTheme: AppBarTheme(color: Color(0xff1f655d)));

ThemeData lightTheme = ThemeData.light().copyWith(
    primaryColor: Color(0xfff5f5f5),
    accentColor: Color(0xff40bf7a),
    textTheme: TextTheme(
        title: TextStyle(color: Colors.black54),
        subtitle: TextStyle(color: Colors.grey),
        subhead: TextStyle(color: Colors.white)),
    appBarTheme: AppBarTheme(
        color: Color(0xff1f655d),
        actionsIconTheme: IconThemeData(color: Colors.white)));

3. Create a theme model

you need to create your theme model

import 'package:flutter/material.dart';
import 'package:whatsapp/theme.dart';

enum ThemeType { Light, Dark }

class ThemeModel extends ChangeNotifier {
  ThemeData currentTheme = darkTheme;
  ThemeType _themeType = ThemeType.Dark;

  toggleTheme() {
    if (_themeType == ThemeType.Dark) {
      currentTheme = lightTheme;
      _themeType = ThemeType.Light;
      return notifyListeners();
    }

    if (_themeType == ThemeType.Light) {
      currentTheme = darkTheme;
      _themeType = ThemeType.Dark;
      return notifyListeners();
    }
  }
}

Explanation:

• we are creating an enum type for our theme, which we allow us to assign a type to each Themedata, it also helps us to check currently theme efficiently

• We create a class that extends ChangeNotifier, create currentTheme as a property of ThemeData and set the default value to darkTheme and also property _themeType then assign your current themeType to it. you can set any theme of your choice, it's the theme that will be the default app theme

• create a method that handles the toggling of your theme from theme 1 to theme 2. But the most important part is to call notifyListener() method, it is the method that informs your store that your state value has changed.

Wrap provider Class as a parent of your MaterialApp, which will allow all pages, widgets e.t.c have access to the provider value.

void main() => runApp(
ChangeNotifierProvider<ThemeModel>(
    builder: (BuildContext context) => ThemeModel(), child: MyApp()));

Consuming your state value anywhere in your application

Provider.of<object>(context);

it allows you to access your provider store value and access your data. by specifying the ThemeModel.

below is your output

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: Provider.of<ThemeModel>(context).currentTheme,
      home: MyHomePage(title: 'WhatsApp'),
    );
  }
}

Finally, Adding toggle widget to your app, this is the widget that will eneable you to switch from theme 1 to theme 2 and vice-versa. for the sake of simplicity of the article, I will just add a RaisedButton widget to MyHomePage Screen. snippet below

class MyHomePage extends StatelessWidget
{
final String title;

MyHomePage({this.title});

Widget build(BuildContext context){
 return Scaffold(
     appBar: AppBar(
     title: Text(widget.title)),
     body: Center(
child:RaisedButton(child: Text("Change Theme",
 onpressed:(){
Provider.of<ThemeModel>(context).toggleTheme();
}
))
);
}

}

NB: Provider.of<ThemeModel>(context).toggleTheme(); allows you to connect to your themeModel class and run toggleTheme() method.

Conclusion

The main purpose of this article is to allow you, to have an understanding of how you can create your own multi-based flutter applications using Providers State management package.

What is ParcelJS?

ParcelJS is a web application bundler, differentiated by its developer experience. It offers blazing-fast performance utilizing multicore processing and requires zero configuration. With parcel, you don't have to set up any configuration or any loader for either CSS, JS, assets e.t.c.

Why you should use Parcel

• Zero configuration:

• Performance

• Hot Module Replacement

• Code Splitting

• Support many asset types

Get Started with ParcelJS

Initialize npm in order to generate package.json file

npm init -y

Install ParcelJS Bundler as a global package using npm

npm install -g parcel-bundler

using yarn:

yarn global add parcel-bundler

How to serve your project

ParcelJS can use any kind of file as an entry point to serve but it's advisable to serve your HTML/jS file e.g index.html/index.js, about.html/about.js. you can serve your files with the following command:

parcel filename.extension

parcel index.html

After you have run your parcel command it will generate an address http://localhost:1234 where you can view your website. ParcelJS also support watch mode, which basically watches every change in your project and update it directly to your browser.

parcel watch index.html

you can as well watch multiple entry files with parcel watch file1, file2.. file N

parcel index.html about.html service.html contact.html

Importing asset into your project

You can import different types of assets such as (CSS, SCSS, LESS, STYLUS, Images e.t.c) into any javascript.

CSS

import './style.css

SCSS

import './style.scss`

NB: to compile SCSS you need to install npm package called sass

npm install -D sass

JAVASCRIPT

//ES6 Import 
import './script.js

or

//commonJS module

const script = require('./js/script');

Bundling your project for production

To bundle your project for production, you don't have to do any configuration or stress yourself, Parcel will automatically figure out all your files in your project(js,css, scss, jpg, png, svg e.t.c) and bundle everything for you, which you can push to production. use the following command to run your build process.

parcel build index.html

Demo

Let create a simple project that fetches user from Randomusers and displays it on the screen.

first let install parcel-bundle as a dev dependency, because we only need the package in our development stage, it won't go with our production build. But if you have installed it as a global package you don't have to install it again. if you haven't then you can either install as a dev dependency or global dependency.

npm install -D parcel-bundler

then create an index.html and index.js file in the root directory, index.html will be our starting point because the browser can only paint element/assets in HTML file on the screen.. index.js file will be the root where will be connecting all our pages/components to the DOM.

then let create a folder called pages, this is where all our pages files will reside.

NB: you can structure the project as you want, what matters most is when you are importing your files, make sure your path name is correct.

in the index.html file let include our index.js file, the markup should look like below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Parcel Tutorial</title>
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

then modify your package.json file, in the scripts section add dev and build command. your script section should look like the scripts section below.

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }

NB: the dev script command we will be using during the development stage after we are done developing, that's when we will then use build script command to bundle our files to production.

Adding our Javascript into our Pages folder

let create a file called users.js, it going to export a function that will consume the API from Random Users and return the list of users. which we can later import and reuse anywhere in our application.

export const users = () => fetch("https://randomuser.me/api/?results=10").then(res => res.json())

Adding CSS to your project.

Personally, I always create a separate CSS file for every component/page. e.g home.css, about.css e.t.c. and each component/page in a different folder. But for the sake of this tutorial not to make it look more complex. I'm just using a single component/page. You can follow the pattern and approach that works for you, what matters is when you're importing your file make sure your path is always correct.

let create another file called home.js, which will be component /page that will list our users. copy below snippet to the file.

.title {
  color: #fff;
  margin-bottom: 2rem;
  text-align: center;
}
.userAvatar {
  border-radius: 50%;
}
.user {
  list-style: none;
  display: flex;
  padding-left: -2rem;
  /* padding: 0; */
  margin-left: -2.5rem;
  padding: 10px;

  &:not(:last-child) {
    border-bottom: solid 1px #ccc;
  }
  &-details {
    margin-left: 10px;
    margin-top: 4px;
  }

  &-name {
    font-weight: bolder;
    font-size: 18px;
  }
  &-email {
    font-style: italic;
  }
}
body {
  background-color: rgb(131, 4, 153);
  font-size: 16px;
}

.users {
  width: 40vw;
  margin: auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
}

.loader {
  color: #fff;
  font-size: 30px;
  font-weight: bolder;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: (-50, -50);
  z-index: 1000;
}

After you have created our stylesheet and users.js file that has a list of users from https://randomuser.me. let import our stylesheet and users into our main.js file.

full source code for main.js below.

import "./home.scss";
import { users } from "./users";

export const home = () => {
  const wrapper = document.createElement("section"); //Create an element that will wrap other elements i.e parent.
  wrapper.classList = "home"; //assign class home from our stylesheet
  const title = document.createElement("h1");
  title.innerHTML = "Welcome to Parcel Bundler Demo";
  title.classList = "title";
  const ul = document.createElement("ul");
  ul.classList = "users";
  //Create a loader element
  const loader = document.createElement("div");
  loader.innerHTML = "Loading...";
  loader.classList = "loader";
  wrapper.appendChild(loader); // add the loader to home wrapper element

  users().then(({ results }) => {
    loader.style.display = "none"; // hide loader when users are available from the API.
    results.forEach(user => {
      const li = document.createElement("li");
      li.classList = "user";
      //create User Avatar element
      const userAvatar = document.createElement("img");
      userAvatar.setAttribute("src", user.picture.thumbnail);
      userAvatar.classList = "userAvatar";
      li.appendChild(userAvatar); // append user avatar to the list
      //Create user details element
      const userDetails = document.createElement("div");
      userDetails.classList = "user-details";
      //user's name element
      const userName = document.createElement("div");
      userName.classList = "user-name";
      userName.innerHTML = `${capitalize(user.name.title)} ${capitalize(
        user.name.first
      )} ${capitalize(user.name.last)}`; //assign name to user's name element
      userDetails.appendChild(userName); // append it to userdetail element
      //Create user's email address element
      const userEmail = document.createElement("div");
      userEmail.classList = "user-email";
      userEmail.innerHTML = `${user.email}`; //assign email address to user's email address element
      userDetails.appendChild(userEmail); //append it to userdetail element
      li.appendChild(userDetails); //append userdetail element to the list
      ul.appendChild(li); // append the list to parent element ul
    });
  });

  wrapper.appendChild(title);
  wrapper.appendChild(ul);

  return wrapper;
};

//Accept a string and return the string in capitalize format
const capitalize = string => {
  return string.charAt(0).toUpperCase() + string.slice(1);
};

after we have created our home.js and pasted the source code above inside the file, take a look where we declare the home function, we export the function i.e we are to use it somewhere else (reuseable).

go to index.js file that we create earlier which is going to be the starting point of our project. if you remember we include the index.js into our index.html. it is the index.js file that the index.html file will load and index.js file will actually make use of every page will create.

import { home } from "./pages/home";

const app = document.createElement("div");
app.setAttribute("id", "app");
app.appendChild(home());
document.body.appendChild(app);

NB: Basically, what index.js file does is to collect the view created in the home.js page and append it into the document body. i.e (browser screen).

Running your Application To run your application, we will execute the npm script command we created earlier

npm run dev

NB: if you are having an error in your project that was due to ES7 syntax used in the project. you can try to install the following npm package @babel/core and @babel/plugin-transform-runtime

npm install -D @babel/core @babel/plugin-transform-runtime

then create a .babelrc file in the project root folder telling your project to use one of the babel transform runtime plugins that will transpile the ES7 to what your browser can understand. use below snippet.

{
  "plugins": ["@babel/plugin-transform-runtime"]
}

Demo result below

Bundling your application for production.

After the development of your project, you will want to deploy your application to production, that's one of the main purposes of using Parcel is minified and reduce your project files size. you can run your build command you set in your script section

npm run build

Conclusion.

The main purpose of this article is to introduce you to ParcelJs and get you started with ParcelJs, with this article you will be able to develop and deploy any javascript project to production. parcel js helps to bundle your app into small size You can find the demo for this project on Codesandbox and the source on Github.

NB:, if you have any questions or any part is not clear. you can drop it in the comment box. I'm always at your service.

ESLINT is a pluggable linting utility for Javascript and JSX, it helps to discover possible errors.

VS Code is one of the top editors for development it was developed and maintained by Microsoft it helps to improve productivity and also comes with many features, one of the features I am going to emphasize on is an extension. Extensions are external packages in VS Code that allows you to extend the functionalities of your editor you can download VS Code from their official website VS Code Download

NB: I won’t be digging deep into VS Code..everything on VS Code in this post will only be related to ESLINT.

steps:

• create a javascript project

• install eslint as an extension in your VS Code Editor

• Install eslint as a global package using npm

• initialize eslint in your javascript project

• modify your eslint configuration file in your project.

let create a simple javascript project using

npm init --yes

after the operation was successful it will create a package.json file that will manage all configuration for our project.

let try to install ESLINT extension on vs code editor

once we have installed eslint extension on our vs code editor then let install eslint as a global package via npm using the below code

npm install eslint -g

you need to initialize eslint in your project so you can leverage the power of eslint. From your root project enter the below code to initialize eslint

eslint --init

during the initialization, eslint will ask you some questions, more like to set up your configuration file.

How would you like to use ESLint?

• To check syntax only => it helps you correct your syntax and make sure it conforms to the standard.

• To check syntax and find problems => to help you check for syntax correctness and also help to find any problems in your codebase.

• To check syntax, find problems, and enforce code style => to help you check for syntax, find problems and enforce style, enforcing style means to conforms to a particular coding standard such as Airbnb, Google, and other Standard coding styles. But I always go for the last option the one with syntax, find problems and enforce code style.

What type of modules does your project use?

• Javascript module (import/export) => if your project has babel installed then you definitely need to choose this option. If you are working on a project such as React, Vue, Angular e.t.c they all use babel so you need to choose this option.

• CommonJS (require/exports) => this option is meant for commonJS that has nothing to do with babel, maybe your nodejs project and any other javascript project.

Which framework does your project use?

• React => if you are using react in/for your project then this option is for you

• Vue => if you are using Vue in/for your project then this option is for you.

• None of these => if you are using neither React or Vue in your project choose this option

Where does your code run?

• Browser => if your project runs on browser e.g React, Angular, Vue e.t.c then go for this option
• Node => if your project is a node based then gladly choose this option How would you like to define a style for your project?

• Use a popular style guide => This allows you to choose from a set of popular styles such as Airbnb, Standard and Google style guide, it is advisable to choose this option in order for you to follow the popular and most used style guide and I will be choosing this option in this post.

• Answer questions about your style: This is for the custom style guide

• Inspect your JavaScript file(s).: custom style guide

What format do you want your config file to be in?

• Javascript => whether you want your eslint config file to be in .jsfile YAML => whether you want your eslint config file to be in .yamlfile JSON => whether you want your eslint config file to be in .jsonfile you can choose any option in this section.

after you have chosen your preferred configuration file type it will then prompt you to install all necessary dependencies. after all necessary dependencies have been successfully installed it will now generate a config file with “.eslintrc”.”js/json/yaml”. example of the the configuration file shown below

below is a little animated image that shows how vs code works with eslint to notify you of errors in your javascript project

Setting up rules for ESLINT in your project

Defining rules for ESLINT in your project informed eslint the kind of rules you want to add or remove. you can modify/set your rules in the rules section in the configuration file example of rules to set are

"rules" : {
  no-console: 0; 
  no-empty: 0;
  no-irregular-whitespace:0;
}

you can define as many rules as possible, you can read more on ESLINT rules on their official documentation ESLINT Rules Documentation.

Lastly, I am going to show you how you can link your eslint to your javascript project compiler/transpiler

steps below

• Goto your package.json file, in the script segment in your file, add the following

script:{
    "lint":"eslint"
}

NB: “lint” is just an ordinary word, you can use any word you are comfortable with then in your root project, you can run your linting script with

npm run lint

Conclusion

ESLINT will help you to increase your productivity, write your code according to standard and flag errors when your codebase is breaking style guide rules. With this post, you should be able to integrate ESLINT in your JavaScript project.

Why you should follow Test Driven Development Principle

1. It makes debugging easier: Just imagine their is a bug or issue in your codebase with test driven development approach, your test cases will definitely fail and you will know exactly where to look, what to look for and what to modify. it makes development more easier.

2. It works the way you wanted it: Test Driven Development helps and ensure your code works exactly the way you want it.

Types of Test Driven Development

Unit Test

Unit test is a type of software development testing where individual/unit component of a software are tested. The process is done during the development of an application, to ensure and verify the correctness of a units/component of code.

Integration Test

Integration test is the process of testing collection/group of unit/component. Integration test is done upon completion of unit tests.

Acceptance/E2E(end to end) Test

End-to-end testing is a methodology used to test whether the flow of an application is performing as designed from start to finish. The purpose of carrying out end-to-end tests is to identify system dependencies and to ensure that the right information is passed between various system components and systems.

Test Driven Development Cycle

There are 3 cycle behind test Driven Development,Red, Green and Refactor just like there are 3 cycle behind traffic light control red, yellow and green.

• Red: write a test and it fail

• Green: write a test for a functionality and make sure it pass the test

• Refactor: Optimizing the previous passed test and make sure all test cases pass.

What is Jest?

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!

How to install jest in your Javascript Project

using yarn you install jest with below code

yarn add --dev jest

using npm you can install jest with below code

npm install --save-dev jest

TDD keyword you should know in Jest

expect: When you're writing tests, you often need to check that the values met certain conditions. expect gives you access to a number of "matchers" that let you validate different things. expect accept a value(a value you want to check against what you are expecting).

E.g

expect(sum(1,2)).toBe(3);
expect(sum(1,2)).toBeA(number);
expect(sum(1,2).toEqual(3);

expect function has some matcher you can use and chain with in jest. such as .toBe() , toBeA , toEqual ,toContainEqual e.t.c. check the official documentation for more expect matchers.

test/it: test or it is a function that run the test, it allows you to test your unit function For Example. Let Say there is a function called sum that accept two parameter and return the addition of the parameters.

test('Sum of two numbers', () => {
 expect(Sum(5,9)).toBe(14); }
);

check the official documentation for matcher.

How to get started with Jest using Javascript

initialize javascript project with npm using your terminal

npm init --y

install jest into your project using terminal

npm install --save-dev jest

NB: You can create your test file with .test.js extension which will allows jest to locate your file and run your test cases. To organise and structure your project you can create a folder with the name test in your project directory which will house all test cases file.

Example

Let assume you are given a task to write a function that will accept two values as a parameter and sum the two values. the question now is what should you test for. There are lot of things to test for all you need to do is to think about what kind of output/result you want to return to the user. Below are what you can test for.

• Test if the parameters value is number data type, if it is not a number then the test should fail.

• Test if the sum of parameter a and parameter b is logically correct, if not the test should fail.

NB: If you want your parameter should accept array and also sum the array. you can write a test case that check if the user supply array as a parameter and check if it does return correct answer.

Solution

There are two way to TDD either you write your test cases first before you actually start your development or write test cases later after development but the best practice is test case first then development. that's the approach we are going to follow now.

Let create a folder called test in root level of our project, inside the folder create a file called sum.test.js, all our test cases for sum function will be in the file.

NB: I will be using commonJS, you can use and configure your project to use babel, if it's already configured with babel so all is good

//import sum
const { sum } = require("./sum");
describe('Addition of Two Number functionality test',()=>{
test("Add 1 + 2 should be 3", () => {
expect(sum(1, 2)).toBe(3);
expect(sum(1,2)).toBeA(number);
});
test("it should fail if string as parameter", () => {
expect(sum("Hello", "World"))
.toEqual(Error("Expecting number type as parameter"));
});
});

Explanation

First test case will check if first parameter and second parameter value return correct answer. i.e if 1+2 equal to 3.

test("Add 1+2 should be 3", () => {
expect(sum(1, 2)).toBe(3);
});

Second test case will check if first parameter or second parameter value is string and return error.

test("it should fail if string as parameter", () => {
expect(sum("Hello", "World"))
.toEqual(Error("Expecting number type as parameter"));

Now that our test cases has been written, we only need to make sure that our sum function pass all the test cases. Let create a file called sum.js in the root folder, the file will contain a function that accept two number and sum the two numbers

const sum = (a, b) => {
if (typeof a !== "number" || typeof b !== "number")
return Error("Expecting number type as parameter");
return a + b;
};
module.exports = { sum };

NB: the above snippet first check the data type of the parameter if it is not number it should return an error with the message Expecting number type as parameter What next now is to run our test, before then we need to configure our project to work with jest, let go directly to package.json file and add "test": "jest" to the script section. our script should look something related to the below code.

"scripts": {
 "test": "jest"
},

we can now run our test with npm test or yarn test command, below is the result/output of our test

Okay, let me show one of test cases i wrote for login, there are many ways of test cases, all you need to do is to think about what you want to check for.

describe("Login Module for test cases", () => {
it("should return the user if the name is valid", function(done) {
request(app)
.post("/login")
.send({ username: "DAMMAK", password: "Adedamola" })
.end(function(err, res) {
expect(res.statusCode).toEqual(200);
expect(res.text).toEqual(
JSON.stringify({ username: "DAMMAK", password: "Adedamola" })
);
done();
});
});
it("fails if login details is wrong", function(done) {
request(app)
.post("/login")
.send({ username: "wrongUser", password: "wrongPass" })
.end(function(err, res) {
expect(res.statusCode).toEqual(400);
done();
});
});
it("fails if empty request data was sent", function(done) {
request(app)
.post("/login")
.send({})
.end(function(err, res) {
expect(res.statusCode).toEqual(400);
done();
});
});
});