feat(home): separate home text cursor to a separate component, add Ta…

…ilwind and tests (#398)
Thomasan1999 · Sep 14, 2024 · 21d5e4c · 21d5e4c
1 parent 268c76e
commit 21d5e4c
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 45 deletions.
diff --git a/client/src/components/main/home/HomeText.spec.ts b/client/src/components/main/home/HomeText.spec.ts
@@ -9,8 +9,9 @@ import _ from 'lodash';
 import { ExistingDomWrapper } from '@/types/tests';
 import { buildCreateWrapper, getTestingSelector } from '@/utils/test';
 import { MockInstance } from 'vitest';
+import HomeTextCursor from '@/components/main/home/HomeTextCursor.vue';
 
-const CURSOR_SELECTOR = getTestingSelector('cursor');
+const LOCALES_SELECTOR = getTestingSelector('locales');
 const MARKED_TEXT_SELECTOR = getTestingSelector('marked-text');
 const NON_MARKED_TEXT_SELECTOR = getTestingSelector('non-marked-text');
 const PROGRAMMING_LANGUAGE_SELECTOR = getTestingSelector('programming-language');
@@ -111,6 +112,17 @@ describe('HomeText', () => {
         }
     }
 
+    describe('structure', () => {
+        it('displays correct structure', () => {
+            const wrapper = createWrapper();
+
+            expect(wrapper.find(LOCALES_SELECTOR).exists()).toBe(true);
+            expect(wrapper.find(NON_MARKED_TEXT_SELECTOR).exists()).toBe(true);
+            expect(wrapper.find(MARKED_TEXT_SELECTOR).exists()).toBe(true);
+            expect(wrapper.findComponent(HomeTextCursor).exists()).toBe(true);
+        });
+    });
+
     describe('site language change', () => {
         it("instantly toggles 'an' prefix", async () => {
             function expectLanguageToBePrefixed(languageElement: ExistingDomWrapper<Element>, value: boolean): void {
@@ -180,47 +192,37 @@ describe('HomeText', () => {
     });
 
     describe('cursor', () => {
-        function getCursorElement(wrapper: VueWrapper) {
-            return wrapper.get<HTMLSpanElement>(CURSOR_SELECTOR);
-        }
-
         it('stops blinking on text removing', async () => {
             const wrapper = createWrapper();
 
             const markedTextElement = getMarkedTextElement(wrapper);
 
-            const cursorElement = getCursorElement(wrapper);
-
             await awaitLanguageMarkingStart(markedTextElement);
             await awaitTextRemovingStart(markedTextElement);
 
-            expect(cursorElement.classes()).not.toContain('blinking');
+            expect(wrapper.findComponent(HomeTextCursor).props('blinking')).toBe(false);
         });
 
         it('stops blinking on text writing', async () => {
             const wrapper = createWrapper();
 
             const markedTextElement = getMarkedTextElement(wrapper);
 
-            const cursorElement = getCursorElement(wrapper);
-
             await awaitLanguageMarkingStart(markedTextElement);
             await awaitTextRemovingStart(markedTextElement);
             await awaitNewLanguageWritingStart(markedTextElement);
 
-            expect(cursorElement.classes()).not.toContain('blinking');
+            expect(wrapper.findComponent(HomeTextCursor).props('blinking')).toBe(false);
         });
 
         it('stops blinking on text marking', async () => {
             const wrapper = createWrapper();
 
             const markedTextElement = getMarkedTextElement(wrapper);
 
-            const cursorElement = getCursorElement(wrapper);
-
             await awaitLanguageMarkingStart(markedTextElement);
 
-            expect(cursorElement.classes()).not.toContain('blinking');
+            expect(wrapper.findComponent(HomeTextCursor).props('blinking')).toBe(false);
         });
 
         it('starts blinking on written text idle', async () => {
@@ -229,15 +231,13 @@ describe('HomeText', () => {
             const markedTextElement = getMarkedTextElement(wrapper);
             const nonMarkedTextElement = getNonMarkedTextElement(wrapper);
 
-            const cursorElement = getCursorElement(wrapper);
-
-            expect(cursorElement.classes()).toContain('blinking');
+            expect(wrapper.findComponent(HomeTextCursor).props('blinking')).toBe(true);
 
             await awaitLanguageMarkingStart(markedTextElement);
             await awaitTextRemovingStart(markedTextElement);
             await awaitNewLanguageWritingEnd(nonMarkedTextElement);
 
-            expect(cursorElement.classes()).not.toContain('blinking');
+            expect(wrapper.findComponent(HomeTextCursor).props('blinking')).toBe(false);
         });
     });
 });
diff --git a/client/src/components/main/home/HomeText.vue b/client/src/components/main/home/HomeText.vue
@@ -18,13 +18,9 @@
                 <HomeTextProgrammingLanguage :programmingLanguage="markedText" />
             </mark>
         </span>
-        <span
-            class="home-text-cursor"
-            :class="{ blinking: cursorIsBlinking }"
-            data-testid="cursor"
-        />
+        <HomeTextCursor :blinking="cursorIsBlinking" />
         <span>{{ ' ' }}</span>
-        <span>{{ locales.developer }}.</span>
+        <span data-testid="locales">{{ locales.developer }}.</span>
     </p>
 </template>
 
@@ -37,6 +33,7 @@
     import HomeTextProgrammingLanguage from '@/components/main/home/HomeTextProgrammingLanguage.vue';
     import { ProgrammingLanguage } from '@/store/ProgrammingLanguage';
     import { SiteLanguage } from '@/store/types';
+    import HomeTextCursor from '@/components/main/home/HomeTextCursor.vue';
 
     const store = useStore();
 
@@ -252,25 +249,4 @@
             font-size: 9vw;
         }
     }
-
-    .home-text-cursor {
-        background-color: currentColor;
-        display: inline-flex;
-        height: var(--home-text-line-height);
-        width: 2px;
-
-        &.blinking {
-            animation: blinking 1.06s infinite step-end;
-        }
-
-        @keyframes blinking {
-            0% {
-                opacity: 1;
-            }
-
-            50% {
-                opacity: 0;
-            }
-        }
-    }
 </style>
diff --git a/client/src/components/main/home/HomeTextCursor.spec.ts b/client/src/components/main/home/HomeTextCursor.spec.ts
@@ -0,0 +1,25 @@
+import { VueWrapper } from '@vue/test-utils';
+import { buildCreateWrapper, getTestingSelector } from '@/utils/test';
+import HomeTextCursor from '@/components/main/home/HomeTextCursor.vue';
+
+const CURSOR_SELECTOR = getTestingSelector('cursor');
+
+const createWrapper = buildCreateWrapper(HomeTextCursor);
+
+describe('HomeTextCursor', () => {
+    function getCursorElement(wrapper: VueWrapper) {
+        return wrapper.get<HTMLSpanElement>(CURSOR_SELECTOR);
+    }
+
+    it("blinks by the 'blinking' property", async () => {
+        const wrapper = createWrapper({
+            blinking: false,
+        });
+
+        expect(getCursorElement(wrapper).classes('animate-blinking')).toBe(false);
+
+        await wrapper.setProps({ blinking: true });
+
+        expect(getCursorElement(wrapper).classes('animate-blinking')).toBe(true);
+    });
+});
diff --git a/client/src/components/main/home/HomeTextCursor.vue b/client/src/components/main/home/HomeTextCursor.vue
@@ -0,0 +1,13 @@
+<template>
+    <span
+        data-testid="cursor"
+        class="animate-wiggle bg-current h-[1.2em] inline-flex w-0.5"
+        :class="{ 'animate-blinking': blinking }"
+    />
+</template>
+
+<script lang="ts" setup>
+    defineProps<{
+        blinking: boolean;
+    }>();
+</script>
diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts
@@ -4,6 +4,9 @@ const config: Config = {
     content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
     theme: {
         extend: {
+            animation: {
+                blinking: 'blinking 1.06s infinite step-end',
+            },
             colors: {
                 'error-bg': '#3e2d2d',
                 'error-text': '#cc0000',
@@ -13,6 +16,16 @@ const config: Config = {
             fontFamily: {
                 contact: 'Montserrat, sans-serif',
             },
+            keyframes: {
+                blinking: {
+                    '0%': {
+                        opacity: '1',
+                    },
+                    '50%': {
+                        opacity: '0',
+                    },
+                },
+            },
             spacing: {
                 label: '6rem',
             },