-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
81 lines (78 loc) · 3.19 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
<!DOCTYPE html>
<html>
<head>
<title>Testing library playground</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<div class="container">
<div class="popup invisible" id="popup">
<div class="popup-backdrop" id="backdrop"></div>
<div class="popup-content">
<h2>Help</h2>
<span class="close" id="close">×</span>
<div class="usage">
<p>This app helps you try out queries as specified in the DOM Testing Library <a target="_blank"
rel="noopener noreferrer"
href="https://testing-library.com/docs/dom-testing-library/api-queries">docs</a>.</p>
<br>
<ol>
<li>First, write some HTML markup in the HTML editor area.</li>
<li>Find a query you're interested in.</li>
<li>Write the query in the query editor area and see if any elements match in the output area.</li>
</ol>
<br>
<p>An example query:
<pre>queries.getByText(container, "username")</pre>
</p>
<br>
<p><strong>queries</strong> and <strong>container</strong> are special keywords. <strong>queries</strong> is
an import from testing library itself, which has all the queries, and <strong>container</strong> is the
output area div. These are always mandatory.</p>
</div>
</div>
</div>
<header class="header">
<h3 class="title">Playground for <a style="margin-left: 3px;" target="_blank" rel="noopener noreferrer"
href="https://testing-library.com/">DOM Testing Library</a></h3>
</header>
<div id="app" class="app">
<div class="input-area">
<div class="help">
<button class="button" id="load-button">Load Example</button>
<button class="button" id="help-button">Quick help</button>
</div>
<div class="html-editor">
<label class="label" for="html-input">HTML Editor</label>
<textarea class="textarea" name="html-input" id="html-input" placeholder="Type your HTML here"></textarea>
</div>
<div class="query-editor">
<label class="label" for="query-input">Query Editor</label>
<textarea class="textarea" name="query-input" id="query-input" placeholder="Type your query here"></textarea>
<label class="label">Use
<pre
style="display: inline-block; font-size: 1.5rem;">queries.⪡QUERY⪢(container, ...)</pre>
</label>
</div>
<button class="button" id="execute-button">
Execute
</button>
</div>
<div class="output-area">
<div class="error invisible" id="error">
<label class="label">Error!</label>
<div id="error-text" class="error-text"></div>
</div>
<label class="label">Output</label>
<div class="output" id="output">Your output will render here!</div>
<button class="button" id="reset-highlight-button">
Reset highlight
</button>
</div>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>