{"id":14990405,"url":"https://github.com/polymerelements/test-fixture","last_synced_at":"2025-04-13T05:06:01.234Z","repository":{"id":30461476,"uuid":"34015355","full_name":"PolymerElements/test-fixture","owner":"PolymerElements","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-11T00:26:39.000Z","size":827,"stargazers_count":21,"open_issues_count":31,"forks_count":14,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-13T05:05:50.303Z","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":"bjd/vnstat-php-frontend","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PolymerElements.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-04-15T19:54:33.000Z","updated_at":"2021-06-02T14:04:00.000Z","dependencies_parsed_at":"2024-06-18T13:59:18.286Z","dependency_job_id":"3eab9a85-5a7a-4a87-940a-e737a21eef76","html_url":"https://github.com/PolymerElements/test-fixture","commit_stats":{"total_commits":135,"total_committers":22,"mean_commits":6.136363636363637,"dds":0.762962962962963,"last_synced_commit":"b5a0c0bbce9d3ef36ec09d26458b1cfedf89b8c5"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PolymerElements%2Ftest-fixture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PolymerElements%2Ftest-fixture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PolymerElements%2Ftest-fixture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PolymerElements%2Ftest-fixture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PolymerElements","download_url":"https://codeload.github.com/PolymerElements/test-fixture/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665749,"owners_count":21142123,"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-09-24T14:20:05.184Z","updated_at":"2025-04-13T05:06:01.212Z","avatar_url":"https://github.com/PolymerElements.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on NPM](https://img.shields.io/npm/v/@polymer/test-fixture.svg)](https://www.npmjs.com/package/@polymer/test-fixture)\n[![Build status](https://travis-ci.org/PolymerElements/test-fixture.svg?branch=master)](https://travis-ci.org/PolymerElements/test-fixture)\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/test-fixture)\n\n\n##\u0026lt;test-fixture\u0026gt;\n\nThe `\u003ctest-fixture\u003e` element can simplify the exercise of consistently\nresetting a test suite's DOM.\n\nSee: [Documentation](https://www.webcomponents.org/element/@polymer/test-fixture).\n\nTo use it, wrap the test suite's DOM as a template:\n\n```html\n\u003ctest-fixture id=\"SomeElementFixture\"\u003e\n  \u003ctemplate\u003e\n    \u003csome-element id=\"SomeElementForTesting\"\u003e\u003c/some-element\u003e\n  \u003c/template\u003e\n\u003c/test-fixture\u003e\n```\n\nNow, the `\u003ctest-fixture\u003e` element can be used to generate a copy of its\ntemplate:\n\n```html\n\u003cscript\u003e\n  describe('\u003csome-element\u003e', function () {\n    var someElement;\n\n    beforeEach(function () {\n      document.getElementById('SomeElementFixture').create();\n      someElement = document.getElementById('SomeElementForTesting');\n    });\n  });\n\u003c/script\u003e\n```\n\nFixtured elements can be cleaned up by calling `restore` on the `\u003ctest-fixture\u003e`:\n\n```javascript\n  afterEach(function () {\n    document.getElementById('SomeElementFixture').restore();\n    // \u003csome-element id='SomeElementForTesting'\u003e has been removed\n  });\n```\n\n`\u003ctest-fixture\u003e` will create fixtures from all of its immediate `\u003ctemplate\u003e`\nchildren. The DOM structure of fixture templates can be as simple or as complex\nas the situation calls for.\n\n## Even simpler usage in Mocha\n\nIn Mocha, usage can be simplified even further. Include `test-fixture-mocha.js`\nafter Mocha in the `\u003chead\u003e` of your document and then fixture elements like so:\n\n```html\n\u003cscript\u003e\n  describe('\u003csome-element\u003e', function () {\n    var someElement;\n\n    beforeEach(function () {\n      someElement = fixture('SomeElementFixture');\n    });\n  });\n\u003c/script\u003e\n```\n\nFixtured elements will be automatically restored in the `afterEach` phase of the\ncurrent Mocha `Suite`.\n\n## Data-bound templates\n\nData-binding systems are also supported, as long as your (custom) template\nelements define a `stamp(model)` method that returns a document fragment. This\nallows you to stamp out templates w/ custom models for your fixtures.\n\nFor example, using Polymer's `dom-bind`:\n\n```html\n\u003ctest-fixture id=\"bound\"\u003e\n  \u003cdom-bind\u003e\n    \u003ctemplate\u003e\n      \u003cspan\u003e{{greeting}}\u003c/span\u003e\n    \u003c/template\u003e\n  \u003c/dom-bind\u003e\n\u003c/test-fixture\u003e\n```\n\nYou can pass an optional context argument to `create()` or `fixture()` to pass\nthe model:\n\n```js\nvar bound = fixture('bound', {greeting: 'ohai thurr'});\n```\n\n## The problem being addressed\n\nConsider the following `web-component-tester` test suite:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003esome-element test suite\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003csome-element id=\"SomeElementForTesting\"\u003e\u003c/some-element\u003e\n  \u003cscript type=\"module\"\u003e\n    import '../some-element.js';\n    describe('\u003csome-element\u003e', function () {\n      var someElement;\n\n      beforeEach(function () {\n        someElement = document.getElementById('SomeElementForTesting');\n      });\n\n      it('can receive property `foo`', function () {\n        someElement.foo = 'bar';\n        expect(someElement.foo).to.be.equal('bar');\n      });\n\n      it('has a default `foo` value of `undefined`', function () {\n        expect(someElement.foo).to.be.equal(undefined);\n      });\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nIn this contrived example, the suite will pass or fail depending on which order\nthe tests are run in. It is non-deterministic because `someElement` has\ninternal state that is not properly reset at the end of each test.\n\nIt would be trivial in the above example to simply reset `someElement.foo` to\nthe expected default value of `undefined` in an `afterEach` hook. However, for\nnon-contrived test suites that target complex elements, this can result in a\nlarge quantity of ever-growing set-up and tear-down boilerplate.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolymerelements%2Ftest-fixture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolymerelements%2Ftest-fixture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolymerelements%2Ftest-fixture/lists"}