{"id":23552913,"url":"https://github.com/rhildred/qunitintro","last_synced_at":"2026-01-24T21:14:55.966Z","repository":{"id":146397992,"uuid":"53349016","full_name":"rhildred/qunitIntro","owner":"rhildred","description":"simpler qUint examples","archived":false,"fork":false,"pushed_at":"2021-08-06T12:41:23.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":12,"subscribers_count":3,"default_branch":"gh-pages","last_synced_at":"2024-12-26T11:14:23.761Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rhildred.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}},"created_at":"2016-03-07T18:35:28.000Z","updated_at":"2021-08-06T12:41:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"97a09255-6685-47e7-b823-2f43c4f85518","html_url":"https://github.com/rhildred/qunitIntro","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhildred%2FqunitIntro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhildred%2FqunitIntro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhildred%2FqunitIntro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rhildred%2FqunitIntro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rhildred","download_url":"https://codeload.github.com/rhildred/qunitIntro/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239293947,"owners_count":19615041,"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-12-26T11:13:31.067Z","updated_at":"2025-11-01T13:30:28.507Z","avatar_url":"https://github.com/rhildred.png","language":"HTML","readme":"# [qunitIntro](https://github.com/rhildred/qunitIntro)\r\n\r\n## Simple qunit examples, for Mobile class.\r\n\r\nQunit is also a strong framework for doing test driven development. In this example, we also look at Mocks, a powerful way of isolating a javascript unit from it's backend service.\r\n\r\n### [Basic Unit Test](https://rhildred.github.io/qUnitIntro/test1.html)\r\n\r\n```\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n  \u003cmeta charset=\"utf-8\"\u003e\r\n  \u003ctitle\u003eQUnit basic example\u003c/title\u003e\r\n  \u003clink rel=\"stylesheet\" href=\"https://code.jquery.com/qunit/qunit-1.22.0.css\"\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n  \u003cdiv id=\"qunit\"\u003e\u003c/div\u003e\r\n  \u003cdiv id=\"qunit-fixture\"\u003e\u003c/div\u003e\r\n  \u003cscript src=\"//code.jquery.com/qunit/qunit-1.22.0.js\"\u003e\u003c/script\u003e\r\n  \u003cscript\u003e\r\n    QUnit.test( \"a basic test example\", function( assert ) {\r\n      var value = \"hello\";\r\n      assert.equal( value, \"hello\", \"We expect value to be hello\" );\r\n    });\r\n  \u003c/script\u003e\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n\r\n```\r\nA QUnit test contains at least 1 assertion. In this case `assert.equal( value, \"hello\", \"We expect value to be hello\" );`\r\n\r\n### Most things in Javascript depend on the [observer pattern](https://rhildred.github.io/qUnitIntro/test2.html)\r\n\r\n```\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n\u003chead\u003e\r\n  \u003cmeta charset=\"utf-8\"\u003e\r\n  \u003ctitle\u003eQUnit async example\u003c/title\u003e\r\n  \u003clink rel=\"stylesheet\" href=\"https://code.jquery.com/qunit/qunit-1.22.0.css\"\u003e\r\n\u003c/head\u003e\r\n\u003cbody\u003e\r\n  \u003cdiv id=\"qunit\"\u003e\u003c/div\u003e\r\n  \u003cdiv id=\"qunit-fixture\"\u003e\u003c/div\u003e\r\n  \u003cscript src=\"//code.jquery.com/qunit/qunit-1.22.0.js\"\u003e\u003c/script\u003e\r\n  \u003cscript\u003e\r\n    QUnit.test( \"a test of 2 async tests example\", function( assert ) {\r\n       assert.expect( 2 );\r\n       \r\n        var done1 = assert.async();\r\n        var done2 = assert.async();\r\n        setTimeout(function() {\r\n          assert.ok( true, \"test resumed from async operation 1!\" );\r\n          done1();\r\n        }, 500 );\r\n        setTimeout(function() {\r\n          assert.ok( true, \"test resumed from async operation 2!\" );\r\n          done2();\r\n        }, 150);\r\n    });\r\n  \u003c/script\u003e\r\n\u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\n`assert.expect` and `assert.async` allow us to know when our observations are complete.\r\n\r\n### [.ajax for api testing](https://rhildred.github.io/qUnitIntro/firebasetest.html)\r\n\r\n```\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n    \u003chead\u003e\r\n        \u003cmeta charset=\"utf-8\"\u003e\r\n        \u003ctitle\u003eQUnit Ajax example\u003c/title\u003e\r\n        \u003clink rel=\"stylesheet\" href=\"https://code.jquery.com/qunit/qunit-1.22.0.css\"\u003e\r\n    \u003c/head\u003e\r\n    \u003cbody\u003e\r\n        \u003cdiv id=\"qunit\"\u003e\u003c/div\u003e\r\n        \u003cdiv id=\"qunit-fixture\"\u003e\u003c/div\u003e\r\n        \u003cscript src=\"//code.jquery.com/qunit/qunit-1.22.0.js\"\u003e\u003c/script\u003e\r\n        \u003cscript src=\"https://code.jquery.com/jquery-1.12.1.min.js\"\u003e\u003c/script\u003e\r\n        \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js\"\u003e\u003c/script\u003e\r\n        \u003cscript\u003e\r\n            \r\n            \r\n            QUnit.test( \"test of new firebase url\", function( assert ) {\r\n                assert.expect( 2 );\r\n                var done = assert.async();\r\n                var done2 = assert.async();\r\n                jQuery.ajax({\r\n                    url: \"https://dazzling-heat-1553.firebaseio.com/tests.json\"\r\n                }).done(function(data){\r\n                    assert.ok(data != null, JSON.stringify(data));\r\n                    done();\r\n                }).fail(function(err){\r\n                    assert.ok( false, JSON.stringify(err) );\r\n                    done();\r\n                });\r\n                jQuery.ajax({\r\n                    url: \"https://dazzling-heat-1553.firebaseio.com/tests2.json\"\r\n                }).done(function(data){\r\n                    assert.ok(data != null, JSON.stringify(data));\r\n                    done2();\r\n                }).fail(function(err){\r\n                    assert.ok( false, JSON.stringify(err) );\r\n                    done2();\r\n                });\r\n            });\r\n        \u003c/script\u003e\r\n    \u003c/body\u003e\r\n\u003c/html\u003e\r\n\r\n```\r\n\r\nThe above is a failing test until we add to firebase:\r\n\r\n```\r\n{\r\n  \"rules\": {\r\n    \".read\": \"auth != null\",\r\n    \".write\": \"auth != null\",\r\n        \"tests\":{\r\n          \".read\":true\r\n        }\r\n\r\n  }\r\n}\r\n\r\n```\r\n\r\nPerhaps just out of habit, I like to do my api testing with jQuery.ajax. This is an example of testing my endpoint on the firebase api. Note the use of `assert.expect` and `assert.async`.\r\n\r\n### [Mockjax mock](https://rhildred.github.io/qUnitIntro/mockjax.html)\r\n\r\n```\r\n\u003c!DOCTYPE html\u003e\r\n\u003chtml\u003e\r\n    \u003chead\u003e\r\n        \u003cmeta charset=\"utf-8\"\u003e\r\n        \u003ctitle\u003eQUnit mockjax example\u003c/title\u003e\r\n        \u003clink rel=\"stylesheet\" href=\"https://code.jquery.com/qunit/qunit-1.22.0.css\"\u003e\r\n    \u003c/head\u003e\r\n    \u003cbody\u003e\r\n        \u003cdiv id=\"qunit\"\u003e\u003c/div\u003e\r\n        \u003cdiv id=\"qunit-fixture\"\u003e\u003c/div\u003e\r\n        \u003cscript src=\"//code.jquery.com/qunit/qunit-1.22.0.js\"\u003e\u003c/script\u003e\r\n        \u003cscript src=\"https://code.jquery.com/jquery-1.12.1.min.js\"\u003e\u003c/script\u003e\r\n        \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js\"\u003e\u003c/script\u003e\r\n        \u003cscript\u003e\r\n            jQuery.mockjax({\r\n              url: \"/restful/fortune\",\r\n              responseText: {\r\n                status: \"success\",\r\n                fortune: \"Are you a mock turtle?\"\r\n              }\r\n            });\r\n            \r\n            \r\n            QUnit.test( \"test of mockjax url\", function( assert ) {\r\n                assert.expect( 1 );\r\n                var done = assert.async();\r\n                jQuery.ajax({\r\n                    url: \"/restful/fortune\"\r\n                }).done(function(data){\r\n                    assert.ok(data != null, JSON.stringify(data));\r\n                    done();\r\n                }).fail(function(err){\r\n                    assert.ok( false, JSON.stringify(err) );\r\n                    done();\r\n                });\r\n            });\r\n        \u003c/script\u003e\r\n    \u003c/body\u003e\r\n\u003c/html\u003e\r\n```\r\n\r\nThis example is just like the previous except for:\r\n\r\n```\r\n            jQuery.mockjax({\r\n              url: \"/restful/fortune\",\r\n              responseText: {\r\n                status: \"success\",\r\n                fortune: \"Are you a mock turtle?\"\r\n              }\r\n            });\r\n\r\n```\r\n\r\nThe mock, \"stubs out\" an api call allowing us to test client code independent of the api. This allows the client team to work seperately from the api team, or without internet as the case may be.\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhildred%2Fqunitintro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frhildred%2Fqunitintro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frhildred%2Fqunitintro/lists"}