Jess 7952647601
feat: adding ui component tests (#590)
* docs: additional cypress + vitest comparison content

* feat: ui testing

* fix: seperate cypress tests

* feat: adding cypress component testing for ui

* chore: share the common deps for global app setup

* spacing

* Update package.json

Co-authored-by: Michel EDIGHOFFER <edimitchel@gmail.com>

* chore: adding OptimizationPersist + PkgConfig to reduce flake

* chore: workaround for unocss hmr

* chore: adding ts-ignore comments

* chore: reordering data-testid

* chore: ts-expect-error

* --allow-empty

* bug: reproduction of failing vite + cypress setup

* chore: adding Vite 2.9.0-beta.3 to cold-start stability issues for UI component tests

* chore: fixing types

* chore: fixing types

* reenabling tests

* adding faker seed back in

* bumping faker version

Co-authored-by: Michel EDIGHOFFER <edimitchel@gmail.com>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
2022-03-21 19:18:44 +08:00

61 lines
1.3 KiB
Vue

<script setup lang="ts">
import { files } from '../../composables/client'
import { filesFailed, filesSnapshotFailed, filesSuccess, time } from '../../composables/summary'
</script>
<template>
<div
data-testid="test-files-entry"
grid="~ cols-[min-content_1fr_min-content]"
items-center gap="x-2 y-3" p="x4" relative font-light w-80
op80
>
<div i-carbon-document />
<div>Files</div>
<div class="number" data-testid="num-files">
{{ files.length }}
</div>
<template v-if="filesSuccess.length">
<div i-carbon-checkmark />
<div>Pass</div>
<div class="number">
{{ filesSuccess.length }}
</div>
</template>
<template v-if="filesFailed.length">
<div i-carbon-close />
<div>
Fail
</div>
<div class="number" text-red5>
{{ filesFailed.length }}
</div>
</template>
<template v-if="filesSnapshotFailed.length">
<div i-carbon-compare />
<div>
Snapshot Fail
</div>
<div class="number" text-red5>
{{ filesSnapshotFailed.length }}
</div>
</template>
<div i-carbon-timer />
<div>Time</div>
<div class="number" data-testid="run-time">
{{ time }}
</div>
</div>
</template>
<style scoped>
.number {
font-weight: 400;
text-align: right;
}
</style>