Merge pull request #52 from alkrauss48/issue-38-remove-arrows

Issue 38 remove arrows
alkrauss48 · Oct 30, 2024 · fee0738 · fee0738
2 parents 478b404 + 1a9ed8d
commit fee0738
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 7 deletions.
diff --git a/resources/js/Components/SlideArrows.vue b/resources/js/Components/SlideArrows.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
 
+defineProps<{
+  isFirstSlide: boolean,
+  isLastSlide: boolean,
+}>();
+
 const emit = defineEmits<{
   (e: 'next'): void
   (e: 'previous'): void
@@ -10,6 +15,7 @@ const emit = defineEmits<{
 <template>
   <section>
     <button
+      v-if="!isFirstSlide"
       id="previous"
       type="button"
       @click="emit('previous')"
@@ -19,6 +25,7 @@ const emit = defineEmits<{
         border-r-[30px] border-r-gray-300/50 hover:border-r-gray-300"
     ></button>
     <button
+      v-if="!isLastSlide"
       id="next"
       type="button"
       @click="emit('next')"

diff --git a/resources/js/Components/SlideView.vue b/resources/js/Components/SlideView.vue
@@ -126,6 +126,8 @@ onUnmounted(() => {
         <SlideArrows
             @next="incrementContent(1)"
             @previous="incrementContent(-1)"
+            :is-first-slide="slideStore.isStart()"
+            :is-last-slide="slideStore.isEnd()"
             />
         <ProgressLabel v-if="showProgressLabel" />
         <ProgressBar v-else />

diff --git a/resources/js/store/slideStore.ts b/resources/js/store/slideStore.ts
@@ -30,6 +30,10 @@ const slideStore = reactive({
     slideStore.index = newIndex;
   },
 
+  isStart() : boolean {
+      return this.index === 0;
+  },
+
   isEnd() : boolean {
       return this.index === dataStore.data.length - 1;
   },

diff --git a/resources/js/test/components/SlideArrows.test.ts b/resources/js/test/components/SlideArrows.test.ts
@@ -1,9 +1,18 @@
-import { shallowMount } from '@vue/test-utils'
+import { shallowMount, VueWrapper } from '@vue/test-utils'
 
 import SlideArrows from '@/Components/SlideArrows.vue'
 
+const mountWrapper = () : VueWrapper<any> => {
+  return shallowMount(SlideArrows, {
+    props: {
+      isFirstSlide: false,
+      isLastSlide: false,
+    }
+  });
+};
+
 test('emits "next" event', async () => {
-  const wrapper = shallowMount(SlideArrows);
+  const wrapper = mountWrapper();
 
   wrapper.vm.$emit('next');
 
@@ -18,7 +27,7 @@ test('emits "next" event', async () => {
 });
 
 test('emits "previous" event', async () => {
-  const wrapper = shallowMount(SlideArrows);
+  const wrapper = mountWrapper();
 
   wrapper.vm.$emit('previous');
 
@@ -33,19 +42,63 @@ test('emits "previous" event', async () => {
 });
 
 test('emits next when next button is clicked', () => {
-  const wrapper = shallowMount(SlideArrows);
+  const wrapper = mountWrapper();
 
   wrapper.find('#next').trigger('click')
 
   expect(wrapper.emitted()).toHaveProperty('next')
   expect(wrapper.emitted()).not.toHaveProperty('previous')
-})
+});
 
 test('emits previous when previous button is clicked', () => {
-  const wrapper = shallowMount(SlideArrows);
+  const wrapper = mountWrapper();
 
   wrapper.find('#previous').trigger('click')
 
   expect(wrapper.emitted()).toHaveProperty('previous')
   expect(wrapper.emitted()).not.toHaveProperty('next')
-})
+});
+
+test('previous button is not visible if isFirstSlide prop is true', () => {
+  const wrapper = shallowMount(SlideArrows, {
+    props: {
+      isFirstSlide: true,
+      isLastSlide: false,
+    }
+  });
+
+  expect(wrapper.find('#previous').exists()).toBe(false)
+});
+
+test('previous button is visible if isFirstSlide prop is false', () => {
+  const wrapper = shallowMount(SlideArrows, {
+    props: {
+      isFirstSlide: false,
+      isLastSlide: false,
+    }
+  });
+
+  expect(wrapper.find('#previous').exists()).toBe(true)
+});
+
+test('next button is not visible if isLastSlide prop is true', () => {
+  const wrapper = shallowMount(SlideArrows, {
+    props: {
+      isFirstSlide: false,
+      isLastSlide: true,
+    }
+  });
+
+  expect(wrapper.find('#next').exists()).toBe(false)
+});
+
+test('next button is visible if isLastSlide prop is false', () => {
+  const wrapper = shallowMount(SlideArrows, {
+    props: {
+      isFirstSlide: false,
+      isLastSlide: false,
+    }
+  });
+
+  expect(wrapper.find('#next').exists()).toBe(true)
+});
diff --git a/resources/js/test/store/slideStore.test.ts b/resources/js/test/store/slideStore.test.ts
@@ -47,6 +47,20 @@ test('returns false for isEnd if slide index is not at the end', async () => {
   expect(slideStore.isEnd()).toBe(false);
 });
 
+test('returns true for isStart if slide index is at the start', async () => {
+  dataStore.data = ['a', 'b', 'c'];
+  slideStore.index = 0;
+
+  expect(slideStore.isStart()).toBe(true);
+});
+
+test('returns false for isStart if slide index is not at the start', async () => {
+  dataStore.data = ['a', 'b', 'c'];
+  slideStore.index = 1;
+
+  expect(slideStore.isStart()).toBe(false);
+});
+
 test('returns true for canLoop if loop value is valid', async () => {
   slideStore.loop = 5;