import {Component, NgModule} from '@angular/core'
import {render, screen} from '@testing-library/angular'
import {ngMocks} from 'ng-mocks'
@Component({
selector: 'app-parent-component',
template: '<app-child-component></app-child-component>',
})
class ParentComponent {}
@Component({
selector: 'app-child-component',
template: '<p>Child component</p>',
})
class ChildComponent {}
@NgModule({
declarations: [ParentComponent, ChildComponent],
})
export class AppModule {}
describe('ParentComponent', () => {
it('should not render ChildComponent when shallow rendering', async () => {
const dependencies = ngMocks.guts(null, AppModule, ParentComponent)
await render(ParentComponent, dependencies)
expect(screen.queryByText('Child component')).toBeNull()
})
})
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { singleSpaAngularElements } from 'single-spa-angular/elements';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
const lifecycles = singleSpaAngularElements({
template: '<app-custom-element />',
// We can actually not rely on the `zone.js` library, our custom element
// will behave itself as a zone-less application.
bootstrapFunction: () =>
platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop' }),
});
export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;
import {render, screen, fireEvent} from '@testing-library/angular'
import {CounterComponent} from './counter.component.ts'
describe('Counter', () => {
test('should render counter', async () => {
await render(CounterComponent, {
componentProperties: {counter: 5},
})
expect(screen.getByText('Current Count: 5')).toBeInTheDocument()
})
test('should increment the counter on click', async () => {
await render(CounterComponent, {
componentProperties: {counter: 5},
})
fireEvent.click(screen.getByText('+'))
expect(screen.getByText('Current Count: 6')).toBeInTheDocument()
})
})
import {render, screen, fireEvent} from '@testing-library/angular'
import {CounterComponent} from './counter.component.ts'
describe('Counter', () => {
test('should render counter', async () => {
await render(CounterComponent, {
componentProperties: {counter: 5},
})
expect(screen.getByText('Current Count: 5'))
})
test('should increment the counter on click', async () => {
await render(CounterComponent, {
componentProperties: {counter: 5},
})
fireEvent.click(screen.getByText('+'))
expect(screen.getByText('Current Count: 6'))
})
})
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { CartService } from '../cart.service';
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent {
items = this.cartService.getItems();
checkoutForm = this.formBuilder.group({
name: '',
address: ''
});
constructor(
private cartService: CartService,
private formBuilder: FormBuilder,
) {}
onSubmit(): void {
// Process checkout data here
this.items = this.cartService.clearCart();
console.warn('Your order has been submitted', this.checkoutForm.value);
this.checkoutForm.reset();
}
}