Add the "Web page going to the background" example (DevExpress#23)

* Add the "blur window" example Co-authored-by: arminal <[email protected]> Co-authored-by: Sergey Afonchenko <[email protected]>
DIRECTcut · Oct 20, 2020 · 5872e24 · 5872e24
1 parent 320a8da
commit 5872e24
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/examples/blur-window/README.md b/examples/blur-window/README.md
@@ -0,0 +1,23 @@
+# Simulate the Web Page Losing Focus
+
+**Test Code**: [index.js](index.js)
+
+**Tested Page**: [index.html](index.html)
+
+This example demonstrates how to simulate the web page losing focus.
+
+The tested page includes a script. When the user switches to another tab or minimizes the main window, the script logs a message to the console.
+
+Before the test begins, a `ClientFunction` is declared. When called, this function employs the [EventTarget.dispatchEvent](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent) method to dispatch a [blur Event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) at the main window.
+
+During the test, the `t.expect.ok` method asserts that the client function has fired.
+
+## TestCafe Functions and Methods Used in This Example
+
+1. Test Structure:
+    - [Fixture.page](https://devexpress.github.io/testcafe/documentation/reference/test-api/fixture/page.html) Method
+    - [test](https://devexpress.github.io/testcafe/documentation/reference/test-api/global/test.html) Function
+2. Assertion and Evaluation:
+    - [t.expect.ok](https://devexpress.github.io/testcafe/documentation/reference/test-api/testcontroller/expect/ok.html) Method
+3. Custom Scripts:
+    - [ClientFunction](https://devexpress.github.io/testcafe/documentation/reference/test-api/clientfunction/) Object
diff --git a/examples/blur-window/index.html b/examples/blur-window/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>The web page in the background</title>
+</head>
+<body>
+    <script>
+        window.onblur  = function () {
+            console.log('onblur');
+        };
+    </script>
+</body>
+</html>
diff --git a/examples/blur-window/index.js b/examples/blur-window/index.js
@@ -0,0 +1,15 @@
+import { ClientFunction } from 'testcafe';
+
+const blurWindow = ClientFunction(() => {
+    var blur = new Event('blur');
+
+    return window.dispatchEvent(blur);
+})
+
+fixture `The web page in the background`
+    .page `./index.html`;
+
+test('dispatch the "blur" event', async t => {
+    await t
+        .expect(blurWindow()).ok();
+});