Skip to content

Commit 4ea88ac

Browse files
luannmoreiragustavosbarreto
luannmoreira
authored and
gustavosbarreto
committed
test(ui): added welcome screen related unitary tests
This commit adds unitary tests for the welcome screens, testing rendering, navigation and integration with the API.
1 parent 4820837 commit 4ea88ac

15 files changed

+875
-199
lines changed

‎ui/src/components/Welcome/Welcome.vue‎

Lines changed: 100 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -8,38 +8,38 @@
88
>
99
<v-card class="pa-6 bg-grey-darken-4 bg-v-theme-surface">
1010
<v-card-title class="text-center mb-4">
11-
<span>Step {{ el }} of 4</span>
11+
<span data-test="step-counter">Step {{ el }} of 4</span>
1212
<v-divider class="mt-2" />
1313
</v-card-title>
1414
<v-window v-model="el">
1515
<v-window-item :value="1">
16-
<v-card class="bg-v-theme-surface" height="250px">
16+
<v-card class="bg-v-theme-surface" height="200px" :elevation="0" data-test="welcome-first-screen">
1717
<WelcomeFirstScreen />
1818
</v-card>
1919
<v-card-actions class="mt-4">
20-
<v-btn @click="close">Close</v-btn>
20+
<v-btn @click="close" data-test="close-btn">Close</v-btn>
2121
<v-spacer />
2222
<v-btn
23-
data-test="firstClick-btn"
23+
data-test="first-click-btn"
2424
color="primary"
2525
@click="activePollingDevices()"
2626
>Next</v-btn>
2727
</v-card-actions>
2828
</v-window-item>
2929

3030
<v-window-item :value="2">
31-
<v-card class="bg-v-theme-surface" height="250px">
31+
<v-card class="bg-v-theme-surface" height="250px" :elevation="0" data-test="welcome-second-screen">
3232
<WelcomeSecondScreen :command="command()" />
3333
</v-card>
3434
<v-card-actions>
35-
<v-btn data-test="close-btn" @click="close">Close</v-btn>
35+
<v-btn data-test="close2-btn" @click="close">Close</v-btn>
3636
<v-spacer />
37-
<v-btn @click="goToPreviousStep">Back</v-btn>
38-
<v-btn v-if="!enable" disabled>Waiting for Device</v-btn>
37+
<v-btn @click="goToPreviousStep" data-test="back-btn">Back</v-btn>
38+
<v-btn v-if="!enable" data-test="waiting-message" disabled>Waiting for Device</v-btn>
3939
<v-btn
4040
v-else
4141
color="primary"
42-
data-test="secondClick-btn"
42+
data-test="next-btn"
4343
@click="goToNextStep"
4444
>
4545
Next
@@ -48,15 +48,15 @@
4848
</v-window-item>
4949

5050
<v-window-item :value="3">
51-
<v-card class="bg-v-theme-surface" height="250px">
51+
<v-card class="bg-v-theme-surface" height="250px" :elevation="0" data-test="welcome-third-screen">
5252
<WelcomeThirdScreen v-if="enable" />
5353
</v-card>
5454
<v-card-actions>
55-
<v-btn variant="text" data-test="close-btn" @click="close">
55+
<v-btn variant="text" data-test="close3-btn" @click="close">
5656
Close
5757
</v-btn>
5858
<v-spacer />
59-
<v-btn variant="text" @click="goToPreviousStep">Back</v-btn>
59+
<v-btn variant="text" @click="goToPreviousStep" data-test="back2-btn">Back</v-btn>
6060
<v-btn
6161
color="primary"
6262
data-test="accept-btn"
@@ -68,7 +68,7 @@
6868
</v-window-item>
6969

7070
<v-window-item :value="4">
71-
<v-card class="bg-v-theme-surface" height="250px">
71+
<v-card class="bg-v-theme-surface" height="250px" :elevation="0" data-test="welcome-fourth-screen">
7272
<WelcomeFourthScreen />
7373
</v-card>
7474
<v-card-actions>
@@ -83,8 +83,8 @@
8383
</v-dialog>
8484
</template>
8585

