[go: nahoru, domu]
Skip to content

Commit

Permalink
tests(ui): add new connection related tests
Browse files Browse the repository at this point in the history 
This commit adds vitest integration and rendering tests for the components
related to the New Connection components.
  • Loading branch information
@luannmoreira @gustavosbarreto
luannmoreira authored and gustavosbarreto committed Apr 16, 2024
1 parent 6cfe7f5 commit 1aaccae
Show file tree
Hide file tree
Showing 7 changed files with 500 additions and 35 deletions.
42 changes: 23 additions & 19 deletions ui/src/components/NewConnection/NewConnection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,31 @@
tabindex="0"
variant="elevated"
aria-label="Dialog New Connection"
data-test="new-connection-add-btn"
data-test="new-connection-open-btn"
prepend-icon="mdi-link"
>
New Connection
</v-btn>
<div>
<p
class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1">Press "Ctrl + K" to Quick Connect!</p>
class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1"
data-test="quick-connect-instructions"
>
Press "Ctrl + K" to Quick Connect!
</p>
</div>
<v-dialog
v-model="dialog"
width="1000"
transition="dialog-bottom-transition"
data-test="new-connection-dialog"
>
<v-card class="bg-v-theme-surface content">
<v-card class="bg-v-theme-surface content" min-height="700" max-height="700">
<div class="pa-5">
<v-row>
<v-col>
<v-text-field
label="Search your online devices with ease!"
label="Search your online devices!"
variant="solo"
color="primary"
single-line
Expand All @@ -44,22 +49,22 @@
<v-card-text class="mt-4 mb-0 pb-1 flex">
<v-row>
<v-col>
<p class="text-body-2 mb-2 font-weight-bold text-center">
<p class="text-body-2 mb-2 font-weight-bold text-center" data-test="hostname-header">
Hostname
</p>
</v-col>
<v-col>
<p class="text-body-2 mb-2 font-weight-bold text-center">
<p class="text-body-2 mb-2 font-weight-bold text-center" data-test="os-header">
Operating System
</p>
</v-col>
<v-col>
<p class="text-body-2 mb-2 font-weight-bold text-center">
<p class="text-body-2 mb-2 font-weight-bold text-center" data-test="sshid-header">
SSHID
</p>
</v-col>
<v-col>
<p class="text-body-2 mr-3 font-weight-bold text-center">
<p class="text-body-2 mr-3 font-weight-bold text-center" data-test="tags-header">
Tags
</p>
</v-col>
Expand All @@ -70,19 +75,24 @@
<v-row class="ml-2">
<v-col>
<p class="text-body-2 mb-0 font-weight-bold text-grey-darken-1">
<v-icon color="#7284D0" data-test="connect-icon"> mdi-arrow-u-left-bottom </v-icon>To connect</p>
<v-icon color="#7284D0" data-test="connect-icon">mdi-arrow-u-left-bottom</v-icon>
To connect
</p>
</v-col>
<v-col>
<p class="text-body-2 mb-0 font-weight-bold text-grey-darken-1">
<v-icon color="#7284D0" data-test="navigate-up-icon"> mdi-arrow-up </v-icon>
<v-icon color="#7284D0" data-test="navigate-down-icon"> mdi-arrow-down </v-icon>
<v-icon color="#7284D0" data-test="navigate-up-icon">mdi-arrow-up</v-icon>
<v-icon color="#7284D0" data-test="navigate-down-icon">mdi-arrow-down</v-icon>
To navigate
</p>
</v-col>
<v-col>
<p
class="text-body-2 font-weight-bold text-grey-darken-1"
data-test="copy-sshid-instructions">Press "Ctrl + C" to copy SSHID</p>
data-test="copy-sshid-instructions"
>
Press "Ctrl + C" to copy SSHID
</p>
</v-col>
</v-row>
<v-btn variant="text" data-test="close-btn" @click="dialog = !dialog">
Expand All @@ -108,6 +118,7 @@ const dialog = ref(false);
const store = useStore();
const filter = ref("");
const show = ref(false);
const searchDevices = () => {
let encodedFilter = "";
Expand Down Expand Up @@ -180,11 +191,4 @@ const keyboardMacros = useMagicKeys({
font-size: 85%;
font-weight: normal;
}
.content {
min-height: 70vh;
max-height: 70vh;
overflow: auto;
}
</style>
35 changes: 21 additions & 14 deletions ui/src/components/NewConnection/NewConnectionList.vue
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,72 @@
<template>
<template v-if="onlineDevices.length === 0">
<v-card class="bg-v-theme-surface mx-auto py-3 border mt-5">
<v-card class="bg-v-theme-surface mx-auto py-3 border mt-5" data-test="no-online-devices">
<v-card-title class="text-center d-flex justify-center pa-1">
<div>
<v-icon size="x-large">
<v-icon size="x-large" data-test="no-online-devices-icon">
mdi-laptop-off
</v-icon>
</div>
</v-card-title>
<v-row>
<v-col class="text-center d-flex justify-center pa-5">
<p>No online device was found!</p>
<p data-test="no-online-devices-message">No online device was found!</p>
</v-col>
</v-row>
</v-card>
</template>
<v-list ref="rootEl" nav bg-color="transparent" class="content-card" data-test="devices-list">
<v-col v-for="(item, i) in onlineDevices" :key="i" class="ma-0 mb-3 pa-0">
<v-card :key="i">
<v-list-item @click="open(i)" @keydown="copyMacro(sshidAddress(item))" :key="i" class="ma-0 pa-0 card">
<v-card :key="i" data-test="device-card">
<v-list-item @click="open(i)" @keydown="copyMacro(sshidAddress(item))" :key="i" class="ma-0 pa-0 card" data-test="device-list-item">
<v-row align="center" no-gutters>
<TerminalDialog
:uid="item.uid"
:online="item.online"
ref="terminalFn"
data-test="terminalDialog-component" />
<v-col class="text-center" md="3">
<v-col class="text-center" md="3" data-test="device-name">
{{ item.name }}
</v-col>
<v-col class="text-center pr-6 text-truncate" md="3">
<v-col class="text-center pr-6 text-truncate" md="3" data-test="device-info">
<DeviceIcon :icon="item.info.id" />
<span>{{ item.info.pretty_name }}</span>
</v-col>
<v-col class="text-truncate" md="3">
<v-col class="text-truncate" md="3" data-test="device-ssh-id">
<v-chip class="bg-grey-darken-4">
<v-tooltip location="bottom">
<template v-slot:activator="{ props }">
<span
v-bind="props"
@click="copyText(sshidAddress(item))"
@keypress="copyText(sshidAddress(item))"
class="hover-text">
class="hover-text"
data-test="copy-id-button">
{{ sshidAddress(item) }}
</span>
</template>
<span>Copy ID</span>
</v-tooltip>
</v-chip>
</v-col>
<v-col md="3">
<v-col md="3" data-test="device-tags">
<div class="text-center">
<div v-if="item.tags[0]">
<v-tooltip v-for="(tag, index) in item.tags" :key="index" location="bottom" :disabled="!showTag(tag)">
<template #activator="{ props }">
<v-chip size="small" v-bind="props" v-on="props" class="mr-1">
<v-chip size="small" v-bind="props" v-on="props" class="mr-1" data-test="tag-chip">
{{ displayOnlyTenCharacters(tag) }}
</v-chip>
</template>

<span v-if="showTag(tag)">
<span v-if="showTag(tag)" data-test="tag-name">
{{ tag }}
</span>
</v-tooltip>
</div>
<div v-else>
<v-chip size="small" color="grey-darken-2"> No tags </v-chip>
<v-chip size="small" color="grey-darken-2" data-test="no-tags-chip"> No tags </v-chip>
</div>

</div>
</v-col>
</v-row>
Expand Down Expand Up @@ -102,18 +102,25 @@ const loading = ref(false);
const itemsPerPage = ref(10);
const page = ref();
const rootEl = ref<VList>();
defineExpose({ rootEl });
let encodedFilter = "";
const filterToEncodeBase64 = [
{
type: "property",
params: { name: "online", operator: "eq", value: true },
},
];
encodedFilter = btoa(JSON.stringify(filterToEncodeBase64));
const filter = ref(encodedFilter);
const devices = computed(() => store.getters["devices/listQuickConnection"]);
const onlineDevices = computed(() => devices.value.filter((item: Device) => item.online));
const open = (i: number) => {
if (terminalFn.value !== undefined) {
const items = terminalFn.value;
Expand Down
Loading

0 comments on commit 1aaccae

Please sign in to comment.