Fixed image display issue + smart header issue #3683

Original file line number	Diff line number	Diff line change
Expand Up		@@ -59,7 +59,7 @@ A spec has three main building blocks that you can see above:
		`assert.equal(value1, value2)`
		: The code inside `it` block, if the implementation is correct, should execute without errors.

	Functions `assert.*` are used to check whether `pow` works as expected. Right here we're using one of them -- `assert.equal`, it compares arguments and yields an error if they are not equal. Here it checks that the result of `pow(2, 3)` equals `8`. There are other types of comparisons and checks, that we'll add later.
	Functions `assert.*` are used to check whether `pow` works as expected. Right here we're using one of them -- `assert.equal`, it compares arguments and yields an error if they are not equal. Here it checks that the result of `pow(2, 3)` equals `8`. There are other types of comparisons and checks, that we'll add later.

		The specification can be executed, and it will run the test specified in `it` block. We'll see that later.

Expand Down Expand Up		@@ -93,7 +93,46 @@ These libraries are suitable for both in-browser and server-side testing. Here w

		The full HTML page with these frameworks and `pow` spec:

	```html src="index.html"
	```html
	<!DOCTYPE html>
	<html>
	<head>
	<!-- add mocha css, to show results -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
	<!-- add mocha framework code -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
	<script>
	mocha.setup('bdd'); // minimal setup
	</script>
	<!-- add chai -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
	<script>
	// chai has a lot of stuff, let's make assert global
	let assert = chai.assert;
	</script>
	</head>

	<body>

	<script>
	function pow(x, n) {
	/* function code is to be written, empty now */
	}
	</script>

	<!-- the script with tests (describe, it...) -->
	<script src="test.js"></script>

	<!-- the element with id="mocha" will contain test results -->
	<div id="mocha"></div>

	<!-- run tests! -->
	<script>
	mocha.run();
	</script>
	</body>

	</html>
		```

		The page can be divided into five parts:
Expand All		@@ -106,7 +145,7 @@ The page can be divided into five parts:

		The result:

	[iframe height=250 src="pow-1" border=1 edit]
	![pow-1](./pow-1.view/pow-1.png)

		As of now, the test fails, there's an error. That's logical: we have an empty function code in `pow`, so `pow(2,3)` returns `undefined` instead of `8`.

Expand All		@@ -124,7 +163,7 @@ function pow(x, n) {

		Wow, now it works!

	[iframe height=250 src="pow-min" border=1 edit]
	![pow-min](./pow-min.view/pow-min.png)

		## Improving the spec

Expand Down Expand Up		@@ -180,7 +219,7 @@ So let's continue with the second variant.

		The result:

	[iframe height=250 src="pow-2" edit border="1"]
	![pow-2](./pow-2.view/pow-2.png)

		As we could expect, the second test failed. Sure, our function always returns `8`, while the `assert` expects `81`.

Expand Down Expand Up		@@ -221,7 +260,7 @@ describe("pow", function() {

		The result:

	[iframe height=250 src="pow-3" edit border="1"]
	![pow-3](./pow-3.view/pow-3.png)

		## Nested describe

Expand Down Expand Up		@@ -257,12 +296,13 @@ describe("pow", function() {

		The nested `describe` defines a new "subgroup" of tests. In the output we can see the titled indentation:

	[iframe height=250 src="pow-4" edit border="1"]
	![pow-4](./pow-4.view/pow-4.png)

		In the future we can add more `it` and `describe` on the top level with helper functions of their own, they won't see `makeTest`.

	````smart header="`before/after` and `beforeEach/afterEach`"
	```smart header="before/after and beforeEach/afterEach"
		We can setup `before/after` functions that execute before/after running tests, and also `beforeEach/afterEach` functions that execute before/after every `it`.
	```

		For instance:

Expand Down Expand Up		@@ -294,10 +334,12 @@ After a test – exit a test (afterEach)
		Testing finished – after all tests (after)
		```

	[edit src="beforeafter" title="Open the example in the sandbox."]
	![beforeafter](./beforeafter.view/beforeafter.png)

	Please open the `beforeafter.view/index.html` file

		Usually, `beforeEach/afterEach` and `before/after` are used to perform initialization, zero out counters or do something else between the tests (or test groups).
	````


		## Extending the spec

Expand Down Expand Up		@@ -331,7 +373,7 @@ describe("pow", function() {

		The result with new tests:

	[iframe height=530 src="pow-nan" edit border="1"]
	![pow-nan](./pow-nan.view/pow-nan.png)

		The newly added tests fail, because our implementation does not support them. That's how BDD is done: first we write failing tests, and then make an implementation for them.

Expand Down Expand Up		@@ -369,9 +411,7 @@ function pow(x, n) {

		Now it works, all tests pass:

	[iframe height=300 src="pow-full" edit border="1"]

	[edit src="pow-full" title="Open the full final example in the sandbox."]
	![pow-full](./pow-full.view/pow-full.png)

		## Summary

Expand Down