1 | # Getting Started:
|
2 |
|
3 | This tools provides a testing environnement for your widget.
|
4 |
|
5 | # Prerequisites:
|
6 |
|
7 | 1. You should have the following software installed:
|
8 |
|
9 | - git
|
10 | - node 8.12
|
11 | - yarn 1.10.1
|
12 |
|
13 | 2. The first time you use this tool, you need to install the libraries by
|
14 | running `yarn install` in a terminal in the project folder (defined in
|
15 | package.json)
|
16 |
|
17 | 3. You should already have built your widget on your machine and generated a
|
18 | widget bundle file (for example, main.bundle.js) on your local drive. You also
|
19 | need a mock bundle file. Please check the [exemple
|
20 | widget](https://github.com/TalentSoft/integration-widget-pie-chart) for a
|
21 | template to generate such bundles.
|
22 |
|
23 | # How to launch:
|
24 |
|
25 | To launch the build and deployment of your widget, run `yarn start
|
26 | [path to your widget bundle (widget)] [path to your mock script]`
|
27 |
|
28 | # Displaying the widget:
|
29 |
|
30 | Once it's launched, you can view your widget by opening a browser and
|
31 | navigating to: http://localhost:5555/.
|
32 |
|
33 | # Configuring the port number of local url
|
34 |
|
35 | If you need to change the port number of the local url, you can change the `port`
|
36 | variable in the file index.js in the root folder.
|
37 |
|
38 | # Customizing the environment of the widget with the mock file
|
39 |
|
40 | In the testing environment provided by this tool, all host methods such as
|
41 | `requestExternalResource` are mocked. You may provide your own implementation
|
42 | to test your widget in different conditions.
|
43 |
|
44 | In order to do this you need to provide a mock script that exports an object
|
45 | that implements the `HostMock` interface. Please check the [exemple
|
46 | widget](https://github.com/TalentSoft/integration-widget-pie-chart) for an
|
47 | exemple mock script (in the mock folder).
|
48 |
|
49 | ## Example
|
50 |
|
51 | Suppose that your API returns a list of objects
|
52 | and you want to mock your API by returning :
|
53 |
|
54 | ```javascript
|
55 | [
|
56 | {
|
57 | id: 'ToDo',
|
58 | y: 0,
|
59 | z: 2458
|
60 | },
|
61 | ...
|
62 | ]
|
63 | ```
|
64 |
|
65 | => You should implement the method requestExternalResource in a typescript file as:
|
66 |
|
67 | ```javascript
|
68 | /**
|
69 | * This file contains the callbacks that you can modify to test the display of your widget
|
70 | */
|
71 | import { HostMock } from '@talentsoft-opensource/widget-display-tool/src/mock-definitions'
|
72 | import { HttpResponse, RequestOptions } from '@talentsoft-opensource/integration-widget-contract'
|
73 |
|
74 | export const hostmock: HostMock = {
|
75 | /**
|
76 | * This flag controls the requestExternalResource behavior:
|
77 | * - proxyMode: true => makes a real http request
|
78 | * - proxyMode: false => calls the mocked version defined in this file
|
79 | */
|
80 | proxyMode: true,
|
81 |
|
82 | /**
|
83 | * if proxyMode == true, when a direct connect request is made this secretkey will be used
|
84 | */
|
85 | secretKey: "mysec",
|
86 |
|
87 | /**
|
88 | * if proxyMode == true, when a direct connect request is made this login will be used
|
89 | */
|
90 | login: "mylogin",
|
91 |
|
92 | /**
|
93 | * if proxyMode == false, this method is called instead of sending a request
|
94 | */
|
95 | requestExternalResource: (options: RequestOptions) => {
|
96 | const data = [
|
97 | {
|
98 | id: 'ToDo',
|
99 | y: 0,
|
100 | z: 2458
|
101 | },
|
102 | {
|
103 | id: 'InProgress',
|
104 | y: 0,
|
105 | z: 3874
|
106 | },
|
107 | {
|
108 | id: 'ToValidate',
|
109 | y: 0,
|
110 | z: 2375
|
111 | },
|
112 | {
|
113 | id: 'Validated',
|
114 | y: 0,
|
115 | z: 129
|
116 | },
|
117 | ];
|
118 |
|
119 | return new Promise<HttpResponse>((resolve, reject) => {
|
120 | const response: HttpResponse = {
|
121 | body: JSON.stringify(data),
|
122 | status: 200,
|
123 | headers: {}
|
124 | };
|
125 | resolve(response);
|
126 | });
|
127 | },
|
128 |
|
129 | /**
|
130 | * This object is passed to the *params* prop in the widget.
|
131 | * It may contain any property you need for the widget.
|
132 | * In production, those properties are defined for each
|
133 | * client but you may provide default values.
|
134 | */
|
135 | configuration: {
|
136 | foo: "bar"
|
137 | },
|
138 |
|
139 | /**
|
140 | * This function is called to generate the autoconnect url when using
|
141 | * openUrlinNewTab or openUrlinCurrentTab
|
142 | */
|
143 | getAutoConnectUrl(url: string): string {
|
144 | return url;
|
145 | }
|
146 | }
|
147 | ```
|
148 |
|
149 | This file must be compiled with webpack with a library output set to
|
150 | `integration/hostmock`. The path to the result to the widget-display-tool
|
151 | script.
|
152 |
|
153 | # Known issue(s):
|
154 |
|
155 | If the widget bundle gets deleted (eg by a rebuild) while the tool is launched
|
156 | and displays your widget, you will get the following error in the Visual Studio
|
157 | terminal:
|
158 |
|
159 | ```
|
160 | ERROR in [copy-webpack-plugin] unable to locate 'C:\xxx\main.bundle.js' at 'C:\yyy\dist\main.bundle.js'
|
161 | i 「wdm」: Failed to compile.
|
162 | ```
|
163 |
|
164 | To fix that issue, you need to stop this tool :
|
165 |
|
166 | - execute `Ctrl+C` (Answer Y to end the program)
|
167 | - Relaunch the tool: run `yarn display` in the widget folder |
\ | No newline at end of file |