enhance: e2eテストをできるだけ改良してみた (#8159)

* update docker image?

* 続

* serial run delete from "${table}" cascade

* use cypress official github action

* refuse install by cypress action

* clean up

* use wait?

* use more wait?

* Revert "use more wait?"

This reverts commit 18d0fcae9c.

* Revert "use wait?"

This reverts commit 5aa8feec9c.

* fix

* test

* test

* log?

* 握りつぶしてみる

* clean up

* env?

* clean up?

* disable video

* add comment

* remove test

* 成功?

* test browser

* nodeインストール無効化

* node16.13.0-chrome95-ff94

* node.js復活

* ？

* ちょっと戻してみる

* chrome?

* cross browser test2

* --shm-size=2g

* artifact?

* misskey.local?

* firefoxはあきらめる

* not headless?

* oops

* fix

* ??

* test1

* if?

* fail-fast: false

* headless: false

* easy error ignoreing describe

* エラーの解消
とちょっとリファクター

* add browser name to artifact

* Install mplayer for FireFox

* no wait?

* タイムアウトを甘くしてみる

* firefoxをあきらめる(n回目)

* remove timeout setting

* wait復活

* Update basic.js

* Update index.js

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

packages/client/src/components/notes.vue

@@ -32,9 +32,7 @@ const props = defineProps<{
 const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 defineExpose({
-	prepend: (note) => {
-		pagingComponent.value?.prepend(note);
-	},
+	pagingComponent,
 });
 </script>
 

packages/client/src/components/timeline.vue

@@ -25,10 +25,10 @@ const emit = defineEmits<{
 
 provide('inChannel', computed(() => props.src === 'channel'));
 
-const tlComponent = ref<InstanceType<typeof XNotes>>();
+const tlComponent: InstanceType<typeof XNotes> = $ref();
 
 const prepend = note => {
-	tlComponent.value.prepend(note);
+	tlComponent.pagingComponent?.prepend(note);
 
 	emit('note');
 
@@ -38,16 +38,16 @@ const prepend = note => {
 };
 
 const onUserAdded = () => {
-	tlComponent.value.reload();
+	tlComponent.pagingComponent?.reload();
 };
 
 const onUserRemoved = () => {
-	tlComponent.value.reload();
+	tlComponent.pagingComponent?.reload();
 };
 
 const onChangeFollowing = () => {
-	if (!tlComponent.value.backed) {
-		tlComponent.value.reload();
+	if (!tlComponent.pagingComponent?.backed) {
+		tlComponent.pagingComponent?.reload();
 	}
 };
 

packages/client/src/components/ui/pagination.vue

@@ -73,12 +73,11 @@ const queue = ref<Item[]>([]);
 const offset = ref(0);
 const fetching = ref(true);
 const moreFetching = ref(false);
-const inited = ref(false);
 const more = ref(false);
 const backed = ref(false); // 遡り中か否か
 const isBackTop = ref(false);
-const empty = computed(() => items.value.length === 0 && !fetching.value && inited.value);
-const error = computed(() => !fetching.value && !inited.value);
+const empty = computed(() => items.value.length === 0);
+const error = ref(false);
 
 const init = async (): Promise<void> => {
 	queue.value = [];
@@ -105,9 +104,10 @@ const init = async (): Promise<void> => {
 			more.value = false;
 		}
 		offset.value = res.length;
-		inited.value = true;
+		error.value = false;
 		fetching.value = false;
 	}, e => {
+		error.value = true;
 		fetching.value = false;
 	});
 };
@@ -183,30 +183,36 @@ const fetchMoreAhead = async (): Promise<void> => {
 };
 
 const prepend = (item: Item): void => {
-	if (rootEl.value == null) return;
-
 	if (props.pagination.reversed) {
-		const container = getScrollContainer(rootEl.value);
-		if (container == null) return; // TODO?
+		if (rootEl.value) {
+			const container = getScrollContainer(rootEl.value);
+			if (container == null) return; // TODO?
 
-		const pos = getScrollPosition(rootEl.value);
-		const viewHeight = container.clientHeight;
-		const height = container.scrollHeight;
-		const isBottom = (pos + viewHeight > height - 32);
-		if (isBottom) {
-			// オーバーフローしたら古いアイテムは捨てる
-			if (items.value.length >= props.displayLimit) {
-				// このやり方だとVue 3.2以降アニメーションが動かなくなる
-				//items.value = items.value.slice(-props.displayLimit);
-				while (items.value.length >= props.displayLimit) {
-					items.value.shift();
+			const pos = getScrollPosition(rootEl.value);
+			const viewHeight = container.clientHeight;
+			const height = container.scrollHeight;
+			const isBottom = (pos + viewHeight > height - 32);
+			if (isBottom) {
+				// オーバーフローしたら古いアイテムは捨てる
+				if (items.value.length >= props.displayLimit) {
+					// このやり方だとVue 3.2以降アニメーションが動かなくなる
+					//items.value = items.value.slice(-props.displayLimit);
+					while (items.value.length >= props.displayLimit) {
+						items.value.shift();
+					}
+					more.value = true;
 				}
-				more.value = true;
 			}
 		}
 		items.value.push(item);
 		// TODO
 	} else {
+		// 初回表示時はunshiftだけでOK
+		if (!rootEl.value) {
+			items.value.unshift(item);
+			return;
+		}
+
 		const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value));
 
 		if (isTop) {
@@ -264,6 +270,7 @@ onDeactivated(() => {
 
 defineExpose({
 	items,
+	backed,
 	reload,
 	fetchMoreAhead,
 	prepend,

packages/client/src/pages/tag.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="_section">
-	<XNotes ref="notes" class="_content" :pagination="pagination"/>
+	<XNotes class="_content" :pagination="pagination"/>
 </div>
 </template>
 

packages/client/src/pages/user/index.timeline.vue

@@ -5,7 +5,7 @@
 		<option value="replies">{{ $ts.notesAndReplies }}</option>
 		<option value="files">{{ $ts.withFiles }}</option>
 	</MkTab>
-	<XNotes ref="timeline" :no-gap="true" :pagination="pagination"/>
+	<XNotes :no-gap="true" :pagination="pagination"/>
 </div>
 </template>