-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
188 lines (174 loc) · 8.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Online Angular unit test generator" />
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<title>Generate unit test automatically for Angular</title>
<!-- elements-x 3 -->
<script src="https://unpkg.com/elements-x"></script>
<!-- fontawesome 6.4.2 free -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
<!-- bootstrap 5.0.2 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- google analytics -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZD70RB44ER"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ZD70RB44ER');
</script>
<link rel="stylesheet" href="style.css" />
</head>
<body class="p-2 p-lg-4">
<div class="container">
<h1>Online Angular unit test generator.
<a href="https://github.com/allenhwkim/ngentest"><i class="fa-brands fa-github h4"></i></a>
<a class="github-button" href="https://github.com/allenhwkim/ngentest" data-icon="octicon-star" data-show-count="true">Star</a>
<a class="github-button" href="https://github.com/allenhwkim/ngentest/issues" data-icon="octicon-issue-opened" data-show-count="true">Issue</a>
<a class="github-button" href="https://github.com/allenhwkim/ngentest/discussions" data-icon="octicon-comment-discussion">Discuss</a>
</h1>
For those who are are not a fan of test-driven development, generate unit tests for Angular classes after coding is done.
<div class="row mt-4">
<div class="col col-lg-5 input">
<div class="input-types d-flex flex-wrap">
<label class="me-2">
<input x type="radio" name="input-type" value="component" checked> Component
</label>
<label class="me-2">
<input x type="radio" name="input-type" value="directive"> Directive
</label>
<label class="me-2">
<input x type="radio" name="input-type" value="klass"> Class
</label>
<label class="me-2">
<input x type="radio" name="input-type" value="pipe"> Pipe
</label>
<label class="me-2">
<input x type="radio" name="input-type" value="injectable"> Service
</label>
</div>
<x-monaco class="border" id="input" language="typescript"></x-monaco>
</div>
<div class="col col-lg-2 text-center d-flex flex-column justify-content-between">
<button id="submit" class="btn mt-4 btn-primary">Generate</button>
<div>
<h2 class="h6">Articles</h2>
<ul class="text-start list-unstyled">
<li>
<a href="https://medium.com/allenhwkim/generate-angular-unit-tests-automatically-1300601ed73">Generate Angular unit test</a>
</li>
<li>
<a href="https://medium.com/allenhwkim/how-to-parse-typescript-from-source-643387971f4e">How to parse Typescript</a>
</li>
<li>
<a href="https://medium.com/allenhwkim/how-to-parse-javascript-from-source-ffbc47b1183b">How to parse Javascript</a>
</li>
</ul>
<a class="link-underline-light" href="https://elements-x.com/">
<img src="https://elements-x.com/logo.png" height="24">
</a>
<a class="link-underline-light" href="https://getbootstrap.com/docs/5.3">
<i class="fa-brands fa-bootstrap"></i>
</a>
<a href="https://fontawesome.com/v6/docs">
<i class="fa-brands fa-square-font-awesome"></i>
</a>
</div>
</div>
<div class="col col-lg-5 template">
<div class="output-buttons d-flex">
<label>
<input type="radio" name="output-button" value="result"> Result
</label>
<label>
<input type="radio" name="output-button" value="template"> Template
<button x class="icon small" value="template">?</button>
<x-dropdown class="p-4 fs-7">
<p>
EJS template to generate Angular unit test.
</p>
Vailables available;
<ul>
<li><b>className</b>: name of Angular class</li>
<li><b>importMocks</b>: Array of genetrated code for import statements.</li>
<li><b>providerMocks</b>: Array of generated code for constructor providers.</li>
<li><b>constructorParamJs</b>: Generated code for constructor arguments.</li>
<li><b>functionTests</b>: A key/value expression of generated codes for class methods. The key is function name.</li>
<li><b>config</b>: config object. e.g. config.requiredComponentTestDeclaratoins.directives.</li>
<li><b>accessorTests</b>: A key/value expressoin of generated codes for class getters and setters. </li>
<li><b>componentProviderMocks</b>: For component only. Array of generated code for a component providers.</li>
<li><b>inputMocks</b>: For component and directive only. Array of generated code to mock @Input.</li>
<li><b>outputMocks</b>: For component and directive only. Array of generated code to mock @Output.</li>
</ul>
</x-dropdown>
</label>
<label>
<input type="radio" name="output-buttons" value="config"> Options
</label>
</div>
<div class="outputs">
<div id="ads" class="border flex-column text-center w-100 align-items-center justify-content-center">
<div>
<br/>
1. Select one of Angular class type on the left. <br/>
2. Modify the default typescript with your own. <br/>
3. Click 'Generate' button to see the result <br/><br/>
Then, you will see auto-generated Angular unit test here.
</div>
</div>
<div id="loading" class="border align-items-center justify-content-center">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<x-monaco class="border" id="template" language="plaintext"></x-monaco>
<x-monaco class="border" id="config" language="javascript"></x-monaco>
<x-monaco class="border" id="result" language="typescript"></x-monaco>
</div>
</div>
</div>
</div>
<div class="container mx-auto w-lg-50">
<h2 class="h5 mt-4">How does it work?</h2>
<h3 class="h6">1. Parse a Typescript file and find the following.</h3>
<ul>
<li> imports: imports statements info. </li>
<li> inputs: @Input statements info. </li>
<li> outputs: @Output statements info. </li>
<li> component provider: providers info used in @Component decorator. </li>
<li> selector: selector info used in @Component or @Directove decorator. </li>
</ul>
<h3 class="h6">2. Compile Typescript to Javascript, then parse the Javascript, and get the following.</h3>
<ul>
<li>constructor param data</li>
<li>provider mock data</li>
<li>accessor tests</li>
<li>function tests</li>
</ul>
<h3 class="h6">3. build ejs data from #1 and #2, and generate test code.</h3>
<p class="pt-4">
Have you ever coded an Angular unit tests from the scratch,
and struggling to handle errors with missing mocks and mocks?
How did you like it?
I assume your answer to this is "not so much".
Because writing a successful Angular unit test is mostly copy, paste, and modification.
The most important thing is it's not a pleasant task.
</p>
<p>
Copy, paste, and mofification. and again copy, paste, and modificaton.
This can be automated, right? So, this is the result.
</p>
<p>
<strong>You can generate an Angular unit test with a command!!</strong>
</p>
</div>
<script type="module" src="index.mjs"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>