CLIのスナップショットテストを追加する

Node.js v24のnode:testに含まれるt.assert.snapshot()を使い、
bin/cgmd.jsのテストを追加する。

- 引数なし（エラー終了・エラーメッセージ）
- --helpオプション（ヘルプテキスト出力）
- 文字列入力（通常Markdownと CGMD構文の変換）
- ファイル入力（example/cg.mdの変換）

スナップショットはtest/cgmd/cli.js.snapshotに保存される。
更新する場合はnpm run test:update-snapshotsを使う。

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: myakura

package.json

@@ -26,6 +26,7 @@
   "scripts": {
     "test": "node --enable-source-maps --import @power-assert/node --test",
     "test:watch": "node --enable-source-maps --import @power-assert/node --test --watch",
+    "test:update-snapshots": "node --enable-source-maps --import @power-assert/node --test --test-update-snapshots",
     "example": "node example/main.js > example/rendered.html"
   },
   "repository": {

test/cgmd/cli.js

@@ -0,0 +1,62 @@
+import { spawnSync } from 'node:child_process';
+import { describe, it } from 'node:test';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const CLI = join(__dirname, '../../bin/cgmd.js');
+
+function runCLI(args) {
+  return spawnSync('node', [CLI, ...args], { encoding: 'utf8' });
+}
+
+describe('CodeGridMarkdown - CLI', function () {
+
+  describe('引数なし', function () {
+    it('エラーで終了すること', function (t) {
+      const result = runCLI([]);
+      t.assert.strictEqual(result.status, 1);
+    });
+
+    it('エラーメッセージが出ること', async (t) => {
+      const result = runCLI([]);
+      await t.assert.snapshot(result.stderr);
+    });
+  });
+
+  describe('--help', function () {
+    it('ヘルプを出力して終了すること', function (t) {
+      const result = runCLI(['--help']);
+      t.assert.strictEqual(result.status, 0);
+    });
+
+    it('ヘルプテキストが出ること', async (t) => {
+      const result = runCLI(['--help']);
+      await t.assert.snapshot(result.stdout);
+    });
+  });
+
+  describe('文字列入力（ファイルが存在しない場合は文字列として扱う）', function () {
+    it('MarkdownをHTMLに変換できること', async (t) => {
+      const result = runCLI(['# Hello\n\nWorld']);
+      t.assert.strictEqual(result.status, 0);
+      await t.assert.snapshot(result.stdout);
+    });
+
+    it('CGMD構文を含むMarkdownを変換できること', async (t) => {
+      const result = runCLI(['[note]\nこれはノートです。\n[/note]']);
+      t.assert.strictEqual(result.status, 0);
+      await t.assert.snapshot(result.stdout);
+    });
+  });
+
+  describe('ファイル入力', function () {
+    it('example/cg.mdを変換できること', async (t) => {
+      const mdFile = join(__dirname, '../../example/cg.md');
+      const result = runCLI([mdFile]);
+      t.assert.strictEqual(result.status, 0);
+      await t.assert.snapshot(result.stdout);
+    });
+  });
+
+});

test/cgmd/cli.js.snapshot

@@ -0,0 +1,19 @@
+exports[`CodeGridMarkdown - CLI > --help > ヘルプテキストが出ること 1`] = `
+"Usage: cgmd <path/to/your/text.md> [options]\\n\\nOptions:\\n  -o, --out <path>   Output path\\n  -h, --help         Show help\\n"
+`;
+
+exports[`CodeGridMarkdown - CLI > ファイル入力 > example/cg.mdを変換できること 1`] = `
+"<h2>はじめに</h2>\\n<p>グリッド・カラムレイアウトといえば、以前紹介したFlexible Box（<a href=\\"https://app.codegrid.net/entry/flexiblebox-1\\">そこが知りたい、Flexible Box</a>）や<code>display:table;</code>を利用したマルチカラムレイアウト（<a href=\\"https://app.codegrid.net/entry/css-table-1\\">第1回 display: tableの活用 1</a>）などがあります。また、CodeGridではまだ紹介していませんが、<a href=\\"https://www.w3.org/TR/css3-multicol/#columns\\">CSS Multi-column Layout Module</a>もマルチカラムレイアウトをする上で重要です。</p>\\n<div class=\\"Note\\">\\n<h1>*注：Flexible Boxやマルチカラムレイアウト</h1>\\n<p>CodeGridでは以下の記事で紹介しました。</p>\\n<ul>\\n<li>「<a href=\\"https://app.codegrid.net/series/2015-css-flexiblebox\\">そこが知りたい、Flexible Box</a>」シリーズ</li>\\n<li>「<a href=\\"https://app.codegrid.net/entry/css-table-1\\">第1回 display: tableの活用 1</a>」</li>\\n</ul>\\n\\n</div>\\n<h2>何ができるのか</h2>\\n<p>Grid Layout Moduleでは、CSS上でレイアウト情報を定義することができます。<code>display: grid;</code>が指定された親要素にグリッドレイアウト情報を定義し、その子要素では、そのグリッドのどこに配置されるかを定義します。table要素を利用したテーブルレイアウトと似たように思えますが、table要素がHTML側でレイアウト構造を指定することに対し、Grid Layout ModuleではCSS側で、どのようなレイアウト構造にするかを指定します。</p>\\n<figure class=\\"ImgBox\\">\\n<h1>ゲーム画面のレイアウト</h1>\\n<p><img src=\\"https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/img/img01.png\\" alt=\\"\\"></p>\\n\\n</figure>\\n<p>広い画面と狭い画面でレイアウトを変更しています。これをGrid Layout Moduleを使い、実現します。</p>\\n<p>まずはHTML部分です。HTMLの構造は非常に単純です。</p>\\n<section class=\\"CG2-livecode\\">\\n<header class=\\"CG2-livecode__header\\">\\n<div class=\\"CG2-livecode__label\\">display:gridのHTMLの例</div>\\n</header>\\n<div class=\\"CG2-livecode__body\\"><pre><code class=\\"lang-html\\">&lt;div class=\\"grid\\"&gt;\\n  &lt;div class=\\"title\\"&gt;Title&lt;/div&gt;\\n  &lt;div class=\\"status\\"&gt;Status&lt;/div&gt;\\n  &lt;div class=\\"memberList\\"&gt;Member List&lt;/div&gt;\\n  &lt;div class=\\"gameWindow\\"&gt;Game Window&lt;/div&gt;\\n  &lt;div class=\\"chatWindow\\"&gt;Chat Window&lt;/div&gt;\\n&lt;/div&gt;\\n</code></pre>\\n</div>\\n</section>\\n<p>次にCSS部分です。<code>display: grid;</code>などを使用して、レイアウト情報を指定します。画面幅が狭くなった時には、メディアクエリでレイアウトを再定義しています。</p>\\n<pre><code class=\\"lang-css\\">/* landscape */\\n.grid {\\n  display: grid;\\n  grid-template-columns: auto 1fr;\\n  grid-template-rows: auto 1fr auto;\\n}\\n.chatWindow {\\n  grid-area: 3 / 2;\\n}\\n</code></pre>\\n<p>たったこれだけで、HTMLの構造からは想像しづらいレイアウトを実現することができます。このデモを新しいウィンドウで開き、ウィンドウサイズを変化させてみると、レイアウトが変更されることを確認できるはずです。</p>\\n<div class=\\"Column\\">\\n<h1>コラム：古いシンタックスと最新のシンタックス</h1>\\n<p>もしIE10以降やEdgeにも対応したい場合は、Autoprefixerを併用することをおすすめします。この記事の執筆中にAutoprefixerのバージョンが上がり（<a href=\\"https://github.com/postcss/autoprefixer/releases/tag/6.3.0\\">6.3 “Pro rege et lege”</a>）、最新の仕様に沿った記述をすれば、IE用の記述にも対応ができます。ですが、すべてのGrid Layout Moduleに関するプロパティが古い仕様に対応しているわけではないので注意が必要です。</p>\\n<pre><code class=\\"lang-css\\">.nested-code-block {\\n  in: the-cg-colum;\\n}\\n</code></pre>\\n\\n</div>\\n<h2>Grid Layout Moduleに登場する用語</h2>\\n<p>Grid Layout Moduleの理解を深めるには、そこに登場する用語を知っておく必要があります。ここで紹介する用語は以下のとおりです。</p>\\n<ul>\\n<li>グリッドコンテナ</li>\\n<li>グリッドエリア</li>\\n</ul>\\n<p>まずは、Grid Layout Moduleに登場する用語の中で最も大事な、グリッドコンテナとグリッドアイテムについて解説します。</p>\\n<p>グリッドコンテナに関連するプロパティは以下の通りです。</p>\\n<table>\\n<thead>\\n<tr>\\n<th>プロパティ</th>\\n<th>意味</th>\\n</tr>\\n</thead>\\n<tbody><tr>\\n<td><code>grid</code></td>\\n<td><code>grid-template</code>、<code>grid-auto-flow</code>、<code>grid-auto-rows</code>、<code>grid-auto-columns</code>を指定できるショートハンドプロパティ</td>\\n</tr>\\n<tr>\\n<td><code>grid-template</code></td>\\n<td><code>grid-template-columns</code>、<code>grid-template-rows</code>、<code>grid-template-areas</code>を指定できるショートハンドプロパティ</td>\\n</tr>\\n<tr>\\n<td><code>grid-template-rows</code></td>\\n<td>行のグリッドトラックそれぞれのサイズを指定する</td>\\n</tr>\\n</tbody></table>\\n<p>これらのプロパティを駆使して、レイアウト情報を指定します。<code>justify-content</code>や<code>align-content</code>などは、Flexible Boxで解説したものと同じです。</p>\\n<h2>まとめ</h2>\\n<p>今回はひとまず基本となる概念、グリッドコンテナとグリッドアイテムについて解説しました。次回はさらにグリッドを基本とするレイアウトに必要な概念と、その実装について解説を進めていきます。じっくりお付き合いください。</p>\\n<pre><code>ここは何もついてないブロック\\n</code></pre>\\n<pre><code class=\\"lang-html\\">&lt;div&gt;escape?&lt;/div&gt;\\n</code></pre>\\n<div class=\\"Column\\">\\n<h1>コラム</h1>\\n<p>もしIE10</p>\\n<section class=\\"CG2-livecode\\">\\n<header class=\\"CG2-livecode__header\\">\\n<div class=\\"CG2-livecode__label\\">コラムのコード</div>\\n</header>\\n<div class=\\"CG2-livecode__body\\"><pre><code class=\\"lang-css\\">.nested-code-block {\\n  in: the-cg-colum;\\n}\\n</code></pre>\\n</div>\\n</section>\\n\\n</div>\\n<p>このデモが問題</p>\\n<section class=\\"CG2-livecode\\"><header class=\\"CG2-livecode__header\\"><div class=\\"CG2-livecode__label\\">display: gridを利用したレイアウト</div><div class=\\"CG2-livecode__nav\\"><ul><li><a href=\\"https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html\\">新規タブで開く</a></li></ul></div></header><div class=\\"CG2-livecode__body\\"><iframe src=\\"https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html\\"></iframe></div></section>\\n<section class=\\"CG2-livecode\\"><header class=\\"CG2-livecode__header\\"><div class=\\"CG2-livecode__label\\">display: gridを利用したレイアウト(遅延開始)</div><div class=\\"CG2-livecode__nav\\"><ul><li><a href=\\"https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html\\">新規タブで開く</a></li></ul></div></header><div class=\\"CG2-livecode__body\\"><iframe src=\\"https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html\\" data-deferred=\\"\\"></iframe></div></section>\\n<p>タイトルのないデモ</p>\\n<section class=\\"CG2-livecode\\"><header class=\\"CG2-livecode__header\\"><div class=\\"CG2-livecode__label\\"></div><div class=\\"CG2-livecode__nav\\"><ul><li><a href=\\"https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html\\">新規タブで開く</a></li></ul></div></header><div class=\\"CG2-livecode__body\\"><iframe src=\\"https://s3-ap-northeast-1.amazonaws.com/codegrid/2016-display-grid/demo/1/index.html\\" data-deferred=\\"\\"></iframe></div></section>\\n<p>見出しのないファイルツリー</p>\\n<div class=\\"Tree\\">\\n<ul>\\n<li class=\\"directory\\"><details open=\\"true\\"><summary>src/\\n</summary><ul>\\n<li class=\\"directory\\"><details open=\\"true\\"><summary>styles/\\n</summary><ul>\\n<li data-file-type=\\"css\\" class=\\"file\\">base.css</li>\\n<li data-file-type=\\"css\\" class=\\"file\\">color.css</li>\\n<li data-file-type=\\"css\\" class=\\"file\\">layout.css</li>\\n<li data-file-type=\\"css\\" class=\\"file\\">reset.css</li>\\n<li data-file-type=\\"css\\" class=\\"file\\">space.css</li>\\n<li data-file-type=\\"\\" class=\\"file\\">...</li>\\n</ul></details></li>\\n<li class=\\"directory\\"><details open=\\"true\\"><summary><strong>components/</strong>\\n</summary><ul>\\n<li class=\\"directory\\"><details open=\\"true\\"><summary>layout/\\n</summary><ul>\\n<li data-file-type=\\"Astro\\" class=\\"file\\">PageLayout.Astro</li>\\n<li data-file-type=\\"\\" class=\\"file\\">...</li>\\n</ul></details></li>\\n<li class=\\"directory\\"><details><summary><strong>a-lot-of-files/</strong></summary><ul><li class=\\"file\\">...</li></ul></details></li>\\n</ul></details></li>\\n</ul></details></li>\\n<li data-file-type=\\"json\\" class=\\"file\\">package.json</li>\\n</ul>\\n\\n</div>\\n<p>見出しのあるファイルツリー</p>\\n<div class=\\"Tree\\">\\n<h3>CSSとテンプレートの構成</h3>\\n<ul>\\n<li class=\\"directory\\"><details open=\\"true\\"><summary>src/\\n</summary><ul>\\n<li class=\\"directory\\"><details open=\\"true\\"><summary>styles/\\n</summary><ul>\\n<li data-file-type=\\"css\\" class=\\"file\\">base.css</li>\\n<li data-file-type=\\"css\\" class=\\"file\\">color.css</li>\\n<li data-file-type=\\"css\\" class=\\"file\\">layout.css</li>\\n<li data-file-type=\\"css\\" class=\\"file\\"><strong>reset.css</strong></li>\\n<li data-file-type=\\"css\\" class=\\"file\\">space.css</li>\\n<li data-file-type=\\"\\" class=\\"file\\">...</li>\\n</ul></details></li>\\n<li class=\\"directory\\"><details open=\\"true\\"><summary><del>components/</del>\\n</summary><ul>\\n<li class=\\"directory\\"><details open=\\"true\\"><summary>layout/\\n</summary><ul>\\n<li data-file-type=\\"Astro\\" class=\\"file\\">PageLayout.Astro</li>\\n<li data-file-type=\\"\\" class=\\"file\\">...</li>\\n</ul></details></li>\\n</ul></details></li>\\n</ul></details></li>\\n<li data-file-type=\\"json\\" class=\\"file\\">package.json</li>\\n</ul>\\n\\n</div>\\n\\n"
+`;
+
+exports[`CodeGridMarkdown - CLI > 引数なし > エラーメッセージが出ること 1`] = `
+"Provide a path to a markdown file or markdown text.\\nUsage: cgmd <path/to/your/text.md> [options]\\n\\nOptions:\\n  -o, --out <path>   Output path\\n  -h, --help         Show help\\n"
+`;
+
+exports[`CodeGridMarkdown - CLI > 文字列入力（ファイルが存在しない場合は文字列として扱う） > CGMD構文を含むMarkdownを変換できること 1`] = `
+"<div class=\\"Note\\">\\n<p>これはノートです。</p>\\n\\n</div>\\n\\n"
+`;
+
+exports[`CodeGridMarkdown - CLI > 文字列入力（ファイルが存在しない場合は文字列として扱う） > MarkdownをHTMLに変換できること 1`] = `
+"<h1>Hello</h1>\\n<p>World</p>\\n\\n"
+`;