Frontend training

Frontend training

• 1.
  Frontend Architecture andJest
• 2.
  Goals ❏ Help theteam: ❏ To take better decisions in frontend architecture ❏ To think about frontend design code ❏ Setup tests ❏ To make better unit tests
• 3.
  Frontend Architecture
• 4.
  Coincidence Programming
• 5.
  Architecture
• 6.
  Layers Architecture Abstraction logic not relatedto UI State Management Async Services Service Layer Presentation Module A Presentation Module B Presentation/ View Layer
• 7.
  Layers Architecture ❏ IsolatedUI logic from others logic ❏ Easier to test ❏ Easier to maintain ❏ SOC ❏ Control the application state in a simple way - No NgRx (Angular Redux)
• 8.
  Components Presentation Module Containers or Smart Components 1 …N Dumb components Dumb components Dumb components
• 9.
  Smart components ❏ ServicesInjected ❏ Know how to get the data ❏ Pass data to the dumb components ❏ react to the events from dumb components ❏ Are top-level routable components (but not always!).
• 10.
  Dumb/Presentational Components ❏ should notbe dependant on external services ❏ Should be predictable - not produce any side effects ❏ Should not mutate its’ inputs — because if it does, it actually produces a side effect - a child should never directly edit parent’s data.
• 11.
  Binding
• 12.
  Module ❏ An applicationis made up of several blocks, which are ngModules or modules. ❏ Give context for our components to run ❏ Correct use of modules has a positive impact on application performance through the use of Lazy Loading. ❏ Angular Modules: BrowserModule, CommonModule, HttpClientModule, RouterModule, FormsModule and ReactiveFormsModule
• 13.
  Module Options ❏ Declarations- where we put our components, directives, pipes and masks - the things related with the module itself ❏ Imports - to import another modules with services, pipe, components and others resources. The dependencies necessary on the module ❏ Exports - public components, submodules, directives, etc to be used in others module ❏ entryComponents - components not linked with routes or bootstrap in app module - example: modals
• 14.
  Architecture Modules ❏ CoreservicesModule - All services that are singleton and global (interceptor, guards, ). - optional ❏ SharedModule - Shared components, directives, pipes, masks between the various application modules. ❏ Layout Module - Components that are the basis for the entire application (eg header, menu-aside, footer) ❏ FeatureModule - Module by Feature ❏ AppRoutingModule - Main Routing Module ❏ FeatureRoutingModule - sub-module of a feature ❏ CoreModule and LayoutModule can only be imported once
• 15.
  Services - Singleton
• 16.
  Component
• 17.
  When I getan US... ❏ Check the requirements and what is necessary to do ❏ See if the US is possible to be developed ❏ Create your own checklist ❏ Which module? ❏ Do I need to create components? ❏ Presentational component or smart component? Or both? ❏ What is UI logic and what is not? ❏ What kind of services do I need?
• 18.
  Jest
• 19.
  What is Jest isa delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more! Made on top of Jasmine
• 20.
  Why to Use? ❏Easy to config and setup tests in most projects ❏ Focuses on Developer Experience (speed and ease of use is the first priority.) ❏ Isolated and high performance to execute ❏ Tests run in parallel ❏ It has a really good documentation ❏ The API is richer than Jasmine ❏ rerun instantly only tests related to latest code changes ❏ Abstracting the DOM with jsdom library - don't use a headless browser
• 21.
  Watch Mode
• 22.
  Tests Doubles
• 23.
  Mock x Stubx Spy ❏ It is very rare that the units we are testing do not have dependencies ❏ "Test Double is a generic term for any case where you replace a production object for testing purposes". Martin Fowler
• 24.
  Mock ❏ Mocks fakesomething - its a copy ❏ Avoid flaky testing not calling something with side effect - like HTTP requests ❏ Mock is the simplest way to fake something
• 25.
  Mock import {LoginComponent} from './login.component'; classMockAuthService { authenticated = false; isAuthenticated() { return this.authenticated; } }
