Skip to content

Commit d33b921

Browse files
luizhf42gustavosbarreto
luizhf42
authored and
gustavosbarreto
committed
refactor(ui): remove admin's DeviceIcon and reuse the main UI's component
1 parent b0dc56c commit d33b921

File tree

12 files changed

+26
-127
lines changed

12 files changed

+26
-127
lines changed

‎ui/admin/src/components/Device/DeviceIcon.vue‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎ui/admin/src/components/Device/DeviceList.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ import { useRouter } from "vue-router";
109109
import useDevicesStore from "@admin/store/modules/devices";
110110
import useSnackbar from "@/helpers/snackbar";
111111
import DataTable from "@/components/Tables/DataTable.vue";
112-
import DeviceIcon from "./DeviceIcon.vue";
112+
import DeviceIcon from "@/components/Devices/DeviceIcon.vue";
113113
import { formatFullDateTime } from "@/utils/date";
114114
import { displayOnlyTenCharacters } from "@/utils/string";
115115
import showTag from "@/utils/tag";

‎ui/admin/tests/unit/components/Device/DeviceIcon/__snapshots__/index.spec.ts.snap‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎ui/admin/tests/unit/components/Device/DeviceIcon/index.spec.ts‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎ui/admin/tests/unit/components/Device/DeviceList/__snapshots__/index.spec.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ exports[`Device List > Renders the component 1`] = `
2323
<tr data-v-aca44803="">
2424
<td data-v-aca44803=""><i data-v-aca44803="" class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default" style="color: rgb(229, 57, 53); caret-color: #E53935;" aria-hidden="true" data-test="error-icon"></i></td>
2525
<td data-v-aca44803="">39-5e-2a</td>
26-
<td data-v-aca44803=""><span data-v-aca44803="" class="d-inline-flex align-center ga-2"><i data-v-aca44803="" class="fl-linuxmint" style="font-size: 20px;"></i> Linux Mint 19.3</span></td>
26+
<td data-v-aca44803=""><span data-v-aca44803="" class="d-inline-flex align-center ga-2"><i data-v-aca44803="" data-test="device-icon" class="fl-linuxmint mr-1" style="font-size: 20px;"></i> Linux Mint 19.3</span></td>
2727
<td data-v-aca44803=""><span data-v-aca44803="" tabindex="0" class="hover">user</span></td>
2828
<td data-v-aca44803="">
2929
<div data-v-aca44803=""><span data-v-aca44803="" class="v-chip v-theme--light v-chip--density-default v-chip--size-small v-chip--variant-tonal" draggable="false" aria-describedby="v-tooltip-v-6"><!----><span class="v-chip__underlay"></span>
@@ -52,7 +52,7 @@ exports[`Device List > Renders the component 1`] = `
5252
<tr data-v-aca44803="">
5353
<td data-v-aca44803=""><i data-v-aca44803="" class="mdi-check-circle mdi v-icon notranslate v-theme--light v-icon--size-default text-success" aria-hidden="true" data-test="success-icon"></i></td>
5454
<td data-v-aca44803="">39-5e-2b</td>
55-
<td data-v-aca44803=""><span data-v-aca44803="" class="d-inline-flex align-center ga-2"><i data-v-aca44803="" class="fl-linuxmint" style="font-size: 20px;"></i> Linux Mint 19.3</span></td>
55+
<td data-v-aca44803=""><span data-v-aca44803="" class="d-inline-flex align-center ga-2"><i data-v-aca44803="" data-test="device-icon" class="fl-linuxmint mr-1" style="font-size: 20px;"></i> Linux Mint 19.3</span></td>
5656
<td data-v-aca44803=""><span data-v-aca44803="" tabindex="0" class="hover">user</span></td>
5757
<td data-v-aca44803="">
5858
<div data-v-aca44803=""><span data-v-aca44803="" class="v-chip v-theme--light v-chip--density-default v-chip--size-small v-chip--variant-tonal" draggable="false" aria-describedby="v-tooltip-v-12"><!----><span class="v-chip__underlay"></span>

