javascript - 如何通过 Jasmine 在 JS 中测试(单元测试)箭头函数？-6ren

javascript - 如何通过 Jasmine 在 JS 中测试(单元测试)箭头函数？

转载作者：行者123 更新时间：2023-11-28 03:17:42

我已经完成了一个小项目“Notes”，现在尝试使用 Jasmine 来测试它。但由于这是我的第一个使用模块样式和模仿私有(private)函数的脚本，我无法理解如何测试脚本的业务逻辑，因为 Jasmine 根本看不到我的箭头函数。请帮助我开始测试。

// 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', () => {

  });
});

最佳答案

您究竟想要测试哪些尚未测试的内容？ getNotesList、addItem、removeItem 方法已经公开。只需直接测试公开的公共(public)函数即可。这将间接测试所有实现细节。

现在，可能有一些代码无法通过这种方式进行测试，或者测试起来非常困难。在这种情况下，您应该重构代码以使其更易于测试。

例如，initNotesList 函数不可直接测试。您可能希望将其公开为公共(public)函数(即将其添加到返回语句中)并针对它编写一些单元测试。我还将创建并公开一个 clearNotesList 函数来帮助设置和拆除测试。

但除此之外，没有什么可做的。单元测试没有什么魔力。您只需要创建清晰、简单的代码并公开适当的部分即可使测试变得容易。

关于javascript - 如何通过 Jasmine 在 JS 中测试(单元测试)箭头函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59487692/

文章推荐： VUE 组件中的 Javascript 变量

文章推荐： c++ - 确定一个位置是否是特定列表的成员

文章推荐： c++ - 获取文件类型图标的 *ALL* 大小和深度的 HBITMAP (C++)

文章推荐： javascript - 值未定义React JS Redux

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何通过 Jasmine 在 JS 中测试(单元测试)箭头函数？