如何通过 Jasmine 在 JS 中测试（单元测试）箭头函数？

Question

I've done a small project "Notes" and now trying to test it using Jasmine.我已经完成了一个小项目“Notes”，现在尝试使用 Jasmine 对其进行测试。 But since it's my first script using module style and imitation of the private functions, I can't understand how can I test the business logic of my script, since Jasmine doesn't see my arrow functions at all.但是由于它是我第一个使用模块样式并模仿私有函数的脚本，我无法理解如何测试我的脚本的业务逻辑，因为 Jasmine 根本看不到我的箭头函数。 Please help me to start my tests.请帮助我开始我的测试。

 // eslint-disable-next-line func-names const NotesList = ((function () { const NOTE_TITLE = 'notesList'; const initNotesList = () => { if (localStorage.getItem(NOTE_TITLE)) { return JSON.parse(localStorage.getItem(NOTE_TITLE)); } return []; }; let notesList = initNotesList(); const saveData = (data) => { notesList = [...data]; localStorage.setItem(NOTE_TITLE, JSON.stringify(notesList)); }; const addNote = (note) => { if (notesList.includes(note)) { return { done: false, error: 'The note is in the notes list already', }; } saveData([...notesList, note]); return { done: true, }; }; const removeNote = (note) => { const filteredNotesList = notesList.filter((item) => item !== note); if (filteredNotesList.length === notesList.length) { return { done: false, error: 'Note doesn\\'t exist', }; } saveData(filteredNotesList); return { done: true }; }; return { getNotesList() { return notesList; }, addItem(item) { return addNote(item); }, removeItem(item) { return removeNote(item); }, }; })()); const STYLES = { show: 'd-block', }; const UI = { noteValue: document.querySelector('#note-value'), addNote: document.querySelector('#add-note'), removeNote: document.querySelector('#remove-note'), errorMessage: document.querySelector('#error-message'), list: document.querySelector('#list'), renderNotesList() { this.clearNotesList(); NotesList.getNotesList().forEach((item) => { const li = document.createElement('li'); li.innerText = item; this.list.append(li); }); }, clearNotesList() { this.list.innerText = ''; }, handleNotesListResponse(result) { if (result.done) { this.noteValue.value = ''; this.errorMessage.classList.remove(STYLES.show); this.renderNotesList(); } else { this.errorMessage.innerText = result.error; this.errorMessage.classList.add(STYLES.show); } }, }; UI.addNote.addEventListener('click', (event) => { event.preventDefault(); const result = NotesList.addItem(UI.noteValue.value); UI.handleNotesListResponse(result); }); UI.removeNote.addEventListener('click', (event) => { event.preventDefault(); const result = NotesList.removeItem(UI.noteValue.value); UI.handleNotesListResponse(result); }); UI.renderNotesList();

 body{font-family:"Roboto Condensed",sans-serif;font-size:16px}header{background:none}.nav-link{font-size:20px}.container{max-width:1200px;background-image:url(../images/blue-snow.png)}.container-header{max-width:1200px}.container-footer{max-width:1200px}footer li{display:inline;padding-right:5px;padding-bottom:5px}ul li a :hover{transform:rotate(1turn);transition:0.5s ease-in}html{scroll-behavior:smooth}

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="../dist/style.css"/> <title>Homework 1</title> </head> <body> <div class="container-header mx-auto"> <header> <nav class="navbar navbar-expand-lg navbar navbar-light bg-light"> <a class="navbar-brand pr-4" href="https://github.com/TrekFuel/home_tasks_FE-2" target="_blank"><img src="../images/github-logo-header-image.png" alt="GitHub" title="GitHub" width="40" height="40"/></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active pr-5"> <a class="nav-link" href="homework-3.html">Home Tasks (to the previous page)<span class="sr-only"></span></a> </li> <li class="nav-item active"> <a class="nav-link" href="#2">Contacts<span class="sr-only"></span></a> </li> </ul> </div> </nav> </header> </div> <div class="container mx-auto d-flex"> <main> <div class="row mt-5 mb-5 ml-3 mr-3"> <div class="col"> <h1 class="text-center mb-4">Notes</h1> <div class="input-group input-group-lg mx-auto mt-5 mb-5"> <input type="text" class="form-control" id="note-value" name="note-value" value="" placeholder="Note" aria-label="Note" aria-describedby="button-addon4 inputGroup-sizing-lg"> <div class="input-group-append" id="button-addon4"> <button class="btn btn-outline-secondary" id="add-note" type="button">Add note </button> <button class="btn btn-outline-secondary" id="remove-note" type="button">Remove note </button> </div> </div> <div class="alert alert-danger d-none" id="error-message" role="alert"></div> </div> </div> <div class="row mt-3 mb-3"> <div class="col"> <ul id="list"></ul> </div> </div> </main> </div> <div class="container-footer mx-auto"> <footer> <a name="2"></a> <div class="card text-center"> <div class="card-header"> <a name="7"></a> <h3>Contacts</h3> </div> <div class="card-footer text-center"> <ul class="list-unstyled p-2"> <li> <a href="https://vk.com/bolotinnikita" target="_blank"> <img src="../images/vk-logo.png" width="30" height="30" alt="ВК" title="ВК"/></a> </li> <li> <a href="https://twitter.com/bolotinnick" target="_blank"> <img src="../images/twitter-logo.png" width="30" height="30" alt="Twitter" title="Twitter"/></a> </li> <li> <a href="https://www.linkedin.com/in/bolotinnick/" target="_blank"> <img src="../images/linkedin-logo.png" width="30" height="30" alt="LinkedIn" title="LinkedIn"/></a> </li> <li> <a href="https://github.com/TrekFuel" target="_blank"> <img src="../images/github-logo.png" width="30" height="30" alt="GitHub" title="GitHub"/></a> </li> <li> <a href="https://www.instagram.com/bolotinnick/" target="_blank"> <img src="../images/instagram-logo.png" width="30" height="30" alt="Instagram" title="Instagram"/></a> </li> <li> <a href="mailto:ridge96@yandex.ru?subject=website"> <img src="../images/email-logo.png" width="30" height="30" alt="Email" title="Email"/></a> </li> <li> <a href="https://t.me/bolotinnick" target="_blank"> <img src="../images/telegram-logo.png" width="30" height="30" alt="Telegram" title="Telegram"/></a> </li> <li> <a href="skype:nick-spinner96?add"> <img src="../images/skype-logo.png" width="30" height="30" alt="Skype" title="Skype"/></a> </li> <li> <a href="viber://chat?number=+375291328633"> <img src="../images/viber-logo.png" width="30" height="30" alt="Viber" title="Viber"/></a> </li> <li> <a href="https://wa.me/375291328633" target="_blank"> <img src="../images/whatsapp-logo.png" width="30" height="30" alt="WhatsApp" title="WhatsApp"/></a> </li> </ul> <div class="btn btn-info mb-2">Bolotin Nikita &copy;, 2019-2020 <br> FE-2 Courses </div> </div> <div class="text-left m-2"> <a href="#top" class="btn btn-primary" id="btn">To the top &uarr;</a> </div> </div> </footer> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="../js/notes(hw-3).js"></script> </body> </html>

// eslint-disable-next-line no-undef
describe('notes(hw-3).js -> initNotesList', () => {
  // eslint-disable-next-line no-undef
  it('should return Object from the LocalStorage in case there are items'
    + ' there, otherwise should return an empty array', () => {

  });
});

Answer 1

What exactly are you looking to test that you can't already test?您究竟想要测试哪些您还无法测试的内容？ The getNotesList , addItem , removeItem methods are already exposed. getNotesList 、 addItem 、 removeItem方法已经公开。 Just simply test the exposed, public functions directly.只需直接测试公开的公共函数即可。 This will indirectly test all of the implementation details.这将间接测试所有实现细节。

Now, it might be that there is some bit of the code that is not testable through this manner, or it is extremely awkward to test.现在，可能有一些代码无法通过这种方式进行测试，或者测试起来非常尴尬。 In this case, you should refactor your code to make it more testable.在这种情况下，您应该重构代码以使其更易于测试。

For example, the initNotesList function is not directly testable.例如， initNotesList函数不能直接测试。 You may want to expose this as a public function (ie- add it to the return statement) and write some unit tests against it.您可能希望将其公开为公共函数（即，将其添加到 return 语句）并针对它编写一些单元测试。 I would also create and expose a clearNotesList function to aid in the set up and tear down of tests.我还将创建并公开一个clearNotesList函数以帮助设置和拆除测试。

But other than that, there's not much to do.但除此之外，没有太多可做的。 There's no magic to unit testing.单元测试没有魔法。 You just need to create clear, simple code and expose the proper pieces to make testing easy.您只需要创建清晰、简单的代码并公开适当的部分即可轻松进行测试。

如何通过 Jasmine 在 JS 中测试（单元测试）箭头函数？

问题描述

1 个解决方案

解决方案1
0 2019-12-29 05:30:19

如何通过 Jasmine 在 JS 中测试（单元测试）箭头函数？

问题描述

1 个解决方案

解决方案1 0 2019-12-29 05:30:19

解决方案1
0 2019-12-29 05:30:19