Доклад Всеволода Брекелова с #ITGM8

1. Scalable eCommerce Platform Solutions
Component tests.
Let’s do that!
IT Global MeetUp
Saint-Petersburg,
23 July, 2016

2. Scalable eCommerce Platform Solutions
• Test Levels
• Component tests: howTo(Back end perspective)
• Component tests vs Integration tests
• Skills you need
• Component tests: howTo(Front end perspective)
The goals of today’s talk
2

3. Scalable eCommerce Platform Solutions
● Unit Tests
● Component Tests
● System Tests
Test levels
3

4. Scalable eCommerce Platform Solutions
Picture of the app architecture
SUT
4

5. Scalable eCommerce Platform Solutions
Main flow
{
name: “pikachu”,
age:10,
Id: 0,
externalId: null
}
BE
5

6. Scalable eCommerce Platform Solutions
Main flow
BE
{
name: “pikachu”,
age:10,
Id: 0,
externalId: superCat1
}
External Service
6

7. Scalable eCommerce Platform Solutions
Main flow
7

8. Scalable eCommerce Platform Solutions
Main flow
8

9. Scalable eCommerce Platform Solutions
@Test @DataProvider("cats")
public void responseContainsExtId(String catJson) {
Response response = restClient.post().content(catJson).thenReturn();
assertNotNull(response.body().jsonPath("externalId"));
}
Integration(system) tests
9

10. Scalable eCommerce Platform Solutions
@Test @DataProvider("cats")
public void responseContainsExtId(String catJson) {
Response response = restClient.post().content(catJson).thenReturn();
assertNotNull(response.body().jsonPath("externalId"))
}
Component tests
10

11. Scalable eCommerce Platform Solutions
@Autowired
RestClient restClient;
In Spring Context:
<beans profile = "system-tests">
<bean id = "restClient" class = "com.blah.blah.RestClient">
<beans profile = "component-tests">
<bean id = "restClient" class = "com.our.cool.DirectInvocationRestClient">
But!
11

12. Scalable eCommerce Platform Solutions
• Implement own dispatcher (RestEasy could be used)
• Set controllers from BE code to ResourceFactory of the Dispatcher
DirectInvocationRestClient
12

13. Scalable eCommerce Platform Solutions
DirectInvocationRestClient
13
Dispatcher dispatcher = MockDispatcherFactory.createDispatcher();
dispatcher.getRegistry().addResourceFactory(
new SingletonResource(catsController));
@Path("/") @Produces(MediaType.APPLICATION_JSON)
public class CatsController {
@POST @Path("/saveMyCat")
public CatDTO saveMyCat() {
//doSmth
return cat;
}
}

14. Scalable eCommerce Platform Solutions
• Set up in-memory DB
• Create mock for the external service
• Prepare spring context for easy-run all of this
Finally:
Tell developers how to use that =)
What else we need
14
Allows to run fast and
debug

15. Scalable eCommerce Platform Solutions
Component tests vs Integration tests
Component tests Integration(System) tests
Speed 3 2
Business logic coverage 3 3
Debug availability 3 1
Deploy/Environment coverage 1 3
Environment dependence 3 1
15

16. Scalable eCommerce Platform Solutions
@Component({
templateUrl: 'app/components/cat/cat.component.html',
styleUrls: ['app/components/cat/cat.component.css'],
directives: [ROUTER_DIRECTIVES]
})
export class CatComponent {}
Component tests on FE
16

17. Scalable eCommerce Platform Solutions
describe('Add cat', () => {
beforeEachProviders(() => [
provide(CatService, {useClass: MockCatService}),
//Set up variables you need in mock here
]);
Component tests on FE
17

18. Scalable eCommerce Platform Solutions
it('Should save cat with received external ID', injectAsync([TestComponentBuilder], (tcb) => {
return tcb.createAsync(CatComponent).then((fixture) => {
fixture.detectChanges();
var form = fixture.debugElement.nativeElement;
updated.querySelector('input').setAttribute('CatName');
form.querySelector('send-button').click();
form.detectChanges();
expect(form.querySelector("cats-list").contains('superCat1');
});
}));
});
Component tests on FE
18

19. Scalable eCommerce Platform Solutions
Mocked BE
19
import * as express from 'express';
const app = express();
import * as bodyParser from 'body-parser';
import {OnInit} from "../../../build/lib/@angular/core/esm/src/metadata/lifecycle_hooks";
class MockCatService implements OnInit {
ngOnInit() {
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
const port:number = process.env.PORT || 8080;
const router = express.Router();
router.post('/saveMyCat', function (req, res) {
res.json(req.json.externalId("superCat1"));
});
app.use('/api', router);
app.listen(port);
}
}

20. Scalable eCommerce Platform Solutions
BE component tests require:
Java core; Spring(or any DI framework); Maven(or any build tool);
HSQLDB(or any db) + additional: TestNG, Allure, RestEasy and others…
FE component tests require:
TypeScript; Angular2; gulp; Express + additional: Jasmine; Karma and
others
Skills you need(example)
20

21. Scalable eCommerce Platform Solutions
Some theory:
http://qala.io/blog/holes-in-test-terminology.html
http://istqbexamcertification.com/what-are-software-testing-levels/
Theory+examples:
http://qala.io/blog/test-pyramid.html
Angular2 unit & component tests:
https://www.youtube.com/watch?v=C0F2E-PRm44
Useful links
21

22. Scalable eCommerce Platform Solutions
Thank you!
Email: vsevolod.brekelov@gmail.com
Github: https://github.com/volekerb
22