#65 fix UI with simpler table and unit test for space after number

package.json

@@ -8,7 +8,7 @@
     "npm": "10.x"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "format": "prettier --write src/",
     "build": "npm run type-check && npm run build-only",
     "preview": "vite preview",
@@ -25,7 +25,8 @@
     "prepare": "husky install",
     "update-readme-test-cov": "npm run test-cov && npm run make-badges",
     "make-badges": "istanbul-badges-readme",
-    "make-badges:ci": "npm run make-badges -- --ci"
+    "make-badges:ci": "npm run make-badges -- --ci",
+    "checks": "npm run format && npm run lint && npm run test && npm run test-e2e && npm run build"
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",

playwright.config.ts

@@ -19,7 +19,7 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000,
+    timeout: 15000,
   },
 
   /* Fail the build on CI if you accidentally left test.only in the source code. */

src/pages/ReligiousDaysPage.vue

@@ -60,19 +60,21 @@ function gre2str(d: Date): string {
         <tr
           v-for="(item, idx) in sabbaticalRows"
           :key="idx"
-          v-bind:class="{
+          :class="{
             'bg-primary closest-sabbatical': idx === NUM_SABBATICALS,
           }"
         >
-          <td>{{ item.sabbatical }}</td>
-          <td class="d-flex align-center justify-center">
-            <div v-if="idx === NUM_SABBATICALS" class="pa-4">
+          <td>
+            {{ item.sabbatical }}
+            <br />
+            <span v-if="idx === NUM_SABBATICALS">
               ({{ getHumanReadableDayDifference(item.greDate, $t) }})
-            </div>
+            </span>
+          </td>
+          <td>
             <div>
               {{ item.hij }}
               <br />
-
               {{ item.gre }}
             </div>
           </td>

src/util/dateAndTime.spec.ts

@@ -7,6 +7,7 @@ import {
   dateToString,
   dateToStandardString,
   getCalendarDayDifference,
+  getHumanReadableDayDifference,
 } from './dateAndTime';
 import { DateStringFormat, RemainingTimeFormat } from '@/types';
 import { translate } from './i18n';
@@ -401,4 +402,11 @@ describe('Date and time utils', () => {
       expect(getCalendarDayDifference(date1, date2)).toBe(215);
     });
   });
+
+  describe('getHumanReadableDayDifference', () => {
+    it('should return a human readable day difference ', () => {
+      const date1 = new Date(2022, 3, 10);
+      expect(getHumanReadableDayDifference(date1, () => 'gün sonra')).toContain(' gün sonra');
+    });
+  });
 });

src/util/dateAndTime.ts

@@ -138,5 +138,5 @@ export function getHumanReadableDayDifference(date: Date, $t: (key: string) => s
   const diff = getCalendarDayDifference(today, date);
   if (diff === 0) return $t('today');
   else if (diff === 1) return $t('tomorrow');
-  return diff + $t('daysLater');
+  return diff + ' ' + $t('daysLater');
 }