Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Angular Testing made easy with Jest and Cypress

Angular Testing made easy with Jest and Cypress

Time and again, the testing in the frontend is put on the back burner. For a modern business application, it is inevitable to write reasonable tests in the frontend as well. When developing Angular, testability was part of the concept right from the start. In this workshop, Fabian Gosebrink shows how to put his Angular applications through their paces. A look is taken at the tools and the different possibilities of testing, so that no case is left untested in the end.

Fabian Gosebrink

October 25, 2024
Tweet

More Decks by Fabian Gosebrink

Other Decks in Technology

Transcript

  1. { "projects": { "my-app": { "architect": { "test": { "builder":

    "@angular-devkit/build-angular:jest", "options": { "tsConfig": "tsconfig.spec.json", "polyfills": ["zone.js", "zone.js/testing"] } } } } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
  2. { "projects": { "my-app": { "architect": { "test": { "builder":

    "@angular-devkit/build-angular:jest", "options": { "tsConfig": "tsconfig.spec.json", "polyfills": ["zone.js", "zone.js/testing"] } } } } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 "builder": "@angular-devkit/build-angular:jest", { 1 "projects": { 2 "my-app": { 3 "architect": { 4 "test": { 5 6 "options": { 7 "tsConfig": "tsconfig.spec.json", 8 "polyfills": ["zone.js", "zone.js/testing"] 9 } 10 } 11 } 12 } 13 } 14 } 15
  3. describe('WithInputComponent', () => { let component: WithInputComponent; let fixture: ComponentFixture<WithInputComponent>;

    beforeEach(async () => { await TestBed.configureTestingModule({ imports: [WithInputComponent], }).compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(WithInputComponent); component = fixture.componentInstance; }); test('should create', () => { expect(component).toBeTruthy(); }); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
  4. describe('WithInputComponent', () => { let component: WithInputComponent; let fixture: ComponentFixture<WithInputComponent>;

    beforeEach(async () => { await TestBed.configureTestingModule({ imports: [WithInputComponent], }).compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(WithInputComponent); component = fixture.componentInstance; }); test('should create', () => { expect(component).toBeTruthy(); }); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
  5. describe('WithInputComponent', () => { let component: WithInputComponent; let fixture: ComponentFixture<WithInputComponent>;

    beforeEach(async () => { await TestBed.configureTestingModule({ imports: [WithInputComponent], }).compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(WithInputComponent); component = fixture.componentInstance; }); test('should create', () => { expect(component).toBeTruthy(); }); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19