@genesislcap/foundation-testing 14.201.0 → 14.202.1-alpha-34c59e8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -5,44 +5,66 @@
|
|
|
5
5
|
|
|
6
6
|
`foundation-testing` provides shared unit and e2e testing functionality.
|
|
7
7
|
|
|
8
|
-
## Unit
|
|
8
|
+
## Unit Testing
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
The `foundation-testing` package combines tools like `UVU` and `Sinon.JS`, offering a comprehensive framework for implementing Unit Tests. This setup is designed to ensure that your Genesis Web Application delivers a seamless user experience by thoroughly covering components, functions and user interactions across various scenarios.
|
|
11
11
|
|
|
12
|
-
###
|
|
12
|
+
### **Key Tools and Features:**
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
* Familiar API
|
|
14
|
+
- **Customizable Unit Test Suites**: Manage and create detailed test suites within the `tests/unit` folder, focusing on critical components and functions. These test suites are fully customizable by default, allowing for comprehensive coverage of different parts of the application.
|
|
15
|
+
- **Sinon Integration**: Leverage `Sinon.JS` to easily incorporate test spies, stubs and mocks into your Unit Tests if needed.
|
|
16
|
+
- **Very lightweight**: The test framework provided by `foundation-testing` is very lightweight and contains [minimal dependencies](https://npm.anvaka.com/#/view/2d/uvu).
|
|
17
|
+
- **Extremely performant**: Much faster than competing test runners, see [benchmarks](https://github.com/lukeed/uvu/tree/master#benchmarks).
|
|
18
|
+
- **Individually executable test files**: You can keep your tests suites organized by splitting them into multiple files (optional).
|
|
19
|
+
- **Browser-compatible**: You can easily run and debug your tests in a browser environment which allows you to leverage browser developer tools.
|
|
21
20
|
|
|
22
|
-
|
|
21
|
+
### **Getting Started with Unit Testing:**
|
|
23
22
|
|
|
24
|
-
|
|
23
|
+
- Define test suites within the `tests/unit` folder, targeting critical components and functions.
|
|
24
|
+
- Utilize UVU for fast and lightweight Unit Testing.
|
|
25
|
+
- Utilize Sinon.JS if you need spies, stubs or mocks.
|
|
26
|
+
- Execute tests locally or on your CI pipeline, ensuring reliable and consistent outcomes.
|
|
25
27
|
|
|
26
|
-
|
|
28
|
+
## E2E Testing
|
|
27
29
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
The `foundation-testing` package combines tools like Playwright and Lighthouse, offering a comprehensive framework for implementing End-to-End (E2E) testing. This setup is designed to ensure that your Genesis Web Application delivers a seamless user experience by thoroughly covering workflows and user interactions across various scenarios.
|
|
31
|
+
|
|
32
|
+
### **Key Tools and Features:**
|
|
33
|
+
|
|
34
|
+
- **Customizable E2E Scenarios**: Manage and create detailed test scenarios within the `tests/e2e` folder, focusing on critical user journeys. These scenarios are fully customizable by default, allowing for comprehensive coverage of different user paths and interactions.
|
|
35
|
+
- **Playwright Integration**: Leverage Playwright to automate browser actions, simulate user interactions, and verify that your application behaves as expected across different browsers. Playwright supports cross-browser testing, parallel test execution, and context isolation, allowing for robust and scalable E2E tests. Additionally, Playwright can capture videos, screenshots, and other artifacts when a test fails, aiding in debugging and issue resolution.
|
|
36
|
+
- **Lighthouse Performance Testing**: Integrate Lighthouse to measure and improve the performance, accessibility, SEO, and overall quality of your web applications. Use Lighthouse reports to track key performance metrics such as load time, interactivity, and visual stability, and enforce performance budgets to maintain a high standard for user experience.
|
|
37
|
+
- **Automated Testing Pipeline**: Integrate your E2E tests into a continuous integration (CI) pipeline, ensuring that every change to the codebase is thoroughly tested before deployment. This automation reduces the risk of introducing bugs and ensures consistent test outcomes across different environments.
|
|
38
|
+
|
|
39
|
+
### **Getting Started with E2E Testing:**
|
|
40
|
+
|
|
41
|
+
1. **Creating and Running E2E Tests**:
|
|
42
|
+
- Define test scenarios within the `tests/e2e` folder, targeting critical user journeys and application functionalities.
|
|
43
|
+
- Utilize Playwright for browser automation and Lighthouse for performance auditing within the same test suite.
|
|
44
|
+
- Execute tests via your preferred test runner or CI pipeline, ensuring reliable and consistent outcomes.
|
|
45
|
+
2. **Utilizing Playwright**:
|
|
46
|
+
- Install and configure Playwright as part of your project dependencies. Follow the setup guide provided by the foundation-testing package.
|
|
47
|
+
- Write and run tests using Playwright’s API, simulating real-world user interactions such as clicking buttons, filling out forms, and navigating between pages.
|
|
48
|
+
3. **Incorporating Lighthouse**:
|
|
49
|
+
- Integrate Lighthouse into your E2E tests to run performance audits alongside functional tests.
|
|
50
|
+
- Use the insights from Lighthouse reports to identify and address performance issues, optimizing your application for speed and user experience.
|
|
51
|
+
4. **Advanced Features**:
|
|
52
|
+
- **Cross-Browser Testing**: Ensure your application works seamlessly across different browsers, including Chrome, Firefox, and WebKit, with Playwright’s cross-browser support.
|
|
53
|
+
- **Visual Testing**: Utilize Playwright’s screenshot and visual comparison features to validate the consistency of your UI across different devices and resolutions.
|
|
54
|
+
- **Performance Budgets**: Set performance thresholds using Lighthouse to maintain high performance standards, ensuring metrics like Time to Interactive (TTI) and First Contentful Paint (FCP) stay within acceptable limits.
|
|
33
55
|
|
|
34
56
|
## Test Organisation
|
|
35
57
|
|
|
36
58
|
You can unit-test specific logic by adding a test file alongside the source file.
|
|
37
59
|
|
|
38
|
-
```
|
|
60
|
+
```ts
|
|
39
61
|
logic.ts
|
|
40
62
|
logic.test.ts
|
|
41
63
|
```
|
|
42
64
|
|
|
43
65
|
If your test spans more than one file or is more of an end-to-end test, you may wish to add your test to your package's **/test** directory instead. An example structure might be:
|
|
44
66
|
|
|
45
|
-
```
|
|
67
|
+
```plaintext
|
|
46
68
|
├── src
|
|
47
69
|
│ └── logic.ts
|
|
48
70
|
│ └── logic.test.ts
|
|
@@ -86,7 +108,7 @@ export * from '@genesislcap/foundation-testing/jsdom';
|
|
|
86
108
|
|
|
87
109
|
The test-related scripts to add to your package's **package.json** file may include:
|
|
88
110
|
|
|
89
|
-
```
|
|
111
|
+
```json
|
|
90
112
|
"test": "genx test",
|
|
91
113
|
"test:single": "genx test --match connect.test.ts",
|
|
92
114
|
"test:single:browser": "genx test --browser --match connect.test.ts",
|
|
@@ -246,16 +268,23 @@ To enable this module in your application, follow the steps below.
|
|
|
246
268
|
|
|
247
269
|
```json
|
|
248
270
|
{
|
|
249
|
-
...
|
|
250
271
|
"dependencies": {
|
|
251
|
-
...
|
|
252
272
|
"@genesislcap/foundation-testing": "latest"
|
|
253
|
-
...
|
|
254
273
|
},
|
|
255
|
-
...
|
|
256
274
|
}
|
|
257
275
|
```
|
|
258
276
|
|
|
277
|
+
### **Unit Testing Resources and Further Documentation:**
|
|
278
|
+
|
|
279
|
+
- [UVU](ttps://github.com/lukeed/uvu)
|
|
280
|
+
- [Sinon.JS](https://sinonjs.org/releases/v18/)
|
|
281
|
+
|
|
282
|
+
### **E2E Resources and Further Documentation:**
|
|
283
|
+
|
|
284
|
+
- **Playwright Documentation**: Explore Playwright’s extensive documentation for more advanced usage and best practices [here](https://playwright.dev/).
|
|
285
|
+
- **Lighthouse Documentation**: Learn more about Lighthouse and its role in enhancing web performance [here](https://developers.google.com/web/tools/lighthouse).
|
|
286
|
+
- **`foundation-testing` Guides**: Review the detailed setup and configuration guides included with the [foundation-testing package](https://github.com/genesislcap/foundation-ui/tree/master/packages/foundation/foundation-testing) to fully leverage its capabilities.
|
|
287
|
+
|
|
259
288
|
## [API Docs](./docs/api/index.md)
|
|
260
289
|
|
|
261
290
|
## License
|
|
@@ -263,4 +292,5 @@ To enable this module in your application, follow the steps below.
|
|
|
263
292
|
Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.
|
|
264
293
|
|
|
265
294
|
### Licensed components
|
|
295
|
+
|
|
266
296
|
Genesis low-code platform
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/playwright-bdd/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,gBAAgB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-testing",
|
|
3
3
|
"description": "Genesis Foundation Testing",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.202.1-alpha-34c59e8.0",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
@@ -29,6 +29,11 @@
|
|
|
29
29
|
"require": "./dist/cjs/playwright/setup.js",
|
|
30
30
|
"default": "./dist/esm/playwright/setup.js"
|
|
31
31
|
},
|
|
32
|
+
"./playwright-bdd": {
|
|
33
|
+
"types": "./dist/dts/playwright-bdd/index.d.ts",
|
|
34
|
+
"require": "./dist/cjs/playwright-bdd/index.js",
|
|
35
|
+
"default": "./dist/esm/playwright-bdd/index.js"
|
|
36
|
+
},
|
|
32
37
|
"./package.json": "./package.json",
|
|
33
38
|
"./tsm": "./dist/esm/tsm/index.js"
|
|
34
39
|
},
|
|
@@ -74,12 +79,13 @@
|
|
|
74
79
|
"typescript": "^4.9.5"
|
|
75
80
|
},
|
|
76
81
|
"dependencies": {
|
|
77
|
-
"@genesislcap/foundation-logger": "14.
|
|
82
|
+
"@genesislcap/foundation-logger": "14.202.1-alpha-34c59e8.0",
|
|
78
83
|
"@microsoft/fast-element": "^1.12.0",
|
|
79
84
|
"@microsoft/fast-foundation": "^2.49.4",
|
|
80
85
|
"@playwright/test": "^1.18.1",
|
|
81
86
|
"jsdom": "^24.0.0",
|
|
82
87
|
"lighthouse": "^9.6.8",
|
|
88
|
+
"playwright-bdd": "^7.2.2",
|
|
83
89
|
"playwright-lighthouse": "^2.2.2",
|
|
84
90
|
"portfinder-sync": "^0.0.2",
|
|
85
91
|
"sinon": "^17.0.1",
|
|
@@ -95,5 +101,5 @@
|
|
|
95
101
|
"publishConfig": {
|
|
96
102
|
"access": "public"
|
|
97
103
|
},
|
|
98
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "f8ccd0ab71ae20e61ce39f02dd1905b2676e2898"
|
|
99
105
|
}
|