后骨测试库

DOM 测试设施 Backbone 带有一个反射的 API React Testing Library。 。 。 .

有兴趣做这样的项目吗? 关闭 正在寻找 伟大的工程师 加入我们的队伍!

你为什么想要这个... 差不多2021年了! 都快2021年了?

在关闭时,我们的应用程序仍有一大部分被写入 Backbone 我们非常小心 切换到 React我们创建了这个图书馆, 以此来撰写测试我们 Backbone 样式中的组件 React Testing Library。这意味着,当我们港口 组件结束,我们可以使用同样的测试 用非常微小的改变,所以 尽量减少我们的应用程序中的回归。 虽然我们不建议 建立一个全新的FE应用 与 Backbone我们开源 帮助其他想要转型的人 遗留代码库.

安装

此模块通过 无 与 节点 财务报告和审定财务报表 应安装为您的项目之一 devDependencies。 。 。 . 这个图书馆还有 peerDependencies 清单 @testing-library/dom数字 :

npm install --save-dev @closeio/backbone-testing-library @testing-library/dom

或者说

用于通过 线条

yarn add --dev @closeio/backbone-testing-library @testing-library/dom

您可能也有兴趣安装 @testing-library/jest-dom 这样你就可以 使用情况 自定义相匹配者。 。 。 .

示例

// models/HiddenMessageModel.js

import Backbone from 'backbone';

const HiddenMessageModel = Backbone.Model.extend({
  defaults: {
    message: '',
    showMessage: false,
  },
});

export default HiddenMessageModel;

// views/HiddenMessageView.js

import Backbone from 'backbone';

const HiddenMessageView = Backbone.View.extend({
  events: {
    'change #toggle': 'setShowMessage',
  },

  initialize({ model }) {
    this.model = model;
    this.model.on('change', this.render.bind(this));
  },

  setShowMessage(e) {
    this.model.set('showMessage', e.target.checked);
  },

  template({ showMessage, message }) {
    return `<div>
      <label for="toggle">Show Message</label>
      <input
        id="toggle"
        type="checkbox"
        ${showMessage ? 'checked' : ''}
      />
      ${showMessage ? message : ''}
    </div>`;
  },

  render() {
    this.$el.html(this.template(this.model.attributes));
  },
});

export default HiddenMessageView;

// views/HiddenMessageView.test.js

// these imports are something you'd normally configure Jest to import for you
// automatically. Learn more in the setup docs: https://testing-library.com/docs/react-testing-library/setup#cleanup
import '@testing-library/jest-dom';
// NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required

import { render, fireEvent } from '@closeio/backbone-testing-library';

import HiddenMessageModel from '../models/HiddenMessageModel';
import HiddenMessageView from './HiddenMessageView';

test('shows the children when the checkbox is checked', () => {
  const testMessage = 'Test Message';
  const testModel = new HiddenMessageModel({
    message: testMessage,
  });

  // The queries you'd expect from React Testing Library are returned from render, as are
  // `view`, `container`, `baseElement`, `debug` and `unmount`. We also hook into React
  // Testing Library's `RTL_SKIP_AUTO_CLEANUP` const to auto unmount views in `afterEach`
  const { queryByText, getByLabelText, getByText } = render(HiddenMessageView, {
    model: testModel,
  });

  // query* functions will return the element or null if it cannot be found
  // get* functions will return the element or throw an error if it cannot be found
  expect(queryByText(testMessage)).toBeNull();

  // the queries can accept a regex to make your selectors more resilient to content tweaks and changes.
  fireEvent.click(getByLabelText(/show/i));

  // .toBeInTheDocument() is an assertion that comes from jest-dom
  // otherwise you could use .toBeDefined()
  expect(getByText(testMessage)).toBeInTheDocument();
});

render 参数

• View - 第一个论点是 Backbone.View 考级,会 由渲染函数分解
• options - 可选 - 第二个参数是一个选项对象,有以下内容: 参数 :
  • container - 可选 - 行为像 RTL的电话 container 默认创建 div 并附加到 document.body
  • baseElement - 可选 - 行为像 RTL的电话 baseElement 若为 container 指定,然后默认为此,否则此默认为 document.body
  • autoRender -可选 - 此默认为 true。有时你可能会想 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}在你们之间 Backbone.View是因为 initialize 财务报告和审定财务报表 render 方法,如果 这样你就可以通过 false 这里,打电话 render 手动返回 view 举个例子.
  • ...options - 任何其他财产将作为 options 页:1 Backbone.View建筑师 例如,您可以添加 el 如果您想要手动 提供给观点,而不是 Backbone 自动创建它。 你也可能会 经常想通过一个 model。 。 。 .

render 结果

渲染方法返回具有几个属性的对象:

• ...queries - 渲染的最重要特征是: DOM Testing Library 将自动返回,并将第一个参数绑入 baseElement,哪个 默认为 document.body
• view - 那个 Backbone 视图本身.
• container - 行为就像 RTL的电话 container 返回任意一个 div 自动为您创建, 或者 container 转至 render来得到 生成元素的根元素,使用 container.firstChild 或者说 view.el。 。 。 .
• baseElement - 行为就像 RTL的电话 baseElement 返回( n) document.body 或 baseElement 传到"投降".
• debug - 行为就像 RTL的电话 debug 函数是一个快捷键 console.log(prettyDOM(baseElement))。 。 。 .
• unmount - 打电话 remove 编辑 Backbone.View 实例和清理 container 键。 用于测试您从页面中删除视图时会发生什么 . 默认时间 RTL_SKIP_AUTO_CLEANUP 实值 false, (中文(简体) ), cleanup 在每一个 afterEach 运行的块 render,也就是说,如果 你不是在测试 remove虽然从另一个角度依赖 ENV var可能有点奇怪 图书馆,我们在这里的意图是 这个图书馆与RTL并列运行 相同用于移植组件.

许可证

麻省理工学院 关闭