• 26.
  Use Mock describe('Component: Login',() => { let component: LoginComponent; let service: MockAuthService; beforeEach(() => { (2) service = new MockAuthService(); component = new LoginComponent(service); }); afterEach(() => { service = null; component = null; }); it('canLogin returns false when the user is not authenticated', () => { service.authenticated = false; (3) expect(component.needsLogin()).toBeTruthy() ; }); it('canLogin returns false when the user is not authenticated', () => { service.authenticated = true; (3) expect(component.needsLogin()).toBeFalsy(); }); });
• 27.
  Spy ❏ The mainbenefit of spies is that they allow to watch how the function is used. ❏ We use spies when we want to track: ❏ if a inside function has been called into another function, ❏ how many times it has been called, ❏ which arguments were passed.
• 28.
  Spy describe('MyService', () =>{ let service; let someService; let spy; class SomeService { getValue = function() {}; } beforeEach(() => { someService = new SomeService(); service = new MyService(someService); }); it('#getValue should return value', () => { spy = jest.spyOn(someService, 'getValue'); spy.mockReturnValue('stub value'); expect(service.getValue()).toBe('stub value'); expect(spy).toHaveBeenCalled(); });
• 29.
  Stub ❏ Its aspy evolution ❏ So a stub is a function that replaces a real implementation of an existing function. ❏ We use stubs if we want to: ❏ control individual method behavior for a specific test case, ❏ prevent a method from making side effects like communicating with the outside world using Angular's HttpClient. ❏ Checks our application behavior/response/outcome under certain scenarios ❏ In jest we use mockImplementation
• 30.
  Service to stub @Injectable({provideIn: 'root' }) export class LocalStorageWrapperService { constructor() { } private localStorage = localStorage; remove(key) { return this.localStorage.removeItem(key); } get(key) { try { return JSON.parse(this.localStorage.getItem(key)); } catch (e) { return null; } } set(key, value) { return localStorage.setItem(key, JSON.stringify(value));
• 31.
  Stub @Injectable() export class LocalStorageWrapperStubService{ constructor() { } private localStorage = new Map(); remove(key) { return this.localStorage.delete(key); } get(key) { try { return this.localStorage.get(key); } catch (e) { return null; } } set(key, value) { return this.localStorage.set(key, JSON.stringify(value)); }
• 32.
  Jasmine x Jest❏ Unfriendlyerrors logs ❏ No code coverage include ❏ Runs tests runs sequentially ❏ Hard to run tests headless ❏ It’s already configured with Angular - more examples and code on the internet ❏ Great exceptions and logs when tests fail ❏ Code coverage without any additional setup ❏ Run tests in parallel ❏ Run 2.5x times faster than Jasmine ❏ Tests headless by default ❏ Has all jasmine matchers and include many more ❏ Has snapshot tests
• 33.
  Jasmine x Jest❏ jasmine.createSpy() ❏jasmine.createSpyObj('name', ['key']) ❏ jasmine.createSpy().and.retur nValue() ❏ spyOn(...).and.callFake(() => {}) ❏ jest.fn() ❏ jest.fn({key: jest.fn()} ❏ jest.fn().mockReturnValue(‘’) ❏ jest.spyOn(...).mockImplemen tation(() => {})
• 34.
  Testing in Angular
• 35.
  TestBed ❏ Every componentneed to run with a context (module and dependencies) ❏ TestBed create the setup necessary to the component run describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule ], declarations: [ AppComponent ], }).compileComponents(); }));
• 36.
  Use the testingmodules library ❏ Instead of HttpClientModule use HttpClientTestingModule ❏ Instead of RouterModule use RouterTestingModule ❏ Instead of AnimationsModule use NoopAnimationsModule ❏ Always try to find a testing module to avoid side effects
• 37.
  Unit Testing ❏ Testingone thing at a time, tests should not care about the points of interaction between different units of the application ❏ In Angular can be splitting into: ❏ Isolated - when we just test component functions. ❏ shallow unit tests - testing components template without rendering its children. It may be achieved by simply not registering child components inside of the TestBed function.
• 38.
  Integration test?
• 39.
  Integration test ❏ Checkingthat multiples units are interacting with each other correctly ❏ Use: ❏ When the integration between components is needed for creating a meaningful test ❏ Testing DOM with a simple interaction involving multiple components ❏ When testing integrations with third-party libraries
