timdeschryver

@State<CartStateModel>({
  name: 'cartItems',
  defaults: {
    cartItems: {},
  },
})
export class CartState {
  @Action(AddToCart)
  addProduct(ctx: StateContext<CartStateModel>, action: AddToCart) {
    ctx.setState(

timdeschryver

@Action(LoadCatalog)
loadCatalog(ctx: StateContext<CatalogStateModel>, action: LoadCatalog) {
  ctx.setState(
    produce(ctx.getState(), draft => {
      action.payload.products.forEach(product => {
        draft.products[product.sku] = product;
        draft.productSkus.push(product.sku);
      });
    }),
  );

timdeschryver

ctx.setState(
  produce((draft) => {
    draft.cartItems[action.payload.sku] = (draft.cartItems[action.payload.sku] || 0) + 1;
  })
)

timdeschryver

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

timdeschryver

it('should increment and decrement', async () => {
  // setup the test via the template syntax
  const { getByText, getByTestId, click } = 
    await createComponent('<counter [counter]="10"></counter>', {
      declarations: [CounterComponent],
    });

  // or via the component type
  const { getByText, getByTestId, click } = 
    await createComponent(

timdeschryver

async function createComponent(template: string, options: Options): Promise<Result>;
async function createComponent<T>(component: ComponentInput<T>, options: Options): Promise<Result>;

timdeschryver

test('login form submits', async () => {
  const fakeUser = { username: 'jackiechan', password: 'hiya! 🥋' };
  const handleLogin = {
    emit: jest.fn(),
  };

  const { container, getByLabelText, getByText, input, submit } = await createComponent(
    {
      component: LoginFormComponent,
      parameters: {

timdeschryver

const createProduct = ({
  sku = '',
  name = '',
  image = '',
  price = 1,
} = {}): Product => ({
  sku: sku,
  name: name || `name-${sku}`,
  price,
  image: image || `image-${sku}`,

timdeschryver

{
  "catalog": {
    "products": {
      "PRODUCT-AAA": {
        "sku": "PRODUCT-AAA",
        "name": "name-PRODUCT-AAA",
        "price": 1,
        "image": "image-PRODUCT-AAA"
      },
      "PRODUCT-BBB": {

timdeschryver

export const getCatalogState = createFeatureSelector<fromCatalog.State>('catalog');
export const getProducts = createSelector(
  getCatalogState,
  catalog => catalog.products,
);
export const getProductSkus = createSelector(
  getCatalogState,
  catalog => catalog.productSkus,
);