cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs-infra): implement figure styles (#33259)

Browse Source 
PR#28396 originally addressed an update via issue #23983 to make images more visible with a white background (implementation of gray "lightbox").

This PR implements those styles defined in PR#28396.

PR Close #33259
This commit is contained in:
Stefanie Fluin
2019-10-18 16:22:06 -07:00
committed by Andrew Kushnir
parent 355e54a410
commit ba29e4d953
46 changed files with 666 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
aio/content/guide/testing.md
View File

@ -41,8 +41,10 @@ It shows that Karma ran three tests that all passed.
A chrome browser also opens and displays the test output in the "Jasmine HTML Reporter" like this.
<figure>
<img src='generated/images/guide/testing/initial-jasmine-html-reporter.png' alt="Jasmine HTML Reporter in the browser">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/testing/initial-jasmine-html-reporter.png' alt="Jasmine HTML Reporter in the browser">
</div>
</figure>
Most people find this browser output easier to read than the console log.
@ -2260,8 +2262,10 @@ tests with the `RouterTestingModule`.
The `HeroDetailComponent` is a simple view with a title, two hero fields, and two buttons.
<figure>
<img src='generated/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/testing/hero-detail.component.png' alt="HeroDetailComponent in action">
</div>
</figure>
But there's plenty of template complexity even in this simple form.
@ -2689,8 +2693,10 @@ A better solution is to create an artificial test component that demonstrates al
<code-example path="testing/src/app/shared/highlight.directive.spec.ts" region="test-component" header="app/shared/highlight.directive.spec.ts (TestComponent)"></code-example>
<figure>
<img src='generated/images/guide/testing/highlight-directive-spec.png' alt="HighlightDirective spec in action">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/testing/highlight-directive-spec.png' alt="HighlightDirective spec in action">
</div>
</figure>
<div class="alert is-helpful">
@ -2770,8 +2776,10 @@ Debug specs in the browser in the same way that you debug an application.
1. Set a breakpoint in the test.
1. Refresh the browser, and it stops at the breakpoint.
<figure>
<img src='generated/images/guide/testing/karma-1st-spec-debug.png' alt="Karma debugging">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/testing/karma-1st-spec-debug.png' alt="Karma debugging">
</div>
</figure>
<hr>