diff --git a/src/components/BaseComponents/CommunityHeader.vue b/src/components/CommunityComponents/CommunityHeader.vue similarity index 96% rename from src/components/BaseComponents/CommunityHeader.vue rename to src/components/CommunityComponents/CommunityHeader.vue index d405e03f83db080f399ac4480ea1d501f2a7929a..9be1167a1da7b4871f785ffbc460bf6c4471f7c8 100644 --- a/src/components/BaseComponents/CommunityHeader.vue +++ b/src/components/CommunityComponents/CommunityHeader.vue @@ -1,6 +1,9 @@ <template> <div class="flex items-center justify-between mx-4"> - <div class="flex-1 min-w-0"> + <router-link + :to="'/community/' + community.communityId" + class="flex-1 min-w-0" + > <h2 class="text-xl md:text-2xl text-gray-600 font-medium w-full sm:truncate" > @@ -26,7 +29,7 @@ {{ community.location }} </div> </div> - </div> + </router-link> <div> <!-- If the user is not a member in the community, this button will show --> <div v-if="!member"> diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue index badc88b33e5961701c1f83fa004420df60af97f4..477ba7fbbf0b314242af6e2762be65c67b040ee2 100644 --- a/src/components/CommunityComponents/CommunityHome.vue +++ b/src/components/CommunityComponents/CommunityHome.vue @@ -41,8 +41,8 @@ </template> <script> +import CommunityHeader from "@/components/CommunityComponents/CommunityHeader.vue"; import ItemCard from "@/components/ItemComponents/ItemCard"; -import CommunityHeader from "@/components/BaseComponents/CommunityHeader"; import { GetCommunity, GetListingsInCommunity } from "@/utils/apiutil"; export default { name: "SearchItemListComponent", diff --git a/src/components/CommunityComponents/MemberList.vue b/src/components/CommunityComponents/MemberList.vue index b8360de5851fd26e86d6e9c5925f68eec3011e31..56c8bbe02a6683c4b5dc9bb2df22f1b3ad9809ec 100644 --- a/src/components/CommunityComponents/MemberList.vue +++ b/src/components/CommunityComponents/MemberList.vue @@ -12,9 +12,9 @@ </template> <script> -import UserListItemCard from "../UserProfileComponents/UserListItemCard.vue"; +import UserListItemCard from "@/components/UserProfileComponents/UserListItemCard.vue"; import { GetMembersOfCommunity, GetCommunity } from "@/utils/apiutil"; -import CommunityHeader from "@/components/BaseComponents/CommunityHeader"; +import CommunityHeader from "@/components/CommunityComponents/CommunityHeader.vue"; export default { data() { diff --git a/src/components/ItemComponents/NewItemForm.vue b/src/components/ItemComponents/NewItemForm.vue index 570ef7df0b97a804d3ef1326754a182938b4adef..265f8ec969d4fbadd2d7a4660f58bff9a3bbd438 100644 --- a/src/components/ItemComponents/NewItemForm.vue +++ b/src/components/ItemComponents/NewItemForm.vue @@ -79,7 +79,7 @@ <div class="form-check" v-for="group in groups" :key="group"> <input - class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-primary-medium checked:bg-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" + class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" :value="group.communityId" @change="onChangeGroup($event)" diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/UserProfile.vue similarity index 97% rename from src/components/UserProfileComponents/LargeProfileCard.vue rename to src/components/UserProfileComponents/UserProfile.vue index 7ee44e43946ce93d577ae888efc9923d71f7aacc..9235ab472cdd07769260c182f5acc0fddd9632a8 100644 --- a/src/components/UserProfileComponents/LargeProfileCard.vue +++ b/src/components/UserProfileComponents/UserProfile.vue @@ -27,7 +27,10 @@ v-show="dropdown" class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700" > - <ul class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl" aria-labelledby="dropdownDefault"> + <ul + class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl" + aria-labelledby="dropdownDefault" + > <li> <router-link to="" diff --git a/src/views/UserProfileViews/ProfileView.vue b/src/views/UserProfileViews/ProfileView.vue index 430082e1e6e06586d7384c8bac8b91727978c768..a490eb09dfd233803ffd624b428fa206ec767f63 100644 --- a/src/views/UserProfileViews/ProfileView.vue +++ b/src/views/UserProfileViews/ProfileView.vue @@ -5,7 +5,7 @@ </template> <script> -import LargeProfileCard from "@/components/UserProfileComponents/LargeProfileCard.vue"; +import LargeProfileCard from "@/components/UserProfileComponents/UserProfile.vue"; export default { components: { diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap new file mode 100644 index 0000000000000000000000000000000000000000..2e1f24cb2c4a254b913019f92677f207822ad056 --- /dev/null +++ b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap @@ -0,0 +1,63 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CommunityHeader component renders correctly 1`] = ` +<div + class="flex items-center justify-between mx-4" +> + <router-link + class="flex-1 min-w-0" + to="/community/1" + > + <h2 + class="text-xl md:text-2xl text-gray-600 font-medium w-full sm:truncate" + > + String + </h2> + <div + class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6" + > + <div + class="mt-2 flex items-center text-sm text-gray-500" + > + <svg + aria-hidden="true" + class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" + fill="currentColor" + viewBox="0 0 20 20" + xmlns="http://www.w3.org/2000/svg" + > + <path + clip-rule="evenodd" + d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" + fill-rule="evenodd" + /> + </svg> + String + </div> + </div> + </router-link> + <div> + <!-- If the user is not a member in the community, this button will show --> + <!--v-if--> + <!-- If the user is member of the community, this hamburger menu will show --> + <div> + <svg + class="w-9 h-9 cursor-pointer" + fill="none" + stroke="currentColor" + viewBox="0 0 24 24" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M4 6h16M4 12h16M4 18h16" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + /> + </svg> + <!--v-if--> + <!-- class="absolute" --> + </div> + </div> +</div> +`; diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap new file mode 100644 index 0000000000000000000000000000000000000000..dd345a3b786424cdd10ecd5b90797cd164a9a1a9 --- /dev/null +++ b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap @@ -0,0 +1,167 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CreateNewGroup elements rendering renders correctly 1`] = ` +<div + class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4" +> + <!-- Component heading --> + <div + class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-10" + > + Opprett ny gruppe + </div> + <!-- Radio boxes --> + <div + class="mt-6" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + id="radioBoxLabel" + > + Synlighet + </label> + <div + class="form-check" + > + <input + class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" + id="flexRadioOpen" + name="flexRadioDefault" + type="radio" + value="Åpen" + /> + <label + class="form-check-label inline-block text-gray-800" + for="flexRadioOpen" + id="radioBoxOpenLabel" + > + Åpen + </label> + </div> + <div + class="form-check" + > + <input + class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" + id="flexRadioPrivate" + name="flexRadioDefault" + type="radio" + value="Privat" + /> + <label + class="form-check-label inline-block text-gray-800" + for="flexRadioPrivate" + id="radioBoxPrivateLabel" + > + Privat + </label> + </div> + </div> + <!-- Title --> + <div + class="mt-6" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + id="titleLabel" + > + Gruppenavn + </label> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="title" + required="" + type="text" + /> + <!-- error message for title--> + + + </div> + <!-- Place --> + <div + class="mt-6" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" + id="positionLabel" + > + By/Sted + </label> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + required="" + type="text" + /> + <!-- error message for place--> + + + </div> + <!-- Description --> + <div + class="mt-6" + > + <label + class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" + id="descriptionLabel" + > + Beskrivelse + </label> + <textarea + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="description" + required="" + rows="4" + /> + <!-- error message for description --> + + + </div> + <!-- Images --> + <div + class="mt-6" + > + <label + class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400" + id="imageLabel" + > + Bilde + </label> + <input + accept="image/png, image/jpeg" + multiple="" + style="display: none;" + type="file" + /> + <!-- Button for adding an image --> + <div + class="inline-flex rounded-md shadow-sm" + > + <div + class="text-error uppercase text-center" + > + midlertidig fjernet + </div> + <!-- <button + @click="$refs.file.click()" + class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50" + :disabled="imageAdded" + > + Velg bilde + </button> --> + <!-- Button for removing an image --> + </div> + <!-- Div box for showing all chosen images --> + + + </div> + <!-- Save item button --> + <div + class="flex justify-center mt-10 float-right" + > + <button-stub + id="saveButton" + text="Lagre" + /> + </div> +</div> +`; diff --git a/tests/unit/component-tests/base-component-tests/community-header.spec.js b/tests/unit/component-tests/community-component-tests/community-header.spec.js similarity index 60% rename from tests/unit/component-tests/base-component-tests/community-header.spec.js rename to tests/unit/component-tests/community-component-tests/community-header.spec.js index 97e5cd0889634e1205031c5ee1fe253e4892a6c1..84c03bcf42a854598edb236b4de23f26a902507e 100644 --- a/tests/unit/component-tests/base-component-tests/community-header.spec.js +++ b/tests/unit/component-tests/community-component-tests/community-header.spec.js @@ -1,5 +1,6 @@ import { mount } from "@vue/test-utils"; -import CommunityHeader from "@/components/BaseComponents/CommunityHeader.vue"; +import CommunityHeader from "@/components/CommunityComponents/CommunityHeader.vue"; +import { route, router, $route, $router } from "../../mock-router" describe("CommunityHeader component", () => { let wrapper; @@ -18,9 +19,21 @@ describe("CommunityHeader component", () => { picture: "String", }, }, + global: { + mocks: { + route, + router, + $route, + $router, + } + } }); }); + it("renders correctly", () => { + expect(wrapper.element).toMatchSnapshot(); + }); + it("is instantiated", () => { expect(wrapper.exists()).toBeTruthy(); }); diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap new file mode 100644 index 0000000000000000000000000000000000000000..bdec3ea33b7b23b7b0566dac81e8d132b9c0befa --- /dev/null +++ b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap @@ -0,0 +1,77 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LoginForm component renders correctly 1`] = ` +<div + class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full" +> + <div + class="px-6 py-4 mt-4" + > + <div + class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8" + > + Logg på + </div> + <div> + <div + class="w-full mt-6" + > + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + placeholder="Skriv inn din e-postadresse *" + required="" + type="email" + /> + <!-- error message --> + + + </div> + <div + class="w-full mt-6" + > + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + placeholder="Vennligst oppgi passordet ditt *" + required="" + type="password" + /> + <!-- error message --> + + + </div> + <div + class="flex items-center justify-between mt-8" + > + <router-link + class="text-primary-medium" + to="/resetPassword" + > + Glemt passord? + </router-link> + <button + class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light" + > + Logg på + </button> + </div> + </div> + </div> + <div + class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700" + > + <router-link + class="mx-2 text-sm font-bold text-primary-medium dark:text-primary-light hover:underline" + to="/register" + > + Opprette ny konto + </router-link> + </div> + <div + class="flex items-center justify-center text-center bg-gray-50" + > + <label + class="mx-2 text-sm font-bold text-red-500 dark:text-primary-light hover:underline" + /> + </div> +</div> +`; diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap new file mode 100644 index 0000000000000000000000000000000000000000..98a0bdc228f2d0dfc90a11afe853ee43bf44aa9c --- /dev/null +++ b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap @@ -0,0 +1,96 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RegisterFormComponent renders correctly 1`] = ` +<div + class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4" +> + <div + class="text-xl md:text-2xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8" + id="registerLabel" + > + Opprett ny konto + </div> + <form> + <div + class="grid grid-cols-1 gap-6 mt-4" + > + <div> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="email" + placeholder="E-post adresse" + type="email" + /> + <!-- error message --> + + + </div> + <div> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="password" + placeholder="Passord" + type="password" + /> + <!-- error message --> + + + </div> + <div> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="confirmPassword" + placeholder="Bekreft passord" + type="password" + /> + <!-- error message --> + + + </div> + <div> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + data-test="firstNameTest" + id="firstName" + placeholder="Fornavn" + type="text" + /> + <!-- error message --> + + + </div> + <div> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="lastName" + placeholder="Etternavn" + type="text" + /> + <!-- error message --> + + + </div> + <div> + <input + class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" + id="address" + placeholder="Adresse" + type="text" + /> + <!-- error message --> + + + </div> + </div> + <div + class="flex justify-end mt-6" + > + <button + class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light" + > + Opprett + </button> + </div> + </form> +</div> +`; diff --git a/tests/unit/mock-router.js b/tests/unit/mock-router.js new file mode 100644 index 0000000000000000000000000000000000000000..dde85dbfabf9199566f08fa0659df69e806645e9 --- /dev/null +++ b/tests/unit/mock-router.js @@ -0,0 +1,23 @@ +import { jest } from "@jest/globals"; + +// route id param for pages that require routing +// id = 1, user = test testesen +export const route = { + params: { + id: 1, + }, +}; + +export const router = { + push: jest.fn(), +}; + +export const $route = { + params: { + id: 1, + }, +}; + +export const $router = { + push: jest.fn(), +}; diff --git a/tests/unit/mock-store.js b/tests/unit/mock-store.js new file mode 100644 index 0000000000000000000000000000000000000000..23d64adff28e36082babc7e866e7230f704f586c --- /dev/null +++ b/tests/unit/mock-store.js @@ -0,0 +1,38 @@ +import { jest } from "@jest/globals"; + +// user = test testesen +const user = { + state: { + token: + "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmaXJzdE5hbWUiOiJUZXN0IiwibGFzdE5hbWUiOiJUZXN0ZXNlbiIsImFjY291bnRJZCI6IjEiLCJleHAiOjE2NTE2NTQxNDUsImVtYWlsIjoidGVzdEB0ZXN0LmNvbSJ9.LnOYs_9WLusp463bQo9aXPcNGI4ooz7uI3iiMrnSPTY", + }, + + mutations: { + logout(state) { + state.token = null; + }, + saveToken(state, token) { + state.token = token; + }, + }, +}; + +export const store = { + state: { + user, + }, + modules: { + user, + }, + commit: jest.fn(), +}; + +export const $store = { + state: { + user, + }, + modules: { + user, + }, + commit: jest.fn(), +};