バリデーション用の関数を追加 (#8)

neet · neet · commit 4b222650379e · 2018-09-20T14:27:57.000+09:00
diff --git a/package.nls.json b/package.nls.json
@@ -34,10 +34,12 @@
   "quickpicks.tagQuickPick.title": "投稿に登録するタグを入力してください",
   "quickpicks.tagQuickPick.placeholder": "例) Rails React Mastodon",
   "quickpicks.tagQuickPick.item.description": "{0}件の投稿",
+  "quickpicks.tagQuickPick.failure.validationError": "タグは1つ以上5つ以内で選択してください。",
 
   "quickpicks.titleInputBox.title": "投稿のタイトルを入力してください",
   "quickpicks.titleInputBox.placeholder": "例) サルでもわかる！Rails入門",
-  "quickpicks.titleInputBox.validationMessage": "タイトルは255文字まで有効です",
+  "quickpicks.titleInputBox.validationMessage": "タイトルは1文字から255文字まで有効です",
+  "quickpicks.titleInputBox.failure.validationError": "タイトルは1文字以上255文字以内で入力してください。",
 
   "quickpicks.visibilityQuickPick.title": "投稿の公開範囲を選択してください",
   "quickpicks.visibilityQuickPick.public.label": "公開",
diff --git a/src/commands/compose.ts b/src/commands/compose.ts
@@ -3,17 +3,14 @@ import { commands, Uri, window, workspace } from 'vscode';
 import * as nls from 'vscode-nls';
 import { client } from '../client';
 import { configuration } from '../configuration';
-import { tagQuickPickCreator } from '../quickpicks/tagQuickPickCreator';
-import { titleInputBoxCreator } from '../quickpicks/titleInputBoxCreator';
+import { tagQuickPickCreator, validateTagQuickPick } from '../quickpicks/tagQuickPickCreator';
+import { titleInputBoxCreator, validateTitleInputBox } from '../quickpicks/titleInputBoxCreator';
 import { privateLabel, visibilityQuickPickCreator } from '../quickpicks/visibilityQuickPickCreator';
-import { createMultiStepInput } from '../utils/createMultiStepInput';
 import { handleErrorMessage } from '../utils/errorHandler';
 import { getFilenameFromPath } from '../utils/getFilenameFromPath';
 
 const localize = nls.loadMessageBundle();
 
-
-
 /**
  * アクティブなテキストエディタから投稿を公開するコマンドパレット向け関数
  * @param resource コマンドがexplorerから発火した際に渡される引数
@@ -32,10 +29,9 @@ export async function compose (resource?: { path: string }) {
   if (resource && resource.path) {
     options.title = getFilenameFromPath(resource.path);
     options.body  = await workspace.openTextDocument(resource.path).then((document) => document.getText());
-  }
 
   // テキストエディタから発火した場合
-  if (window.activeTextEditor) {
+  } else if (window.activeTextEditor) {
     options.title = getFilenameFromPath(window.activeTextEditor.document.fileName);
     options.body  = window.activeTextEditor.document.getText();
   }
@@ -44,26 +40,49 @@ export async function compose (resource?: { path: string }) {
   const tagsQuickPick       = tagQuickPickCreator();
   const visibilityQuickPick = visibilityQuickPickCreator();
 
+  // ステップ数を追加
+  [titleInputBox, tagsQuickPick, visibilityQuickPick].forEach((step, i, steps) => {
+    step.totalSteps = steps.length;
+    step.step = i;
+  });
+
   // titleInputBoxからタイトルを代入
   titleInputBox.onDidAccept(() => {
-    options.title = titleInputBox.value;
+    if (!validateTitleInputBox(titleInputBox)) {
+      window.showErrorMessage(localize(
+        'quickpicks.titleInputBox.failure.validationError',
+        'タイトルは1文字以上255文字以内で入力してください。',
+      ));
+    } else {
+      options.title = titleInputBox.value;
+      titleInputBox.hide();
+      tagsQuickPick.show();
+    }
   });
 
   // tagQuickPickからタグを代入
   tagsQuickPick.onDidAccept(() => {
-    options.tags = tagsQuickPick.selectedItems.map((item) => ({
-      name: item.label,
-      versions: [],
-    }));
+    if (!validateTagQuickPick(tagsQuickPick)) {
+      window.showErrorMessage(localize(
+        'quickpicks.tagQuickPick.failure.validationError',
+        'タグは1つ以上5つ以内で選択してください。',
+      ));
+    } else {
+      options.tags = tagsQuickPick.selectedItems.map((item) => ({
+        name: item.label,
+        versions: [],
+      }));
+      tagsQuickPick.hide();
+      visibilityQuickPick.show();
+    }
   });
 
   // visibilityQuickPick終了時に公開状態を代入してQiita.createItemを呼び出し
   visibilityQuickPick.onDidAccept(async () => {
     options.private = visibilityQuickPick.selectedItems[0].label === privateLabel;
+    visibilityQuickPick.hide();
 
     try {
-      visibilityQuickPick.hide();
-
       const item = await client.createItem(options);
 
       const openInBrowser = localize(
@@ -82,16 +101,11 @@ export async function compose (resource?: { path: string }) {
       if (result === openInBrowser) {
         commands.executeCommand('vscode.open', Uri.parse(item.url));
       }
-
-      return;
     } catch (error) {
-      return handleErrorMessage(error);
+      handleErrorMessage(error);
     }
   });
 
-  createMultiStepInput([
-    titleInputBox,
-    tagsQuickPick,
-    visibilityQuickPick,
-  ])();
+  // 1つ目のステップから帰納的に呼び出し
+  titleInputBox.show();
 }
diff --git a/src/commands/editTags.ts b/src/commands/editTags.ts
@@ -2,7 +2,7 @@ import { Item } from 'qiita-js-2';
 import { QuickPickItem, window } from 'vscode';
 import * as nls from 'vscode-nls';
 import { client } from '../client';
-import { makeQuickPickItemFromTag, tagQuickPickCreator } from '../quickpicks/tagQuickPickCreator';
+import { makeQuickPickItemFromTag, tagQuickPickCreator, validateTagQuickPick } from '../quickpicks/tagQuickPickCreator';
 import { handleErrorMessage } from '../utils/errorHandler';
 
 const localize = nls.loadMessageBundle();
@@ -26,21 +26,30 @@ export const updater = async (item: Item, selectedItems: ReadonlyArray<QuickPick
  */
 export async function editTags (arg: object & { item: Item }) {
   const { item } = arg;
-  const { tags: taggings } = arg.item;
+  const taggings = arg.item.tags;
 
+  // 既存のタグを取得してselectedItemsとして初期化
   const selectedItems = await Promise.all(taggings.map(async (tagging) => {
     const tag = await client.fetchTag(tagging.name);
     return makeQuickPickItemFromTag(tag.id, tag.followers_count);
   }));
 
-  const input = tagQuickPickCreator(selectedItems);
+  const quickPick = tagQuickPickCreator(selectedItems);
 
-  input.show();
+  quickPick.show();
+
+  quickPick.onDidAccept(async () => {
+    if (!validateTagQuickPick(quickPick)) {
+      return window.showErrorMessage(localize(
+        'quickpicks.tagQuickPick.failure.validationError',
+        'タグは1つ以上5つ以内で選択してください。',
+      ));
+    }
 
-  input.onDidAccept(async () => {
     try {
-      input.hide();
-      await updater(item, input.selectedItems);
+      quickPick.hide();
+
+      await updater(item, quickPick.selectedItems);
 
       return window.showInformationMessage(localize(
         'commands.editTags.success',
diff --git a/src/quickpicks/tagQuickPickCreator.ts b/src/quickpicks/tagQuickPickCreator.ts
@@ -1,5 +1,5 @@
 import { SearchTagResult } from 'qiita-js-2';
-import { QuickPickItem, window } from 'vscode';
+import { QuickPick, QuickPickItem, window } from 'vscode';
 import * as nls from 'vscode-nls';
 import { client } from '../client';
 
@@ -20,6 +20,16 @@ export const makeQuickPickItemFromTag = (id: string, followersCount: number) =>
   ),
 });
 
+/**
+ * タグのバリデーション
+ * タグは1件以上5件以内のみ可能
+ * @param selectedItems 選択済みアイテム
+ * @return 真理値の結果
+ */
+export const validateTagQuickPick = (quickPick: QuickPick<QuickPickItem>) => {
+  return quickPick.selectedItems.length >= 1 && quickPick.selectedItems.length <= 5;
+};
+
 /**
  * ユーザーからの入力が検索結果に無いときにその入力を結果の先頭に挿入
  * @param value ユーザーの入力
@@ -73,8 +83,7 @@ export function tagQuickPickCreator (selectedItems?: QuickPickItem[]) {
     quickPick.busy       = true;
     const suggestedItems = await suggestTags(value);
     quickPick.busy       = false;
-
-    quickPick.items         = quickPick.selectedItems.concat(suggestedItems);
+    quickPick.items      = quickPick.selectedItems.concat(suggestedItems);
     quickPick.selectedItems = quickPick.selectedItems;
   });
 
diff --git a/src/quickpicks/titleInputBoxCreator.ts b/src/quickpicks/titleInputBoxCreator.ts
@@ -1,8 +1,17 @@
-import { window } from 'vscode';
+import { InputBox, window } from 'vscode';
 import * as nls from 'vscode-nls';
 
 const localize = nls.loadMessageBundle();
 
+/**
+ * タイトルのバリデーション 1文字以上255文字以内
+ * @param value バリデートするタイトル
+ * @return 結果を示す真理値
+ */
+export const validateTitleInputBox = (inputBox: InputBox) => {
+  return inputBox.value.length >= 1 && inputBox.value.length <= 255;
+};
+
 /**
  * タイトルを指定させるInputBoxを作成
  * @param defaultValue 初期のタイトル
@@ -24,11 +33,13 @@ export function titleInputBoxCreator (defaultValue?: string) {
   );
 
   inputBox.onDidChangeValue(() => {
-    if (inputBox.value.length > 255) {
+    if (!validateTitleInputBox(inputBox)) {
       inputBox.validationMessage = localize(
         'quickpicks.titleInputBox.validationMessage',
         'タイトルは255文字まで有効です',
       );
+    } else {
+      inputBox.validationMessage = '';
     }
   });
 
diff --git a/src/test/quickpicks/tagsQuickPickCreator.test.ts b/src/test/quickpicks/tagsQuickPickCreator.test.ts
@@ -1,5 +1,10 @@
 import { expect } from 'chai';
-import { insertInputRaw, makeQuickPickItemFromTag } from '../../quickpicks/tagQuickPickCreator';
+import {
+  insertInputRaw,
+  makeQuickPickItemFromTag,
+  tagQuickPickCreator,
+  validateTagQuickPick,
+} from '../../quickpicks/tagQuickPickCreator';
 
 describe('tagQuickPickCreator', () => {
   it('渡されたIDと文字列からQuickPickItemを返す', () => {
@@ -20,4 +25,25 @@ describe('tagQuickPickCreator', () => {
 
     expect(result).to.deep.include({ name: 'apple', url_name: 'apple', follower_count: 0, item_count: 0});
   });
+
+  it('選択されたアイテムが0件のときにバリデーションエラー', () => {
+    const quickPick = tagQuickPickCreator([]);
+    const result  = validateTagQuickPick(quickPick);
+
+    expect(result).to.be.false;
+  });
+
+  it('選択されたアイテムが5件以上のときにバリデーションエラー', () => {
+    const quickPick = tagQuickPickCreator([
+      { label: 'apple',     description: '1件の投稿' },
+      { label: 'microsoft', description: '2件の投稿' },
+      { label: 'facebook',  description: '3件の投稿' },
+      { label: 'google',    description: '4件の投稿' },
+      { label: 'intel',     description: '5件の投稿' },
+      { label: 'sony',      description: '6件の投稿' },
+    ]);
+    const result = validateTagQuickPick(quickPick);
+
+    expect(result).to.be.false;
+  });
 });
diff --git a/src/test/quickpicks/titleInputBoxCreator.test.ts b/src/test/quickpicks/titleInputBoxCreator.test.ts
@@ -1,15 +1,24 @@
 import { expect } from 'chai';
-import { titleInputBoxCreator } from '../../quickpicks/titleInputBoxCreator';
+import {
+  titleInputBoxCreator,
+  validateTitleInputBox,
+} from '../../quickpicks/titleInputBoxCreator';
 
 describe('titleInputBoxCreator', () => {
   it('デフォルトの値を指定してInputBoxを作成', () => {
     const inputBox = titleInputBoxCreator('タイトルです');
     expect(inputBox.value).to.be.equal('タイトルです');
   });
 
-  // 値を直接変更したらonDidChangeValueが呼ばれないみたいです >_<
-  // it('255文字以上の際に警告を表示', () => {
-  //   const inputBox = titleInputBoxCreator('0123456789'.repeat(26));
-  //   expect(inputBox.validationMessage).to.be.a('string');
-  // });
+  it('0文字の際にバリデーションエラー', () => {
+    const inputBox = titleInputBoxCreator('');
+    const result = validateTitleInputBox(inputBox);
+    expect(result).to.be.false;
+  });
+
+  it('255文字以上の際にバリデーションエラー', () => {
+    const inputBox = titleInputBoxCreator('0123456789'.repeat(26));
+    const result = validateTitleInputBox(inputBox);
+    expect(result).to.be.false;
+  });
 });
diff --git a/src/test/utils/getFilenameFromPath.test.ts b/src/test/utils/getFilenameFromPath.test.ts
@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import { getFilenameFromPath } from '../../utils/getFilenameFromPath';
 
-describe('compose', () => {
+describe('getFilenameFromPath', () => {
   it('パスから拡張子を除いたファイル名を取得', () => {
     const path = 'file:///test.md';
     const result = getFilenameFromPath(path);
