feat: チュートリアル・初期設定ウィザードの統合

CHANGELOG.md

@@ -4,6 +4,8 @@
 -
 
 ### Client
+- Feat: チュートリアルと初期設定ダイアログを統合
+  - 管理者は新規登録したユーザーにチュートリアルを強制することができるように
 - Enhance: PC画面でチャンネルが複数列で表示されるように  
   (Cherry-picked from https://github.com/Otaku-Social/maniakey/pull/13)
 - Fix: 画面サイズが変わった際にナビゲーションバーが自動で折りたたまれない問題を修正

cypress/e2e/basic.cy.ts

@@ -52,7 +52,7 @@ describe('After setup instance', () => {
     cy.visitHome();
   });
 
-	it('signup', () => {
+	it('signup / onboarding', () => {
 		cy.visitHome();
 
 		cy.intercept('POST', '/api/signup').as('signup');
@@ -74,6 +74,60 @@ describe('After setup instance', () => {
 		cy.get('[data-cy-signup-submit]').click();
 
 		cy.wait('@signup');
+
+		// /onboarding にリダイレクトされる
+		cy.wait(5000);
+		cy.url().should('equal', Cypress.config().baseUrl + '/onboarding');
+
+		// 「始める」
+		// 最初にアニメーションがあるので待つ
+		cy.get('[data-cy-user-setup-start]', { timeout: 15000 }).click();
+
+		cy.wait(1000);  // ← トランジション待ち（以下全てのページ遷移で待たせる）
+
+		// 【設定】プロフィール
+		cy.get('[data-cy-user-setup-user-name] input').type('ありす');
+		cy.get('[data-cy-user-setup-user-description] textarea').type('ほげ');
+
+		cy.get('[data-cy-user-setup-next]').click();
+		cy.wait(1000);
+
+		// 【チュートリアル】ノートって何？
+		cy.get('[data-cy-user-setup-next]').click();
+		cy.wait(1000);
+
+		// 【チュートリアル】リアクションって何？
+		// インタラクティブ要素があるが、テスト時は無視できるようになっている
+		cy.get('[data-cy-user-setup-next]').click();
+		cy.wait(1000);
+
+		// 【チュートリアル】タイムラインのしくみ
+		cy.get('[data-cy-user-setup-next]').click();
+		cy.wait(1000);
+
+		// 【設定】フォロー
+		cy.get('[data-cy-user-setup-next]').click();
+		cy.wait(1000);
+
+		// 【チュートリアル】ノートの投稿設定
+		cy.get('[data-cy-user-setup-next]').click();
+		cy.wait(1000);
+
+		// 【チュートリアル】添付ファイルをセンシティブにするには？
+		// インタラクティブ要素があるが、テスト時は無視できるようになっている
+		cy.get('[data-cy-user-setup-next]').click();
+		cy.wait(1000);
+
+		// 【設定】プライバシー設定
+		cy.get('[data-cy-user-setup-next]').click();
+		cy.wait(1000);
+
+		// 完了（「ホーム画面に進む」ボタン）
+		cy.get('[data-cy-user-setup-complete] a').click();
+
+		// ホームにリダイレクトされる
+		cy.wait(5000);
+		cy.url().should('equal', Cypress.config().baseUrl + '/');
   });
 
   it('signup with duplicated username', () => {
@@ -133,9 +187,9 @@ describe('After user signup', () => {
 		cy.get('[data-cy-signin-password] input').type('alice1234{enter}');
 
 		cy.wait('@signin');
-  });
+	});
 
-	it('suspend', function() {
+	it('suspend', function () {
 		cy.request('POST', '/api/admin/suspend-user', {
 			i: this.admin.token,
 			userId: this.alice.id,
@@ -153,56 +207,6 @@ describe('After user signup', () => {
 	});
 });
 
-describe('After user signed in', () => {
-	beforeEach(() => {
-		cy.resetState();
-
-		// インスタンス初期セットアップ
-		cy.registerUser('admin', 'pass', true);
-
-		// ユーザー作成
-		cy.registerUser('alice', 'alice1234');
-
-		cy.login('alice', 'alice1234');
-	});
-
-	afterEach(() => {
-		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
-		// waitを入れることでそれを防止できる
-		cy.wait(1000);
-	});
-
-  it('successfully loads', () => {
-		// 表示に時間がかかるのでデフォルト秒数だとタイムアウトする
-		cy.get('[data-cy-user-setup-continue]', { timeout: 30000 }).should('be.visible');
-  });
-
-	it('account setup wizard', () => {
-		// 表示に時間がかかるのでデフォルト秒数だとタイムアウトする
-		cy.get('[data-cy-user-setup-continue]', { timeout: 30000 }).click();
-
-		cy.get('[data-cy-user-setup-user-name] input').type('ありす');
-		cy.get('[data-cy-user-setup-user-description] textarea').type('ほげ');
-		// TODO: アイコン設定テスト
-
-		cy.get('[data-cy-user-setup-continue]').click();
-
-		// プライバシー設定
-
-		cy.get('[data-cy-user-setup-continue]').click();
-
-		// フォローはスキップ
-
-		cy.get('[data-cy-user-setup-continue]').click();
-
-		// プッシュ通知設定はスキップ
-
-		cy.get('[data-cy-user-setup-continue]').click();
-
-		cy.get('[data-cy-user-setup-continue]').click();
-  });
-});
-
 describe('After user setup', () => {
 	beforeEach(() => {
 		cy.resetState();
@@ -214,11 +218,6 @@ describe('After user setup', () => {
 		cy.registerUser('alice', 'alice1234');
 
 		cy.login('alice', 'alice1234');
-
-		// アカウント初期設定ウィザード
-		// 表示に時間がかかるのでデフォルト秒数だとタイムアウトする
-		cy.get('[data-cy-user-setup] [data-cy-modal-window-close]', { timeout: 30000 }).click();
-		cy.get('[data-cy-modal-dialog-ok]').click();
 	});
 
 	afterEach(() => {

cypress/e2e/router.cy.ts

@@ -16,12 +16,6 @@ describe('Router transition', () => {
 			cy.registerUser('alice', 'alice1234');
 
 			cy.login('alice', 'alice1234');
-
-			// アカウント初期設定ウィザード
-			// 表示に時間がかかるのでデフォルト秒数だとタイムアウトする
-			cy.get('[data-cy-user-setup] [data-cy-modal-window-close]', { timeout: 30000 }).click();
-			cy.wait(500);
-			cy.get('[data-cy-modal-dialog-ok]').click();
 		});
 
 		it('redirect to user profile', () => {

locales/index.d.ts

@@ -5222,6 +5222,14 @@ export interface Locale extends ILocale {
      * 注意事項を理解した上でオンにします。
      */
     "acknowledgeNotesAndEnable": string;
+    /**
+     * チュートリアルをスキップできないようにする
+     */
+    "prohibitSkippingInitialTutorial": string;
+    /**
+     * 新規登録したユーザーに表示されるチュートリアルをスキップできないようにします。チュートリアルを完了しなかったりチュートリアルページを回避したりした場合でも、強制的にリダイレクトされます。
+     */
+    "prohibitSkippingInitialTutorialDescription": string;
     "_accountSettings": {
         /**
          * コンテンツの表示にログインを必須にする
@@ -5431,68 +5439,6 @@ export interface Locale extends ILocale {
          */
         "silenceDescription": string;
     };
-    "_initialAccountSetting": {
-        /**
-         * アカウントの作成が完了しました！
-         */
-        "accountCreated": string;
-        /**
-         * さっそくアカウントの初期設定を行いましょう。
-         */
-        "letsStartAccountSetup": string;
-        /**
-         * まずはあなたのプロフィールを設定しましょう。
-         */
-        "letsFillYourProfile": string;
-        /**
-         * プロフィール設定
-         */
-        "profileSetting": string;
-        /**
-         * プライバシー設定
-         */
-        "privacySetting": string;
-        /**
-         * これらの設定は後から変更できます。
-         */
-        "theseSettingsCanEditLater": string;
-        /**
-         * この他にも様々な設定を「設定」ページから行えます。ぜひ後で確認してみてください。
-         */
-        "youCanEditMoreSettingsInSettingsPageLater": string;
-        /**
-         * タイムラインを構築するため、気になるユーザーをフォローしてみましょう。
-         */
-        "followUsers": string;
-        /**
-         * プッシュ通知を有効にすると{name}の通知をお使いのデバイスで受け取ることができます。
-         */
-        "pushNotificationDescription": ParameterizedString<"name">;
-        /**
-         * 初期設定が完了しました！
-         */
-        "initialAccountSettingCompleted": string;
-        /**
-         * {name}をお楽しみください！
-         */
-        "haveFun": ParameterizedString<"name">;
-        /**
-         * このまま{name}(Misskey)の使い方についてのチュートリアルに進むこともできますが、ここで中断してすぐに使い始めることもできます。
-         */
-        "youCanContinueTutorial": ParameterizedString<"name">;
-        /**
-         * チュートリアルを開始
-         */
-        "startTutorial": string;
-        /**
-         * 初期設定をスキップしますか？
-         */
-        "skipAreYouSure": string;
-        /**
-         * 初期設定をあとでやり直しますか？
-         */
-        "laterAreYouSure": string;
-    };
     "_initialTutorial": {
         /**
          * チュートリアルを見る
@@ -5520,6 +5466,21 @@ export interface Locale extends ILocale {
              */
             "description": string;
         };
+        "_profileSettings": {
+            /**
+             * プロフィール設定
+             */
+            "title": string;
+            /**
+             * まずは基本的なプロフィールを設定して、ユーザーにあなたのことを知ってもらえるようにしましょう。
+             */
+            "description": string;
+            /**
+             * ここで設定した項目は後でいつでも変更できます。
+             * チュートリアル終了後には、更に多彩なプロフィール設定をご利用いただけます！
+             */
+            "youCanChangeThemLater": string;
+        };
         "_note": {
             /**
              * ノートって何？
@@ -5606,6 +5567,16 @@ export interface Locale extends ILocale {
              */
             "description3": ParameterizedString<"link">;
         };
+        "_followUsers": {
+            /**
+             * 誰もフォローしていない状態だと、ホームタイムラインには何も表示されません。
+             */
+            "description1": string;
+            /**
+             * タイムラインを構築するため、気になるユーザーをフォローしてみましょう。
+             */
+            "description2": string;
+        };
         "_postNote": {
             /**
              * ノートの投稿設定
@@ -5706,6 +5677,30 @@ export interface Locale extends ILocale {
              */
             "doItToContinue": string;
         };
+        "_pushNotification": {
+            /**
+             * プッシュ通知を有効にすると{name}の通知をお使いのデバイスで受け取ることができます。
+             */
+            "description": ParameterizedString<"name">;
+        };
+        "_privacySettings": {
+            /**
+             * プライバシー設定
+             */
+            "title": string;
+            /**
+             * 多くのユーザーが利用しているプライバシー関連の設定項目をリストアップしました。必要に応じて変更してください。
+             */
+            "description1": string;
+            /**
+             * これらの設定は後から変更できます。
+             */
+            "theseSettingsCanEditLater": string;
+            /**
+             * この他にも様々な設定を「設定」ページから行えます。ぜひ後で確認してみてください。
+             */
+            "youCanEditMoreSettingsInSettingsPageLater": string;
+        };
         "_done": {
             /**
              * チュートリアルは終了です🎉
@@ -5715,6 +5710,72 @@ export interface Locale extends ILocale {
              * ここで紹介した機能はほんの一部にすぎません。Misskeyの使い方をより詳しく知るには、{link}をご覧ください。
              */
             "description": ParameterizedString<"link">;
+            /**
+             * {name}をお楽しみください！
+             */
+            "haveFun": ParameterizedString<"name">;
+            /**
+             * このチュートリアルは、「もっと！」→「情報」→「チュートリアルを見る」からいつでも見返すことができます。
+             */
+            "youCanReferTutorialBy": string;
+        };
+        "_onboardingLanding": {
+            /**
+             * アカウントの作成が完了しました！
+             */
+            "accountCreated": string;
+            /**
+             * ようこそ、{name}へ！
+             */
+            "welcomeToX": ParameterizedString<"name">;
+            /**
+             * プロフィールを設定したり、{name}の基本的な使い方を学んだりして、すぐに使い始められるようにしましょう。
+             */
+            "description": ParameterizedString<"name">;
+            /**
+             * このチュートリアルの所要時間は{min}分程度です。
+             * チュートリアルを完了すると実績が解除されます。
+             */
+            "takesAbout": ParameterizedString<"min">;
+            /**
+             * このサーバーの管理者は新規ユーザーにチュートリアルを完了することを義務付けています。
+             * チュートリアルを完了するまでMisskeyを使い始めることはできません。
+             */
+            "adminForcesToTakeTutorial": string;
+        };
+        "_onboardingDone": {
+            /**
+             * お疲れ様でした！次のステップに進んで、{name}をもっと楽しめるようにしましょう。
+             */
+            "description": ParameterizedString<"name">;
+            /**
+             * 元のページに戻る
+             */
+            "backToOriginalPath": string;
+            /**
+             * あなたがアクセスしようとしていたページに戻ります。
+             */
+            "backToOriginalPathDescription": string;
+            /**
+             * プロフィール設定
+             */
+            "profile": string;
+            /**
+             * プロフィールをかんぺきにして、自分をアピールしましょう。
+             */
+            "profileDescription": string;
+            /**
+             * 人気のノートやユーザーを見つけて交流をはじめましょう。
+             */
+            "exploreDescription": string;
+            /**
+             * ホーム画面に進む
+             */
+            "goToTimeline": string;
+            /**
+             * 設定等を行わず、通常のホーム画面（タイムライン）に進みます。
+             */
+            "goToTimelineDescription": string;
         };
     };
     "_timelineDescription": {