Skip to content

Commit 30200d7

Browse files
smeijersmeijer
committed
feat: update attribute table style and make attributes clickable
1 parent 271b6ce commit 30200d7

File tree

2 files changed

+139
-44
lines changed

2 files changed

+139
-44
lines changed

‎src/components/ElementInfo.js

Lines changed: 74 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react';
22
import { getRole, computeAccessibleName } from 'dom-accessibility-api';
3-
import { messages } from '../constants';
3+
import { links, messages } from '../constants';
4+
import SetLike from 'dom-accessibility-api/dist/polyfills/SetLike';
5+
import { useAppContext } from './Context';
46

57
const colors = ['bg-blue-600', 'bg-yellow-600', 'bg-orange-600', 'bg-red-600'];
68

@@ -23,11 +25,11 @@ function getExpression({ method, data }) {
2325
const field = getFieldName(method);
2426

2527
if (method === 'getByRole' && data.role && data.name) {
26-
return `getByRole('${data.role}', { name: '${data.name}' })`;
28+
return `screen.getByRole('${data.role}', { name: '${data.name}' })`;
2729
}
2830

2931
if (data[field]) {
30-
return `${method}('${data[field]}')`;
32+
return `screen.${method}('${data[field]}')`;
3133
}
3234

3335
return '';
@@ -67,25 +69,37 @@ function getData({ root, element }) {
6769
};
6870
}
6971

70-
function Row({ method, data }) {
71-
const field = getFieldName(method);
72-
const value = data[field];
72+
function Section({ children }) {
73+
return <div className="space-y-3">{children}</div>;
74+
}
7375

74-
return (
75-
<tr>
76-
<td className="px-4 text-xs">{field}</td>
77-
<td className="px-4 text-xs">{value}</td>
78-
</tr>
79-
);
76+
function Heading({ children }) {
77+
return <h3 className="font-bold text-xs">{children}</h3>;
8078
}
8179

82-
function Section({ children }) {
80+
function Field({ method, data }) {
81+
const { jsEditorRef } = useAppContext();
82+
83+
const field = getFieldName(method);
84+
const value = data[field];
85+
const handleClick = value
86+
? () => {
87+
const expr = getExpression({ method, data });
88+
jsEditorRef.current.setValue(expr);
89+
}
90+
: undefined;
91+
8392
return (
84-
<tr>
85-
<td colSpan="2" className="pt-4 text-xs">
86-
<strong>{children}</strong>
87-
</td>
88-
</tr>
93+
<div
94+
className="text-xs field"
95+
data-clickable={!!handleClick}
96+
onClick={handleClick}
97+
>
98+
<div className="text-gray-800 font-light">{field}</div>
99+
<div className="truncate">
100+
{value || <span className="text-gray-400">n/a</span>}
101+
</div>
102+
</div>
89103
);
90104
}
91105

@@ -98,47 +112,64 @@ function getQueryAdvise(data) {
98112
...messages[3],
99113
};
100114
}
101-
const expression = `screen.${getExpression({ method: query.method, data })}`;
115+
const expression = getExpression({ method: query.method, data });
102116
return { expression, level: query.level, ...messages[query.level] };
103117
}
104118

