испытание транспортира - угловой 5 - PullRequest
Новая
       8

испытание транспортира - угловой 5

0 голосов
/ 28 мая 2018

Мы переносим нашу библиотеку пользовательского интерфейса с AngularJS на Angular 5.

У меня проблемы с тестами транспортира.Мне не ясно, какие изменения я должен внести в старый тест AngularJS, чтобы сделать его совместимым с Angular 5.

Если у кого-то есть такой опыт и он может указать мне правильное направление, это будет оценено.

Существующий код AngularJS ... 

**// card.template.html**

<article class="rt-card">
  <header class="rt-card__header">
    <h1 data-ng-transclude="title"
        class="rt-card__title"
        data-rt-id="{{::$ctrl.rtId}}Title"></h1>
  </header>
  <section data-ng-transclude="content"
           class="rt-card__content"
           data-rt-id="{{::$ctrl.rtId}}Content"></section>
  <footer data-ng-transclude="link"
          class="rt-card__footer"
          data-rt-id="{{::$ctrl.rtId}}Footer"></footer>
</article>



**// card.component.ts** 

import * as main from "../../common/main";

main.module.component('rtCard', {
  template: require('./card.template.html'),
  bindings: {
    rtId: '@'
  },
  transclude: {
    'title': 'rtCardTitle',
    'content': 'rtCardContent',
    'link': 'rtCardLink'
  }
});



// Test Files

**// card.page.ts  *Test File***

import {browser} from 'protractor';
import {CardComponent} from './card.component';

export default class CardPage {
    public readonly defaultCard: CardComponent = new CardComponent(`[data-rt-id='default-card']`);

  constructor() {
    browser.get('#/components/card');
  }
}




**// card.component.ts  *Test File***

import {element, by, ElementFinder} from 'protractor';
import {promise} from "selenium-webdriver";

export interface ICard {
  isPresent(): promise.Promise<boolean>;

  getTitleText(): promise.Promise<string>;
}

export class CardComponent implements ICard {
  private readonly titleElementSelector: string = '.rt-card__title';
  private readonly contentElementSelector: string = '.rt-card__content > rt-card-content';
  private readonly linkElementSelector: string = '.rt-card__footer > rt-card-link > a';

  private component: ElementFinder;

  constructor(selector: string) {
    this.component = element(by.css(`rt-card${selector}`));
  }

  isPresent(): promise.Promise<boolean> {
    return this.component.isPresent();
  }

  getTitleText(): promise.Promise<string> {
    return this.component.element(by.css(this.titleElementSelector)).getText().then((text) => {
      return text ? text.trim() : '';
    });
  }

  getContentHtml(): promise.Promise<string> {
    return this.component.element(by.css(this.contentElementSelector)).getAttribute('innerHTML').then((html: string) => {
      return html.trim();
    });
  }

  getLinkText(): promise.Promise<string> {
    return this.component.element(by.css(this.linkElementSelector)).getText();
  }

  getLinkUrl(): promise.Promise<string> {
    return this.component.element(by.css(this.linkElementSelector)).getAttribute('href');
  }
}




**// card.spec.functional.ts** 

import CardPage from './card.page';

let page;

describe('Card', () => {
  beforeAll(() => {
    page = new CardPage();
  });

  it('should be available on the page', () => {
    expect(page.defaultCard.isPresent()).toBe(true, `Can't find the default card`);
  });

  it('should contain the correct title text', () => {
    expect(page.defaultCard.getTitleText()).toEqual('Time off', `Title text is not correct`);
  });

  it('should contain the correct content', () => {
    expect(page.defaultCard.getContentHtml()).toEqual(`<span>0 hours available</span>`, `Content HTML is not correct`);
  });

  it('should contain the correct link', () => {
    expect(page.defaultCard.getLinkText()).toEqual(`Go to time off`, `Link text is not correct`);
    expect(page.defaultCard.getLinkUrl()).toEqual(`http://www.google.com/`, `Link URL is not correct`);
  });
});

Угловой 5 код ... 

**// card.component.html**

<article class="rt-card">
    <header class="rt-card__header">
        <h1 class="rt-card__title"
            [attr.data-rt-id]="rtId + 'Title'">
            <ng-content select="rt-card-title"></ng-content>
        </h1>
    </header>
    <section class="rt-card__content"
        [attr.data-rt-id]="rtId + 'Content'">
        <ng-content select="rt-card-content"></ng-content>
    </section>
    <footer class="rt-card__footer"
        [attr.data-rt-id]="rtId + 'Footer'">
        <ng-content select="rt-card-footer"></ng-content>
    </footer>
</article>





**// card.component.ts**

import { Component, Input, OnInit } from '@angular/core';
// import './card.component.scss';

@Component({
  selector: 'rt-card',
  templateUrl: './card.component.html'
})

export class CardComponent implements OnInit {

  @Input() rtId: string;

  constructor() { }

  ngOnInit() {
    if (!this.rtId) {
      console.error(`The attribute 'rtId' is mandatory for rt-card`);
    }
  }
}



