jessesanders

@Component({
  selector: "app-user-list",
  templateUrl: "./user-list.component.html",
  styleUrls: ["./user-list.component.css"],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserListComponent {
  @Input()
  users: User[];
}

jessesanders

<app-user-list [users]="users$ | async"></app-user-list>

jessesanders

export class DashboardComponent implements OnInit {
  users$: Observable<User[]>;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.users$ = this.userService.users$;
    this.userService.getAll();
  }
}

jessesanders

export class UserService {
  private musers$ = new BehaviorSubject<User[]>([]);
  
  get users$(): Observable<any[]> {
    return this.musers$.asObservable();
  }

  constructor(private httpClient: HttpClient) {}

  getAll() {

jessesanders

cy.server();

// create aliases
cy.route("activities/*", "fixture:activities").as("getActivities");
cy.route("messages/*", "fixture:messages").as("getMessages");

// visit the dashboard, which should make requests that match
// the two routes above
cy.visit("http://localhost:8888/dashboard");

jessesanders

cy.server();
// we set the response to be the activites.json fixture

cy.route("GET", "users/*", "fixture:users.json");

//or
cy.fixture("users.json").as("usersJSON"); // alias the fixture
cy.route("GET", "users/*", "@usersJSON");

jessesanders

cy.server(); // start the server

cy.route({
  method: "GET", // Route all GET requests
  url: "/users/*", // that have a URL that matches '/users/*'
  response: [] // and force the response to be: []
});

jessesanders

describe("The Home Page", function() {
  beforeEach(() => {
    cy.visit("/");
  });

  it("h2 should have proper text", () => {
    // https://on.cypress.io/within
    cy.get("h2:first").should(
      "have.text",
      "Here are some links to help you start: "

jessesanders

beforeEach(() => {
    cy.visit('https://example.cypress.io/commands/actions')
  });

it('.within() - query DOM elements within a specific element', () => {
    // https://on.cypress.io/within
    cy.get('.query-form').within(() => {
      cy.get('input:first').should('have.attr', 'placeholder', 'Email')
      cy.get('input:last').should('have.attr', 'placeholder', 'Password')
    })