Skip to content

Commit d7bc173

Browse files
softmarshmallowsoftmarshmallow
committed
testing client
1 parent 5cb3350 commit d7bc173

File tree

6 files changed

+427
-2
lines changed

6 files changed

+427
-2
lines changed

‎www/next.config.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,14 @@ const packages = [
4848
"@web-builder/styles",
4949
// endregion web builders
5050
// -----------------------------
51+
52+
// testing client
53+
"@codetest/editor-client",
5154
];
5255

5356
/** @type {import('next').NextConfig} */
54-
const nextConfig = {};
57+
const nextConfig = {
58+
transpilePackages: ["@codetest/editor-client"],
59+
};
5560

5661
module.exports = nextConfig;

‎www/pages/tests/index.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Head from "next/head";
2+
import React from "react";
3+
4+
export default function QAIndexPage() {
5+
return (
6+
<>
7+
<Head>
8+
<title>QA - Home</title>
9+
<meta name="description" content="QA Home" />
10+
</Head>
11+
<main>
12+
{/* */}
13+
{/* */}
14+
</main>
15+
</>
16+
);
17+
}

‎www/pages/tests/reports/[key]/index.tsx

+241
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
import React, { useEffect } from "react";
2+
import Head from "next/head";
3+
import { InferGetServerSidePropsType } from "next";
4+
import styled from "@emotion/styled";
5+
import { Client, NodeReportCoverage } from "@codetest/editor-client";
6+
import { CircleIcon, LightningBoltIcon, CodeIcon } from "@radix-ui/react-icons";
7+
type P = InferGetServerSidePropsType<typeof getServerSideProps>;
8+
9+
export default function ReportPage({ _key, data }: P) {
10+
const onRegenerate = () => {
11+
alert("regenerate (not implemented)");
12+
};
13+
14+
return (
15+
<>
16+
<Head>
17+
<title>Report Coverages - @codetest/reports</title>
18+
{/* */}
19+
</Head>
20+
<Main>
21+
<header className="header">
22+
<span>
23+
<code>@codetest/reports</code>
24+
<h1>{_key}</h1>
25+
</span>
26+
<div>
27+
<button title="regenerate" onClick={onRegenerate}>
28+
<LightningBoltIcon />
29+
</button>
30+
</div>
31+
</header>
32+
{/* <code>
33+
<pre>{JSON.stringify(data, null, 2)}</pre>
34+
</code> */}
35+
<div className="nodes">
36+
{Object.keys(data).map((k) => {
37+
const record: NodeReportCoverage = data[k];
38+
return <Item key={k} id={k} {...record} />;
39+
})}
40+
</div>
41+
<footer />
42+
</Main>
43+
</>
44+
);
45+
}
46+
47+
const Main = styled.main`
48+
color: white;
49+
font-family: monospace;
50+
width: 400px;
51+
margin: auto;
52+
53+
/* */
54+
.nodes {
55+
display: flex;
56+
flex-direction: column;
57+
gap: 16px;
58+
}
59+
60+
header.header {
61+
margin: 120px 0 40px 0;
62+
display: flex;
63+
align-items: center;
64+
justify-content: space-between;
65+
66+
h1 {
67+
margin: 0;
68+
}
69+
70+
.actions {
71+
display: flex;
72+
align-items: center;
73+
gap: 4px;
74+
}
75+
}
76+
77+
footer {
78+
height: 200px;
79+
}
80+
`;
81+
82+
function Item({ id, a, b, diff, report }: NodeReportCoverage & { id: string }) {
83+
const [focus, setFocus] = React.useState<"a" | "b" | null>(null);
84+
85+
const onInspect = () => {
86+
alert("inspect (not implemented)");
87+
};
88+
89+
const onRegenerate = () => {
90+
alert("regenerate (not implemented)");
91+
};
92+
93+
return (
94+
<ItemContainer>
95+
<header>
96+
<p className="title">
97+
<CircleIcon />
98+
{id} {focus && <span>({focus})</span>}
99+
</p>
100+
<div className="actions">
101+
<button title="inspect" onClick={onInspect}>
102+
<CodeIcon />
103+
</button>
104+
<button title="regenerate" onClick={onRegenerate}>
105+
<LightningBoltIcon />
106+
</button>
107+
</div>
108+
</header>
109+
<div className="view" data-focus={focus}>
110+
<img className="a" src={a} alt="A" />
111+
<img className="b" src={b} alt="B" />
112+
<img className="c" src={diff} alt="C" />
113+
<div
114+
className="hover-area hover-area-left"
115+
onMouseEnter={() => setFocus("a")}
116+
onMouseLeave={() => setFocus(null)}
117+
/>
118+
<div
119+
className="hover-area hover-area-right"
120+
onMouseEnter={() => setFocus("b")}
121+
onMouseLeave={() => setFocus(null)}
122+
/>
123+
</div>
124+
</ItemContainer>
125+
);
126+
}
127+
128+
const ItemContainer = styled.div`
129+
display: flex;
130+
flex-direction: column;
131+
132+
border-radius: 2px;
133+
border: 1px solid rgba(255, 255, 255, 0.1);
134+
overflow: hidden;
135+
136+
width: 400px;
137+
height: 100%;
138+
139+
header {
140+
color: white;
141+
display: flex;
142+
flex-direction: row;
143+
align-items: center;
144+
justify-content: space-between;
145+
padding: 16px;
146+
.title {
147+
display: flex;
148+
align-items: center;
149+
gap: 8px;
150+
}
151+
152+
.actions {
153+
display: flex;
154+
align-items: center;
155+
gap: 4px;
156+
}
157+
}
158+
159+
.view {
160+
position: relative;
161+
display: flex;
162+
flex-direction: row;
163+
align-items: center;
164+
165+
.a,
166+
.b,
167+
.c {
168+
position: relative;
169+
z-index: 1;
170+
flex: 1 0 auto;
171+
width: 100%;
172+
height: auto;
173+
}
174+
175+
.a,
176+
.b {
177+
pointer-events: none;
178+
position: absolute;
179+
top: 0;
180+
left: 0;
181+
right: 0;
182+
bottom: 0;
183+
width: 100%;
184+
height: 100%;
185+
opacity: 0.5;
186+
transition: opacity 0.1s ease-in-out;
187+
}
188+
189+
&[data-focus="a"] .a {
190+
z-index: 9;
191+
opacity: 1;
192+
}
193+
194+
&[data-focus="b"] .b {
195+
z-index: 9;
196+
opacity: 1;
197+
}
198+
199+
.hover-area {
200+
position: absolute;
201+
top: 0;
202+
bottom: 0;
203+
width: 50%;
204+
height: 100%;
205+
z-index: 2;
206+
}
207+
208+
.hover-area-left {
209+
cursor: w-resize;
210+
left: 0;
211+
}
212+
213+
.hover-area-right {
214+
cursor: e-resize;
215+
right: 0;
216+
}
217+
}
218+
`;
219+
220+
export async function getServerSideProps(context: any) {
221+
const key = context.params.key;
222+
223+
const client = Client({
224+
baseURL: "http://localhost:6627",
225+
});
226+
227+
try {
228+
const { data } = await client.file({ file: key });
229+
230+
return {
231+
props: {
232+
_key: key,
233+
data,
234+
},
235+
};
236+
} catch (e) {
237+
return {
238+
notFound: true,
239+
};
240+
}
241+
}

