Created
March 22, 2019 20:51
-
-
Save alexd1971/0e83cf062b492c209769d4eafdc92bd0 to your computer and use it in GitHub Desktop.
Working example of component testing with mock-service provider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:angular/angular.dart'; | |
import 'package:component_testing/src/components/my_component.dart'; | |
@Component( | |
selector: 'app', | |
template: ''' | |
<h1>Component Testing</h1> | |
<my-component></my-component> | |
''', | |
directives: const [MyComponent], | |
) | |
class AppComponent {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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>Component Testing</title> | |
<script src="main.dart.js"></script> | |
</head> | |
<body> | |
<app></app> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:angular/angular.dart'; | |
// ignore: uri_has_not_been_generated | |
import 'package:component_testing/src/components/app_component.template.dart' | |
as ng; | |
main() { | |
runApp(ng.AppComponentNgFactory); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:angular/angular.dart'; | |
import 'package:component_testing/src/services/my_component_service.dart'; | |
@Component(selector: 'my-component', template: ''' | |
<h2>Test Component</h2> | |
<p>{{ text }} </p> | |
''', | |
providers: const [MyComponentService] | |
) | |
class MyComponent implements OnInit { | |
String text; | |
MyComponentService textService; | |
MyComponent(this.textService); | |
@override | |
void ngOnInit() async { | |
print(textService.runtimeType); | |
text = await textService.text; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:pageloader/pageloader.dart'; | |
part 'my_component_po.g.dart'; | |
@PageObject() | |
abstract class MyComponentPO { | |
MyComponentPO(); | |
factory MyComponentPO.create(PageLoaderElement context) = | |
$MyComponentPO.create; | |
@First(ByCss('h2')) | |
PageLoaderElement get _titleElement; | |
@First(ByCss('p')) | |
PageLoaderElement get _textElement; | |
String get title => _titleElement.visibleText; | |
String get text => _textElement.visibleText; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:angular/angular.dart'; | |
@Injectable() | |
class MyComponentService { | |
Future<String> get text => Future.delayed( | |
Duration(milliseconds: 500), () => 'Test component message'); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@TestOn('browser') | |
import 'package:angular/angular.dart'; | |
import 'package:angular_test/angular_test.dart'; | |
import 'package:component_testing/src/components/my_component.dart'; | |
import 'package:component_testing/src/services/my_component_service.dart'; | |
import 'package:mockito/mockito.dart'; | |
import 'package:test/test.dart'; | |
import 'package:pageloader/html.dart'; | |
import 'my_component_po.dart'; | |
import 'my_component_test.template.dart' as self; | |
class MyComponentServiceMock extends Mock implements MyComponentService { | |
Future<String> get text => | |
Future.delayed(Duration(milliseconds: 100), () => 'Message for testing'); | |
} | |
@Directive( | |
selector: '[override]', | |
providers: const [ | |
ClassProvider(MyComponentService, useClass: MyComponentServiceMock) | |
] | |
) | |
class OverrideDirective {} | |
@Component( | |
selector: 'my-component-test', | |
template: '<my-component override></my-component>', | |
directives: const [ | |
MyComponent, | |
OverrideDirective | |
] | |
) | |
class MyComponentTest {} | |
main() { | |
// ignore: undefined_getter | |
final testBed = NgTestBed.forComponent(self.MyComponentTestNgFactory); | |
NgTestFixture fixture; | |
MyComponentPO po; | |
setUp(() async { | |
fixture = await testBed.create(); | |
final context = | |
HtmlPageLoaderElement.createFromElement(fixture.rootElement); | |
po = MyComponentPO.create(context); | |
}); | |
tearDown(disposeAnyRunningTest); | |
test('test', () { | |
expect(po.text, 'Message for testing'); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment