How to test (unit test) arrow functions in JS via Jasmine?

Question

I've done a small project "Notes" and now trying to test it using 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. 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. 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. You may want to expose this as a public function (ie- add it to the return statement) and write some unit tests against it. I would also create and expose a clearNotesList function to aid in the set up and tear down of tests.

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.

How to test (unit test) arrow functions in JS via Jasmine?

Question

1 answers

solution1
0 2019-12-29 05:30:19

How to test (unit test) arrow functions in JS via Jasmine?

Question

1 answers

solution1 0 2019-12-29 05:30:19

solution1
0 2019-12-29 05:30:19