andrewarosario

@Component({
  selector: 'my-app',
  template: `
    <h1>Envie seu feedback</h1>
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div>
        <label>
          Sua avaliação:
          <app-star-rating formControlName="rating"></app-star-rating>
        </label>

andrewarosario

<i>{{ displayText }}</i>
<div class="stars" [ngClass]="{ disabled }">
  <ng-container *ngFor="let rating of ratings">
    <svg
      title="{{ rating.text }}"
      height="25"
      width="23"
      class="star rating"
      [ngClass]="{ selected: rating.stars <= value }"
      (mouseover)="displayText = !disabled ? rating.text : ''"

andrewarosario

type Rating = { stars: number; text: string };

@Component({
  selector: 'app-star-rating',
  templateUrl: './star-rating.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => StarRatingComponent),
      multi: true,

andrewarosario

@Component({
  selector: 'app-star-rating',
  templateUrl: './star-rating.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => StarRatingComponent),
      multi: true,
    },
  ],

andrewarosario

@Component({
  selector: 'app-star-rating',
  templateUrl: './star-rating.component.html'
})
export class StarRatingComponent implements ControlValueAccessor {
  protected disabled: boolean;
  protected value: number;

  onChanged: (stars: number) => void;
  onTouched: () => void;

andrewarosario

import { render, screen } from '@testing-library/angular';

const setup = async () => {
  await render(UsersComponent);
}

describe('UsersComponent', () => {
  it('should display table', async () => {
    await setup();
    const table = screen.getByTestId('table');

andrewarosario

const usersPo = new UsersPageObject();

Given('acesso a página de usuários', () => {
    usersPo.navigateToPage();
});

When('o carregamento é finalizado', () => {
    usersPo.hideLoading();
});

andrewarosario

#language: pt
Funcionalidade: Usuários

    Cenário: Visualizar usuários
        Dado acesso a página de usuários
        Quando o carregamento é finalizado
        Então devo visualizar uma listagem com todos os usuários

andrewarosario

@Component({
  selector: 'mat-menu',
  hostDirectives: [HasColor, {
    directive: CdkMenu,
    inputs: ['cdkMenuDisabled: disabled'],
    outputs: ['cdkMenuClosed: closed']
  }]
})
class MatMenu {}

andrewarosario

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes)
  ]
});