@genesislcap/foundation-testing 14.202.1-alpha-271f747.0 → 14.203.1
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
|
@@ -7,50 +7,51 @@
|
|
|
7
7
|
|
|
8
8
|
## Unit Testing
|
|
9
9
|
|
|
10
|
-
The
|
|
10
|
+
The foundation-testing package is a comprehensive framework for implementing Unit Tests. Use it to ensure that your Genesis Web Application provides a seamless user experience by testing components, functions and user interactions across various scenarios.
|
|
11
11
|
|
|
12
12
|
### **Key Tools and Features:**
|
|
13
13
|
|
|
14
|
-
- **Customizable Unit Test Suites**: Manage and create detailed test suites
|
|
15
|
-
- **Sinon
|
|
16
|
-
- **Very lightweight**: The test framework provided by
|
|
14
|
+
- **Customizable Unit Test Suites**: Manage and create detailed test suites in the **tests/unit** folder, focusing on critical components and functions. These test suites are fully customizable by default, so you can cover all different parts of the application.
|
|
15
|
+
- **Sinon integration**: Use Sinon.JS to incorporate test spies, stubs and mocks into your Unit Tests.
|
|
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
17
|
- **Extremely performant**: Much faster than competing test runners, see [benchmarks](https://github.com/lukeed/uvu/tree/master#benchmarks).
|
|
18
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
|
|
19
|
+
- **Browser-compatible**: You can easily run and debug your tests in a browser environment, which allows you to use browser developer tools.
|
|
20
20
|
|
|
21
21
|
### **Getting Started with Unit Testing:**
|
|
22
22
|
|
|
23
|
-
- Define test suites
|
|
24
|
-
-
|
|
25
|
-
-
|
|
23
|
+
- Define test suites in the **tests/unit** folder, targeting critical components and functions.
|
|
24
|
+
- Use UVU for fast and lightweight Unit Testing.
|
|
25
|
+
- Use Sinon.JS if you need spies, stubs or mocks.
|
|
26
26
|
- Execute tests locally or on your CI pipeline, ensuring reliable and consistent outcomes.
|
|
27
27
|
|
|
28
28
|
## E2E Testing
|
|
29
29
|
|
|
30
|
-
The
|
|
30
|
+
The foundation-testing package is a comprehensive framework for implementing End-to-End (E2E) testing. use it to ensure that your Genesis Web Application provides a seamless user experience by testing workflows and user interactions across various scenarios.
|
|
31
31
|
|
|
32
32
|
### **Key Tools and Features:**
|
|
33
33
|
|
|
34
|
-
- **Customizable E2E
|
|
35
|
-
- **Playwright
|
|
36
|
-
- **Lighthouse
|
|
37
|
-
- **Automated
|
|
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**: Use 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. 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 bugs and ensures consistent test outcomes across different environments.
|
|
38
38
|
|
|
39
39
|
### **Getting Started with E2E Testing:**
|
|
40
40
|
|
|
41
|
-
1. **Creating and
|
|
42
|
-
- Define test scenarios
|
|
43
|
-
-
|
|
41
|
+
1. **Creating and running E2E Tests**:
|
|
42
|
+
- Define test scenarios in the **tests/e2e** folder, targeting critical user journeys and application functionalities.
|
|
43
|
+
- Use Playwright for browser automation and Lighthouse for performance auditing within the same test suite.
|
|
44
44
|
- Execute tests via your preferred test runner or CI pipeline, ensuring reliable and consistent outcomes.
|
|
45
|
-
2. **
|
|
46
|
-
- Install and configure Playwright as part of your project dependencies. Follow the
|
|
47
|
-
- Write and run tests using Playwright
|
|
45
|
+
2. **Using Playwright**:
|
|
46
|
+
- Install and configure Playwright as part of your project dependencies. Follow the set-up guide provided by the foundation-testing package.
|
|
47
|
+
- Write and run tests using the Playwright API to simulate real-world user interactions. These include clicking buttons, filling in forms, and navigating from page to page.
|
|
48
48
|
3. **Incorporating Lighthouse**:
|
|
49
49
|
- Integrate Lighthouse into your E2E tests to run performance audits alongside functional tests.
|
|
50
50
|
- Use the insights from Lighthouse reports to identify and address performance issues, optimizing your application for speed and user experience.
|
|
51
|
-
4. **Advanced
|
|
52
|
-
- **
|
|
53
|
-
- **
|
|
51
|
+
4. **Advanced features**:
|
|
52
|
+
- **BDD Testing**: Write behavior-driven tests using `playwright-bdd`, making it easier to define test scenarios and expectations in a human-readable format.
|
|
53
|
+
- **Cross-Browser Testing**: Use the Playwright cross-browser support to ensure your application works seamlessly across different browsers, including Chrome, Firefox, and WebKit.
|
|
54
|
+
- **Visual Testing**: Use the Playwrights screenshot and visual comparison features to validate the consistency of your UI across different devices and resolutions.
|
|
54
55
|
- **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.
|
|
55
56
|
|
|
56
57
|
## Test Organisation
|
|
@@ -281,9 +282,10 @@ To enable this module in your application, follow the steps below.
|
|
|
281
282
|
|
|
282
283
|
### **E2E Resources and Further Documentation:**
|
|
283
284
|
|
|
284
|
-
-
|
|
285
|
-
-
|
|
286
|
-
-
|
|
285
|
+
- [foundation-testing](https://github.com/genesislcap/foundation-ui/tree/master/packages/foundation/foundation-testing)
|
|
286
|
+
- [Playwright Documentation](https://playwright.dev/)
|
|
287
|
+
- [playwright-bdd](https://github.com/vitalets/playwright-bdd)
|
|
288
|
+
- [Lighthouse Documentation](https://developers.google.com/web/tools/lighthouse)
|
|
287
289
|
|
|
288
290
|
## [API Docs](./docs/api/index.md)
|
|
289
291
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.test = exports.PlaywrightBDD = void 0;
|
|
3
|
+
exports.testConfig = exports.test = exports.PlaywrightBDD = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const test_1 = require("@playwright/test");
|
|
6
6
|
const PlaywrightBDD = tslib_1.__importStar(require("playwright-bdd"));
|
|
@@ -10,18 +10,16 @@ const test_2 = require("../playwright/test");
|
|
|
10
10
|
/**
|
|
11
11
|
* Playwright BDD test
|
|
12
12
|
* @public
|
|
13
|
-
* @remarks
|
|
14
|
-
* This is just an example playwright-bdd test fixture stub. In reality, you will likely create a custom
|
|
15
|
-
* fixture for your e2e tests depending on the needs of your app or micro frontend.
|
|
16
13
|
*/
|
|
17
|
-
exports.test = PlaywrightBDD.test
|
|
14
|
+
exports.test = PlaywrightBDD.test;
|
|
15
|
+
exports.testConfig = {
|
|
18
16
|
config: [test_2.defaultPackageConfig, { option: true, scope: 'worker', timeout: 60000 }],
|
|
19
17
|
port: [
|
|
20
18
|
({ config }, use) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
21
19
|
const port = (0, portfinder_sync_1.getPort)((config === null || config === void 0 ? void 0 : config.PORT) || process.env.PORT || test_2.defaultPackageConfig.PORT);
|
|
22
20
|
yield use(port);
|
|
23
21
|
}),
|
|
24
|
-
{ scope: 'worker' },
|
|
22
|
+
{ scope: 'worker' },
|
|
25
23
|
],
|
|
26
24
|
browser: [
|
|
27
25
|
({ port }, use) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -32,5 +30,5 @@ exports.test = PlaywrightBDD.test.extend({
|
|
|
32
30
|
}),
|
|
33
31
|
{ scope: 'worker' },
|
|
34
32
|
],
|
|
35
|
-
audit: [test_2.defaultAuditThresholds, { option: true, scope: 'worker' }],
|
|
36
|
-
}
|
|
33
|
+
audit: [test_2.defaultAuditThresholds, { option: true, scope: 'worker' }],
|
|
34
|
+
};
|
|
@@ -1,12 +1,29 @@
|
|
|
1
1
|
import * as PlaywrightBDD from 'playwright-bdd';
|
|
2
|
-
import { WorkerFixture } from '../playwright/test';
|
|
3
2
|
export { PlaywrightBDD };
|
|
4
3
|
/**
|
|
5
4
|
* Playwright BDD test
|
|
6
5
|
* @public
|
|
7
|
-
* @remarks
|
|
8
|
-
* This is just an example playwright-bdd test fixture stub. In reality, you will likely create a custom
|
|
9
|
-
* fixture for your e2e tests depending on the needs of your app or micro frontend.
|
|
10
6
|
*/
|
|
11
|
-
export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & import("playwright-bdd/dist/run/bddFixtures/test").BddFixturesTest, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions & import("playwright-bdd/dist/run/bddFixtures/worker").BddFixturesWorker
|
|
7
|
+
export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & import("playwright-bdd/dist/run/bddFixtures/test").BddFixturesTest, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions & import("playwright-bdd/dist/run/bddFixtures/worker").BddFixturesWorker>;
|
|
8
|
+
export declare const testConfig: {
|
|
9
|
+
config: (import("../playwright/test").PackageConfig | {
|
|
10
|
+
option: boolean;
|
|
11
|
+
scope: string;
|
|
12
|
+
timeout: number;
|
|
13
|
+
})[];
|
|
14
|
+
port: ((({ config }: {
|
|
15
|
+
config: any;
|
|
16
|
+
}, use: any) => Promise<void>) | {
|
|
17
|
+
scope: string;
|
|
18
|
+
})[];
|
|
19
|
+
browser: ((({ port }: {
|
|
20
|
+
port: any;
|
|
21
|
+
}, use: any) => Promise<void>) | {
|
|
22
|
+
scope: string;
|
|
23
|
+
})[];
|
|
24
|
+
audit: (import("../playwright/test").AuditThresholds | {
|
|
25
|
+
option: boolean;
|
|
26
|
+
scope: string;
|
|
27
|
+
})[];
|
|
28
|
+
};
|
|
12
29
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/playwright-bdd/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,aAAa,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/playwright-bdd/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,aAAa,MAAM,gBAAgB,CAAC;AAKhD,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB;;;GAGG;AACH,eAAO,MAAM,IAAI,2XAAqB,CAAC;AAEvC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;CAmBtB,CAAC"}
|
|
@@ -7,18 +7,16 @@ export { PlaywrightBDD };
|
|
|
7
7
|
/**
|
|
8
8
|
* Playwright BDD test
|
|
9
9
|
* @public
|
|
10
|
-
* @remarks
|
|
11
|
-
* This is just an example playwright-bdd test fixture stub. In reality, you will likely create a custom
|
|
12
|
-
* fixture for your e2e tests depending on the needs of your app or micro frontend.
|
|
13
10
|
*/
|
|
14
|
-
export const test = PlaywrightBDD.test
|
|
11
|
+
export const test = PlaywrightBDD.test;
|
|
12
|
+
export const testConfig = {
|
|
15
13
|
config: [defaultPackageConfig, { option: true, scope: 'worker', timeout: 60000 }],
|
|
16
14
|
port: [
|
|
17
15
|
({ config }, use) => __awaiter(void 0, void 0, void 0, function* () {
|
|
18
16
|
const port = getPort((config === null || config === void 0 ? void 0 : config.PORT) || process.env.PORT || defaultPackageConfig.PORT);
|
|
19
17
|
yield use(port);
|
|
20
18
|
}),
|
|
21
|
-
{ scope: 'worker' },
|
|
19
|
+
{ scope: 'worker' },
|
|
22
20
|
],
|
|
23
21
|
browser: [
|
|
24
22
|
({ port }, use) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -29,5 +27,5 @@ export const test = PlaywrightBDD.test.extend({
|
|
|
29
27
|
}),
|
|
30
28
|
{ scope: 'worker' },
|
|
31
29
|
],
|
|
32
|
-
audit: [defaultAuditThresholds, { option: true, scope: 'worker' }],
|
|
33
|
-
}
|
|
30
|
+
audit: [defaultAuditThresholds, { option: true, scope: 'worker' }],
|
|
31
|
+
};
|
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.203.1",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
@@ -79,10 +79,10 @@
|
|
|
79
79
|
"typescript": "^4.9.5"
|
|
80
80
|
},
|
|
81
81
|
"dependencies": {
|
|
82
|
-
"@genesislcap/foundation-logger": "14.
|
|
82
|
+
"@genesislcap/foundation-logger": "14.203.1",
|
|
83
83
|
"@microsoft/fast-element": "^1.12.0",
|
|
84
84
|
"@microsoft/fast-foundation": "^2.49.4",
|
|
85
|
-
"@playwright/test": "^1.
|
|
85
|
+
"@playwright/test": "^1.46.1",
|
|
86
86
|
"jsdom": "^24.0.0",
|
|
87
87
|
"lighthouse": "^9.6.8",
|
|
88
88
|
"playwright-bdd": "^7.2.2",
|
|
@@ -101,5 +101,5 @@
|
|
|
101
101
|
"publishConfig": {
|
|
102
102
|
"access": "public"
|
|
103
103
|
},
|
|
104
|
-
"gitHead": "
|
|
104
|
+
"gitHead": "2d342adc330f867e7bd44979d1e3d8b4d94b14da"
|
|
105
105
|
}
|