From 06abec465a2a1847797c5e59bd8f651c22f1e7bf Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Thu, 5 May 2022 12:57:34 +0200
Subject: [PATCH] Linted
---
jest.config.js | 2 +-
src/components/BaseComponents/NavBar.vue | 58 +++++++------
.../BaseComponents/PaginationTemplate.vue | 4 +-
.../ChatComponents/ChatComponent.vue | 12 ++-
src/components/ChatComponents/ChatMessage.vue | 76 ++++++++---------
src/components/ChatComponents/ChatProfile.vue | 2 +-
.../ChatComponents/ChatsComponent.vue | 10 ++-
.../ChatComponents/RentalMessage.vue | 27 +++---
.../CommunityComponents/CommunityListItem.vue | 5 +-
.../CommunityComponents/NewCommunityForm.vue | 4 +-
src/services/ws.js | 9 +-
src/views/HelpView.vue | 8 +-
.../CalendarComponent.spec.js | 79 +++++++++---------
.../month-selector-test.spec.js | 82 +++++++++----------
14 files changed, 198 insertions(+), 180 deletions(-)
diff --git a/jest.config.js b/jest.config.js
index dfcd355..f638d89 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,5 +1,5 @@
module.exports = {
preset: "@vue/cli-plugin-unit-jest",
collectCoverage: true,
- collectCoverageFrom: ['src/**/*.js', 'src/**/*.vue', '!**/node_modules/**']
+ collectCoverageFrom: ["src/**/*.js", "src/**/*.vue", "!**/node_modules/**"],
};
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index 79680fe..e6f2562 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -24,7 +24,7 @@
class="m-6 md:mr-2 h-7 text-primary-medium float-left"
alt="Meldinger"
/>
- <p class="notification" v-if="newMessages > 0">{{notifications}}</p>
+ <p class="notification" v-if="newMessages > 0">{{ notifications }}</p>
<a class="hidden md:block mt-7 text-sm float-right">Meldinger</a>
</div>
</li>
@@ -42,24 +42,24 @@
<script>
import { parseUserFromToken } from "@/utils/token-utils";
import { PlusIcon, ChatAlt2Icon, UserCircleIcon } from "@heroicons/vue/outline";
-import ws from '@/services/ws';
+import ws from "@/services/ws";
export default {
name: "NavBar.vue",
data() {
return {
newMessages: 0,
- }
+ };
},
computed: {
notifications() {
// if new messages is greater than 99 show +99
if (this.newMessages > 99) {
- return '+99'
+ return "+99";
} else {
- return this.newMessages
+ return this.newMessages;
}
- }
+ },
},
components: {
PlusIcon,
@@ -79,15 +79,19 @@ export default {
},
loadMessages() {
this.newMessages = 0;
- this.$router.push('/messages');
- }
+ this.$router.push("/messages");
+ },
},
created() {
- ws.on('NEW_MESSAGE', () => {
- if(this.$router.currentRoute.value.name == 'messages') return;
- this.newMessages += 1;
- }, "header");
- }
+ ws.on(
+ "NEW_MESSAGE",
+ () => {
+ if (this.$router.currentRoute.value.name == "messages") return;
+ this.newMessages += 1;
+ },
+ "header"
+ );
+ },
};
</script>
@@ -96,19 +100,19 @@ export default {
position: relative;
}
.notification {
- position: absolute;
- background-color: #ff5a5f;
- top: 0;
- min-width: 20px;
- min-height: 20px;
- padding: 0.25rem;
- transform: translate(-80%, -30%);
- color: white;
- font-size: 10px;
- border-radius: 50%;
- font-weight: bold;
- text-align: center;
- right: 0;
- cursor: pointer;
+ position: absolute;
+ background-color: #ff5a5f;
+ top: 0;
+ min-width: 20px;
+ min-height: 20px;
+ padding: 0.25rem;
+ transform: translate(-80%, -30%);
+ color: white;
+ font-size: 10px;
+ border-radius: 50%;
+ font-weight: bold;
+ text-align: center;
+ right: 0;
+ cursor: pointer;
}
</style>
diff --git a/src/components/BaseComponents/PaginationTemplate.vue b/src/components/BaseComponents/PaginationTemplate.vue
index a67eefc..939d735 100644
--- a/src/components/BaseComponents/PaginationTemplate.vue
+++ b/src/components/BaseComponents/PaginationTemplate.vue
@@ -7,7 +7,9 @@
>
Forrige
</span>
- <label class="mx-2 text-primary-light">{{ currentPage + 1 }} av {{ totalPages() }}</label>
+ <label class="mx-2 text-primary-light"
+ >{{ currentPage + 1 }} av {{ totalPages() }}</label
+ >
<span
v-if="showNextLink()"
class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-primary-light bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700"
diff --git a/src/components/ChatComponents/ChatComponent.vue b/src/components/ChatComponents/ChatComponent.vue
index ff6f25d..6b2252b 100644
--- a/src/components/ChatComponents/ChatComponent.vue
+++ b/src/components/ChatComponents/ChatComponent.vue
@@ -190,9 +190,13 @@ export default {
await this.getRecipient();
await this.reloadRents();
- ws.on("NEW_MESSAGE", () => {
- this.reloadMessages();
- }, "chat");
+ ws.on(
+ "NEW_MESSAGE",
+ () => {
+ this.reloadMessages();
+ },
+ "chat"
+ );
},
updated() {
if (this.canScroll) this.scroll();
@@ -201,7 +205,7 @@ export default {
},
unmounted() {
ws.end("NEW_MESSAGE", "chat");
- }
+ },
};
</script>
diff --git a/src/components/ChatComponents/ChatMessage.vue b/src/components/ChatComponents/ChatMessage.vue
index eb2e044..3490083 100644
--- a/src/components/ChatComponents/ChatMessage.vue
+++ b/src/components/ChatComponents/ChatMessage.vue
@@ -58,35 +58,36 @@ export default {
: "justify-end";
},
calculateTime() {
- var time = this?.message.timestamp;
- var date = new Date(time);
- //Todo add timing for mm and hh and week of message
- var mmOfMessage = String(date.getMinutes());
- var hhOfMessage = String(date.getHours());
- var ddOfMessage = String(date.getDate()).padStart(2, '0');
- var dayOfMessage = date.toLocaleString('default', { weekday: 'short' });
- var monthOfMessage = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
- const shortMonthOfMessage = date.toLocaleString('default', { month: 'short' });
- var yyyyOfMessage = date.getFullYear();
+ var time = this?.message.timestamp;
+ var date = new Date(time);
+ //Todo add timing for mm and hh and week of message
+ var mmOfMessage = String(date.getMinutes());
+ var hhOfMessage = String(date.getHours());
+ var ddOfMessage = String(date.getDate()).padStart(2, "0");
+ var dayOfMessage = date.toLocaleString("default", { weekday: "short" });
+ var monthOfMessage = String(date.getMonth() + 1).padStart(2, "0"); //January is 0!
+ const shortMonthOfMessage = date.toLocaleString("default", {
+ month: "short",
+ });
+ var yyyyOfMessage = date.getFullYear();
- var today = new Date();
- var dd = String(today.getDate()).padStart(2, '0');
- var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
- var yyyy = today.getFullYear();
- if(ddOfMessage == dd){
+ var today = new Date();
+ var dd = String(today.getDate()).padStart(2, "0");
+ var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
+ var yyyy = today.getFullYear();
+ if (ddOfMessage == dd) {
return "" + hhOfMessage + ":" + mmOfMessage + "";
+ } else if (this.isDateInThisWeek(date)) {
+ return "" + dayOfMessage + " " + hhOfMessage + ":" + mmOfMessage;
+ } else if (monthOfMessage == mm) {
+ return "" + ddOfMessage + " " + hhOfMessage + ":" + mmOfMessage;
+ } else if (yyyyOfMessage == yyyy) {
+ return "" + shortMonthOfMessage + " " + ddOfMessage;
}
- else if (this.isDateInThisWeek(date)){
- return "" +dayOfMessage + " " + hhOfMessage+":" + mmOfMessage;
- }
- else if (monthOfMessage == mm){
- return "" + ddOfMessage + " " + hhOfMessage + ":" + mmOfMessage;
- }
- else if (yyyyOfMessage == yyyy){
- return "" + shortMonthOfMessage + " " + ddOfMessage;
- }
- return shortMonthOfMessage + " " + ddOfMessage + " " + yyyyOfMessage + "";
-
+ return (
+ shortMonthOfMessage + " " + ddOfMessage + " " + yyyyOfMessage + ""
+ );
+
/*
Take timestamp and display date when message was sent
If message was sent this day show time (HH:MM) (13:00)
@@ -95,23 +96,22 @@ export default {
If message was sent this year show month and day of the month (MMM DD) (Jan 13)
If message was sent more than a year ago show year with date (MMM DD YYYY) (Jan 13 2020)
*/
-
},
isDateInThisWeek(date) {
- const todayObj = new Date();
- const todayDate = todayObj.getDate();
- const todayDay = todayObj.getDay();
+ const todayObj = new Date();
+ const todayDate = todayObj.getDate();
+ const todayDay = todayObj.getDay();
- // get first date of week
- const firstDayOfWeek = new Date(todayObj.setDate(todayDate - todayDay));
+ // get first date of week
+ const firstDayOfWeek = new Date(todayObj.setDate(todayDate - todayDay));
- // get last date of week
- const lastDayOfWeek = new Date(firstDayOfWeek);
- lastDayOfWeek.setDate(lastDayOfWeek.getDate() + 6);
+ // get last date of week
+ const lastDayOfWeek = new Date(firstDayOfWeek);
+ lastDayOfWeek.setDate(lastDayOfWeek.getDate() + 6);
- // if date is equal or within the first and last dates of the week
- return date >= firstDayOfWeek && date <= lastDayOfWeek;
-},
+ // if date is equal or within the first and last dates of the week
+ return date >= firstDayOfWeek && date <= lastDayOfWeek;
+ },
},
};
</script>
diff --git a/src/components/ChatComponents/ChatProfile.vue b/src/components/ChatComponents/ChatProfile.vue
index bfed6d6..db4c47c 100644
--- a/src/components/ChatComponents/ChatProfile.vue
+++ b/src/components/ChatComponents/ChatProfile.vue
@@ -82,6 +82,6 @@ export default {
selectUser() {
this.$emit("recipient", this.conversation?.recipient.userId);
},
- }
+ },
};
</script>
diff --git a/src/components/ChatComponents/ChatsComponent.vue b/src/components/ChatComponents/ChatsComponent.vue
index 90d6a30..f2cc2b0 100644
--- a/src/components/ChatComponents/ChatsComponent.vue
+++ b/src/components/ChatComponents/ChatsComponent.vue
@@ -90,9 +90,13 @@ export default {
},
async created() {
await this.fetchChats();
- ws.on("NEW_MESSAGE",async () => {
- await this.fetchChats()
- }, "chats");
+ ws.on(
+ "NEW_MESSAGE",
+ async () => {
+ await this.fetchChats();
+ },
+ "chats"
+ );
this.recipientID = this.$route.query?.userID || null;
if (!this.recipientID) this.hambugerDisplay = "block";
},
diff --git a/src/components/ChatComponents/RentalMessage.vue b/src/components/ChatComponents/RentalMessage.vue
index e57640b..8dab267 100644
--- a/src/components/ChatComponents/RentalMessage.vue
+++ b/src/components/ChatComponents/RentalMessage.vue
@@ -18,15 +18,15 @@
</p>
</div>
</div>
- <div class="buttons" v-if = "(!rent.isAccepted && !rent.deleted)">
+ <div class="buttons" v-if="!rent.isAccepted && !rent.deleted">
<button class="button green" @click="accept">Godta</button>
<button class="button red" @click="reject">Avslå</button>
</div>
- <div class="" v-if = rent.isAccepted>
- <h1 class="green">Godtatt</h1>
+ <div class="" v-if="rent.isAccepted">
+ <h1 class="green">Godtatt</h1>
</div>
- <div class="" v-if = rent.deleted>
- <h1 class="red">Avslått</h1>
+ <div class="" v-if="rent.deleted">
+ <h1 class="red">Avslått</h1>
</div>
</div>
</template>
@@ -38,9 +38,9 @@ export default {
props: {
rent: {
type: Object,
- required: true
- },
+ required: true,
},
+ },
computed: {
img() {
return "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80"; //this.rent.listing.imageUrl;
@@ -67,19 +67,18 @@ export default {
},
methods: {
async accept() {
- await axios.put(
- process.env.VUE_APP_BASEURL +
- `renting/${this.rent.rentId}/accept` ,null,
+ await axios.put(
+ process.env.VUE_APP_BASEURL + `renting/${this.rent.rentId}/accept`,
+ null,
{ headers: tokenHeader() }
);
},
async reject() {
- await axios.delete(
- process.env.VUE_APP_BASEURL +
- `renting/${this.rent.rentId}/delete`,null,
+ await axios.delete(
+ process.env.VUE_APP_BASEURL + `renting/${this.rent.rentId}/delete`,
+ null,
{ headers: tokenHeader() }
);
-
},
},
};
diff --git a/src/components/CommunityComponents/CommunityListItem.vue b/src/components/CommunityComponents/CommunityListItem.vue
index 02115d7..40d9064 100644
--- a/src/components/CommunityComponents/CommunityListItem.vue
+++ b/src/components/CommunityComponents/CommunityListItem.vue
@@ -54,7 +54,10 @@
v-if="!community.picture"
class="h-10 w-10 flex flex-col justify-center items-center ml-2 mr-2"
>
- <UserGroupIcon alt="Felleskapets bilde" class="h-10 w-10 text-primary-dark" />
+ <UserGroupIcon
+ alt="Felleskapets bilde"
+ class="h-10 w-10 text-primary-dark"
+ />
</div>
<div
v-else
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 200db5b..7a62e90 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -136,8 +136,8 @@
<!-- Images -->
<div class="mt-6">
<label
- class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
- id="imageLabel"
+ class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+ id="imageLabel"
>
Bilde (bildet må være .png)
</label>
diff --git a/src/services/ws.js b/src/services/ws.js
index 4a8cbbd..233ed88 100644
--- a/src/services/ws.js
+++ b/src/services/ws.js
@@ -12,9 +12,8 @@ const ws = (function () {
const fire = function (event, data) {
if (handlers[event]) {
-
// for each object in object fire event
- for(const key in handlers[event]) {
+ for (const key in handlers[event]) {
handlers[event][key](data);
}
}
@@ -45,9 +44,9 @@ const ws = (function () {
return {
on: function (event, callback, id = "none") {
// Generate random id
- if(!handlers[event]) {
- handlers[event] = {}
- };
+ if (!handlers[event]) {
+ handlers[event] = {};
+ }
handlers[event][id] = callback;
},
fire: fire,
diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue
index 16026a6..343f1f4 100644
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -3,10 +3,14 @@
<div id="contact" class="grid place-items-center w-full">
<div class="lg:mb-0 text-gray-700 w-full">
<div class="mx-4">
- <h2 class="flex justify-center text-primary-dark mb-6 uppercase font-bold text-2xl mt-4">
+ <h2
+ class="flex justify-center text-primary-dark mb-6 uppercase font-bold text-2xl mt-4"
+ >
Kontakt oss
</h2>
- <p class="flex justify-center mx-auto text-gray-500 leading-relaxed mb-12 max-w-md mt-8">
+ <p
+ class="flex justify-center mx-auto text-gray-500 leading-relaxed mb-12 max-w-md mt-8"
+ >
{{ contact.description }}
</p>
</div>
diff --git a/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/CalendarComponent.spec.js b/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/CalendarComponent.spec.js
index 9ed6d65..e244058 100644
--- a/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/CalendarComponent.spec.js
+++ b/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/CalendarComponent.spec.js
@@ -2,44 +2,43 @@ import { shallowMount } from "@vue/test-utils";
import CalendarComponent from "@/components/TimepickerComponents/DatepickerRange/CalendarComponent.vue";
describe("CalendarComponent tests", () => {
- let wrapper;
- beforeEach(() => {
- wrapper = shallowMount(CalendarComponent, {
- propsData: {
- month: new Date(1651739228545),// May 2022
- blockedDaysRange: [
- [new Date(1651739228545)], // 5 May
- [
- new Date(1652733228545), // 16 May
- new Date(1652833228545) // 18 May
- ]]
- }
- });
+ let wrapper;
+ beforeEach(() => {
+ wrapper = shallowMount(CalendarComponent, {
+ propsData: {
+ month: new Date(1651739228545), // May 2022
+ blockedDaysRange: [
+ [new Date(1651739228545)], // 5 May
+ [
+ new Date(1652733228545), // 16 May
+ new Date(1652833228545), // 18 May
+ ],
+ ],
+ },
});
-
- it("Is instansiated", () => {
- expect(wrapper.exists()).toBeTruthy();
- });
-
- it("Check that all week days are rendered", () => {
- expect(wrapper.findAll(".months").length).toBe(7);
- })
-
- it("Check that the correct amount of days are rendered", () => {
- // 31 days in May, 6 for start of week from last month and 5 for end of month
- expect(wrapper.find(".daysList").findAll("div").length).toBe(42);
- })
-
- it("Check select day works", () => {
- wrapper.find(".daysList").findAll("div")[7].find("button").trigger("click");
- expect(wrapper.emitted()).toHaveProperty('selectDate')
- })
-
- it("Test that selecting day outside of month does not work", () => {
- // Click on the first day, which is not in the month
- wrapper.find(".daysList").findAll("div")[0].find("button").trigger("click");
- expect(wrapper.emitted()).not.toHaveProperty('selectDate')
- })
-
-
-});
\ No newline at end of file
+ });
+
+ it("Is instansiated", () => {
+ expect(wrapper.exists()).toBeTruthy();
+ });
+
+ it("Check that all week days are rendered", () => {
+ expect(wrapper.findAll(".months").length).toBe(7);
+ });
+
+ it("Check that the correct amount of days are rendered", () => {
+ // 31 days in May, 6 for start of week from last month and 5 for end of month
+ expect(wrapper.find(".daysList").findAll("div").length).toBe(42);
+ });
+
+ it("Check select day works", () => {
+ wrapper.find(".daysList").findAll("div")[7].find("button").trigger("click");
+ expect(wrapper.emitted()).toHaveProperty("selectDate");
+ });
+
+ it("Test that selecting day outside of month does not work", () => {
+ // Click on the first day, which is not in the month
+ wrapper.find(".daysList").findAll("div")[0].find("button").trigger("click");
+ expect(wrapper.emitted()).not.toHaveProperty("selectDate");
+ });
+});
diff --git a/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/month-selector-test.spec.js b/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/month-selector-test.spec.js
index bba2c88..5a7204d 100644
--- a/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/month-selector-test.spec.js
+++ b/tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/month-selector-test.spec.js
@@ -2,45 +2,45 @@ import { shallowMount } from "@vue/test-utils";
import monthSelector from "@/components/TimepickerComponents/DatepickerRange/MonthSelector.vue";
describe("MonthSelector tests", () => {
- let wrapper;
- beforeEach(() => {
- wrapper = shallowMount(monthSelector, {
- propsData: {
- month: new Date(1651739228545), // 05 May 2022 UTC
- type: "type"
- }
- });
+ let wrapper;
+ beforeEach(() => {
+ wrapper = shallowMount(monthSelector, {
+ propsData: {
+ month: new Date(1651739228545), // 05 May 2022 UTC
+ type: "type",
+ },
});
-
- it("Is instansiated", () => {
- expect(wrapper.exists()).toBeTruthy();
- });
-
- it("Check if fields show correct informations", () => {
- // Check if container exists
- expect(wrapper.find(".container-c .text"))
- const children = wrapper.find(".container-c .text").findAll("div");
-
- // Check if there are two children
- expect(children.length).toBe(2);
-
- // Check children content
- expect(children[0].text()).toBe("MAY");
- expect(children[1].text()).toBe("2022");
- });
-
- it("Check that changing are emitted", async () => {
- // Check that there are two buttons
- expect(wrapper.findAll(".button").length).toBe(2);
-
- const buttons = wrapper.findAll(".button");
- console.log(buttons[0].html());
- // Check that the first button goes a month back
- await buttons[0].trigger("click");
- expect(wrapper.emitted()).toHaveProperty('back')
-
- // Check that the second button goes a month forward
- await buttons[1].trigger("click");
- expect(wrapper.emitted()).toHaveProperty('forward')
- })
-});
\ No newline at end of file
+ });
+
+ it("Is instansiated", () => {
+ expect(wrapper.exists()).toBeTruthy();
+ });
+
+ it("Check if fields show correct informations", () => {
+ // Check if container exists
+ expect(wrapper.find(".container-c .text"));
+ const children = wrapper.find(".container-c .text").findAll("div");
+
+ // Check if there are two children
+ expect(children.length).toBe(2);
+
+ // Check children content
+ expect(children[0].text()).toBe("MAY");
+ expect(children[1].text()).toBe("2022");
+ });
+
+ it("Check that changing are emitted", async () => {
+ // Check that there are two buttons
+ expect(wrapper.findAll(".button").length).toBe(2);
+
+ const buttons = wrapper.findAll(".button");
+ console.log(buttons[0].html());
+ // Check that the first button goes a month back
+ await buttons[0].trigger("click");
+ expect(wrapper.emitted()).toHaveProperty("back");
+
+ // Check that the second button goes a month forward
+ await buttons[1].trigger("click");
+ expect(wrapper.emitted()).toHaveProperty("forward");
+ });
+});
--
GitLab