@luigi-project/testing-utilities 2.13.1-dev.202406170028 → 2.13.1-dev.202406190026
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 +65 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
# Luigi Testing Utilities
|
|
2
2
|
|
|
3
|
-
The Luigi Testing Utilities are a set of auxiliary functions used to enhance the user experience while testing Luigi-based micro frontends. The functions abstract away Luigi-specific logic from the tester so that it is easier for them to mock and assert Luigi functionality.
|
|
3
|
+
The [Luigi Testing Utilities](https://github.com/SAP/luigi/tree/main/client-frameworks-support/testing-utilities) are a set of auxiliary functions used to enhance the user experience while testing Luigi-based micro frontends. The functions abstract away Luigi-specific logic from the tester so that it is easier for them to mock and assert Luigi functionality.
|
|
4
4
|
|
|
5
|
-
## LuigiMockUtil
|
|
6
|
-
|
|
5
|
+
## LuigiMockUtil
|
|
6
|
+
Since version 2.9.0 this class contains certain utility helper functions needed when writing e2e tests with Cypress or Protractor. You can simply import this module into you project and then use an instance of it to test micro frontend functionality.
|
|
7
|
+
Before version 2.9.0 this class could only be used for [protractor-based](https://www.npmjs.com/package/protractor) e2e tests.
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
## How to use the library
|
|
9
10
|
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
**Prerequisites:**
|
|
12
|
+
|
|
13
|
+
_In order to use this utility library, you need to import LuigiMockModule into your Angular application's entry point. See more [here](https://docs.luigi-project.io/docs/framework-support-libraries/?section=luigicontextservice). You also have to install [Cypress](https://www.npmjs.com/package/cypress) or [Protractor](https://www.npmjs.com/package/protractor) locally as a dev dependency for your project. Bear in mind Protractor is deprecated in Angular since version 15._
|
|
12
14
|
|
|
13
15
|
|
|
14
16
|
1. Import the library in the `package.json`:
|
|
@@ -21,13 +23,13 @@ npm install @luigi-project/testing-utilities -s
|
|
|
21
23
|
import { LuigiMockUtil } from "@luigi-project/testing-utilities";
|
|
22
24
|
```
|
|
23
25
|
|
|
24
|
-
|
|
26
|
+
### Example how to use the library with Protractor
|
|
25
27
|
|
|
26
28
|
```javascript
|
|
27
29
|
import { browser } from 'protractor'; // <-- target e2e testing library
|
|
28
30
|
import { LuigiMockUtil } from "@luigi-project/testing-utilities";
|
|
29
31
|
|
|
30
|
-
describe('Another test', () => {
|
|
32
|
+
describe('Another test using protractor', () => {
|
|
31
33
|
let luigiMockUtil: LuigiMockUtil;
|
|
32
34
|
|
|
33
35
|
beforeAll(async () => {
|
|
@@ -39,13 +41,63 @@ describe('Another test', () => {
|
|
|
39
41
|
someData: '1',
|
|
40
42
|
someOtherData: 'randomInfo',
|
|
41
43
|
});
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Example how to use the library with Cypress
|
|
49
|
+
|
|
50
|
+
```javascript
|
|
51
|
+
import { LuigiMockUtil } from "@luigi-project/testing-utilities";
|
|
52
|
+
|
|
53
|
+
describe('Another test using cypress', () => {
|
|
54
|
+
let luigiMockUtil: LuigiMockUtil;
|
|
55
|
+
|
|
56
|
+
beforeEach(() => {
|
|
57
|
+
// Necessary to execute the functions from LuigiMockUtil in Cypress context
|
|
58
|
+
// and get the window object of the page that is currently active
|
|
59
|
+
cy.window().then((win: any) => {
|
|
60
|
+
luigiMockUtil = new LuigiMockUtil((fn: any) => {
|
|
61
|
+
return new Promise((resolve, reject) => {
|
|
62
|
+
resolve(fn());
|
|
63
|
+
});
|
|
64
|
+
}, win);
|
|
65
|
+
});
|
|
66
|
+
// Necessary that luigi-client sends postmessages to the same window
|
|
67
|
+
// and not to parent (which is Cypress engine)
|
|
68
|
+
cy.visit('http://localhost:4200', {
|
|
69
|
+
onBeforeLoad: (win) => {
|
|
70
|
+
win["parent"] = win;
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
it('should mock path exists', () => {
|
|
76
|
+
// Be sure '.pathExists' element is present
|
|
77
|
+
cy.get('.pathExists').click().then(() => {
|
|
78
|
+
luigiMockUtil.mockPathExists('/test', false);
|
|
79
|
+
});
|
|
80
|
+
cy.getAllSessionStorage().then((result: any) => {
|
|
81
|
+
expect(result).to.deep.equal({
|
|
82
|
+
"http://localhost:4200": {
|
|
83
|
+
luigiMockData: '{"pathExists":{"/test":false}}'
|
|
84
|
+
},
|
|
85
|
+
});
|
|
86
|
+
})
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
it('should mock context update', () => {
|
|
90
|
+
const context = {ctxKey: 'ctxValue'};
|
|
91
|
+
|
|
92
|
+
luigiMockUtil.mockContext(context);
|
|
93
|
+
cy.get('#luigi-debug-vis-cnt').contains('{"msg":"luigi.get-context","context":{"ctxKey":"ctxValue"}}');
|
|
94
|
+
});
|
|
95
|
+
});
|
|
44
96
|
```
|
|
45
97
|
|
|
46
98
|
#### Functions provided
|
|
47
|
-
- **mockContext**: Mocks the context by sending Luigi context messages with the desired mocked context as parameter.
|
|
99
|
+
- **mockContext**: Mocks the context by sending Luigi context messages with the desired mocked context as parameter.
|
|
48
100
|
- **mockPathExists**: This method serves as a mock for the Luigi Client `pathExists()` function. It is used in e2e tests when component being tested utilizes a call to `LuigiClient.linkManager().pathExists()`
|
|
49
101
|
- **modalOpenedWithTitle**: Checks on the printed DOM Luigi message responses for a modal with given title being opened. In such a case, a message would be printed containing a `modal.title`. Returns `false` if such element was not found.
|
|
50
|
-
- **getMSG**: Return list of messages, representing message elements added in the DOM for testing.
|
|
51
|
-
- **parseLuigiMockedMessages**: Parses the elements added by LuigiMockModule into the DOM and assigns them to the local messages variable
|
|
102
|
+
- **getMSG**: Return list of messages, representing message elements added in the DOM for testing.
|
|
103
|
+
- **parseLuigiMockedMessages**: Parses the elements added by LuigiMockModule into the DOM and assigns them to the local messages variable
|