Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 14, 2022 08:16 pm GMT

CI with SonarQube and Flutter - Part 1

Hello everybody, this is my first article, so feel free to comment on how can i get better, I will appreciate it.

In this article, I will show how to use the SonarQube tool with the Flutter framework to improve the code quality, to start that I will describe which versions it`s going to be used to do this

  • Flutter: 3.0.1, Stable version
  • SonarQube: 8.9.5, Community Edition
  • Docker Desktop: 4.9.0

Flutter is a framework made by google that compiles and runs with almost every common platform, from mobile to desktop and even embedded devices, so this is gonna be the start point. as the time pass and your app need to fit with specific requirements, with this in mind tests are a great way to understand if your code does what they have designed for, basically, in Flutter we have three types of tests, they are:

  • Unit test: the first one is used to test the minimal part of your code since you have variables and functions to perform. tip: always try to keep your functions only with a single responsibility, this makes the code clean and testable.
  • Widget test: as the name describe, this kind of test gives us feedback if the widgets are showing correctly for the user.
  • Integration test: the last one is used to perform a real interaction with the app with a set of instructions to cover more code, like modules.

keep moving on, we need to create a new Flutter project with the command: flutter create project_name, where on project_name you can give a name to your project.

when finished you will see something like:

`

All done!In order to run your application, type:  $ cd project_name  $ flutter runYour application code is in project_name/lib/main.dart.

just type cd project_name and then code . if you are using visual studio code.

Initially, a project structure comes with a simple counter app and a widget test for the same as you can see below:

lib/main.dart

import 'package:flutter/material.dart';void main() {  runApp(const MyApp());}class MyApp extends StatelessWidget {  const MyApp({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: const MyHomePage(title: 'Flutter Demo Home Page'),    );  }}class MyHomePage extends StatefulWidget {  const MyHomePage({Key? key, required this.title}) : super(key: key);  final String title;  @override  State<MyHomePage> createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {  int _counter = 0;  void _incrementCounter() {    setState(() {      _counter++;    });  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(widget.title),      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: <Widget>[            const Text(              'You have pushed the button this many times:',            ),            Text(              '$_counter',              style: Theme.of(context).textTheme.headline4,            ),          ],        ),      ),      floatingActionButton: FloatingActionButton(        onPressed: _incrementCounter,        tooltip: 'Increment',        child: const Icon(Icons.add),      ),    );  }}

test/widget_test.dart

// This is a basic Flutter widget test.//// To perform an interaction with a widget in your test, use the WidgetTester// utility in the flutter_test package. For example, you can send tap and scroll// gestures. You can also use WidgetTester to find child widgets in the widget// tree, read text, and verify that the values of widget properties are correct.import 'package:flutter/material.dart';import 'package:flutter_test/flutter_test.dart';import 'package:project_name/main.dart';void main() {  testWidgets('Counter increments smoke test', (WidgetTester tester) async {    // Build our app and trigger a frame.    await tester.pumpWidget(const MyApp());    // Verify that our counter starts at 0.    expect(find.text('0'), findsOneWidget);    expect(find.text('1'), findsNothing);    // Tap the '+' icon and trigger a frame.    await tester.tap(find.byIcon(Icons.add));    await tester.pump();    // Verify that our counter has incremented.    expect(find.text('0'), findsNothing);    expect(find.text('1'), findsOneWidget);  });}

with the project created, we should download Docker Desktop according your S.O and then go to SonarQube website and download the software. We have two different ways to do that, the first one is a .zip file to extract, and you will need to install Java 11 on your system, the other option will be the chosen one for this tutorial where we using the Docker to containerize the software image

In second part we will learn how to download Docker and set up an SonarQube image to keep moving the steps, with that in mind, hope you enjoy the first part and can`t wait to see you in the next one.

Part 2 is coming soon ...


Original Link: https://dev.to/matteuus/ci-with-sonarqube-and-flutter-part-1-4hoi

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To