Introduce e2e test

cypress.json

@@ -0,0 +1,3 @@
+{
+	"baseUrl": "http://localhost"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/basic.js

@@ -0,0 +1,69 @@
+describe('Basic', () => {
+	before(() => {
+		cy.request('POST', '/api/reset-db');
+	});
+
+	beforeEach(() => {
+		cy.reload(true);
+	});
+
+  it('successfully loads', () => {
+    cy.visit('/');
+  });
+
+	it('setup instance', () => {
+    cy.visit('/');
+
+		cy.get('[data-cy-admin-username] input').type('admin');
+
+		cy.get('[data-cy-admin-password] input').type('admin1234');
+
+		cy.get('[data-cy-admin-ok]').click();
+  });
+
+	it('signup', () => {
+    cy.visit('/');
+
+		cy.get('[data-cy-signup]').click();
+
+		cy.get('[data-cy-signup-username] input').type('alice');
+
+		cy.get('[data-cy-signup-password] input').type('alice1234');
+	
+		cy.get('[data-cy-signup-password-retype] input').type('alice1234');
+
+		cy.get('[data-cy-signup-submit]').click();
+  });
+
+	it('signin', () => {
+    cy.visit('/');
+
+		cy.get('[data-cy-signin]').click();
+
+		cy.get('[data-cy-signin-username] input').type('alice');
+
+		// Enterキーでサインインできるかの確認も兼ねる
+		cy.get('[data-cy-signin-password] input').type('alice1234{enter}');
+  });
+
+	it('note', () => {
+    cy.visit('/');
+
+		//#region TODO: この辺はUI操作ではなくAPI操作でログインする
+		cy.get('[data-cy-signin]').click();
+
+		cy.get('[data-cy-signin-username] input').type('alice');
+
+		// Enterキーでサインインできるかの確認も兼ねる
+		cy.get('[data-cy-signin-password] input').type('alice1234{enter}');
+		//#endregion
+
+		cy.get('[data-cy-open-post-form]').click();
+
+		cy.get('[data-cy-post-form-text]').type('Hello, Misskey!');
+
+		cy.get('[data-cy-open-post-form-submit]').click();
+
+		// TODO: 投稿した文字列が画面内にあるか(=タイムラインに流れてきたか)のテスト
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -11,6 +11,7 @@
 	"private": true,
 	"scripts": {
 		"start": "node ./index.js",
+		"start:test": "cross-env NODE_ENV=test node ./index.js",
 		"init": "npm run migrate",
 		"ormconfig": "node ./built/ormconfig.js",
 		"migrate": "ts-node ./node_modules/typeorm/cli.js migration:run",
@@ -26,6 +27,9 @@
 		"clean": "gulp clean",
 		"cleanall": "gulp cleanall",
 		"lint": "tslint 'src/**/*.ts'",
+		"cy:open": "cypress open",
+		"cy:run": "cypress run",
+		"e2e": "start-server-and-test start:test http://localhost cy:run",
 		"test": "cross-env TS_NODE_FILES=true TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=\"./test/tsconfig.json\" mocha",
 		"format": "gulp format"
 	},
@@ -57,6 +61,9 @@
 		"@types/jsonld": "1.5.6",
 		"@types/katex": "0.11.1",
 		"@types/koa": "2.13.4",
+		"@types/koa__cors": "3.0.3",
+		"@types/koa__multer": "2.0.3",
+		"@types/koa__router": "8.0.7",
 		"@types/koa-bodyparser": "4.3.3",
 		"@types/koa-cors": "0.0.2",
 		"@types/koa-favicon": "2.0.21",
@@ -64,9 +71,6 @@
 		"@types/koa-mount": "4.0.0",
 		"@types/koa-send": "4.1.3",
 		"@types/koa-views": "7.0.0",
-		"@types/koa__cors": "3.0.3",
-		"@types/koa__multer": "2.0.3",
-		"@types/koa__router": "8.0.7",
 		"@types/markdown-it": "12.0.3",
 		"@types/matter-js": "0.17.5",
 		"@types/mocha": "8.2.3",
@@ -259,6 +263,8 @@
 		"@types/chai": "4.2.16",
 		"@types/fluent-ffmpeg": "2.1.17",
 		"chai": "4.3.4",
-		"cross-env": "7.0.3"
+		"cross-env": "7.0.3",
+		"cypress": "8.2.0",
+		"start-server-and-test": "1.13.1"
 	}
 }

src/argv.ts

@@ -18,7 +18,7 @@ program
 
 if (process.env.MK_ONLY_QUEUE) program.onlyQueue = true;
 if (process.env.NODE_ENV === 'test') program.disableClustering = true;
-if (process.env.NODE_ENV === 'test') program.quiet = true;
+//if (process.env.NODE_ENV === 'test') program.quiet = true;
 if (process.env.NODE_ENV === 'test') program.noDaemons = true;
 
 export { program };

src/client/components/post-form.vue

@@ -17,7 +17,7 @@
 				<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
 				<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
 			</button>
-			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
+			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post" data-cy-open-post-form-submit>{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
@@ -36,7 +36,7 @@
 		</div>
 		<MkInfo warn v-if="hasNotSpecifiedMentions" class="hasNotSpecifiedMentions">{{ $ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ $ts.add }}</button></MkInfo>
 		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
-		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd" />
+		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd" data-cy-post-form-text/>
 		<input v-show="withHashtags" ref="hashtags" class="hashtags" v-model="hashtags" :placeholder="$ts.hashtags" list="hashtags">
 		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>

src/client/components/signin.vue

@@ -3,11 +3,11 @@
 	<div class="auth _section">
 		<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 		<div class="normal-signin" v-if="!totpLogin">
-			<MkInput v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange">
+			<MkInput v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange" data-cy-signin-username>
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
 			</MkInput>
-			<MkInput v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
+			<MkInput v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required data-cy-signin-password>
 				<template #prefix><i class="fas fa-lock"></i></template>
 				<template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template>
 			</MkInput>

src/client/components/signup.vue

@@ -5,7 +5,7 @@
 			<template #label>{{ $ts.invitationCode }}</template>
 			<template #prefix><i class="fas fa-key"></i></template>
 		</MkInput>
-		<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername">
+		<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:modelValue="onChangeUsername" data-cy-signup-username>
 			<template #label>{{ $ts.username }}</template>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
@@ -19,7 +19,7 @@
 				<span v-if="usernameState == 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
 			</template>
 		</MkInput>
-		<MkInput v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword">
+		<MkInput v-model="password" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePassword" data-cy-signup-password>
 			<template #label>{{ $ts.password }}</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
 			<template #caption>
@@ -28,7 +28,7 @@
 				<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</span>
 			</template>
 		</MkInput>
-		<MkInput v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype">
+		<MkInput v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @update:modelValue="onChangePasswordRetype" data-cy-signup-password-retype>
 			<template #label>{{ $ts.password }} ({{ $ts.retype }})</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
 			<template #caption>
@@ -46,7 +46,7 @@
 		</label>
 		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model:value="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
 		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="recaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
-		<MkButton type="submit" :disabled="shouldDisableSubmitting" primary>{{ $ts.start }}</MkButton>
+		<MkButton type="submit" :disabled="shouldDisableSubmitting" primary data-cy-signup-submit>{{ $ts.start }}</MkButton>
 	</template>
 </form>
 </template>

src/client/instance.ts

@@ -25,6 +25,7 @@ export async function fetchInstance() {
 }
 
 export const emojiCategories = computed(() => {
+	if (instance.emojis == null) return [];
 	const categories = new Set();
 	for (const emoji of instance.emojis) {
 		categories.add(emoji.category);
@@ -33,6 +34,7 @@ export const emojiCategories = computed(() => {
 });
 
 export const emojiTags = computed(() => {
+	if (instance.emojis == null) return [];
 	const tags = new Set();
 	for (const emoji of instance.emojis) {
 		for (const tag of emoji.aliases) {

src/client/pages/welcome.entrance.a.vue

@@ -27,8 +27,8 @@
 					<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
 				</div>
 				<div class="action">
-					<MkButton @click="signup()" inline primary>{{ $ts.signup }}</MkButton>
+					<MkButton @click="signup()" inline primary data-cy-signup>{{ $ts.signup }}</MkButton>
-					<MkButton @click="signin()" inline>{{ $ts.login }}</MkButton>
+					<MkButton @click="signin()" inline data-cy-signin>{{ $ts.login }}</MkButton>
 				</div>
 				<div class="status" v-if="onlineUsersCount && stats">
 					<div>

src/client/pages/welcome.setup.vue

@@ -3,17 +3,19 @@
 	<h1>Welcome to Misskey!</h1>
 	<div>
 		<p>{{ $ts.intro }}</p>
-		<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required>
+		<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required data-cy-admin-username>
 			<template #label>{{ $ts.username }}</template>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 		</MkInput>
-		<MkInput v-model="password" type="password">
+		<MkInput v-model="password" type="password" data-cy-admin-password>
 			<template #label>{{ $ts.password }}</template>
 			<template #prefix><i class="fas fa-lock"></i></template>
 		</MkInput>
 		<footer>
-			<MkButton primary type="submit" :disabled="submitting">{{ submitting ? $ts.processing : $ts.done }}<MkEllipsis v-if="submitting"/></MkButton>
+			<MkButton primary type="submit" :disabled="submitting" data-cy-admin-ok>
+				{{ submitting ? $ts.processing : $ts.done }}<MkEllipsis v-if="submitting"/>
+			</MkButton>
 		</footer>
 	</div>
 </form>

src/client/ui/default.sidebar.vue

@@ -3,7 +3,7 @@
 	<button class="item _button account" @click="openAccountMenu" v-click-anime>
 		<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 	</button>
-	<div class="post" @click="post">
+	<div class="post" @click="post" data-cy-open-post-form>
 		<MkButton class="button" primary full>
 			<i class="fas fa-pencil-alt fa-fw"></i><span class="text" v-if="!iconOnly">{{ $ts.note }}</span>
 		</MkButton>

src/db/postgre.ts

@@ -211,3 +211,13 @@ export function initDb(justBorrow = false, sync = false, forceRecreate = false)
 		entities: entities
 	});
 }
+
+export async function resetDb() {
+	const conn = await getConnection();
+	const tables = await conn.query(`SELECT relname AS "table"
+	FROM pg_class C LEFT JOIN pg_namespace N ON (N.oid = C.relnamespace)
+	WHERE nspname NOT IN ('pg_catalog', 'information_schema')
+		AND C.relkind = 'r'
+		AND nspname !~ '^pg_toast';`);
+	await Promise.all(tables.map(t => t.table).map(x => conn.query(`DELETE FROM "${x}" CASCADE`)));
+}

src/server/api/endpoints/reset-db.ts

@@ -0,0 +1,21 @@
+import $ from 'cafy';
+import define from '../define';
+import { ApiError } from '../error';
+import { resetDb } from '@/db/postgre';
+
+export const meta = {
+	requireCredential: false as const,
+
+	params: {
+	},
+
+	errors: {
+
+	}
+};
+
+export default define(meta, async (ps, user) => {
+	if (process.env.NODE_ENV !== 'test') throw 'NODE_ENV is not a test';
+
+	await resetDb();
+});