aleixsuau

context('HTTP', () => {
  it('should assert API responses', () => {
    // Alias an HTTP request
    cy.intercept('GET', '/config.json').as('getConfig');

    // We need to visit the site in order the requests are triggered
    cy.visit('');

    // We need to wait the request in order to assert
    cy.wait('@getConfig').its('response.body').should('have.property', 'menu');

aleixsuau

context('Aliasing', () => {
  beforeEach(() => {
    cy.get('[data-test="menuToggle"]').as('menuToggle');
    cy.fixture('/posts.json').as('postsData');
  });

  it('should work with alias', () => {
    cy.get('@menuToggle').click();
    cy.get('@postsData').should('have.length', 7);
  });

aleixsuau

context('Asserting', () => {
  it('should assert things', () => {
    // Assert length
    cy.get('[data-test="menuItem"]').should('have.length', 4);
    // Assert class
    cy.get('[data-test="emailInput"]').should('not.have.class', 'disabled');
    // Assert value
    cy.get('[data-test="messageInput"]').should('have.value', '');
    // Assert text
    cy.get('[data-test="menuItem"]').eq(3).should('include.text', 'CONTACT');

aleixsuau

context('Interacting', () => {
  it('should trigger events on DOM elements', () => {
    // Cypress provides some commands like:
    cy.get('[data-test="menuToggle"]').dblclick();
    cy.get('[data-test="menuToggle"]').click();
    cy.get('[data-test="menu"]').rightclick();
    cy.get('[data-test="emailInput"]').type('info@aleixsuau.dev');
    cy.get('[data-test="emailInput"]').clear();

    // We can also trigger events

aleixsuau

context('Querying', () => {
  it('should query', () => {
    // Query by CSS selector
    cy.get('#profile');
    cy.get('[data-test=profileGreeting]');

    // Query by text content
    cy.contains("I'm Aleix, frontend developer");

    // Query by index

aleixsuau

context('Cypress Chainable Objects', () => {
  it('should chain objects', () => {
    cy.get('[data-test="profileLink"]').eq(2).focus();
  });

  it('should give access to the JQuery object and wrap it back to Cypress chainable object', () => {      
    cy.get('[data-test="menu"]').then(($menu) => {
      // $menu is a JQuery object
      const classList = $menu.attr('class');

aleixsuau

ngOnInit() {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(HelpHintDynamicComponent);
  const componentRef =   this.viewContainer.createComponent(componentFactory);

  // Pass the template to the wrapper component   
  componentRef.instance.templateRef = this.templateRef;
  // Pass the template to the wrapper component    
  componentRef.instance.hint = this.appHelpHintStructural;
}

aleixsuau

@Directive({
  selector: '[appHelpHintStructural]'
})
export class HelpHintStructuralDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver,
  ) { }
      

aleixsuau

@Component({
  selector: 'app-help-hint-dynamic',
  templateUrl: `
   <div class="help-hint-container">
     <div *ngTemplateOutlet="templateRef"></div>
     <img src="https://cdn.onlinewebfonts.com/svg/img_28550.png"
          [title]="hint"
          (mouseover)="onMouseOver();"
          *ngIf="hint">
   </div>`,

aleixsuau

<p [appHelpHintAttribute]="hint"
   (helpHovered)="helpHoveredAttribure = true">
  Hola
</p>