A very good view for ALL Basics

[puddlejumper26]

1.0 First check this video

• https://www.youtube.com/watch?v=BumgayeUC08

2.0 Jasmine file

• https://jasmine.github.io/api/3.6/global

3.0 Files inside Angular App related to Testing

4.0 Codes inside a Testing file

[puddlejumper26]

karma.conf.js

• setting up a web server that will run all of test automatically everytime a file changes
• the configuration options inside could be customized

protractor.conf.js

• inside the e2e folder
• for end-to-end testing
• uses browser to simulate how the end user uses the app, that's connected to the e2e folder

test.ts

• required by karma to load all the spec files inside the app
• nothing should be changed here

[puddlejumper26]

let fixture: ComponentFixture<demoComponent>;

• a variable
• provide the test environment for demoComponent
• provide the access to the component

let component: demoComponent;

• to describe the test suite which is this demoComponent

let de: DebugElement;

• renders html

beforeEach(async(() => { TestBed.configureTestingModule({declarations: [demoComponent], }).compileComponents(); } ));

• a test bed which is just an NG module, specific for this testing
• at the beginning, it has only demoComponent, as the app grows, here also expands
• compileComponent() is a method to compile html and css, add after the testbed
• then the testbed is compiled, then check the next step

inside the abovebeforeEach, and after the compileComponent()

      fixture = TestBed.createComponent(demoComponent);
      component = fixture.componentInstance;
      de = fixture.debugElement;

     fixture.detectChanges();

• here are the variables used for testing