import ''dart:isolate'';  
void foo(var message){ 
   print(''execution from foo ... the message is :${message}''); 
}  
void main(){ 
   Isolate.spawn(foo,''Hello!!''); 
   Isolate.spawn(foo,''Greetings!!''); 
   Isolate.spawn(foo,''Welcome!!''); 
   
   print(''execution from main1''); 
   print(''execution from main2''); 
   print(''execution from main3''); 
}

Here, the spawn method of the Isolate class facilitates running a function, foo, in parallel with the rest of our code. The spawn function takes two parameters −

• the function to be spawned, and
• an object that will be passed to the spawned function.

In case there is no object to pass to the spawned function, it can be passed a NULL value.

The two functions (foo and main) might not necessarily run in the same order each time. There is no guarantee as to when foo will be executing and when main() will be executing. The output will be different each time you run.

Output 1

execution from main1 
execution from main2 
execution from main3 
execution from foo ... the message is :Hello!! 

Output 2

execution from main1 
execution from main2 
execution from main3 
execution from foo ... the message is :Welcome!! 
execution from foo ... the message is :Hello!! 
execution from foo ... the message is :Greetings!! 

From the outputs, we can conclude that the Dart code can spawn a new isolate from running code like the way Java or C# code can start a new thread.

Isolates differ from threads in that an isolate has its own memory. There’s no way to share a variable between isolates—the only way to communicate between isolates is via message passing.

Note − The above output will be different for different hardware and operating system configurations.

Isolate v/s Future

Doing complex computational work asynchronously is important to ensure responsiveness of applications. Dart Future is a mechanism for retrieving the value of an asynchronous task after it has completed, while Dart Isolates are a tool for abstracting parallelism and implementing it on a practical high-level basis.

Dart Programming – Unit Testing

Unit Testing involves testing every individual unit of an application. It helps the developer to test small functionalities without running the entire complex application.

The Dart external library named “test” provides a standard way of writing and running unit tests.

Dart unit testing involves the following steps −

Step 1: Installing the “test” package

To installing third-party packages in the current project, you will require the pubspec.yaml file. To install test packages, first make the following entry in the pubspec.yaml file −

dependencies: 
test:

After making the entry, right-click the pubspec.yaml file and get dependencies. It will install the “test” package. Given below is a screenshot for the same in the WebStorm Editor.

Packages can be installed from the command line too. Type the following in the terminal −

pub get

Step 2: Importing the “test” package

import "package:test/test.dart";

Step 3 Writing Tests

Tests are specified using the top-level function test(), while test assertions are made using the expect() function. For using these methods, they should be installed as a pub dependency.

Syntax

test("Description of the test ", () {  
   expect(actualValue , matchingValue) 
});

The group() function can be used to group tests. Each group”s description is added to the beginning of its test”s descriptions.

Syntax

group("some_Group_Name", () { 
   test("test_name_1", () { 
      expect(actual, equals(exptected)); 
   });  
   test("test_name_2", () { 
      expect(actual, equals(expected)); 
   }); 
}) 

Example 1: A Passing Test

The following example defines a method Add(). This method takes two integer values and returns an integer representing the sum. To test this add() method −

Step 1 − Import the test package as given below.

Step 2 − Define the test using the test() function. Here, the test() function uses the expect() function to enforce an assertion.

import ''package:test/test.dart'';      
// Import the test package 

int Add(int x,int y)                  
// Function to be tested { 
   return x+y; 
}  
void main() { 
   // Define the test 
   test("test to check add method",(){  
      // Arrange 
      var expected = 30; 
      
      // Act 
      var actual = Add(10,20); 
      
      // Asset 
      expect(actual,expected); 
   }); 
}

It should produce the following output −

00:00 +0: test to check add method 
00:00 +1: All tests passed! 

Example 2: A Failing Test

The subtract() method defined below has a logical mistake. The following test verifies the same.

import ''package:test/test.dart''; 
int Add(int x,int y){ 
   return x+y; 
}
int Sub(int x,int y){ 
   return x-y-1; 
}  
void main(){ 
   test(''test to check sub'',(){ 
      var expected = 10;   
      // Arrange 
      
      var actual = Sub(30,20);  
      // Act 
      
      expect(actual,expected);  
      // Assert 
   }); 
   test("test to check add method",(){ 
      var expected = 30;   
      // Arrange 
      
      var actual = Add(10,20);  
      // Act 
      
      expect(actual,expected);  
      // Asset 
   }); 
}

Output − The test case for the function add() passes but the test for subtract() fails as shown below.

00:00 +0: test to check sub 
00:00 +0 -1: test to check sub 
Expected: <10> 
Actual: <9> 
package:test  expect 
binTest123.dart 18:5  main.<fn> 
   
00:00 +0 -1: test to check add method 
00:00 +1 -1: Some tests failed.  
Unhandled exception: 
Dummy exception to set exit code. 
#0  _rootHandleUncaughtError.<anonymous closure> (dart:async/zone.dart:938) 
#1  _microtaskLoop (dart:async/schedule_microtask.dart:41)
#2  _startMicrotaskLoop (dart:async/schedule_microtask.dart:50) 
#3  _Timer._runTimers (dart:isolate-patch/timer_impl.dart:394) 
#4  _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:414) 
#5  _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:148) 

