Skip to content

Commit

Permalink
Merge branch 'gh-pages' of https://github.com/devonfw-training/devon4…
Browse files Browse the repository at this point in the history 
…ng-training into gh-pages
  • Loading branch information
@aldorn-cg
aldorn-cg committed Sep 20, 2024
2 parents b52df10 + 49e057b commit dbb2e54
Show file tree
Hide file tree
Showing 7 changed files with 314 additions and 7 deletions.
111 changes: 111 additions & 0 deletions e2e-playwright/css/own.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
.devon.reveal .title-with-image img {
margin-right: 0.5em;
}

.reveal h1.no_upper,
.reveal h2.no_upper,
.reveal h3.no_upper,
.reveal h4.no_upper,
.reveal h5.no_upper,
.reveal h6.no_upper {
text-transform: none;
}

.reveal section img {
border: none;
box-shadow: none;
}

.reveal section img.middle {
vertical-align : middle;
}

div.margin_top_30 {
margin-top: 30px;
}

h1.highlight, h2.highlight, h3.highlight, p.highlight, span.highlight {
color: #71e9f4;
}

div.column {
display: inline-block;
margin-right: 40px;
}

p.title_image img.white_solid_border {
border: 4px solid #ffffff;
}

p.justify_text {
text-align: justify;
}

p.align_right {
text-align: right;
}

.reveal pre {
border: 3px white solid;
}

.reveal p {
margin: 0;
}

.reveal #js-engine {
height: 560px;
}

.reveal .title_image img {
background: transparent;
margin: 0 40px;
}

.reveal section pre {
width: 100%;
}

.reveal section .list-style-none {
list-style: none
}

.reveal section .margin-top-40 {
margin-top: 40px;
}

html.img-center-fill div.slide-background.present {
background-position: center;
background-size: contain;
}

.reveal section .text-align-left {
text-align: left;
}

.reveal section .font-style-italic {
font-style: italic;
}

.reveal section div.side-by-side {
width: 960px;
}

.reveal section div.side-by-side div {
width: 45%;
display: inline-block;
vertical-align: top;
}

.reveal section pre code.code-without-max-height {
max-height: unset;
}

.reveal section .inline-block {
display: inline-block;
vertical-align: top;
}

.reveal section .margin-top-70 {
margin-top: 70px;
}
Binary file added e2e-playwright/img/e2e-testing-compare.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added e2e-playwright/img/playwright-ui-mode.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
196 changes: 196 additions & 0 deletions e2e-playwright/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>E2E Testing with Playwright</title>
<link rel="icon" href="../common/img/favicon.ico">

<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link rel="stylesheet" href="../node_modules/reveal.js/css/reveal.css">
<link rel="stylesheet" href="../node_modules/reveal.js/css/theme/white.css">
<link rel="stylesheet" href="../common/css/common.css">
<link rel="stylesheet" href="css/own.css">

<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="../common/css/github-gist.css">

<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? '../node_modules/reveal.js/css/print/pdf.css' : '../node_modules/reveal.js/css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>

<body>
<section class="devon-link">
<a href="http://devonfw.github.io" target="_blank"><img height="30px" src="../common/img/devon_logo_blue.png"></a>
</section>
<section class="angular-link">
<a href="http://angular.io" target="_blank"><img height="50px" src="../common/img/angular.svg"></a>
</section>
<div class="devon reveal">
<div class="slides">
<section>
<h1>E2E-TESTING USING PLAYWRIGHT</h1>
<p><small><a href="https://playwright.dev/docs/writing-tests">Docs</a></small></p>
</section>
<section>
<h3>Why test end-to-end?</h3>
<p class="text-align-left">We test...</p>
<ul>
<li>to ensure our application works within the <span class="highlight">target eco-system</span>.</li>
<li>automated to get <span class="highlight">quick and reliable</span> feedback.</li>
<li>to detect <span class="highlight">breaking features</span> as soon as possible.</li>
<li>to ensure the best <span class="highlight">quality</span>.</li>
</ul>
</section>
<section>
<h3>End-to-end testing our Angular applications</h3>
<p>
<span class="highlight">Protractor</span> is deprecated as of May 2021 due to...
</p>
<ul>
<li>outdated Selenium based testing.</li>
<li>many modern alternatives exist.</li>
</ul>
</section>
<section>
<h3>Playwright as an alternative</h3>
<img src="img/e2e-testing-compare.png" alt="Compare Web Testing">
<p>"Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API."</p>
<div class="margin_top_30">
<p class="align_right"><small><a
href="https://github.com/microsoft/playwright">Playwright</a></small>
</p>
</div>
</section>
<section>
<h3>It is just another node module...</h3>
<pre><code class="hljs typescript" data-trim data-noescape>
yarn create playwright
</code></pre>
</section>
<section>
<h3>...which comes with everything you need to start testing!</h3>
<img src="img/playwright-ui-mode.png" alt="Playwright start page">
</section>
<section>
<h3>You can visit your app...</h3>
<pre><code class="hljs typescript" data-trim data-noescape>
await page.goto('/movies');
</code></pre>
<div class="margin_top_30">
<p class="align_right"><small><a
href="https://playwright.dev/docs/api/class-page#page-goto">Playwright docs</a></small>
</p>
</div>
</section>
<section>
<h3>...interact with elements...</h3>
<pre><code class="hljs typescript" data-trim data-noescape>
// click on a fancy button
await page.getByRole('button', { name: 'Fancy Button' }).click();
// clear and type into a fancy input
await page.getByLabel('Fancy Input').fill('Important stuff');
</code></pre>
<div class="margin_top_30">
<p class="align_right"><small><a
href="https://playwright.dev/docs/locators">Playwright docs</a></small>
</p>
</div>
</section>
<section>
<h3>...make assertions...</h3>
<pre><code class="hljs typescript" data-trim data-noescape>
// check whether the input value is something
await expect(page.getByLabel('Fancy Input')).toContainText('Important stuff');
</code></pre>
<div class="margin_top_30">
<p class="align_right"><small><a
href="https://playwright.dev/docs/test-assertions">Playwright docs</a></small>
</p>
</div>
</section>
<section>
<h3>...and even mock or intercept backend calls!</h3>
<pre><code class="hljs typescript" data-trim data-noescape>
// mock backend calls
await page.route('/services/rest/movies', async route => {
const json = [{ name: 'Titanic', id: 21 }];
await route.fulfill({ json });
});

