Блог

Я новичок в Jest, поэтому приношу извинения, если мой вопрос не читается правильно, я тестирую модульный метод в ванильном классе JS, который имеет ссылку на свойство класса ‘this.original_params’. Прочитав документы и многие другие сообщения Stackoverflow, я все еще не понимаю, какие части я должен высмеивать, и синтаксис для этого. В настоящее время я пытаюсь проверить, является ли входное значение пустым, а целевое значение исходит из this.original_params .

 // autocomplete.js
export default class Autocomplete {
constructor(site_config, page_name) {
    this.site_config = site_config;
    this.page_name = page_name;
    this.lat = null;
    this.lng = null;
    this.original_params = '';
}

init() {
    this.original_params = new URLSearchParams(document.querySelector('meta[name="originalParams"]').content);
}

getDestination(inputSelector) {
    if (document.querySelector(inputSelector).getAttribute('value') !== '') {
        return document.querySelector(inputSelector).value;
    }
    console.log(this.original_params.has('destination'));
    if (this.original_params.has('destination')) {
        return this.original_params.get('destination');
    }
  }
}
 

Я перепробовал несколько способов написания теста, но не могу понять, с чего начать. Вот текущая итерация теста:

 // autocomplete.test.js
it('Sets destination if it exists in Original Params', () => {
    document.body.innerHTML = `<meta name="original_params" content="siteid=62309amp;amp;currency=USDamp;amp;cid=ROCKamp;amp;useMiles=amp;amp;checkin=11/12/21amp;amp;pageSize=15amp;amp;mapSize=13amp;amp;groupid=43285amp;amp;radius=5amp;amp;nights=3amp;amp;latitude=26.10879170000000amp;amp;map=amp;amp;longitude=-80.10643370000000amp;amp;destination=Austin, TX, USA"><input type="search" id="address-input" placeholder="Destination" value="" required="true">`;

    const original_params = new URLSearchParams(
        '<meta name="original_params" content="siteid=62309amp;amp;currency=USDamp;amp;cid=ROCKamp;amp;useMiles=amp;amp;checkin=11/12/21amp;amp;pageSize=15amp;amp;mapSize=13amp;amp;groupid=43285amp;amp;radius=5amp;amp;nights=3amp;amp;latitude=26.10879170000000amp;amp;map=amp;amp;longitude=-80.10643370000000amp;amp;destination=Austin, TX, USA"></meta>'
    );

    expect(autocomplete.getDestination('input#address-input')).toEqual('Austin, TX, USA');
});
 

Ошибка, которую я получаю:

 ● getDestination › Sets destination if it exists in Original Params

TypeError: this.original_params.has is not a function

  80 |             return document.querySelector(inputSelector).value;
  81 |         }
> 82 |         console.log(this.original_params.has('destination'));
     |                                          ^
  83 |         if (this.original_params.has('destination')) {
  84 |             return this.original_params.get('destination');
  85 |         }
 

Любая помощь очень ценится.

Несколько вещей:

• Вы забыли вызвать init() экземпляр автозаполнения on
• В init querySelector поиске meta[name="originalParams"] , но в тесте у вас есть <meta name="original_params"

Изменение ваших тестов на это должно заставить его пройти:

 it('Sets destination if it exists in Original Params', () => {
  document.body.innerHTML = `<meta name="originalParams" content="siteid=62309amp;amp;currency=USDamp;amp;cid=ROCKamp;amp;useMiles=amp;amp;checkin=11/12/21amp;amp;pageSize=15amp;amp;mapSize=13amp;amp;groupid=43285amp;amp;radius=5amp;amp;nights=3amp;amp;latitude=26.10879170000000amp;amp;map=amp;amp;longitude=-80.10643370000000amp;amp;destination=Austin, TX, USA"><input type="search" id="address-input" placeholder="Destination" value="" required="true">`;
  let autocomplete = new Autocomplete();
  autocomplete.init();

  expect(autocomplete.getDestination('input#address-input')).toEqual('Austin, TX, USA');
});
 

Кроме того, URLSearchParams получает только часть URL-адреса строки запроса. Так new URLSearchParams('<meta ...>') не работает. Вы должны использовать следующее, хотя оно вообще не использовалось в вашем тесте:

 new URLSearchParams('siteid=62309amp;amp;currency=USDamp;amp;cid=ROCKamp;amp;useMiles=amp;amp;checkin=11/12/21amp;amp;pageSize=15amp;amp;mapSize=13amp;amp;groupid=43285amp;amp;radius=5amp;amp;nights=3amp;amp;latitude=26.10879170000000amp;amp;map=amp;amp;longitude=-80.10643370000000amp;amp;destination=Austin, TX, USA');