‎www/pages/tests/reports/how-to-setup.tsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import Head from "next/head";
2+
import { useRouter } from "next/router";
3+
import React from "react";
4+
5+
export default function HowToSetupReports() {
6+
const router = useRouter();
7+
8+
return (
9+
<>
10+
<Head>
11+
<title>How to setup local server for @codetest/reports</title>
12+
</Head>
13+
14+
<main
15+
style={{
16+
textAlign: "center",
17+
width: 400,
18+
margin: "auto",
19+
}}
20+
>
21+
<h1>
22+
How to setup local server for <code>@codetest/reports</code>
23+
</h1>
24+
<p>
25+
<code>@codetest/reports</code> is a package that allows you to run
26+
engine tests locally, due to its high maintainance cost, we don&apos;t
27+
provide official reports server yet.
28+
<br />
29+
<br />
30+
<b>To generate reports, run the following command:</b>
31+
<br />
32+
<br />
33+
<code>
34+
cd testing/reports
35+
<br />
36+
yarn build
37+
<br />
38+
yarn start
39+
</code>
40+
<br />
41+
<br />
42+
<b>To run local reports server, run the following command:</b>
43+
<br />
44+
<br />
45+
<code>
46+
cd testing/server
47+
<br />
48+
yarn dev
49+
</code>
50+
<br />
51+
<br />
52+
<b>Go back to the page after server has started</b>
53+
<br />
54+
<br />
55+
<button
56+
onClick={() => {
57+
router.replace("/tests/reports");
58+
}}
59+
>
60+
I&apos;ve started the server, Go back to the page
61+
</button>
62+
</p>
63+
</main>
64+
</>
65+
);
66+
}

0 commit comments

Comments
 (0)