• 40.
  Snapshot ❏ It’s goodfor black box testing ❏ You can use snapshot tests based on some inputs ❏ Snapshots should be deterministic ❏ You can run multiple times the same test and won’t fail ❏ Use consistent values: Date.now = jest.fn(() => 1482363367071); ❏ You can use snapshots for: ❏ Templates HTML - Dumb components ❏ JavaScript Lists and Objects
• 41.
  Snapshot
• 42.
  Snapshot - inlineDOM it('Snapshot of html component=', () => { const fixture = TestBed.createComponent(AppComponent); const ulList = fixture.debugElement.nativeElement.querySelector('.ul- list'); expect(ulList).toMatchSnapshot('AppComponent ul-list'); });
• 44.
  Jest x Jasmine ❏Jasmine and Jest API it's not that different. ❏ If we know how to test in Angular we know how to test in Jest
• 45.
  The unit testshoudn’t be hard
• 46.
  Avoid side effects
• 47.
  Testing Module @NgModule({ declarations: [], imports:[ CommonModule, NoopAnimationsModule, HttpClientTestingModule, RouterTestingModule, ], // Tells the compiler not to error on unknown elements and attributes schemas: [NO_ERRORS_SCHEMA] providers: [ { provide: SystemSettingsService, useClass: SystemSettingsServiceStub }, { provide: LocalStorageWrapperService, useClass: LocalStorageWrapperServiceStub } ] })
• 48.
  Using Testing Module describe('LoginComponent',() => { let component: LoginComponent; let fixture: ComponentFixture<LoginComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ AuthModule, TestingModule, ], }) .compileComponents(); }));
• 49.
  Stick to black-boxtesting: Test only public methods
• 50.
  Group your tests ❏Group by type of tests (DOM tests, black box tests, integration tests, snapshot tests and component tests) ❏ Each group of test may have your own beforeEach - tests run faster
• 51.
  Group your tests describe('DummyComponent.spec',() => { beforeEach(() => { // Setup Tests }) describe('DOM Tests', () => { it('Test Something', () => { // ... }) }) })
• 52.
  Clear mocks beforeEach(() =>{ jest.clearAllMocks(); });
• 53.
  What to test ❏Navigation ❏ Set a guard and check if only logged users can access a route ❏ Something happened and then the navigation occurs ❏ 404 view ❏ If someone type something wrong on URL goes to login
• 54.
  What to test? ❏Services ❏ to HTTP requests use HTTPTestingModule and check if the URL is correct called, queryParams based on inputs, if the payload will be transform into a intance of something ❏ It's easy to test because you don't have the DOM ❏ That's why architecture matter - UI logic stay on component and the rest in services
• 55.
  What to test? ❏Component.ts ❏ Check if the component is running correctly ❏ Testing public methods ❏ If it has forms use reactive forms - easier to test ❏ Take snapshots ❏ List of objects ❏ Dumb components - DOM ❏ Any important logic. ex: data transformation to show on the UI
• 56.
  What to test? ❏DOM ❏ Rules - not ngIf itself, but the rule ❏ Use DebugElement ❏ How something appear in the view ❏ Use fixture.detectChanges() correctly it('should find the <p> with fixture.debugElement.nativeElement)', () => { const bannerDe: DebugElement = fixture.debugElement; const bannerEl: HTMLElement = bannerDe.nativeElement; const p = bannerEl.querySelector('p'); expect(p.textContent).toEqual('banner works!'); });
• 57.
  Plus: One E2Esmoke test it('When doing smoke testing over all page, should load them all successfully', () => { // exemplified using Cypress but can be implemented easily // using any E2E suite cy.visit('https://mysite.com/home'); cy.contains('Home'); cy.contains('https://mysite.com/Login'); cy.contains('Login'); cy.contains('https://mysite.com/About'); cy.contains('About'); })
• 58.
  Plus2: Good TestsExamples https://codecraft.tv/courses/angular/unit-testing/overview/
• 59.
  Exercise https://github.com/adrianlemess/frontend-components-jest- training