‎ui/admin/tests/unit/views/Device/__snapshots__/index.spec.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ exports[`Device > Renders the component 1`] = `
6868
<tr data-v-aca44803="">
6969
<td data-v-aca44803=""><i data-v-aca44803="" class="mdi-close-circle mdi v-icon notranslate v-theme--light v-icon--size-default" style="color: rgb(229, 57, 53); caret-color: #E53935;" aria-hidden="true" data-test="error-icon"></i></td>
7070
<td data-v-aca44803="">39-5e-2a</td>
71-
<td data-v-aca44803=""><span data-v-aca44803="" class="d-inline-flex align-center ga-2"><i data-v-aca44803="" class="fl-linuxmint" style="font-size: 20px;"></i> Linux Mint 19.3</span></td>
71+
<td data-v-aca44803=""><span data-v-aca44803="" class="d-inline-flex align-center ga-2"><i data-v-aca44803="" data-test="device-icon" class="fl-linuxmint mr-1" style="font-size: 20px;"></i> Linux Mint 19.3</span></td>
7272
<td data-v-aca44803=""><span data-v-aca44803="" tabindex="0" class="hover">user</span></td>
7373
<td data-v-aca44803="">
7474
<div data-v-aca44803=""><span data-v-aca44803="" class="v-chip v-theme--light v-chip--density-default v-chip--size-small v-chip--variant-tonal" draggable="false" aria-describedby="v-tooltip-v-16"><!----><span class="v-chip__underlay"></span>
@@ -97,7 +97,7 @@ exports[`Device > Renders the component 1`] = `
9797
<tr data-v-aca44803="">
9898
<td data-v-aca44803=""><i data-v-aca44803="" class="mdi-check-circle mdi v-icon notranslate v-theme--light v-icon--size-default text-success" aria-hidden="true" data-test="success-icon"></i></td>
9999
<td data-v-aca44803="">39-5e-2b</td>
100-
<td data-v-aca44803=""><span data-v-aca44803="" class="d-inline-flex align-center ga-2"><i data-v-aca44803="" class="fl-linuxmint" style="font-size: 20px;"></i> Linux Mint 19.3</span></td>
100+
<td data-v-aca44803=""><span data-v-aca44803="" class="d-inline-flex align-center ga-2"><i data-v-aca44803="" data-test="device-icon" class="fl-linuxmint mr-1" style="font-size: 20px;"></i> Linux Mint 19.3</span></td>
101101
<td data-v-aca44803=""><span data-v-aca44803="" tabindex="0" class="hover">user</span></td>
102102
<td data-v-aca44803="">
103103
<div data-v-aca44803=""><span data-v-aca44803="" class="v-chip v-theme--light v-chip--density-default v-chip--size-small v-chip--variant-tonal" draggable="false" aria-describedby="v-tooltip-v-22"><!----><span class="v-chip__underlay"></span>

