Last active
July 11, 2021 22:00
-
-
Save osvik/8dcaa048ee7fd628a32c366d9e0a303a to your computer and use it in GitHub Desktop.
Example on how to run tests in the browser. Running tests in the browser has advantages in many use cases as you can test the page in different mobile and desktop browsers and interact with the DOM.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Example of simple javascript testing in the browser</title> | |
| </head> | |
| <body> | |
| <h1>Example of simple javascript testing in the browser</h1> | |
| <p>Testing in the browser may be useful to test stuff in the DOM. You can also use multiple browsers to test. In a | |
| server testing environment you can also test with mobile phones.</p> | |
| <script> | |
| const foo = "124"; | |
| </script> | |
| <!-- BEGIN TESTS IN THE BROWSER --> | |
| <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/9.0.2/mocha.min.css" as="style" onload="this.rel='stylesheet'" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/9.0.2/mocha.min.js" defer="defer"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.3.4/chai.min.js" defer="defer"></script> | |
| <div id="mocha"></div> | |
| <script> | |
| window.jQuery || document.write('<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer="defer">\x3C/script>') | |
| </script> | |
| <script src="setup.js" defer="defer"></script> | |
| <!-- Test files --> | |
| <script src="tests.js" defer="defer"></script> | |
| <!-- /Test files --> | |
| <script src="run.js" defer="defer"></script> | |
| <!-- END TESTS IN THE BROWSER --> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // You can also run mocha.run() in the developers console | |
| mocha.run(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Setup before all the test files | |
| mocha.setup('bdd'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Tests in the browser with Mocha and Chai | |
| * https://mochajs.org/ | |
| * https://www.chaijs.com/ | |
| * https://www.chaijs.com/api/assert/ | |
| */ | |
| /*jshint esversion: 6 */ | |
| describe('Tests with Mocha and Chai', function () { | |
| it('Assert is true', function () { | |
| chai.assert(true); | |
| }); | |
| it('One body element', function () { | |
| chai.assert.lengthOf(jQuery("body"), 1, "Just one body"); | |
| }); | |
| it('Foo is a string', function () { | |
| chai.assert.typeOf(foo, 'string'); | |
| }); | |
| it('Foo is a number', function () { | |
| chai.assert.typeOf(foo, 'number'); | |
| }); | |
| }); | |
| describe('Simple Tests with just Mocha', function () { | |
| it("There's a body element", function () { | |
| const uselessVariable = 1; | |
| if (jQuery("body").length !== 1) throw ("No body present"); | |
| }); | |
| it("An exception was thrown", function () { | |
| throw ("This is an error"); | |
| }); | |
| }); | |
| describe('Nested tests:', function () { | |
| describe('Son', function () { | |
| it("Nested assertion 1", function () { | |
| chai.assert.equal(1, 1, "One is one"); | |
| }); | |
| }); | |
| describe('Daughter', function () { | |
| it("Nested assertion 2", function () { | |
| chai.assert.isTrue(true, "True is true"); | |
| }); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment