Блог

Главная - Вопросы по программированию - Перебор заголовков сетки, не отображаемых в DOM

Перебор заголовков сетки, не отображаемых в DOM

#javascript #jquery #grid #jasmine #protractor

#javascript #jquery #сетка #jasmine #транспортир

Вопрос:

Мне нужно проверить, содержит ли сетка все указанные заголовки, но не все заголовки видны в DOM одновременно, поэтому мне нужно прокрутить, чтобы «открыть» больше заголовков, но я действительно не знаю, как заставить его работать из-за асинхронной природы javascript.

Я пробовал что-то подобное, но я не думаю, что это хороший подход.

 var self = this;

  this.checkGridHeaders = function(gridName, expectedHeaders) {

    var previous;
    var headers = this.poGridUtil.getGrid( gridName ).element( by.css('.ui-grid-render-container-body'))
        .element( by.css('.ui-grid-header') ).all( by.repeater('col in colContainer.renderedColumns track by col.uid') );

    headers.each(function(header, headerIndex) {
          if(expectedHeaders.length != 0 amp;amp; header != 'undefined')  {
            header.getText().then(function(headerText){
              if(headerText == '') {
                browser.executeScript("arguments[0].scrollIntoView();", previous).then(function() {
                  self.checkGridHeaders(expectedHeaders);
                });
              }

              previous = header;
              console.log('***Element: '   headerText );
              expect(expectedHeaders.indexOf(headerText)).not.toEqual(-1);
              header = 'undefined';
            });
          }
    });
  };

и вызов выглядит так: checkGridHeaders('grid-className', ['header1', 'header2', 'header3', 'header4']);

В принципе, я хочу проверить, expectedHeader виден ли он, и если нет, то прокрутите до последнего известного заголовка, а затем проверьте еще раз. Я просто не знаю, как правильно это написать.

Ответ №1:

Попробуйте следующий код,

  var self = this;

 this.checkGridHeaders = function(gridName, expectedHeaders) {
    var defer = protractor.promise.defer();
    this.poGridUtil.getGrid( gridName ).element( by.css('.ui-grid-render-container-body .ui-grid-header'))
    .all( by.repeater('col in colContainer.renderedColumns track by col.uid')).then(function (headers) {
         var headerText =[];
         for(var i=0;i<headers.length;i  ){
             browser.executeScript("arguments[0].scrollIntoView();", headers[i].getWebElement())
             headerText.push(headers[i].getText())
         }
        defer.fulfill(headerText);
    })
    expect(defer.promise()).toContain(expectedHeaders)
   });
 };

Комментарии:

1. он выдает: defer.promise is not a function in expect(defer.promise()).toContain(expectedHeaders); . Также вы использовали слишком много скобок между expect(defer.promise()).toContain(expectedHeaders)

2. Я исправил предыдущую ошибку, но теперь она очень быстро прокручивается до каждого столбца и выдает: A Jasmine spec timed out. Resetting the WebDriver Control Flow.

3. Проблема с этим заключается в том, что он начинает итерацию по количеству столбцов, найденных в начале, и это именно моя проблема, потому что в начале я не знаю количество столбцов, потому что пара из них не видны в DOM. Так, например headers.length , равно 10, хотя действительное число равно 13… Мне нужно что-то, что проверяет, есть ли новый столбец при каждой прокрутке.

Ответ №2:

Я понял это. Это не лучший подход, но работает. 

   this.checkGridHeaders = function(gridName, expectedHeaders, iterationNumber) {
    if(isNaN(iterationNumber))
        iterationNumber = 5;

    var headers = [];

    var findHeaders = function() {
      return self.poGridUtil.getGrid( gridName ).element( by.css('.ui-grid-render-container-body .ui-grid-header'))
         .all( by.repeater('col in colContainer.renderedColumns track by col.uid')).then(function (foundHeaders) {
           var next = foundHeaders[foundHeaders.length - 1];
           return self.getResolvedText(foundHeaders).then(function(result) {
              browser.executeScript("arguments[0].scrollIntoView();", next.getWebElement());

              for(var i = 0; i < result.length; i  ) {
                  var cut = result[i].toString().replace("n", "");
                  var shorten = cut.trim();
                  if(shorten !== "" amp;amp; shorten !== " ")
                    headers.push(shorten);
              }

              browser.sleep(500);
              return resu<
           });
         });
    };

    var headerFinders = [];
    for (var iterIndex = 0; iterIndex < iterationNumber; iterIndex  )
        headerFinders.push(findHeaders());

    var allPromises = headerFinders.map(function(item) {
      return item;
    });

    var finderResult = protractor.promise.all(allPromises).then(function(presentValues) {
      return presentValues;
    });

    finderResult.then(function(resultItems) {
      var newHeaders = headers.filter( function( item, index, inputArray ) {
        return inputArray.indexOf(item) == index;
      });
      for(var index = 0; index < expectedHeaders.length; index  ) {
        expect(newHeaders).toContain(expectedHeaders[index], 'Nie znaleziono naglowka: '   expectedHeaders[index]);
      }
    });
  };

Если кто-нибудь знает, как привести в порядок этот код, не стесняйтесь оставлять комментарии 🙂