Skip to content

Commit 59430eb

Browse files
na-trium-144na-trium-144
committed
テストを /about/runtime に移動
1 parent 00c8a5c commit 59430eb

4 files changed

Lines changed: 18 additions & 144 deletions

File tree

‎app/about/runtime/content.md‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,26 @@ TypeScript は [@typescript/vfs](https://www.npmjs.com/package/@typescript/vfs)
3131

3232
## 外部サービスを利用して実行される言語
3333

34-
以下の言語は、外部のコンパイル・実行サービス（[Wandbox](https://wandbox.org/)）の API を通じて実行されます。
34+
以下の言語は、外部のコンパイル・実行サービスの API を通じて実行されます。
3535
コードはサーバーに送信されてコンパイル・実行され、結果がブラウザに返されます。
36-
そのため、実行にはインターネット接続が必要です。
37-
また、入力したコードが Wandbox のサーバーに送信されることをご了承ください。
36+
37+
> [!WARNING]
38+
> これらの言語の実行環境では、入力したコードが外部サーバーに送信されます。
39+
> 個人情報や機密情報を含むコードは入力しないようにしてください。
3840
3941
### C++
4042

41-
Wandbox の g++ (GNU C++ Compiler) を使用してコンパイル・実行されます。
43+
[Wandbox](https://wandbox.org/) の g++ (GNU C++ Compiler) を使用してコンパイル・実行されます。
4244
最新の安定版コンパイラが使用され、Boost ライブラリも利用可能です。
4345
実行時にエラーが発生した場合は、スタックトレースが表示されます。
4446

4547
### Rust
4648

47-
Wandbox の rustc (Rust コンパイラ) を使用してコンパイル・実行されます。
49+
[Wandbox](https://wandbox.org/) の rustc (Rust コンパイラ) を使用してコンパイル・実行されます。
4850
最新版のコンパイラが使用されます。
4951

50-
---
52+
## 実行環境の動作テスト
53+
54+
以下のボタンをクリックすると、各言語の実行環境がお使いのブラウザで正しく動作するかどうかがテストされます。
5155

52-
外部サービスを利用して実行される言語（C++・Rust）では、入力したコードが外部サーバーに送信されます。
53-
個人情報や機密情報を含むコードは入力しないようにしてください。
56+
<!-- page.tsx でこのmdの直後にテストコンポーネントを表示する -->

‎app/about/runtime/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Metadata } from "next";
22
import { StyledMarkdown } from "@/markdown/markdown";
33
import content from "./content.md?raw";
4+
import { MochaTest } from "@/terminal/mochaTest";
45

56
export const metadata: Metadata = {
67
title: "コード実行環境について",
@@ -11,6 +12,7 @@ export default function RuntimePage() {
1112
return (
1213
<div className="p-4 pb-16 w-full max-w-docs mx-auto">
1314
<StyledMarkdown content={content} />
15+
<MochaTest />
1416
</div>
1517
);
1618
}

app/terminal/page.tsx renamed to app/terminal/mochaTest.tsx

Lines changed: 4 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,23 @@
11
"use client";
22

3-
import { Heading } from "@/markdown/heading";
43
import "mocha/mocha.css";
5-
import { Fragment, useEffect, useRef, useState } from "react";
6-
import { langConstants, RuntimeLang } from "@my-code/runtime/languages";
7-
import { ReplTerminal } from "./repl";
8-
import { EditorComponent } from "./editor";
9-
import { ExecFile } from "./exec";
10-
import { useTerminal } from "./terminal";
4+
import { useEffect, useRef, useState } from "react";
5+
import { RuntimeLang } from "@my-code/runtime/languages";
116
import {
127
RUNTIME_TIMEOUTS,
138
waitForRuntimeReady,
149
} from "@my-code/runtime/tests/utils";
1510
import { replTests } from "@my-code/runtime/tests/repl";
1611
import { fileExecutionTests } from "@my-code/runtime/tests/fileExecution";
1712
import { useRuntimeAll } from "@my-code/runtime/context";
18-
import { captureException } from "@sentry/nextjs";
19-
20-
import { sampleConfig, SampleConfig } from "./sampleConfig";
2113
import { DaisyInfoIcon } from "@/daisyAlertIcon";
22-
23-
export default function RuntimeTestPage() {
24-
return (
25-
<div className="p-4 mx-auto w-full max-w-docs">
26-
<Heading level={1}>Runtime Test Page</Heading>
27-
28-
<Heading level={2}>REPLとコード実行のサンプル</Heading>
29-
{/* name of each tab group should be unique */}
30-
<div className="tabs tabs-box">
31-
{Object.entries(sampleConfig).map(([lang, config]) => (
32-
<Fragment key={lang}>
33-
<input
34-
type="radio"
35-
name="runtime-sample-tabs"
36-
className="tab"
37-
aria-label={lang}
38-
/>
39-
<div className="tab-content border-base-300 bg-base-100">
40-
<RuntimeSample lang={lang as RuntimeLang} config={config} />
41-
</div>
42-
</Fragment>
43-
))}
44-
</div>
45-
46-
<Heading level={2}>Xterm.js Colors</Heading>
47-
<AnsiColorSample />
48-
49-
<button
50-
className="btn mt-4"
51-
onClick={() => {
52-
throw new Error("Sentry Test Error");
53-
}}
54-
>
55-
Sentry Test Error
56-
</button>
57-
58-
<Heading level={2}>自動テスト</Heading>
59-
<MochaTest />
60-
</div>
61-
);
62-
}
63-
64-
function RuntimeSample({
65-
lang,
66-
config,
67-
}: {
68-
lang: RuntimeLang;
69-
config: SampleConfig;
70-
}) {
71-
return (
72-
<div className="flex flex-col">
73-
{config.repl && (
74-
<ReplTerminal
75-
terminalId="1"
76-
language={langConstants(lang)}
77-
initContent={config.replInitContent}
78-
/>
79-
)}
80-
{config.editor &&
81-
Object.entries(config.editor).map(([filename, initContent]) => (
82-
<EditorComponent
83-
key={filename}
84-
language={langConstants(lang)}
85-
filename={filename}
86-
initContent={initContent}
87-
/>
88-
))}
89-
{config.exec && (
90-
<ExecFile
91-
filenames={config.exec}
92-
language={langConstants(lang)}
93-
content=""
94-
/>
95-
)}
96-
{config.readonlyFiles?.map((filename) => (
97-
<EditorComponent
98-
key={filename}
99-
language={langConstants(lang)}
100-
filename={filename}
101-
initContent=""
102-
readonly
103-
/>
104-
))}
105-
</div>
106-
);
107-
}
108-
109-
function AnsiColorSample() {
110-
const { terminalRef, terminalInstanceRef } = useTerminal({
111-
getRows: () => 6,
112-
onReady: () => {
113-
for (let i = 0; i <= 7; i++) {
114-
terminalInstanceRef.current!.write(`\x1b[0;${30 + i}m${30 + i}`);
115-
}
116-
terminalInstanceRef.current!.write("\x1b[0m\n");
117-
terminalInstanceRef.current!.write("\x1b[1m1;");
118-
for (let i = 0; i <= 7; i++) {
119-
terminalInstanceRef.current!.write(`\x1b[1;${30 + i}m${30 + i}`);
120-
}
121-
terminalInstanceRef.current!.write("\x1b[0m\n");
122-
for (let i = 0; i <= 7; i++) {
123-
terminalInstanceRef.current!.write(`\x1b[0;${90 + i}m${90 + i}`);
124-
}
125-
terminalInstanceRef.current!.write("\x1b[0m\n");
126-
terminalInstanceRef.current!.write("\x1b[1m1;");
127-
for (let i = 0; i <= 7; i++) {
128-
terminalInstanceRef.current!.write(`\x1b[1;${90 + i}m${90 + i}`);
129-
}
130-
terminalInstanceRef.current!.write("\x1b[0m\n");
131-
for (let i = 0; i <= 7; i++) {
132-
terminalInstanceRef.current!.write(`\x1b[0;${40 + i}m${40 + i}`);
133-
}
134-
terminalInstanceRef.current!.write("\x1b[0m\n");
135-
for (let i = 0; i <= 7; i++) {
136-
terminalInstanceRef.current!.write(`\x1b[0;${100 + i}m${100 + i}`);
137-
}
138-
},
139-
});
140-
return (
141-
<div className="bg-base-300 border border-accent border-2 shadow-md m-2 p-4 pr-1 rounded-box relative h-max">
142-
<div ref={terminalRef} />
143-
</div>
144-
);
145-
}
14+
import { captureException } from "@sentry/nextjs";
14615

14716
function handleRuntimeError(error: unknown) {
14817
captureException(error);
14918
}
15019

151-
function MochaTest() {
20+
export function MochaTest() {
15221
const runtimeAll = useRuntimeAll();
15322
const runtimeRef = useRef(runtimeAll);
15423
for (const lang of Object.keys(runtimeAll) as RuntimeLang[]) {

‎packages/runtime/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
## tests
2121

2222
* `pnpm run --filter @my-code/runtime test` でvitestを使ってテストを実行できます
23-
* my.code(); の /terminal ページでMochaを使ってテストを実行できます
23+
* my.code(); の /about/runtime ページでMochaを使ってテストを実行できます
2424
* どちらからでも実行できるようテスト本体は ./tests/repl.ts, ./tests/fileExecution.ts に記述しています。
2525
新しい言語の実行環境を追加した場合、ここにテストケースを追加してください。
2626

0 commit comments

Comments
 (0)