{"id":3862,"date":"2020-07-28T14:09:12","date_gmt":"2020-07-28T14:09:12","guid":{"rendered":"https:\/\/codethataint.com\/blog\/?p=3862"},"modified":"2020-08-05T15:26:10","modified_gmt":"2020-08-05T15:26:10","slug":"how-to-test-typescript-methods-using-spyon","status":"publish","type":"post","link":"https:\/\/codethataint.com\/blog\/how-to-test-typescript-methods-using-spyon\/","title":{"rendered":"Basic of Testing – Jasmine"},"content":{"rendered":"

Before start testing method in components we initialize few things as below<\/strong><\/p>\n

    \n
  1. beforeEach method helps in initializing the values needed for testing<\/li>\n
  2. describe are similar to JUnit class and it are similar to junit class methods which tests particular method in src code<\/li>\n
  3. TestBed is needed while testing both component and html.You need to configure the TestBed before each test, adding any components, modules and services you need for the test. It’s just like configuring an regular @NgModule from scratch, but you just add what you need.\n
    \r\nimport { async, TestBed } from '@angular\/core\/testing';\r\n\r\nbeforeEach(async(() => {\r\n  TestBed.configureTestingModule({\r\n    declarations: [ AppComponent ],\r\n    providers: [],\r\n    imports: []\r\n  })\r\n  .compileComponents();\r\n}));\r\n<\/pre>\n<\/li>\n
  4. Using TestBed.createComponent<\/strong> create component instance returns componentFixture Interface. componentFixture is a wrapper over component with additional methods needed for testing. fixture.componentInstance<\/strong> returns instance of component.\n
    \r\nbeforeEach(() => {\r\n.\r\n\/\/Returns Component Fixture\r\nlet fixture = TestBed.createComponent(EmployeeComponent);\r\n\r\n\/\/Get Instance of Component\r\ncomponent = fixture.componentInstance;\r\n.\r\n.\r\n});\r\n<\/pre>\n<\/li>\n
  5. fixture.detectChanges() would allow to check for change in DOM elements before expect or whenever it is referenced for value<\/li>\n
  6. DebugElement, an interface  which wraps native element instead of HTML element in idle scenario<\/li>\n
  7. schemas:[NO_ERRORS_SCHEMAS] lets angular testing module to ignore unknown tags in html during testing. Suppose you have used router tags in html
    \nand angular could not recognize the router tag since routerTestingModule is not imported you can use this tag as below to avoid errors.<\/p>\n
    \r\nbeforeEach(() => {\r\n     TestBed.configureTestingModule({\r\n      declarations: [ EmployeeComponent]\r\n      schemas:[NO_ERRORS_SCHEMAS]\r\n     }).compileComponents();\r\n\r\n    \/\/Testbed to create fixture for component\r\n    fixture = TestBed.createComponent(EmployeeComponent);\r\n\r\n    \/\/Using fixture to create component and service \r\n    component = fixture.componentInstance;\r\n    empService = TestBed.inject(EmpserviceService);    \r\n });\r\n\r\n<\/pre>\n<\/li>\n<\/ol>\n
    Simple testing with matchers<\/strong><\/p>\n
      \n
    1. toBeTruthy <\/strong>tells the component is created successfully<\/li>\n
    2. toBe<\/strong> checks for equality of value<\/li>\n
    3. toEqual<\/strong> method does object comparison<\/li>\n
    4. toContain<\/strong> method checks whether value is available in array<\/li>\n<\/ol>\n
      \r\nfit('Simple component testing', ()=>{\r\n  \/\/Checks whether component has been created\r\n  expect(component).toBeTruthy();\r\n\r\n  \/\/Checks whether value returned by function are same\r\n  expect(component.getGender(true)).toBe('Male');\r\n\r\n  \/\/Checks objects are equal and array contain that element\r\n  var Names = ['Name1', 'Name2', 'Name3'];\r\n  expect(Names).toEqual(['Name1', 'Name2', 'Name3']);\r\n  expect(Names).toContain('Name2');\r\n});\r\n<\/pre>\n
      Checking DOM Elements<\/strong><\/p>\n
        \n
      1. nativeElement<\/strong> – provides the access to DOM element.This is same as Javascript DOM Element we use for DOM Manipulation.Using nativeElement you can
        \naccess all the API methods provided vy Javascript for DOM manipulation like QuerySelector<\/li>\n
      2. fixture.detectChanges()<\/strong> – updates the DOM Element after setting the value from testing component. This is similar to refresh once the component value is set the html should be refreshed.<\/li>\n
      3. debugElement<\/strong>– debugElement is similar to nativeElement which has wrapper with some additional methods.It has query, queryAll, queryNode methods
        \ndebugElement inturn calls nativeElement to get the values.fixture.debugElement<\/strong> returns the root debugElement from which we query for the nativeElement.<\/p>\n
        \r\n.\r\n.\r\nfixture.debugElement.query(By.css('a')).nativeElement.textContent)\r\nfixture.debugElement.query(By.css('#ContactUsId')).nativeElement.textContent)\r\nfixture.debugElement.query(By.css('.ContactUsId')).nativeElement.textContent)\r\n.\r\n.\r\n.\r\n<\/pre>\n<\/li>\n
      4. The below statement end up the same anchor tag\n
        \r\n.\r\n\r\nfixture.debugElement.query(By.css('a')).nativeElement.textContent)\r\nfixture.nativeElement.querySelector('a').textContent\r\n.\r\n<\/pre>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
        Before start testing method in components we initialize few things as below beforeEach method helps in initializing the values needed for testing describe are similar to JUnit class and it are similar to junit class methods which tests particular method in src code TestBed is needed while testing both component and html.You need to configure… Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[318],"tags":[],"class_list":["post-3862","post","type-post","status-publish","format-standard","hentry","category-jasmine"],"_links":{"self":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/comments?post=3862"}],"version-history":[{"count":6,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3862\/revisions"}],"predecessor-version":[{"id":3899,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3862\/revisions\/3899"}],"wp:attachment":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/media?parent=3862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/categories?post=3862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/tags?post=3862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}