‎ui/src/components/Devices/DeviceIcon.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
22
<i
3-
data-test="type-icon"
4-
:class="iconName + ' mr-1'"
3+
data-test="device-icon"
4+
:class="iconName"
5+
class="mr-1"
56
style="font-size: 20px"
67
/>
78
</template>
@@ -11,7 +12,7 @@ import { computed } from "vue";
1112
1213
const { icon } = defineProps<{ icon: string }>();
1314
14-
const deviceIcon: Record<string, string> = {
15+
const deviceIconMap: Record<string, string> = {
1516
alpine: "fl-alpine",
1617
arch: "fl-archlinux",
1718
centos: "fl-centos",
@@ -39,5 +40,5 @@ const deviceIcon: Record<string, string> = {
3940
docker: "fl-docker",
4041
};
4142
42-
const iconName = computed(() => deviceIcon[icon] || "fl-tux");
43+
const iconName = computed(() => deviceIconMap[icon] || "fl-tux");
4344
</script>

‎ui/tests/components/Devices/DeviceIcon.spec.ts‎

Lines changed: 8 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,22 @@
11
import { setActivePinia, createPinia } from "pinia";
2-
import { mount, VueWrapper } from "@vue/test-utils";
2+
import { mount } from "@vue/test-utils";
33
import { createVuetify } from "vuetify";
4-
import { expect, describe, it, beforeEach } from "vitest";
4+
import { expect, describe, it } from "vitest";
55
import DeviceIcon from "@/components/Devices/DeviceIcon.vue";
66
import { router } from "@/router";
77
import { SnackbarPlugin } from "@/plugins/snackbar";
88

99
describe("Device Icon", () => {
10-
let wrapper: VueWrapper<InstanceType<typeof DeviceIcon>>;
1110
setActivePinia(createPinia());
1211
const vuetify = createVuetify();
1312

14-
beforeEach(() => {
15-
wrapper = mount(DeviceIcon, {
16-
global: {
17-
plugins: [vuetify, router, SnackbarPlugin],
18-
},
19-
props: {
20-
icon: "",
21-
},
22-
});
23-
});
24-
25-
it("Is a Vue instance", () => {
26-
expect(wrapper.vm).toBeTruthy();
27-
});
28-
29-
it("Renders the component", () => {
30-
expect(wrapper.html()).toMatchSnapshot();
31-
});
32-
33-
it("Renders the component", () => {
34-
expect(wrapper.find('[data-test="type-icon"]').exists()).toBe(true);
13+
const wrapper = mount(DeviceIcon, {
14+
global: { plugins: [vuetify, router, SnackbarPlugin] },
15+
props: { icon: "" },
3516
});
3617

3718
it("Renders the default icon when no icon prop is provided", () => {
38-
expect(wrapper.find('[data-test="type-icon"]').classes()).toContain("fl-tux");
19+
expect(wrapper.find('[data-test="device-icon"]').classes()).toContain("fl-tux");
3920
});
4021

4122
it("Renders a specific icon based on the icon prop", async () => {
@@ -44,7 +25,7 @@ describe("Device Icon", () => {
4425

4526
await wrapper.setProps({ icon: iconProp });
4627

47-
expect(wrapper.find('[data-test="type-icon"]').classes()).toContain(expectedIconClass);
28+
expect(wrapper.find('[data-test="device-icon"]').classes()).toContain(expectedIconClass);
4829
});
4930

5031
it("Renders the default icon when an unknown icon prop is provided", async () => {
@@ -53,6 +34,6 @@ describe("Device Icon", () => {
5334

5435
await wrapper.setProps({ icon: unknownIconProp });
5536

56-
expect(wrapper.find('[data-test="type-icon"]').classes()).toContain(defaultIconClass);
37+
expect(wrapper.find('[data-test="device-icon"]').classes()).toContain(defaultIconClass);
5738
});
5839
});

‎ui/tests/components/Devices/__snapshots__/DeviceIcon.spec.ts.snap‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎ui/tests/components/QuickConnection/__snapshots__/QuickConnectionList.spec.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`Quick Connection List > Renders the component 1`] = `
99
<!---->
1010
<div data-v-7c65953f="" class="v-row v-row--no-gutters align-center">
1111
<div data-v-7c65953f="" class="v-col-md-3 v-col text-center" data-test="device-name">39-5e-2a</div>
12-
<div data-v-7c65953f="" class="v-col-md-3 v-col text-center text-truncate" data-test="device-info"><i data-v-7c65953f="" data-test="type-icon" class="fl-linuxmint mr-1" style="font-size: 20px;"></i><span data-v-7c65953f="">Linux Mint 19.3</span></div>
12+
<div data-v-7c65953f="" class="v-col-md-3 v-col text-center text-truncate" data-test="device-info"><i data-v-7c65953f="" data-test="device-icon" class="fl-linuxmint mr-1" style="font-size: 20px;"></i><span data-v-7c65953f="">Linux Mint 19.3</span></div>
1313
<div data-v-7c65953f="" class="v-col-md-3 v-col text-truncate text-center" data-test="device-ssh-id"><span data-v-7c65953f="" class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-tonal bg-grey-darken-4" draggable="false"><!----><span class="v-chip__underlay"></span>
1414
<!---->
1515
<!---->
@@ -46,7 +46,7 @@ exports[`Quick Connection List > Renders the component 1`] = `
4646
<!---->
4747
<div data-v-7c65953f="" class="v-row v-row--no-gutters align-center">
4848
<div data-v-7c65953f="" class="v-col-md-3 v-col text-center" data-test="device-name">39-5e-2b</div>
49-
<div data-v-7c65953f="" class="v-col-md-3 v-col text-center text-truncate" data-test="device-info"><i data-v-7c65953f="" data-test="type-icon" class="fl-linuxmint mr-1" style="font-size: 20px;"></i><span data-v-7c65953f="">Linux Mint 19.3</span></div>
49+
<div data-v-7c65953f="" class="v-col-md-3 v-col text-center text-truncate" data-test="device-info"><i data-v-7c65953f="" data-test="device-icon" class="fl-linuxmint mr-1" style="font-size: 20px;"></i><span data-v-7c65953f="">Linux Mint 19.3</span></div>
5050
<div data-v-7c65953f="" class="v-col-md-3 v-col text-truncate text-center" data-test="device-ssh-id"><span data-v-7c65953f="" class="v-chip v-theme--light v-chip--density-default v-chip--size-default v-chip--variant-tonal bg-grey-darken-4" draggable="false"><!----><span class="v-chip__underlay"></span>
5151
<!---->
5252
<!---->

0 commit comments

Comments
 (0)