Issue 38 remove arrows

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')"

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 />

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;
   },

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)
+});

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;