From ed1af7deb69e45425ae45e28210d869db34717ff Mon Sep 17 00:00:00 2001
From: Zara Mudassar <zara.1310@hotmail.com>
Date: Tue, 26 Apr 2022 09:56:35 +0200
Subject: [PATCH] Added some label rendering and input value tests.
---
src/components/CreateNewGroup.vue | 41 ++++++++++++------------
tests/unit/create-new-group.spec.js | 49 +++++++++++++++++++++++++++++
2 files changed, 70 insertions(+), 20 deletions(-)
create mode 100644 tests/unit/create-new-group.spec.js
diff --git a/src/components/CreateNewGroup.vue b/src/components/CreateNewGroup.vue
index 3008d90..ee5cfa4 100644
--- a/src/components/CreateNewGroup.vue
+++ b/src/components/CreateNewGroup.vue
@@ -9,6 +9,7 @@
<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">
@@ -16,14 +17,15 @@
class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
type="radio"
name="flexRadioDefault"
- id="flexRadioDefault1"
+ id="flexRadioOpen"
value="Ã…pen"
@change="checkRadioButton($event)"
checked
/>
<label
class="form-check-label inline-block text-gray-800"
- for="flexRadioDefault1"
+ for="flexRadioOpen"
+ id="radioBoxOpenLabel"
>
Ã…pen
</label>
@@ -33,13 +35,14 @@
class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
type="radio"
name="flexRadioDefault"
- id="flexRadioDefault2"
+ id="flexRadioPrivate"
value="Privat"
@change="checkRadioButton($event)"
/>
<label
class="form-check-label inline-block text-gray-800"
- for="flexRadioDefault2"
+ for="flexRadioPrivate"
+ id="radioBoxPrivateLabel"
>
Privat
</label>
@@ -157,22 +160,21 @@
<!-- Button for adding an image -->
<div class="inline-flex rounded-md shadow-sm">
<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 cursor-not-allowed"
- :disabled="imageAdded"
+ @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 cursor-not-allowed"
+ :disabled="imageAdded"
>
Velg bilde
</button>
<!-- Button for removing an image -->
<button
- class="w-1/12 ml-5 text-white bg-white-500 font-medium rounded-lg text-sm"
- v-show="imageAdded"
- @click="removeImage"
+ class="w-1/12 ml-5 text-white bg-white-500 font-medium rounded-lg text-sm"
+ v-show="imageAdded"
+ @click="removeImage"
>
- <img src="../assets/removeIcon.png" alt="Remove icon image">
+ <img src="../assets/removeIcon.png" alt="Remove icon image" />
</button>
-
</div>
<!-- Div box for showing all chosen images -->
@@ -196,7 +198,7 @@
<script>
import useVuelidate from "@vuelidate/core";
-import { required, helpers, maxLength} from "@vuelidate/validators";
+import { required, helpers, maxLength } from "@vuelidate/validators";
export default {
name: "CreateNewGroup.vue",
@@ -247,18 +249,17 @@ export default {
imageThere: false,
};
},
- computed:{
- imageAdded: function (){
- if(this.imageThere){
+ computed: {
+ imageAdded: function () {
+ if (this.imageThere) {
return true;
- }
- else{
+ } else {
return false;
}
- }
+ },
},
methods: {
- removeImage: function (){
+ removeImage: function () {
this.group.images.pop();
this.imageThere = false;
console.log("Bilder nå: " + this.group.images.length);
diff --git a/tests/unit/create-new-group.spec.js b/tests/unit/create-new-group.spec.js
new file mode 100644
index 0000000..2b269b0
--- /dev/null
+++ b/tests/unit/create-new-group.spec.js
@@ -0,0 +1,49 @@
+import { shallowMount } from "@vue/test-utils";
+import CreateNewGroup from "@/components/CreateNewGroup.vue";
+
+describe("CreateNewGroup elements rendering", () => {
+
+ it("renders all labels", () => {
+
+ const wrapper = shallowMount(CreateNewGroup);
+
+ expect(wrapper.find('#radioBoxLabel').text()).toMatch("Synlighet");
+ expect(wrapper.find('#radioBoxOpenLabel').text()).toMatch("Ã…pen");
+ expect(wrapper.find('#radioBoxPrivateLabel').text()).toMatch("Privat");
+ expect(wrapper.find('#titleLabel').text()).toMatch("Gruppenavn");
+ expect(wrapper.find('#selectCategoryLabel').text()).toMatch("Kategori");
+ expect(wrapper.find('#descriptionLabel').text()).toMatch("Beskrivelse");
+ expect(wrapper.find('#imageLabel').text()).toMatch("Bilde");
+
+ });
+
+ it("Tests setting values of input field", async() => {
+
+ const wrapper = shallowMount(CreateNewGroup);
+
+ const titleInput = wrapper.find('#title');
+ await titleInput.setValue("Fjellgata");
+ expect(titleInput.element.value).toBe("Fjellgata");
+
+ const selectedCategory = wrapper.find('#categories');
+ await selectedCategory.setValue("Borettslag");
+ expect(selectedCategory.element.value).toBe("Borettslag");
+
+ const descriptionInput = wrapper.find('#description');
+ await descriptionInput.setValue("Dette er et borettslag");
+ expect(descriptionInput.element.value).toBe("Dette er et borettslag");
+ });
+
+ it("Tests if radio box checks", async() => {
+
+ const wrapper = shallowMount(CreateNewGroup);
+
+ const radioInputOpen = wrapper.find('#flexRadioOpen');
+ await radioInputOpen.setChecked();
+ expect(radioInputOpen.element.checked).toBeTruthy();
+
+ const radioInputPrivate = wrapper.find('#flexRadioPrivate');
+ await radioInputPrivate.setChecked();
+ expect(radioInputPrivate.element.checked).toBeTruthy();
+ });
+});
--
GitLab