105119
// for inputs, the role will only work if there is also a type attribute
106-
function ElementInfo({ root, element }) {
107-
const data = getData({ root, element });
120+
function ElementInfo({ element }) {
121+
const { htmlPreviewRef } = useAppContext();
122+
const data = getData({ root: htmlPreviewRef.current, element });
108123
const advise = getQueryAdvise(data);
109124

110125
return (
111126
<div>
112127
<div
113-
className={['border text-white p-4 rounded', colors[advise.level]].join(
114-
' ',
115-
)}
128+
className={[
129+
'border text-white p-4 rounded mb-8',
130+
colors[advise.level],
131+
].join(' ')}
116132
>
117133
<div className="font-bold text-xs mb-2">suggested query:</div>
118134
{advise.expression && (
119135
<div className="font-mono text-sm">&gt; {advise.expression}</div>
120136
)}
121-
{/*<div className="font-bold text-xs mb-2">{advise.heading}:</div>*/}
122-
{/*{advise.description && <div className="text-sm mb-4">{advise.description}</div>}*/}
123137
</div>
124138

125-
<table className="table-auto text-sm w-full">
126-
<tbody>
127-
<Section>Queries Accessible to Everyone</Section>
128-
<Row method="getByRole" data={data} />
129-
<Row method="getByLabelText" data={data} />
130-
<Row method="getByPlaceholderText" data={data} />
131-
<Row method="getByText" data={data} />
132-
<Row method="getByDisplayValue" data={data} />
133-
134-
<Section>Semantic Queries</Section>
135-
<Row method="getByAltText" data={data} />
136-
<Row method="getByTitle" data={data} />
137-
138-
<Section>TestId</Section>
139-
<Row method="getByTestId" data={data} />
140-
</tbody>
141-
</table>
139+
{/*disabled for the time being*/}
140+
{false && advise.description && (
141+
<blockquote className="text-sm mb-4 italic">
142+
<p className="font-bold text-xs mb-2">{advise.heading}:</p>
143+
<p>{advise.description}</p>
144+
<cite>
145+
<a href={links.which_query.url}>Testing Library</a>
146+
</cite>
147+
</blockquote>
148+
)}
149+
150+
<div className="grid grid-cols-2 gap-4">
151+
<Section>
152+
<Heading>Queries Accessible to Everyone</Heading>
153+
<Field method="getByRole" data={data} />
154+
<Field method="getByLabelText" data={data} />
155+
<Field method="getByPlaceholderText" data={data} />
156+
<Field method="getByText" data={data} />
157+
<Field method="getByDisplayValue" data={data} />
158+
</Section>
159+
160+
<div className="space-y-8">
161+
<Section>
162+
<Heading>Semantic Queries</Heading>
163+
<Field method="getByAltText" data={data} />
164+
<Field method="getByTitle" data={data} />
165+
</Section>
166+
167+
<Section>
168+
<Heading>TestId</Heading>
169+
<Field method="getByTestId" data={data} />
170+
</Section>
171+
</div>
172+
</div>
142173
</div>
143174
);
144175
}

‎src/styles/app.pcss

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,70 @@ body {
2222
@apply bg-white rounded shadow p-4 grid grid-cols-2 gap-8;
2323
}
2424

25+
blockquote {
26+
font-family: Georgia, serif;
27+
font-size: 18px;
28+
font-style: italic;
29+
width: 500px;
30+
margin: 0.25em 0;
31+
padding: 0.35em 40px;
32+
line-height: 1.45;
33+
position: relative;
34+
color: #383838;
35+
}
36+
37+
blockquote:before {
38+
@apply text-gray-400;
39+
40+
font-size: 80px;
41+
display: block;
42+
padding-left: 10px;
43+
content: "\201C";
44+
position: absolute;
45+
left: -20px;
46+
top: -32px;
47+
}
48+
49+
blockquote cite {
50+
@apply text-gray-400 text-sm mt-2 block;
51+
}
52+
53+
blockquote cite:before {
54+
content: "\2014 \2009";
55+
}
56+
57+
.field {
58+
@apply relative cursor-default;
59+
z-index: 1;
60+
}
61+
62+
.field[data-clickable="true"]:hover {
63+
@apply cursor-pointer;
64+
}
65+
66+
.field:before {
67+
@apply block absolute rounded;
68+
z-index: -1;
69+
content: '';
70+
top: -4px;
71+
left: -4px;
72+
right: -4px;
73+
bottom: -4px;
74+
transition: background-color .2s ease;
75+
}
76+
77+
.field[data-clickable="false"]:hover:before {
78+
@apply bg-gray-100;
79+
}
80+
81+
.field[data-clickable="true"]:before {
82+
@apply bg-blue-100;
83+
}
84+
85+
.field[data-clickable="true"]:hover:before {
86+
@apply bg-blue-200;
87+
}
88+
2589
/* purgecss ignore */
2690
.editor .CodeMirror.cm-s-dracula {
2791
border: none;
@@ -35,7 +99,7 @@ body {
3599
}
36100

37101
.output {
38-
@apply text-gray-100 p-4 font-mono text-sm bg-gray-800 bg-gray-800 whitespace-pre;
102+
@apply text-gray-100 p-4 font-mono text-sm bg-gray-800 bg-gray-800 whitespace-pre-wrap;
39103
overflow-x: auto;
40104
}
41105

0 commit comments

Comments
 (0)