86-
<script lang="ts">
87-
import { computed, defineComponent, ref } from "vue";
86+
<script setup lang="ts">
87+
import { computed, ref } from "vue";
8888
import { INotificationsError } from "../../interfaces/INotifications";
8989
import { useStore } from "../../store";
9090
import WelcomeFirstScreen from "./WelcomeFirstScreen.vue";
@@ -95,117 +95,95 @@ import handleError from "../../utils/handleError";
9595
9696
type Timer = ReturnType<typeof setInterval>;
9797
98-
export default defineComponent({
99-
props: {
100-
show: {
101-
type: Boolean,
102-
required: true,
103-
},
98+
const props = defineProps({
99+
show: {
100+
type: Boolean,
101+
required: true,
104102
},
105-
emits: ["update"],
106-
setup(props, { emit }) {
107-
const store = useStore();
108-
const el = ref<number>(1);
109-
const polling = ref<Timer | undefined>(undefined);
110-
const enable = ref(false);
111-
const showWelcome = computed<boolean>({
112-
get() {
113-
return props.show;
114-
},
115-
set(value) {
116-
emit("update", value);
117-
},
118-
});
119-
120-
const curl = ref({
121-
hostname: window.location.hostname,
122-
tenant: store.getters["auth/tenant"],
123-
});
124-
125-
const pollingDevices = () => {
126-
polling.value = setInterval(async () => {
127-
try {
128-
await store.dispatch("stats/get");
129-
130-
enable.value = store.getters["stats/stats"].pending_devices !== 0;
131-
if (enable.value) {
132-
el.value = 3;
133-
clearTimeout(polling.value);
134-
}
135-
} catch (error: unknown) {
136-
store.dispatch("snackbar/showSnackbarErrorDefault");
137-
handleError(error);
138-
}
139-
}, 3000);
140-
};
141-
142-
const activePollingDevices = () => {
143-
el.value = 2;
144-
pollingDevices();
145-
};
146-
147-
const acceptDevice = async () => {
148-
const device = store.getters["devices/getFirstPending"];
149-
try {
150-
if (device) {
151-
await store.dispatch("devices/accept", device.uid);
152-
153-
store.dispatch("notifications/fetch");
154-
store.dispatch("stats/get");
155-
156-
el.value = 4;
157-
}
158-
} catch (error: unknown) {
159-
store.dispatch(
160-
"snackbar/showSnackbarErrorAction",
161-
INotificationsError.deviceAccepting,
162-
);
163-
handleError(error);
164-
}
165-
};
103+
});
104+
const emit = defineEmits(["update"]);
105+
const store = useStore();
106+
const el = ref<number>(1);
107+
const polling = ref<Timer | undefined>(undefined);
108+
const enable = ref(false);
109+
const showWelcome = computed<boolean>({
110+
get() {
111+
return props.show;
112+
},
113+
set(value) {
114+
emit("update", value);
115+
},
116+
});
166117
167-
const command = () => {
168-
const port = window.location.port ? `:${window.location.port}` : "";
169-
const { hostname } = window.location;
118+
const curl = ref({
119+
hostname: window.location.hostname,
120+
tenant: store.getters["auth/tenant"],
121+
});
170122
171-
return `curl -sSf "${window.location.protocol}//${hostname}${port}/install.sh?tenant_id=${curl.value.tenant}" | sh`;
172-
};
123+
const pollingDevices = () => {
124+
polling.value = setInterval(async () => {
125+
try {
126+
await store.dispatch("stats/get");
173127
174-
const close = () => {
175-
emit("update", false);
176-
showWelcome.value = false;
177-
if (polling.value) {
128+
enable.value = store.getters["stats/stats"].pending_devices !== 0;
129+
if (enable.value) {
130+
el.value = 3;
178131
clearTimeout(polling.value);
179132
}
180-
};
181-
182-
const goToPreviousStep = () => {
183-
el.value--;
184-
};
185-
186-
const goToNextStep = () => {
187-
el.value++;
188-
};
189-
190-
return {
191-
el,
192-
showWelcome,
193-
enable,
194-
polling,
195-
curl,
196-
close,
197-
activePollingDevices,
198-
acceptDevice,
199-
command,
200-
goToPreviousStep,
201-
goToNextStep,
202-
};
203-
},
204-
components: {
205-
WelcomeFirstScreen,
206-
WelcomeSecondScreen,
207-
WelcomeThirdScreen,
208-
WelcomeFourthScreen,
209-
},
210-
});
133+
} catch (error: unknown) {
134+
store.dispatch("snackbar/showSnackbarErrorDefault");
135+
handleError(error);
136+
}
137+
}, 3000);
138+
};
139+
140+
const activePollingDevices = () => {
141+
el.value = 2;
142+
pollingDevices();
143+
};
144+
145+
const acceptDevice = async () => {
146+
const device = store.getters["devices/getFirstPending"];
147+
try {
148+
if (device) {
149+
await store.dispatch("devices/accept", device.uid);
150+
151+
store.dispatch("notifications/fetch");
152+
store.dispatch("stats/get");
153+
154+
el.value = 4;
155+
}
156+
} catch (error: unknown) {
157+
store.dispatch(
158+
"snackbar/showSnackbarErrorAction",
159+
INotificationsError.deviceAccepting,
160+
);
161+
handleError(error);
162+
}
163+
};
164+
165+
const command = () => {
166+
const port = window.location.port ? `:${window.location.port}` : "";
167+
const { hostname } = window.location;
168+
169+
return `curl -sSf "${window.location.protocol}//${hostname}${port}/install.sh?tenant_id=${curl.value.tenant}" | sh`;
170+
};
171+
172+
const close = () => {
173+
emit("update", false);
174+
showWelcome.value = false;
175+
if (polling.value) {
176+
clearTimeout(polling.value);
177+
}
178+
};
179+
180+
const goToPreviousStep = () => {
181+
el.value--;
182+
};
183+
184+
const goToNextStep = () => {
185+
el.value++;
186+
};
187+
188+
defineExpose({ el, goToPreviousStep, goToNextStep, enable });
211189
</script>

‎ui/src/components/Welcome/WelcomeFirstScreen.vue‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<p class="ml-4 pt-4 text-subtitle-2">
2+
<p class="ml-4 pt-4 text-subtitle-2" data-test="welcome-first-screen-name">
33
Hello, <strong> {{ name }} </strong> !
44
</p>
5-
<p class="mt-4 ml-4 mr-4 text-subtitle-2">
5+
<p class="mt-4 ml-4 mr-4 text-subtitle-2" data-test="welcome-first-screen-text">
66
ShellHub is a modern SSH server for remotely accessing Linux devices via CLI
77
or web-based user interface, it avoids the inconveniences such as firewall
88
and NAT when getting your IP address, automating the access process, and
@@ -11,20 +11,15 @@
1111
</p>
1212
</template>
1313

14-
<script lang="ts">
15-
import { defineComponent, computed } from "vue";
14+
<script setup lang="ts">
15+
import { computed } from "vue";
1616
import { useStore } from "../../store";
1717
18-
export default defineComponent({
19-
setup() {
20-
const store = useStore();
18+
const store = useStore();
2119
22-
const name = computed(
23-
() => store.getters["auth/currentName"] || store.getters["auth/currentUser"],
24-
);
25-
return {
26-
name,
27-
};
28-
},
29-
});
20+
const name = computed(
21+
() => store.getters["auth/currentName"] || store.getters["auth/currentUser"],
22+
);
23+
24+
defineExpose({ name });
3025
</script>

‎ui/src/components/Welcome/WelcomeFourthScreen.vue‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,5 @@
3232
</div>
3333
</template>
3434

35-
<script lang="ts">
36-
import { defineComponent } from "vue";
37-
38-
export default defineComponent({
39-
setup() {
40-
return {
41-
};
42-
},
43-
});
35+
<script setup lang="ts">
4436
</script>

0 commit comments

Comments
 (0)