{"id":19686317,"url":"https://github.com/closeio/backbone-testing-library","last_synced_at":"2025-04-29T06:31:22.274Z","repository":{"id":40750372,"uuid":"321384386","full_name":"closeio/backbone-testing-library","owner":"closeio","description":"DOM testing utilities with API that mirrors React Testing Library","archived":false,"fork":false,"pushed_at":"2023-07-17T19:17:50.000Z","size":1310,"stargazers_count":19,"open_issues_count":15,"forks_count":2,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-04-05T13:51:26.711Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/closeio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-14T15:06:31.000Z","updated_at":"2021-11-21T01:10:13.000Z","dependencies_parsed_at":"2023-02-06T07:02:02.630Z","dependency_job_id":null,"html_url":"https://github.com/closeio/backbone-testing-library","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/closeio%2Fbackbone-testing-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/closeio%2Fbackbone-testing-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/closeio%2Fbackbone-testing-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/closeio%2Fbackbone-testing-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/closeio","download_url":"https://codeload.github.com/closeio/backbone-testing-library/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251450656,"owners_count":21591407,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T18:27:29.239Z","updated_at":"2025-04-29T06:31:20.674Z","avatar_url":"https://github.com/closeio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Backbone Testing Library\n[![NPM](https://img.shields.io/npm/v/@closeio/backbone-testing-library.svg)](https://www.npmjs.com/package/@closeio/backbone-testing-library)\n[![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-success)](https://prettier.io)\n\nDOM testing utilities for [`Backbone`](https://backbonejs.org/) with an API that mirrors [`React Testing Library`](https://github.com/testing-library/react-testing-library).\n\n### \u003cimg height=\"40px\" src=\"https://close.com/static/img/close-logo-dark.svg\" /\u003e\n\nInterested in working on projects like this? [Close](https://close.com) is looking for [great engineers](https://jobs.close.com) to join our team!\n\n## Why would you want this... It's nearly 2021!?\n\nAt Close a large portion of our app is still written in `Backbone` and we're carefully\ntransitioning this to `React`. We created this library as a way to write tests on our\n`Backbone` components in the style of `React Testing Library`. This means, as we port\ncomponents over, we are able to use the same tests with very minimal changes and so\nminimize regressions in our app. While we wouldn't recommend building a brand new FE app\nwith `Backbone`, we're open sourcing this to help anyone else looking to transition a\nlegacy codebase.\n\n## Installation\n\nThis module is distributed via [npm](https://www.npmjs.com/) which is bundled with [node](https://nodejs.org/en/) and\nshould be installed as one of your project's `devDependencies`.\nThis library also has `peerDependencies` listings for `@testing-library/dom`:\n\n```\nnpm install --save-dev @closeio/backbone-testing-library @testing-library/dom\n```\n\nor\n\nfor installation via [yarn](https://yarnpkg.com/)\n\n```\nyarn add --dev @closeio/backbone-testing-library @testing-library/dom\n```\n\nYou may also be interested in installing `@testing-library/jest-dom` so you can\nuse [the custom jest matchers](https://github.com/testing-library/jest-dom).\n\n## Example\n\n```javascript\n// models/HiddenMessageModel.js\n\nimport Backbone from 'backbone';\n\nconst HiddenMessageModel = Backbone.Model.extend({\n  defaults: {\n    message: '',\n    showMessage: false,\n  },\n});\n\nexport default HiddenMessageModel;\n```\n\n```javascript\n// views/HiddenMessageView.js\n\nimport Backbone from 'backbone';\n\nconst HiddenMessageView = Backbone.View.extend({\n  events: {\n    'change #toggle': 'setShowMessage',\n  },\n\n  initialize({ model }) {\n    this.model = model;\n    this.model.on('change', this.render.bind(this));\n  },\n\n  setShowMessage(e) {\n    this.model.set('showMessage', e.target.checked);\n  },\n\n  template({ showMessage, message }) {\n    return `\u003cdiv\u003e\n      \u003clabel for=\"toggle\"\u003eShow Message\u003c/label\u003e\n      \u003cinput\n        id=\"toggle\"\n        type=\"checkbox\"\n        ${showMessage ? 'checked' : ''}\n      /\u003e\n      ${showMessage ? message : ''}\n    \u003c/div\u003e`;\n  },\n\n  render() {\n    this.$el.html(this.template(this.model.attributes));\n  },\n});\n\nexport default HiddenMessageView;\n```\n\n```javascript\n// views/HiddenMessageView.test.js\n\n// these imports are something you'd normally configure Jest to import for you\n// automatically. Learn more in the setup docs: https://testing-library.com/docs/react-testing-library/setup#cleanup\nimport '@testing-library/jest-dom';\n// NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required\n\nimport { render, fireEvent } from '@closeio/backbone-testing-library';\n\nimport HiddenMessageModel from '../models/HiddenMessageModel';\nimport HiddenMessageView from './HiddenMessageView';\n\ntest('shows the children when the checkbox is checked', () =\u003e {\n  const testMessage = 'Test Message';\n  const testModel = new HiddenMessageModel({\n    message: testMessage,\n  });\n\n  // The queries you'd expect from React Testing Library are returned from render, as are\n  // `view`, `container`, `baseElement`, `debug` and `unmount`. We also hook into React\n  // Testing Library's `RTL_SKIP_AUTO_CLEANUP` const to auto unmount views in `afterEach`\n  const { queryByText, getByLabelText, getByText } = render(HiddenMessageView, {\n    model: testModel,\n  });\n\n  // query* functions will return the element or null if it cannot be found\n  // get* functions will return the element or throw an error if it cannot be found\n  expect(queryByText(testMessage)).toBeNull();\n\n  // the queries can accept a regex to make your selectors more resilient to content tweaks and changes.\n  fireEvent.click(getByLabelText(/show/i));\n\n  // .toBeInTheDocument() is an assertion that comes from jest-dom\n  // otherwise you could use .toBeDefined()\n  expect(getByText(testMessage)).toBeInTheDocument();\n});\n```\n\n## `render` Parameters\n\n- `View` - the first argument is the `Backbone.View` Class to test, it will be\n  instantiated by the render function\n- `options` - optional - the second argument is an options object with the following\n  parameters:\n  - `container` - optional - behaves like [RTL's `container`](https://testing-library.com/docs/react-testing-library/api#container)\n    by default creates a `div` and appends it to `document.body`\n  - `baseElement` - optional - behaves like [RTL's `baseElement`](https://testing-library.com/docs/react-testing-library/api#baseelement)\n    if `container` is specified, then it defaults to that, otherwise this defaults to `document.body`\n  - `autoRender` - optional - this defaults to `true`. Sometimes you may want to\n    assert on something in between your `Backbone.View`'s `initialize` and `render` methods, if\n    so you can pass `false` here and call `render` manually on the returned `view` instance.\n  - `...options` - any other properties will be passed through as `options` to the\n    `Backbone.View`'s constructor. For example, you could add `el` if you wanted to manually\n    provide this to the view rather than have `Backbone` auto create it. You'll also likely\n    often want to pass a `model`.\n\n## `render` Result\n\nThe render method returns an object that has a few properties:\n\n- `...queries` - The most important feature of render is that the queries from [`DOM Testing Library`](https://testing-library.com/docs/dom-testing-library/api-queries/)\n  are automatically returned with their first argument bound to the `baseElement`, which\n  defaults to `document.body`\n- `view` - The `Backbone` view instance itself.\n- `container` - behaves like [RTL's `container`](https://testing-library.com/docs/react-testing-library/api#container-1)\n  returns either a `div` autocreated for you, or the `container` passed to `render`. To get\n  the root element of your rendered element, use `container.firstChild` _or_ `view.el`.\n- `baseElement` - behaves like [RTL's `baseElement`](https://testing-library.com/docs/react-testing-library/api#baseelement-1)\n  returns either `document.body` or the `baseElement` passed to `render.\n- `debug` - behaves like [RTL's `debug`](https://testing-library.com/docs/react-testing-library/api#debug)\n  this function is a shortcut for `console.log(prettyDOM(baseElement))`.\n- `unmount` - calls `remove` on the `Backbone.View` instance and cleans up the `container`\n  element. Useful for testing what happens when your view is removed from the page.\n  By default, when `RTL_SKIP_AUTO_CLEANUP` is `false`, `cleanup` is called in every `afterEach`\n  block which runs `render`, which means you don't need to manually unmount your views if\n  you're not testing `remove`. While it might seem odd to rely on a ENV var from another\n  library, our intention here is that this library is run in tandem with RTL and behaves\n  identically for porting components.\n\n## License\n\nMIT © [Close](https://github.com/closeio)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloseio%2Fbackbone-testing-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloseio%2Fbackbone-testing-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloseio%2Fbackbone-testing-library/lists"}