Flutter / Dart : How to write tests in Flutter

//sample(A),(UI and business logic are separated.)
import 'package:flutter/material.dart';
import 'dart:math';

import 'package:provider/provider.dart';


class IntNotifier extends ChangeNotifier{
  int finalContent = 0;
  int originalContent = 0;


  void setContent(){
    originalContent = Random().nextInt(10);
    finalContent = originalContent <5 ? 5 : originalContent;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create:(_)=>IntNotifier(),
      child: MaterialApp(
        home: MyApp(),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final intNotifier = Provider.of<IntNotifier>(context);
    return Scaffold(
      body: Container(
        color:Colors.lightBlueAccent[100],
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '${intNotifier.finalContent}',
                style: TextStyle(
                  fontSize: 80.0,
                ),
              ),

              Text(
                '(${intNotifier.originalContent})',
                style: TextStyle(
                  fontSize: 30.0,
                  color: Colors.grey
                ),
              ),

            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed:intNotifier.setContent,
      ),
    );
  }
}

(1) I don't know exactly how to write tests.

For example, in the above code, how should I write a test code to check that the value of "finalContent" is greater than or equal to 5 when setContent is called?

For now, I wrote the following unit test code. It seems to confirm what I want to confirm, but how is it usually written?

Since this is a test about IntNotifier, I think I probably need to use IntNotifier and setContent method, but I am not sure how exactly to use it.

import 'package:flutter_test/flutter_test.dart';

void main(){
  test('more than five',(){

    int finalContent = 0;
    int originalContent = 0;

    originalContent = -1;
    finalContent = originalContent <5 ? 5 : originalContent;
    expect(finalContent>=5,true);

    originalContent = 0;
    finalContent = originalContent <5 ? 5 : originalContent;
    expect(finalContent>=5,true);

    originalContent = 1;
    finalContent = originalContent <5 ? 5 : originalContent;
    expect(finalContent>=5,true);

    originalContent = 4;
    finalContent = originalContent <5 ? 5 : originalContent;
    expect(finalContent>=5,true);

    originalContent = 5;
    finalContent = originalContent <5 ? 5 : originalContent;
    expect(finalContent>=5,true);

    originalContent = 8;
    finalContent = originalContent <5 ? 5 : originalContent;
    expect(finalContent>=5,true);

  });
}

(2) https://developer.android.com/jetpack/guide

On the above page and other pages as we talk about app architecture. "Separating the 'UI code' from the 'business logic code' will make your app easier to test." This has been said a lot. However, I myself don't know how to write tests, so I don't know exactly why separating UI and business logic makes it easier to test.

An example where the UI and business logic are not separated would probably be the following code using StatefulWidget.

//sample(B),(UI and business logic are separated.))
import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(MaterialApp(home: MyApp(),
      ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int originalContent = 0;
  int finalContent = 0;

  void setContent(){
    setState((){
      originalContent = Random().nextInt(10);
      finalContent = originalContent <5 ? 5 : originalContent;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color:Colors.orangeAccent,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '${finalContent}',
                style: TextStyle(
                  fontSize: 80.0,
                ),
              ),

              Text(
                '(${originalContent})',
                style: TextStyle(
                    fontSize: 30.0,
                    color: Colors.grey
                ),
              ),

            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed:setContent,
      ),
    );
  }
}

"In sample(A), we can write the following test code. But with sample(B), we have to write this kind of test code. So sample(A) is better for us." Please explain the above story using concrete test code.