This content originally appeared on DEV Community and was authored by Mateus Daniel
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 run
Your 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 ...
This content originally appeared on DEV Community and was authored by Mateus Daniel
Mateus Daniel | Sciencx (2022-06-14T20:16:37+00:00) CI with SonarQube and Flutter – Part 1. Retrieved from https://www.scien.cx/2022/06/14/ci-with-sonarqube-and-flutter-part-1/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.