Grouping Test Cases

You can group the test cases so that it adds more meaning to you test code. If you have many test cases this helps to write much cleaner code.

In the given code, we are writing a test case for the split() function and the trim function. Hence, we logically group these test cases and call it String.

Example

import "package:test/test.dart"; 
void main() { 
   group("String", () { 
      test("test on split() method of string class", () { 
         var string = "foo,bar,baz"; 
         expect(string.split(","), equals(["foo", "bar", "baz"])); 
      }); 
      test("test on trim() method of string class", () { 
         var string = "  foo "; 
         expect(string.trim(), equals("foo")); 
      }); 
   }); 
} 

Output − The output will append the group name for each test case as given below −

00:00 +0: String test on split() method of string class 
00:00 +1: String test on trim() method of string class 
00:00 +2: All tests passed

Dart Programming – HTML DOM

Every webpage resides inside a browser window which can be considered as an object.

A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.

The way a document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document.

• Window − Top of the hierarchy. It is the outmost element of the object hierarchy.

• Document − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page.

• Elements − represent the content on a web page. Examples include the text boxes, page title etc.

• Nodes − are often elements, but they can also be attributes, text, comments, and other DOM types.

Here is a simple hierarchy of a few important DOM objects −

Dart provides the dart:html library to manipulate objects and elements in the DOM. Console-based applications cannot use the dart:html library. To use the HTML library in the web applications, import dart:html −

import ''dart:html'';

Moving on, we will discuss some DOM Operations in the next section.

Finding DOM Elements

The dart:html library provides the querySelector function to search for elements in the DOM.

Element querySelector(String selectors);

The querySelector() function returns the first element that matches the specified group of selectors. “selectors should be string using CSS selector syntax as given below

var element1 = document.querySelector(''.className''); 
var element2 = document.querySelector(''#id''); 

Example: Manipulating DOM

Follow the steps given below, in the Webstorm IDE −

Step 1 − File NewProject → In the location, provide the project name as DemoWebApp.

Step 1 − In the section “Generate sample content”, select SimpleWebApplication.

It will create a sample project, DemoWebApp. There is a pubspec.yaml file containing the dependencies which need to be downloaded.

name: ''DemoWebApp'' 
version: 0.0.1 
description: An absolute bare-bones web app. 

#author: Your Name <[email protected]> 
#homepage: https://www.example.com  
environment:   
   sdk: ''>=1.0.0 <2.0.0''  
dependencies:   
   browser: ''>=0.10.0 <0.11.0''   dart_to_js_script_rewriter: ''^1.0.1''  
transformers: 
- dart_to_js_script_rewriter 

If you are connected to Web, then these will be downloaded automatically, else you can right-click on the pubspec.yaml and get dependencies.

In the web folder, you will find three files: Index.html, main.dart, and style.css

Index.html

<!DOCTYPE html>   
<html> 
   <head>     
      <meta charset = "utf-8">     
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">     
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <meta name = "scaffolded-by" content = "https://github.com/google/stagehand">
      <title>DemoWebApp</title>     
      <link rel = "stylesheet" href = "styles.css">     
      <script defer src = "main.dart" type = "application/dart"></script>
      <script defer src = "packages/browser/dart.js"></script> 
   </head>
   
   <body>   
      <h1>
         <div id = "output"></div> 
      </h1>  
   </body> 
</html> 

Main.dart

import ''dart:html'';  
void main() {   
   querySelector(''#output'').text = ''Your Dart web dom app is running!!!.''; 
} 

Run the index.html file; you will see the following output on your screen.

Event Handling

The dart:html library provides the onClick event for DOM Elements. The syntax shows how an element could handle a stream of click events.

querySelector(''#Id'').onClick.listen(eventHanlderFunction); 

The querySelector() function returns the element from the given DOM and onClick.listen() will take an eventHandler method which will be invoked when a click event is raised. The syntax of eventHandler is given below −

void eventHanlderFunction (MouseEvent event){ } 

Let us now take an example to understand the concept of Event Handling in Dart.

TestEvent.html

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "utf-8"> 
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> 
      <meta name = "scaffolded-by" content ="https://github.com/google/stagehand"> 
      <title>DemoWebApp</title> 
      <link rel = "stylesheet" href = "styles.css"> 
      <script defer src = "TestEvent.dart" type="application/dart"></script> 
      <script defer src = "packages/browser/dart.js"></script> 
   </head> 
   
   <body> 
      <div id = "output"></div> 
      <h1> 
         <div> 
            Enter you name : <input type = "text" id = "txtName"> 
            <input type = "button" id = "btnWish" value="Wish"> 
         </div> 
      </h1> 
      <h2 id = "display"></h2> 
   </body>
   
</html>

TestEvent.dart

import ''dart:html''; 
void main() { 
   querySelector(''#btnWish'').onClick.listen(wishHandler); 
}  
void wishHandler(MouseEvent event){ 
   String name = (querySelector(''#txtName'')  as InputElement).value; 
   querySelector(''#display'').text = ''Hello Mr.''+ name; 
}

Output