Работа с объектами-элементами, которые срабатывают при создании

Итак, у меня есть приспособление:

<test-fixture id="my-element-fixture">
  <template>
    <my-element></my-element>
  </template>
</test-fixture>

Я установил прибор для тестирования:

<script>
  suite('my-element', () => {
    setup(() => {
      page = fixture('my-element-fixture');
    });

    test('testing', () => {
      assert.isTrue(true);
    });
  });
</script>

Элемент для прибора имеет функцию ready():

constructor() {
        super();
      }
ready() {
        super.ready();
        this.otherElement.addEventListener('function_name', function(e) {
            //stuff
          }.bind(this)
        );
      }

и эта функция ready() имеет объект, вызывающий элемент it:

this.otherElement

объект определен в родительском элементе этого прибора:

<my-element id="my-element" otherElement="[[$.otherElement]]"></my-element>

который создается там как:

<otherElement id="otherElement></otherElement>

и вызывается из его файла:

<link rel="import" href="../otherElement/otherElement.html">

то, что я хочу сделать, это не утруждать себя тестированием otherElement.

В прошлом, когда у меня был элемент в приспособлении из другого элемента, я просто делал объект, чтобы занять его место, и использовал поддельный объект и создавал поддельные функции:

setup(() => {
  page = fixture('my-element-fixture');
  anotherElement = page.$.anotherElement;
  anotherElement.functionname = function(t) {/*do nothing*/};
});

Но в прошлом, как вы можете видеть, элемент также был в элементе прибора, который я тестировал, следовательно, page.$.anotherElement. Не уверен, что это действительно важно.

Теперь проблема в том, что я понятия не имею, что мне нужно сделать, чтобы перезаписать объект otherElement, чтобы он не вызывался в функции ready().

Я попытался сделать то, что я сделал выше в настройке.

Я попытался включить элемент в фактический тестовый файл.

Я пробовал, чтобы элемент в приборе вызывал сам себя, фальшивый элемент, фактический элемент.

Почти все, что я мог придумать.

Каждый раз, когда объект не определен, я получаю сообщение об ошибке типа «this.otherElement is undefined» или «Невозможно прочитать свойство .functionname of undefined».

Любые идеи?


javascript unit-testing polymer web-component-tester polymer-2.x
person Raults    schedule 02.08.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

setup(function() {
  replace('anotherElement').with('fakeAnotherElement');
});

Учитывая ваш шаблон

<test-fixture id="my-element-fixture">
  <template>
    <my-element></my-element>
  </template>
</test-fixture>

это было бы помещено на дом, как

<my-Element>
 <fakeAnotherElement/>
</my-Element>

Подробнее читайте в документации: https://www.polymer-project.org/3.0/docs/tools/tests#create-stub-elements

person jpjwolli    schedule 03.08.2018
comment
Собираюсь попробовать это и вернуться к вам. - person Raults; 03.08.2018
comment
Итак, я попробовал это, и мой объект все еще не был определен. Я собираюсь посмотреть, смогу ли я поиграться, но пока я все еще не могу перезаписать объект, казалось бы. Может быть, природа объекта имеет значение в этом случае? Это объект, выбирающий элемент, который просто вызывает AWS. - person Raults; 03.08.2018

arrow_upward
0
arrow_downward

Это было сложно, но после того, как все остальные потерпели неудачу, единственным решением было буквально вырезать код за пределами модульного теста и изменить структуру, чтобы моя готовая функция не справлялась.

Сначала я обернул выражение if вокруг проверки содержимого готовой функции, чтобы убедиться, что otherElement не определено:

constructor() {
        super();
      }
ready() {
        super.ready();
        if (this.otherElement != undefined) {
          this.otherElement.addEventListener('function_name', function(e) {
              //stuff
            }.bind(this)
          );
        }
      }

Это избавило меня от необходимости определять его до того, как что-то действительно было сделано, и позволило мне создать собственный объект otherElement, подобный этому.

page.otherElement = {};

А затем поместите функции, назначенные объекту, как мне нужно:

page.otherElement = {
   functionName: function(parameters) {/*anything*/},
};

Надеюсь, это поможет кому-то, но это довольно специфично, так что не знаю. Товарищи из GL Polymer!

person Raults    schedule 08.08.2018