{"id":18389560,"url":"https://github.com/anseki/test-page-loader","last_synced_at":"2026-03-17T22:35:44.668Z","repository":{"id":8633759,"uuid":"59123490","full_name":"anseki/test-page-loader","owner":"anseki","description":"Simple helper for unit testing with JavaScript Testing Frameworks (e.g. Jasmine, QUnit, etc.), to load HTML pages as fixtures.","archived":false,"fork":false,"pushed_at":"2022-08-19T03:43:32.000Z","size":93,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-16T02:06:40.593Z","etag":null,"topics":["fixture","fixtures","html","html-page","iframe","jasmine","load","loader","page","page-loader","qunit","test","window"],"latest_commit_sha":null,"homepage":"https://anseki.github.io/test-page-loader/","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/anseki.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":"2016-05-18T14:33:18.000Z","updated_at":"2024-10-23T12:30:13.000Z","dependencies_parsed_at":"2022-08-07T04:16:40.586Z","dependency_job_id":null,"html_url":"https://github.com/anseki/test-page-loader","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Ftest-page-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Ftest-page-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Ftest-page-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Ftest-page-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anseki","download_url":"https://codeload.github.com/anseki/test-page-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247583480,"owners_count":20962039,"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":["fixture","fixtures","html","html-page","iframe","jasmine","load","loader","page","page-loader","qunit","test","window"],"created_at":"2024-11-06T01:43:44.217Z","updated_at":"2026-03-17T22:35:44.635Z","avatar_url":"https://github.com/anseki.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# test-page-loader\n\n[![npm](https://img.shields.io/npm/v/test-page-loader.svg)](https://www.npmjs.com/package/test-page-loader) [![GitHub issues](https://img.shields.io/github/issues/anseki/test-page-loader.svg)](https://github.com/anseki/test-page-loader/issues) [![dependencies](https://img.shields.io/badge/dependencies-No%20dependency-brightgreen.svg)](package.json) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\nSimple helper for unit testing with JavaScript Testing Frameworks (e.g. [Jasmine](http://jasmine.github.io/), [QUnit](https://qunitjs.com/), etc.), to load HTML pages as fixtures.  \nThis provides a new window (`\u003ciframe\u003e`) for your code which handles DOM, or that which requires independent name spaces (`global`), etc.  \n(If you want more features, other great tools such as [jasmine-jquery](https://github.com/velesin/jasmine-jquery) that has many matchers and jQuery supporting will help you.)\n\n**Example (Jasmine): \u003ca href=\"https://anseki.github.io/test-page-loader/\"\u003ehttps://anseki.github.io/test-page-loader/\u003c/a\u003e**  \n(Each frame is opened by clicking a gray bar.)\n\n[![ss-01](ss-01.png)](https://anseki.github.io/test-page-loader/)\n\n**Features:**\n\n- Load HTML pages into `\u003ciframe\u003e` instead of an element like `div#qunit-fixture`. This is useful for tests that need running based on document (i.e. window, `\u003cbody\u003e`, etc.), or tests that need independent name spaces (`global`). For example, testing a function that does something according to various document situations, or testing a library that has cache data (i.e. each test code requires initial condition).\n- Don't remove the `\u003ciframe\u003e`s that were used for each test and show those on main page, if you want. This is useful for tests that should be checked by looking in addition to the test.\n- No dependency library. You need to add just only one file, and this works without depending on anything (even Testing Framework).\n\n## Usage\n\nLoad a `test-page-loader.js` file into your main page that is \"test runner\".\n\n```html\n\u003cscript src=\"path/to/test-page-loader.js\"\u003e\u003c/script\u003e\n```\n\nA function `loadPage` is provided in global scope (i.e. window).\n\n## `loadPage`\n\n```js\nloadPage(url, ready[, title])\n```\n\n### `url`\n\n*Type:* string\n\nAn URL of the HTML page to load.  \nA new `\u003ciframe\u003e` element is added to the main page, and then this URL is loaded.\n\n### `ready`\n\n*Type:* Function\n\n```js\nready(window, document, body[, done])\n```\n\nA callback function that is called when the page that was specified by [`url`](#url) was loaded.  \nYour test code usually be written in this function, or another function that is called in this function.  \nIn this function, `window` points a window of `\u003ciframe\u003e` that loaded the [`url`](#url) (i.e. `iframe.contentWindow`). `document` and `body` also are those of `\u003ciframe\u003e` (i.e. these are shortcut to `iframe.contentDocument` and `iframe.contentDocument.body`).  \nSee [Asynchronous Support](#asynchronous-support) for `done`.\n\nFor example, Jasmine:\n\n```js\nloadPage('spec/foo-class/bar-method.html', function(window, document, body) {\n  body.appendChild(document.createElement('div')); // `body` and `document` in `\u003ciframe\u003e`\n  expect(document.getElementsByTagName('div').length).toBeGreaterThan(0);\n});\n```\n\nQUnit:\n\n```js\nloadPage('spec/foo-class/bar-method.html', function(window, document, body) {\n  body.appendChild(document.createElement('div')); // `body` and `document` in `\u003ciframe\u003e`\n  assert.ok(document.getElementsByTagName('div').length \u003e 0);\n});\n```\n\n### `title`\n\n*Type:* string\n\nBy default, an `\u003ciframe\u003e` element is removed when the testing that used it was finished.  \nIf the `title` argument is given, the `\u003ciframe\u003e` is kept and shown in the main page for result that should be checked by looking in addition to the test.  \nYou can pass a string as a heading of the `\u003ciframe\u003e`. If you want to pass the same title to methods of Testing Framework, you can get the title that was specified to it by `document.title` (i.e. a title of the document that is loaded into `\u003ciframe\u003e`). Note that a `document.title` is not changed if it is already set.  \nSee also: [`window.setTitle`](#windowsettitle)\n\nFor example, Jasmine:\n\n```js\n// `fixture.html` has no `\u003ctitle\u003e`.\nloadPage('fixture.html', function(window, document, body) {\n  it(document.title, function() { // Jasmine prints \"FOO should be BAR\" in result list.\n    // Do something ...\n  });\n}, 'FOO should be BAR');\n```\n\nQUnit:\n\n```js\n// `fixture.html` has no `\u003ctitle\u003e`.\nloadPage('fixture.html', function(window, document, body) {\n  // Do something ...\n  assert.equal(true, true, document.title); // QUnit prints \"FOO should be BAR\" in result list.\n}, 'FOO should be BAR');\n```\n\n## Asynchronous Support\n\nIf `loadPage` is called multiple times, each requested page is loaded in turn.  \nBy default, loading next page starts when current [`ready`](#ready) callback was exited. You can make the next loading wait by making the `ready` callback take `done` argument. `done` is callback function, and loading next page waits until `done` callback is called.\n\nFor example:\n\n```js\nloadPage('page-1.html', function(window, document, body, done) {\n  setTimeout(function() {\n    done(); // After 3sec., start loading `page-2.html`.\n  }, 3000);\n  // `ready` is exited here, but don't start loading `page-2.html` yet.\n});\n\nloadPage('page-2.html', function(window, document, body) {\n  // Do something ...\n});\n```\n\nNote that testing functions of some Testing Frameworks such as Jasmine work inside of specific scope. Therefore, for example, `it()` function that is called after `describe()` function exited doesn't work.  \nIf you want to control the sequence of loading pages and testing those, controlling timing to call `loadPage` by Testing Framework (e.g. `done` of Jasmine or `assert.async()` of QUnit) is better than controlling timing to call testing functions by `done` of `ready` callback. (See [Examples](#examples).)\n\n## `window.setTitle`\n\nA window of `\u003ciframe\u003e` that is passed to the [`ready`](#ready) callback has `setTitle` method.  \nYou can change the [`title`](#title) (heading of the `\u003ciframe\u003e`) that was specified (or not specified) in [`loadPage`](#loadpage).  \nFor example, load multiple pages, and set the proper title for the each test. Or, set `null` to remove the `\u003ciframe\u003e`, when the test was passed.\n\nFor example, Jasmine:\n\n```js\nvar frameWindow, frameDone, currentSpec;\n\nbeforeEach(function(beforeDone) {\n  loadPage('page.html', function(window, document, body, done) {\n    frameWindow = window;\n    frameDone = done;\n    beforeDone(); // Make `it()` start when the page was loaded.\n  }); // `title` is not yet specified.\n});\n\nafterEach(function(done) {\n  frameWindow.setTitle(\n    currentSpec.result.failedExpectations.length ?\n      currentSpec.getFullName() : // 'test-1' and 'test-2' that are specified for `it` method.\n      null // Drop this `\u003ciframe\u003e` when all tests are passed.\n  );\n  frameDone();\n  done();\n});\n\nvar test1 = it('test-1', function(done) {\n  currentSpec = test1;\n  // Do something ...\n  expect(1).toBe(0);\n  done();\n});\n\nvar test2 = it('test-2', function(done) {\n  currentSpec = test2;\n  // Do something ...\n  expect(1).toBe(1);\n  done();\n});\n```\n\nNote that the `setTitle` method works only before `ready` callback is exited or `done` callback is called in [asynchronous mode](#asynchronous-support).\n\n## Examples\n\nIf you have not installed test-page-loader yet, install it first.  \nYou need [Node.js](https://nodejs.org/) (and NPM) installed and available in your `$PATH`.  \nRun the following command to install test-page-loader:\n\n```\nnpm install test-page-loader\n```\n\nAnd, run the following commands for examples:\n\n```\ncd node_modules/test-page-loader\nnpm install\nnpm run examples\n```\n\nNote: The above `node_modules` is a path that the library was installed into. You might want to do the first command with `--only=dev` instead of these commands, but that might not work correctly because version of your NPM has a bug.\n\nAnd then, access to the following by web browser:\n\n- [http://localhost:8080/test/Jasmine.html](http://localhost:8080/test/Jasmine.html)\n- [http://localhost:8080/test/QUnit.html](http://localhost:8080/test/QUnit.html)\n\nThe `cd ...` and `npm install` commands are required only a first time.\n\nIt uses [node-static-alias](https://github.com/anseki/node-static-alias) and [log4js](https://github.com/nomiddlename/log4js-node) for http accessing.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanseki%2Ftest-page-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanseki%2Ftest-page-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanseki%2Ftest-page-loader/lists"}