**// card.page.ts   *Test File***

import {browser} from 'protractor';
import {CardComponent} from './card.component';

export default class CardPage {
  public readonly defaultCard: CardComponent = new CardComponent(`[data-rt-id='default-card']`);
  constructor() {
    browser.get('card');
  }
}



**// card.component.ts   *Test File***

import {element, by, ElementFinder} from 'protractor';
import {promise} from 'selenium-webdriver';

export interface ICard {
  isPresent(): promise.Promise<boolean>;
  getTitleText(): promise.Promise<string>;
}

export class CardComponent implements ICard {
  private readonly titleElementSelector: string = '.rt-card__title > rt-card-title';
  private readonly contentElementSelector: string = '.rt-card__content > rt-card-content';
  private readonly footerElementSelector: string = '.rt-card__footer > rt-card-footer > a';

  private component: ElementFinder;

  constructor(selector: string) {
    this.component = element(by.css(`rt-card${selector}`));
  }

  isPresent(): promise.Promise<boolean> {
    return this.component.isPresent();
  }

  getTitleText(): promise.Promise<string> {
    return this.component.element(by.css(this.titleElementSelector)).getText().then((text) => {
      return text ? text.trim() : '';
    });
  }

  getContentHtml(): promise.Promise<string> {
    return this.component.element(by.css(this.contentElementSelector)).getAttribute('innerHTML').then((html: string) => {
      return html.trim();
    });
  }

  getLinkText(): promise.Promise<string> {
    return this.component.element(by.css(this.footerElementSelector)).getText();
  }

  getLinkUrl(): promise.Promise<string> {
    return this.component.element(by.css(this.footerElementSelector)).getAttribute('href');
  }
}




**// card.e2e-spec-protractor.ts   *Test File***

import CardPage from './card.page';

let page;
fdescribe('Card', () => {
  beforeAll(() => {
    page = new CardPage();
  });

  it('should be available on the page', () => {
    expect(page.defaultCard.isPresent()).toBe(true, `Can't find the default card`);
  });

  it('should contain the correct title text', () => {
    expect(page.defaultCard.getTitleText()).toEqual('Time off', `Title text is not correct`);
  });

  it('should contain the correct content', () => {
    expect(page.defaultCard.getContentHtml()).toEqual(`<span>16 hours available</span>`, `Content HTML is not correct`);
  });

  it('should contain the correct link in the footer', () => {
    expect(page.defaultCard.getLinkText()).toEqual(`Go to time off`, `Link text is not correct`);
    expect(page.defaultCard.getLinkUrl()).toEqual(`http://www.rt.com/`, `Link URL is not correct`);
  });
});

Сбой теста - терминал 

**************************************************
*                    Failures                    *
**************************************************

1) Card should be available on the page
  - Failed: invalid selector: An invalid or illegal selector was specified
    (Session info: chrome=67.0.3396.62)
    (Driver info: chromedriver=2.39.562718 (9a2698cba08cf5a471a29d30c8b3e12becabb0e9),platform=Windows NT 10.0.15063 x86_64)

2) Card should contain the correct title text
  - Failed: invalid selector: An invalid or illegal selector was specified
    (Session info: chrome=67.0.3396.62)
    (Driver info: chromedriver=2.39.562718 (9a2698cba08cf5a471a29d30c8b3e12becabb0e9),platform=Windows NT 10.0.15063 x86_64)

3) Card should contain the correct content
  - Failed: invalid selector: An invalid or illegal selector was specified
    (Session info: chrome=67.0.3396.62)
    (Driver info: chromedriver=2.39.562718 (9a2698cba08cf5a471a29d30c8b3e12becabb0e9),platform=Windows NT 10.0.15063 x86_64)

4) Card should contain the correct link in the footer
  - Failed: invalid selector: An invalid or illegal selector was specified
    (Session info: chrome=67.0.3396.62)
    (Driver info: chromedriver=2.39.562718 (9a2698cba08cf5a471a29d30c8b3e12becabb0e9),platform=Windows NT 10.0.15063 x86_64)

Executed 4 of 29 specs (4 FAILED) (25 SKIPPED) in 2 secs.
[09:34:33] I/launcher - 0 instance(s) of WebDriver still running
[09:34:33] I/launcher - chrome #01 failed 4 test(s)
[09:34:33] I/launcher - overall: 4 failed spec(s)
[09:34:33] E/launcher - Process exited with error code 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angular-library-demo@0.0.0 protractor: `protractor protractor.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular-library-demo@0.0.0 protractor script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\R\AppData\Roaming\npm-cache\_logs\2018-05-30T07_34_34_050Z-debug.log

1 Ответ

0 голосов
/ 29 мая 2018

Единственные изменения, которые потребуются в ваших тестах транспортира, это то, что если вы использовали какой-либо локатор, использующий by.repeater или by.binding или by.model, то они не будут работать.Вам нужно будет заменить их другими локаторами, наиболее предпочтительно с помощью by.css локаторов.

Остальные вещи должны работать нормально, как и ожидалось.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...