fix(frontend): GIFバナーの復活など (#10247)

* Restore GIF banner

* Add ALT banner, detect APNG too

* Add vitest

* Add CI for vitest

* Upload coverage?

* frontend

packages/frontend/test/init.ts

@@ -0,0 +1,18 @@
+import { vi } from 'vitest';
+
+// Set i18n
+import locales from '../../../locales';
+import { updateI18n } from '@/i18n';
+updateI18n(locales['en-US']);
+
+// XXX: misskey-js panics if WebSocket is not defined
+vi.stubGlobal('WebSocket', class WebSocket extends EventTarget { static CLOSING = 2; });
+
+// XXX: defaultStore somehow becomes undefined in vitest?
+vi.mock('@/store.js', () => {
+	return {
+		defaultStore: {
+			state: {},
+		},
+	};
+});

packages/frontend/test/note.test.ts

@@ -0,0 +1,81 @@
+import { describe, test, assert, afterEach } from 'vitest';
+import { render, cleanup, type RenderResult } from '@testing-library/vue';
+import './init';
+import type { DriveFile } from 'misskey-js/built/entities';
+import { directives } from '@/directives';
+import MkMediaImage from '@/components/MkMediaImage.vue';
+
+describe('MkMediaImage', () => {
+	const renderMediaImage = (image: Partial<DriveFile>): RenderResult => {
+		return render(MkMediaImage, {
+			props: { image },
+			global: { directives },
+		});
+	};
+
+	afterEach(() => {
+		cleanup();
+	});
+
+	test('Attaching JPG should show no indicator', async () => {
+		const mkMediaImage = renderMediaImage({
+			type: 'image/jpeg',
+		});
+		const [gif, alt] = await Promise.all([
+			mkMediaImage.queryByText('GIF'),
+			mkMediaImage.queryByText('ALT'),
+		]);
+		assert.ok(!gif);
+		assert.ok(!alt);
+	});
+
+	test('Attaching GIF should show a GIF indicator', async () => {
+		const mkMediaImage = renderMediaImage({
+			type: 'image/gif',
+		});
+		const [gif, alt] = await Promise.all([
+			mkMediaImage.queryByText('GIF'),
+			mkMediaImage.queryByText('ALT'),
+		]);
+		assert.ok(gif);
+		assert.ok(!alt);
+	});
+
+	test('Attaching APNG should show a GIF indicator', async () => {
+		const mkMediaImage = renderMediaImage({
+			type: 'image/apng',
+		});
+		const [gif, alt] = await Promise.all([
+			mkMediaImage.queryByText('GIF'),
+			mkMediaImage.queryByText('ALT'),
+		]);
+		assert.ok(gif);
+		assert.ok(!alt);
+	});
+
+	test('Attaching image with an alt message should show an ALT indicator', async () => {
+		const mkMediaImage = renderMediaImage({
+			type: 'image/png',
+			comment: 'Misskeyのロゴです',
+		});
+		const [gif, alt] = await Promise.all([
+			mkMediaImage.queryByText('GIF'),
+			mkMediaImage.queryByText('ALT'),
+		]);
+		assert.ok(!gif);
+		assert.ok(alt);
+	});
+
+	test('Attaching GIF image with an alt message should show a GIF and an ALT indicator', async () => {
+		const mkMediaImage = renderMediaImage({
+			type: 'image/gif',
+			comment: 'Misskeyのロゴです',
+		});
+		const [gif, alt] = await Promise.all([
+			mkMediaImage.queryByText('GIF'),
+			mkMediaImage.queryByText('ALT'),
+		]);
+		assert.ok(gif);
+		assert.ok(alt);
+	});
+});

packages/frontend/test/tsconfig.json

@@ -0,0 +1,43 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"noEmitOnError": false,
+		"noImplicitAny": true,
+		"noImplicitReturns": true,
+		"noUnusedParameters": false,
+		"noUnusedLocals": true,
+		"noFallthroughCasesInSwitch": true,
+		"declaration": false,
+		"sourceMap": true,
+		"target": "es2021",
+		"module": "es2020",
+		"moduleResolution": "node",
+		"allowSyntheticDefaultImports": true,
+		"removeComments": false,
+		"noLib": false,
+		"strict": true,
+		"strictNullChecks": true,
+		"strictPropertyInitialization": false,
+		"experimentalDecorators": true,
+		"emitDecoratorMetadata": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"baseUrl": "./",
+		"paths": {
+			"@/*": ["../src/*"]
+		},
+		"typeRoots": [
+			"../node_modules/@types",
+		],
+		"lib": [
+			"esnext",
+			"dom"
+		],
+		"types": ["node"]
+	},
+	"compileOnSave": false,
+	"include": [
+		"./**/*.ts",
+		"../src/**/*.vue",
+	]
+}