// intercept a call and work with the response
const movies = await request.get(`/services/rest/movies`);

// wait for a request before moving on
await page.waitForResponse('/services/rest/movies'/);
</code></pre>
<div class="margin_top_30">
<p class="align_right"><small><a
href="https://playwright.dev/docs/mock">Playwright docs</a></small>
</p>
</div>
</section>
<section>
<h3>The test structure looks familiar!</h3>
<pre><code class="hljs typescript" data-trim data-noescape>
test.describe('Movie Page', () => {
let moviesPage: MoviesPage;

test.beforeEach(() => {
moviesPage = new MoviesPage();
});

test('should create a new movie', async () => {
// goto the movie overview
await moviesPage.goto();

// do stuff
await moviesPage.clickAddButton();
// do something to add a new movie...
});
});
</code></pre>
<div class="margin_top_30">
<p class="align_right"><small><a
href="https://playwright.dev/docs/test-annotations">Playwright docs</a></small>
</p>
</div>
</section>
<section>
<h3>Some best practices:</h3>
<ul>
<li>Make tests as isolated as possible (i.e. with beforeEach, Page Object Models, Fixture)</li>
<li>Use <span class="highlight">locators</span> with chaining/filtering and prefer user-facing attributes to XPath or CSS selectors</li>
<li>Use <span class="highlight">web first assertions</span> because it will wait until the expected condition is met.</li>
<li>do not store the result of a <span class="highlight">chainable command</span> in a variable.</li>
<li>use as <span class="highlight">many assertions</span> as needed. It's not unit testing.</li>
</ul>

<div class="margin_top_30">
<p class="align_right"><small><a
href="https://playwright.dev/docs/best-practices">Playwright docs</a></small>
</p>
</div>
</section>
</div>
</div>

<script src="../node_modules/reveal.js/js/reveal.js"></script>
<script src="../common/reveal-config.js"></script>

<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({ ...revealConfig });
</script>
</body>

</html>
2 changes: 1 addition & 1 deletion exercises/ngrx.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ <h2>ngrx basics</h2>
<h2>Basic Setup</h2>
<ul>
<li>Initialize a <a href="https://angular.io/tutorial/toh-pt0" target="_blank">new Angular application</a> with Angular CLI</li>
<pre><code>ng new ngrx-exercise</code></pre>
<pre><code>ng new ngrx-exercise --standalone false</code></pre>
<li>Add <code>@ngrx/store</code> and <code>@ngrx/store-devtools</code> to the dependencies with npm/yarn</li>
<li>
Download the <a href="https://github.com/reduxjs/redux-devtools">Redux Devtools Extension</a> for
Expand Down
8 changes: 4 additions & 4 deletions ng-advanced/rxjs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,10 +136,10 @@ <h2>RxJS - Level 1: Basic Operators</h2>
<li>Simple selection and filtering</li>
</ul>
<pre><code data-noescape data-trim class="typescript no-max-height" data-line-numbers="">
// Input: 5, 3, 3, 11, 7, 7, 19
// Input: 5, 3, 3, 11, 7, 7, 3, 3, 3, 19
filter( value => value > 10) // 11, 19
take( 5 ) // 5, 3, 3, 11, 7
distinctUntilChanged() // 5, 3, 11, 7, 19
distinctUntilChanged() // 5, 3, 11, 7, 3, 19
</code></pre>
<aside class="notes">
<UL>
Expand Down Expand Up @@ -451,7 +451,7 @@ <h2>RxJS - Level 8: Error Handling</h2>
// j k l x4|
catchError(() => of('z'))
retry( 2 )
retry({ delay: (error) => error === x1 : of(error) : throwError(() => error) })
retry({ delay: (error) => error === x1 ? of(error) : throwError(() => error) })
</code></pre>
<ul>
<li>Note: xN is an error</li>
Expand All @@ -472,7 +472,7 @@ <h2>RxJS - Level 8: Error Handling (Solution)</h2>
// a b c z
retry( 2 )
// a b c d e f g h i x3
retry({ delay: (error) => error === x1 : of(error) : throwError(() => error) })
retry({ delay: (error) => error === x1 ? of(error) : throwError(() => error) })
// a b c d e f x2
</code></pre>
<aside class="notes">
Expand Down
4 changes: 2 additions & 2 deletions ng-http/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -448,8 +448,8 @@ <h2>Http POST</h2>
</code></pre>
</section>
<section>
<p>see <a href="https://angular.io/guide/http">Angular Docs</a></p>
<iframe class="stretch" data-src="https://angular.io/guide/http"></iframe>
<p>see <a href="https://angular.dev/guide/http">Angular Docs</a></p>
<iframe class="stretch" data-src="https://angular.dev/guide/http"></iframe>
</section>
<section>
<p>Angular HttpClient is just <span class="highlight">one option</span>.</p>
Expand Down

0 comments on commit dbb2e54

Please sign in to comment.