chore: move footer to sidebar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "todo.it",
-  "version": "2.8.3",
+  "version": "2.8.4",
   "description": "Another todo app but with features",
   "repository": "https://github.com/begprod/todo.it",
   "homepage": "https://begprod.github.io/todo.it/",

src/components/BaseBacklog/BaseBacklog.spec.ts

@@ -8,6 +8,7 @@ import BaseSidebar from '@/components/ui/BaseSidebar/BaseSidebar.vue';
 import BaseLogo from '@/components/layouts/partials/BaseLogo/BaseLogo.vue';
 import BaseButton from '@/components/ui/controls/BaseButton/BaseButton.vue';
 import BaseTaskListBacklog from '@/components/BaseTaskListBacklog/BaseTaskListBacklog.vue';
+import BaseFooter from '@/components/layouts/partials/BaseFooter/BaseFooter.vue';
 
 describe('BaseBacklog', () => {
   const wrapper = mount(BaseBacklog, {
@@ -23,6 +24,7 @@ describe('BaseBacklog', () => {
       BaseLogo,
       BaseButton,
       BaseTaskListBacklog,
+      BaseFooter,
       Cog6ToothIcon,
       PlusIcon,
     },
@@ -41,6 +43,10 @@ describe('BaseBacklog', () => {
     expect(wrapper.findComponent(BaseLogo).exists()).toBe(true);
   });
 
+  it('should contain footer', () => {
+    expect(wrapper.findComponent(BaseFooter).exists()).toBe(true);
+  });
+
   it('should contain github image', () => {
     expect(wrapper.html()).toContain(
       'w-6 opacity-80 hover:opacity-100 transition-all duration-300',

src/components/BaseSettings/BaseSettings.vue

@@ -1,5 +1,7 @@
 <template>
-  <BaseSidebar :is-open="isSettingsOpen"> Settings </BaseSidebar>
+  <BaseSidebar :is-open="isSettingsOpen">
+    <template #main> Settings </template>
+  </BaseSidebar>
 </template>
 
 <script setup lang="ts">

src/components/layouts/BaseLayout/BaseLayout.spec.ts

@@ -1,7 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
 import BaseLayout from '@/components/layouts/BaseLayout/BaseLayout.vue';
-import BaseFooter from '@/components/layouts/partials/BaseFooter/BaseFooter.vue';
 import BaseBacklog from '@/components/BaseBacklog/BaseBacklog.vue';
 import BaseTaskList from '@/components/BaseTaskList/BaseTaskList.vue';
 import BaseTaskActionsMenu from '@/components/BaseTaskActionsMenu/BaseTaskActionsMenu.vue';
@@ -13,6 +12,5 @@ describe('BaseLayout', () => {
     expect(wrapper.findComponent(BaseBacklog).exists()).toBe(true);
     expect(wrapper.findComponent(BaseTaskList).exists()).toBe(true);
     expect(wrapper.findComponent(BaseTaskActionsMenu).exists()).toBe(true);
-    expect(wrapper.findComponent(BaseFooter).exists()).toBe(true);
   });
 });

src/components/layouts/partials/BaseFooter/BaseFooter.spec.ts

@@ -5,17 +5,22 @@ import BaseFooter from '@/components/layouts/partials/BaseFooter/BaseFooter.vue'
 describe('BaseFooter', () => {
   const wrapper = mount(BaseFooter);
 
-  it('should contain css classes', () => {
-    expect(wrapper.html()).toContain(
-      'container flex flex-col items-center justify-center mx-auto p-5 pb-10 text-sm text-center text-gray-700',
-    );
-    expect(wrapper.html()).toContain('text-red-600 text-md');
-    expect(wrapper.html()).toContain('underline');
-    expect(wrapper.html()).toContain('inline-block ml-2 -rotate-12 origin-center');
+  it('should contain elements', () => {
+    const footer = wrapper.find('[data-testid="footer"]');
+    const authorLink = wrapper.find('[data-testid="author-link"]');
+    const installationLink = wrapper.find('[data-testid="installation-link"]');
+
+    expect(footer.exists()).toBe(true);
+    expect(authorLink.exists()).toBe(true);
+    expect(installationLink.exists()).toBe(true);
   });
 
-  it('should contain installation link', () => {
-    expect(wrapper.html()).toContain(
+  it('should contain links', () => {
+    const authorLink = wrapper.find('[data-testid="author-link"]');
+    const installationLink = wrapper.find('[data-testid="installation-link"]');
+
+    expect(authorLink.html()).toContain('https://github.com/begprod');
+    expect(installationLink.html()).toContain(
       'https://github.com/begprod/todo.it#install-application-on-your-device',
     );
   });

src/components/layouts/partials/BaseFooter/BaseFooter.vue

@@ -1,23 +1,23 @@
 <template>
-  <footer>
-    <div
-      class="container flex flex-col items-center justify-center mx-auto p-5 text-sm text-center text-gray-700"
-    >
-      <p>
-        made with <span class="text-red-600 text-md">❤</span> by
-        <a href="https://github.com/begprod" class="underline">begprod</a>
-      </p>
-      <p>
-        <a
-          class="underline"
-          href="https://github.com/begprod/todo.it#install-application-on-your-device"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Install app on device instruction
-          <span class="inline-block ml-2 -rotate-12 origin-center">→</span>
-        </a>
-      </p>
-    </div>
+  <footer
+    class="container flex flex-col items-center justify-center mx-auto p-5 text-sm text-center text-gray-700"
+    data-testid="footer"
+  >
+    <p data-testid="author-link">
+      made with <span class="text-red-600 text-md">❤</span> by
+      <a href="https://github.com/begprod" class="underline">begprod</a>
+    </p>
+    <p>
+      <a
+        class="underline"
+        href="https://github.com/begprod/todo.it#install-application-on-your-device"
+        target="_blank"
+        rel="noreferrer"
+        data-testid="installation-link"
+      >
+        Install app on device instruction
+        <span class="inline-block ml-2 -rotate-12 origin-center">→</span>
+      </a>
+    </p>
   </footer>
 </template>

src/components/ui/BaseSidebar/BaseSidebar.spec.ts

@@ -8,17 +8,19 @@ describe('BaseSidebar', () => {
       isOpen: false,
     },
     slots: {
-      default: '<div>Slot content</div>',
+      main: '<div>Slot content</div>',
+      footer: '<div>Footer content</div>',
     },
   });
 
   it('should not render slot content when isOpen is false', () => {
     expect(wrapper.html()).not.toContain('Slot content');
   });
 
-  it('should render slot content when isOpen is true', async () => {
+  it('should render slots content when isOpen is true', async () => {
     await wrapper.setProps({ isOpen: true });
 
     expect(wrapper.html()).toContain('Slot content');
+    expect(wrapper.html()).toContain('Footer content');
   });
 });