| Pure unit test | -We test the part in isolation. Either the part has no dependencies or we fake all of its dependencies during the test. | -
| Close-in integration | -We test a part as it collaborates with closely related parts and/or with the Angular framework. We may fake some of its dependencies. | -
| High level integration | -We test a part as it interacts with many, wide-ranging aspects of the system including the browser DOM. Such tests are often asynchronous which means the test runner must pause until the entire tested sequence completes. | -
| Cross network integration | -A more demanding “high level integration” test that reaches across the network boundary to touch a test server such as tests of a data service that exercise both client and server components. | -
| End-to-End (E2E) | -We simulate the actions of users as they navigate through the application. Such tests strive to investigate the behavior of the application as a whole, replicating the user experience as faithfully as possible. | -
npm, gulp, and live-server.
-
-:marked
- [Let’s get started!](jasmine-testing-101.html)
\ No newline at end of file
diff --git a/public/docs/ts/latest/testing/jasmine-testing-101.jade b/public/docs/ts/latest/testing/jasmine-testing-101.jade
index a93e7d4550..1258b6370a 100644
--- a/public/docs/ts/latest/testing/jasmine-testing-101.jade
+++ b/public/docs/ts/latest/testing/jasmine-testing-101.jade
@@ -1,4 +1,4 @@
-include ../../../../_includes/_util-fns
+include ../_util-fns
:marked
We’ll write our tests with the [Jasmine test framework](http://jasmine.github.io/2.3/introduction.html).
@@ -222,6 +222,8 @@ figure.image-display
Fix the test (restore the `.not`); the browser should refresh automatically and all tests pass.
Congratulations … you’ve completed Jasmine testing 101.
+
+ Now that we’re familiar with Jasmine on its own, we’re ready to test an application.
-
-.l-main-section
-:marked
- ## What’s Next?
- Now that we’re familiar with Jasmine on its own, we’re ready to test an application.
-
- What application? We introduce you to it in the [next chapter](application-under-test.html).
diff --git a/public/docs/ts/latest/testing/testing-an-angular-pipe.jade b/public/docs/ts/latest/testing/testing-an-angular-pipe.jade
index 418142ec5e..c0e198c2e4 100644
--- a/public/docs/ts/latest/testing/testing-an-angular-pipe.jade
+++ b/public/docs/ts/latest/testing/testing-an-angular-pipe.jade
@@ -1,4 +1,4 @@
-include ../../../../_includes/_util-fns
+include ../_util-fns
:marked
We’ll test an Angular pipe in this chapter
@@ -159,5 +159,5 @@ figure.image-display
What about testing parts that *are themselves asynchronous*?
- In the next chapter we’ll test a service with a public asynchronous method that fetches heroes
+ Let's test a service with a public asynchronous method that fetches heroes
from a remote server.
\ No newline at end of file
diff --git a/public/docs/ts/latest/tutorial/index.jade b/public/docs/ts/latest/tutorial/index.jade
index 912fb7caeb..c9310a8e35 100644
--- a/public/docs/ts/latest/tutorial/index.jade
+++ b/public/docs/ts/latest/tutorial/index.jade
@@ -1,4 +1,4 @@
-include ../../../../_includes/_util-fns
+include ../_util-fns
:marked
# Tour of Heroes: the vision
diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade
index 99023654ad..b0f918ed86 100644
--- a/public/docs/ts/latest/tutorial/toh-pt1.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt1.jade
@@ -1,4 +1,4 @@
-include ../../../../_includes/_util-fns
+include ../_util-fns
:marked
# Once Upon a Time
diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade
index 647aaf0393..c39fe9fed4 100644
--- a/public/docs/ts/latest/tutorial/toh-pt2.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt2.jade
@@ -1,4 +1,4 @@
-include ../../../../_includes/_util-fns
+include ../_util-fns
:marked
# It Takes Many Heroes
diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade
index c07145968a..7f63a49c6c 100644
--- a/public/docs/ts/latest/tutorial/toh-pt3.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt3.jade
@@ -1,4 +1,4 @@
-include ../../../../_includes/_util-fns
+include ../_util-fns
:marked
Our app is growing.
diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade
index ba4969f1f1..bda922bf83 100644
--- a/public/docs/ts/latest/tutorial/toh-pt4.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt4.jade
@@ -1,4 +1,4 @@
-include ../../../../_includes/_util-fns
+include ../_util-fns
:marked
# Services
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index 167e565e56..13a412d1cf 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -1,4 +1,4 @@
-include ../../../../_includes/_util-fns
+include ../_util-fns
:marked
# Routing Around the App
diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss
index 76bb04b0e8..be4f2193c5 100644
--- a/public/resources/css/layout/_layout.scss
+++ b/public/resources/css/layout/_layout.scss
@@ -51,6 +51,12 @@
* Page & Element Specific Layouts
*
*/
+.l-hr {
+ margin: 0 ($unit * 0.5) ($unit * 5);
+ padding: ($unit * 2) 0;
+ border-bottom: 1px solid $fog;
+ color: $heather;
+}
.l-offset-nav {
padding-top: 56px;
@@ -251,4 +257,9 @@ button.verbose.on {display: none}
/*
* Other
*/
-.to-top {margin-top: $unit * 8; display: block;}
+.to-top {
+ display: block;
+ font-size: $unit * 2;
+ margin-bottom: $unit;
+ margin-top: $unit * 4;
+}
diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss
index 543681a689..53f11d1ab5 100644
--- a/public/resources/css/module/_side-nav.scss
+++ b/public/resources/css/module/_side-nav.scss
@@ -28,12 +28,14 @@
height: $unit * 6;
border-bottom: 1px solid $fog;
position: relative;
+ height: auto; /* flat nav asked for it. why? */
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
border-bottom: none;
padding-right: $unit * 14;
+ overflow: hidden;
}
input {
@@ -50,8 +52,8 @@
.mobile-trigger {
position: absolute;
- top: $unit;
- right: $unit;
+ top: 0;
+ right: $unit * 0.2;
border: none;
background: darken($tin, 5%);
color: $snow;
@@ -130,92 +132,122 @@
}
- // SECONDARY SIDENAV BUTTON
+ // SECONDARY SIDENAV
.side-nav-secondary {
@extend .side-nav-primary;
- background: $fog;
+ background: $mist;
box-shadow: inset 0px 2px 2px rgba($coal, .24);
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
display: none;
+ max-height: ($phone-breakpoint * 0.60);
}
-
- &.is-ordered {
-
- > li {
- line-height: 40px;
- vertical-align: top;
-
- > a {
- padding: 0px ($unit * 2) 0px ($unit * 3);
- text-transform: none;
- font-size: 14px;
- }
- }
- }
-
- > li {
- border-bottom: none;
-
- &.is-selected {
- > a {
- background: transparent;
- color: $regal;
- }
- }
-
- > a {
- line-height: ($unit * 5) - 1;
- padding: 0px ($unit * 2) 0px ($unit * 4);
- font-size: 13px;
- }
-
- .side-nav-icon {
- position: absolute;
- top: 0px;
- left: 16px;
- z-index: $layer-1;
- font-size: 19px;
- color: $cloud;
- line-height: 47px;
- }
- }
- }
-
- // SECONDARY SIDENAV BUTTON
- .side-nav-tertiary {
- padding-bottom: ($unit * 1);
- margin: 0px;
- padding: 0px;
-
- > li {
- margin: 0px;
-
- &.is-selected {
- > a {
- background: darken($fog, 3%);
- color: $blueberry;
- }
- }
-
- > a {
- line-height: ($unit * 3) - 1;
- font-size: 13px;
- text-transform: none;
- text-align: left;
- margin: 0px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- display: block;
+
+ // FLAT NAV (.nav)
+ .nav-blocks {
+ margin: 0 ($unit * 1.5);
+ padding: ($unit * 2) 0;
+ border-bottom: 1px solid $fog;
+ color: $heather;
+
+ a {
text-decoration: none;
- font-weight: 400;
- padding: 0px $unit 0px ($unit * 7);
- line-height: 34px;
color: $metal;
+ display: block;
+ }
+
+ ol {
+ padding-left: ($unit * 2);
+ margin: 0
+ }
+
+ ul {
+ list-style: none;
+ padding: 0;
+ margin: 0
+ }
+
+ div, li {
+ &.is-selected {
+ > a {
+ background: white;
+ color: $regal;
+ }
+ }
+ }
+
+ li {
+ min-height: ($unit * 2);
+ position: relative;
}
}
+
+ .nav-blocks:last-child {
+ border: none
+ }
+
+ .nav-title,
+ .nav-sub-title {
+ text-transform: uppercase;
+ font-weight: bold;
+ }
+
+ .nav-title {
+ font-size: ($unit * 2);
+ padding: ($unit * 0.5) 0 ($unit * 1) 0;
+ }
+
+ .nav-primary-link {
+ margin-bottom: ($unit * 1);
+ position: relative;
+ }
+
+ .nav-sub-title {
+ font-size: ($unit * 1.5);
+ padding: ($unit * 1) 0;
+ }
+
+ .nav-active a {
+ color: $regal;
+ background: $lightgrey;
+ font-weight: bold;
+ }
+
+ .nav-ordered-lists li a,
+ .nav-unordered-lists li a,
+ .nav-primary-link a {
+ margin-left: ($unit * -3);
+ padding-left: ($unit * 3);
+ padding-top: ($unit * 0.5);
+ padding-bottom: ($unit * 0.5);
+ }
+
+ .nav-blocks li a:hover,
+ .nav-primary-link a:hover {
+ background: $fog;
+ }
+
+ .nav-primary-link a:hover {
+ padding-top: ($unit * 0.5);
+ padding-bottom: ($unit * 0.5);
+ }
+
+ .nav-blocks li a:hover:before,
+ .nav-primary-link a:hover:before {
+ position: absolute;
+ top: 50%;
+ content: "";
+ display: inline-block;
+ width: 0.4em;
+ height: 0.4em;
+ border-right: 0.2em solid $tin;
+ border-top: 0.2em solid $tin;
+ transform: rotate(45deg);
+ right: -5px;
+ margin-top: -3px;
+ margin-right: 14px;
+ }
}
-}
\ No newline at end of file
+}