itube-specs 0.0.706 → 0.0.710

package/components/page-components/s-filter-page.vue

@@ -4,37 +4,77 @@
       <h2
           v-if="title"
           class="s-filter-page__title"
-      >{{ title }}</h2>
+      >{{ title }}
+      </h2>
       <div
           v-for="(group, index) in groups"
           :key="`filter-group-${index}`"
           class="s-filter-page__group"
+          :class="{'--short': group.name === 'tags'}"
       >
-        <span
+        <div
             v-if="filters.length > 0"
-            class="s-filter-page__group-title"
+            class="s-filter-page__group-header"
         >
-          {{ group?.title }}
-        </span>
+          <span class="s-filter-page__group-title">
+            {{ group?.title }}
+          </span>
+          <FSegmentedControl
+              v-if="group?.name === 'physical'"
+              :items="unitItems"
+              :model-value="units"
+              small
+              @update:model-value="units = $event"
+          />
+        </div>
+        <div
+            v-if="getGroupSliders(group?.name).length > 1"
+            class="s-filter-page__sliders"
+            :style="{ '--slider-count': getGroupSliders(group?.name).length }"
+        >
+          <SFilterSlider
+              v-for="(item, subIndex) in getGroupSliders(group?.name)"
+              :key="`slider-${subIndex}`"
+              :item="item"
+              :group-name="item.group.name"
+              :index="subIndex"
+          />
+        </div>
         <div class="s-filter-page__items">
           <template v-for="(item, subIndex) in filters">
             <SFilterSlider
-                v-if="(item.kind === 'range') && (item.group.name === group?.name)"
-                class="f-filters-main__slider"
+                v-if="(item.kind === 'range') && (item.group.name === group?.name) && !hiddenByUnits.has(item.name) && getGroupSliders(group?.name).length === 1"
+                class="s-filter-page__slider"
                 :item="item"
                 :group-name="item.group.name"
                 :index="subIndex"
             />
             <SSelect
-                v-if="(item.kind === 'select') && (item.group.name === group?.name)"
+                v-if="(item.kind === 'select') && (item.group.name === group?.name) && !hiddenByUnits.has(item.name)"
+                class="s-filter-page__select"
                 :key="`model-filter-select-${subIndex}`"
                 :name="item.name"
-                :model-value="getSelectValue(item.name)"
+                :model-value="getValue(item.name)"
                 :items="selectItems(item)"
                 size="s"
                 :active="isActiveSelect(item.name)"
                 :label="item.title"
-                @update:model-value="val => updateSelectFilter(item.name, val)"
+                @update:model-value="val => updateFilter(item.name, val)"
+            />
+            <FSegmentedControl
+                v-if="(item.kind === 'radio') && (item.group.name === group?.name)"
+                class="s-filter-page__radio"
+                :items="getRadioItems(item.options)"
+                :title="item.title"
+                :model-value="getValue(item.name)"
+                @update:model-value="val => updateFilter(item.name, val)"
+            />
+            <FFilterByChips
+                v-if="(item.kind === 'chips') && (item.group.name === group?.name)"
+                class="f-filters-main__chips"
+                :items="item.options"
+                :title="item.title"
+                :filter-name="item.name"
             />
           </template>
         </div>
@@ -44,7 +84,7 @@
 </template>
 
 <script setup lang="ts">
-import type { IModelFilter } from '../../types';
+import type { IModelFilter, IModelFilterOptions } from '../../types';
 
 import { useRoute, useRouter } from 'vue-router';
 
@@ -57,6 +97,25 @@ const props = defineProps<{
 const route = useRoute();
 const router = useRouter();
 
+const { t } = useI18n();
+
+const { units, hiddenByUnits } = useUnits();
+
+watch(units, () => {
+  const query = { ...route.query };
+  const unitFields = ['height_cm', 'height_in', 'weight_kg', 'weight_lb'];
+  for (const field of unitFields) {
+    delete query[`filter_${field}_from`];
+    delete query[`filter_${field}_to`];
+  }
+  router.replace({ query });
+});
+
+const unitItems = computed(() => [
+  { name: 'imperial', title: t('units_imperial'), quantity: 0 },
+  { name: 'metric', title: t('units_metric'), quantity: 0 },
+]);
+
 const groups = computed(() => {
   const uniqueNames = [...new Set(props.filters.map(item => item.group.title))];
   return uniqueNames.map(name => {
@@ -64,6 +123,12 @@ const groups = computed(() => {
   }).sort((a, b) => a?.order - b?.order)
 });
 
+function getGroupSliders(groupName: string) {
+  return props.filters.filter(
+    (item) => item.kind === 'range' && item.group.name === groupName && !hiddenByUnits.value.has(item.name)
+  );
+}
+
 function selectItems(item: IModelFilter) {
   return [
     ...item.options.map(item => ({
@@ -73,7 +138,7 @@ function selectItems(item: IModelFilter) {
   ]
 }
 
-function updateSelectFilter(name: string, val: any) {
+function updateFilter(name: string, val: any) {
   const query = { ...route.query };
 
   if (!val || val === 'all') {
@@ -90,7 +155,7 @@ function isActiveSelect(name: string) {
   return Object.keys(route.query).some(key => key.startsWith(`filter_${baseName}`));
 }
 
-function getSelectValue(name: string) {
+function getValue(name: string) {
   const value = route.query[ `filter_${name}` ];
   if (value) {
     return value;
@@ -102,10 +167,17 @@ function getSelectValue(name: string) {
   return null;
 }
 
-function getCount(item: IModelFilter) {
-  const selectedValue = getSelectValue(item.name);
-  const targetValue = selectedValue !== null && selectedValue !== undefined && selectedValue !== '' ? selectedValue : 'all';
-  return props.filters.find(subitem => subitem.name === item.name)?.options.find(subitem => subitem.name === targetValue)?.quantity;
+function getRadioItems(items: IModelFilterOptions[]) {
+  const filteredItems = items.filter((item) => item.name !== 'unspecified');
+  const order = ['all', 'yes'];
+  return filteredItems.sort((a, b) => {
+    const aIndex = order.indexOf(a.name);
+    const bIndex = order.indexOf(b.name);
+    if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
+    if (aIndex !== -1) return -1;
+    if (bIndex !== -1) return 1;
+    return 0;
+  });
 }
 </script>
 

package/components/page-components/s-info-grid.vue

@@ -7,11 +7,12 @@
     >
       <h3 class="s-info-grid__group-title">{{ group.title }}</h3>
       <div class="s-info-grid__group-items">
-        <NuxtLink
-            v-for="(item, index) in group.items"
+        <component
+            :is="item.isFilter ? NuxtLink : 'div'"
+            v-for="(item, index) in group.items.filter(i => !hiddenByUnits.has(i.name))"
             :key="`s-info-grid-item-${gIndex}-${index}`"
             class="s-info-grid__item"
-            :to="generateLink(link(item, item.values[0]))"
+            :to="item.isFilter ? generateLink(link(item, item.values[0].name)) : undefined"
         >
           <SIcon class="s-info-grid__item-icon" name="tattoos" size="12" />
           <span class="s-info-grid__item-title">{{ item.title }}</span>
@@ -24,9 +25,9 @@
                     {'--success': isSuccess(value)},
                     {'--warning': isWarning(value)}
                 ]"
-            >{{ value }}{{ vIndex < item.values.length - 1 ? ', ' : '' }}</span>
+            >{{ value.title }}{{ vIndex < item.values.length - 1 ? ', ' : '' }}</span>
           </p>
-        </NuxtLink>
+        </component>
       </div>
     </div>
   </div>
@@ -39,7 +40,9 @@ defineProps<{
   groups: IGroupedParameter[]
 }>();
 
-const {generateLink} = useGenerateLink();
+const NuxtLink = resolveComponent('NuxtLink');
+const { hiddenByUnits } = useUnits();
+const { generateLink } = useGenerateLink();
 
 function link(item: IGroupedParameterItem, value: string) {
   const formattedValue = value.toLowerCase().replace(/\s+/g, '+');

package/components/ui/s-input.vue

@@ -8,6 +8,7 @@
           {'s-input--error': error},
           {'s-input--textarea': isTextArea},
           {'s-input--icon': isPassword || icon},
+          {'s-input--pre-icon': preIcon},
           `s-input--${size}`,
       ]"
   >
@@ -30,6 +31,12 @@
         :for="name"
     >{{ placeholder }}</label>
     <div class="s-input__wrapper">
+      <SIcon
+          v-if="preIcon"
+          class="s-input__pre-icon"
+          :name="preIcon"
+          :size="preIconSize"
+      />
       <textarea
         v-if="isTextArea"
         :id="name"
@@ -59,7 +66,6 @@
           autocapitalize="off"
           :placeholder="placeholder"
           spellcheck="false"
-          v-bind="$attrs"
           @input="onInput"
           @focus="onFocus"
           @blur="onBlur"
@@ -110,6 +116,8 @@ const props = withDefaults(defineProps<{
   placeholder?: string
   icon?: string
   labelIcon?: string
+  preIcon?: string
+  preIconSize?: string
 }>(), {
   type: 'text',
   inputmode: 'text',

package/composables/use-filter-scheme.test.ts

@@ -0,0 +1,57 @@
+// @vitest-environment nuxt
+import { describe, it, expect } from 'vitest';
+import { useFilterScheme } from './use-filter-scheme';
+
+const t = (key: string) => key;
+
+describe('useFilterScheme', () => {
+  it('пустой массив для null', () => {
+    const { filterScheme } = useFilterScheme(t, null);
+    expect(filterScheme.value).toEqual([]);
+  });
+
+  it('трансформирует группы в схему', () => {
+    const groups = [{
+      title: 'Age', name: 'age', icon: 'age-icon',
+      categories: [
+        { title: 'teen', name: 'teen' },
+        { title: 'milf', name: 'milf' },
+      ],
+    }];
+    const { filterScheme } = useFilterScheme(t, groups);
+    expect(filterScheme.value).toHaveLength(1);
+    expect(filterScheme.value[0].label).toBe('Age');
+    expect(filterScheme.value[0].items).toEqual([
+      { title: 'Teen', value: 'teen' },
+      { title: 'Milf', value: 'milf' },
+    ]);
+  });
+
+  it('capitalize для multi-word', () => {
+    const groups = [{
+      title: 'Body', name: 'body', icon: '',
+      categories: [{ title: 'big tits', name: 'big-tits' }],
+    }];
+    const { filterScheme } = useFilterScheme(t, groups);
+    expect(filterScheme.value[0].items[0].title).toBe('Big Tits');
+  });
+
+  it('фильтрует пустые группы', () => {
+    const groups = [
+      { title: 'Empty', name: 'empty', icon: '', categories: [] },
+      { title: 'Body', name: 'body', icon: '', categories: [{ title: 'slim', name: 'slim' }] },
+    ];
+    const { filterScheme } = useFilterScheme(t, groups);
+    expect(filterScheme.value).toHaveLength(1);
+    expect(filterScheme.value[0].name).toBe('body');
+  });
+
+  it('placeholder из t()', () => {
+    const groups = [{
+      title: 'Age', name: 'age', icon: '',
+      categories: [{ title: 'teen', name: 'teen' }],
+    }];
+    const { filterScheme } = useFilterScheme(t, groups);
+    expect(filterScheme.value[0].placeholder).toBe('choose_category');
+  });
+});

package/composables/use-get-pure-route-name.test.ts

@@ -0,0 +1,30 @@
+import { vi, describe, it, expect } from 'vitest';
+
+vi.mock('vue-router', () => ({
+  useRoute: vi.fn(),
+}));
+
+import { useRoute } from 'vue-router';
+import { useGetPureRouteName } from './use-get-pure-route-name';
+
+describe('useGetPureRouteName', () => {
+  it('убирает суффикс ___en', () => {
+    vi.mocked(useRoute).mockReturnValue({ name: 'videos___en' } as any);
+    expect(useGetPureRouteName()).toBe('videos');
+  });
+
+  it('убирает суффикс ___zh-hans', () => {
+    vi.mocked(useRoute).mockReturnValue({ name: 'user-settings___zh-hans' } as any);
+    expect(useGetPureRouteName()).toBe('user-settings');
+  });
+
+  it('оставляет имя без суффикса', () => {
+    vi.mocked(useRoute).mockReturnValue({ name: 'videos' } as any);
+    expect(useGetPureRouteName()).toBe('videos');
+  });
+
+  it('вложенный роут с суффиксом', () => {
+    vi.mocked(useRoute).mockReturnValue({ name: 'user-playlists-id___en' } as any);
+    expect(useGetPureRouteName()).toBe('user-playlists-id');
+  });
+});

package/composables/use-get-videos-filter-request.test.ts

@@ -0,0 +1,45 @@
+import { vi, describe, it, expect } from 'vitest';
+
+vi.mock('../runtime', () => ({
+  getMultipleQuery: () => ({}),
+}));
+
+import { useGetVideosFilterRequest } from './use-get-videos-filter-request';
+
+describe('useGetVideosFilterRequest', () => {
+  it('всегда возвращает categories_filter_use_and', () => {
+    const route = { query: {} } as any;
+    const result = useGetVideosFilterRequest(route, [], []);
+    expect(result.categories_filter_use_and).toBe(true);
+  });
+
+  it('парсит строковые категории', () => {
+    const route = { query: { categories: 'age_teen,body_slim' } } as any;
+    const result = useGetVideosFilterRequest(route, [], []);
+    expect(result.categories).toEqual(['teen', 'slim']);
+  });
+
+  it('парсит массив категорий', () => {
+    const route = { query: { categories: ['age_teen', 'body_slim,body_athletic'] } } as any;
+    const result = useGetVideosFilterRequest(route, [], []);
+    expect(result.categories).toEqual(['teen', 'slim', 'athletic']);
+  });
+
+  it('убирает префикс группы из категории', () => {
+    const route = { query: { categories: 'ethnicity_asian' } } as any;
+    const result = useGetVideosFilterRequest(route, [], []);
+    expect(result.categories).toEqual(['asian']);
+  });
+
+  it('сохраняет _ в значении категории', () => {
+    const route = { query: { categories: 'body_big_tits' } } as any;
+    const result = useGetVideosFilterRequest(route, [], []);
+    expect(result.categories).toEqual(['big_tits']);
+  });
+
+  it('нет categories при пустом query', () => {
+    const route = { query: {} } as any;
+    const result = useGetVideosFilterRequest(route, [], []);
+    expect(result.categories).toBeUndefined();
+  });
+});

package/composables/use-model-filter-chips.test.ts

@@ -0,0 +1,67 @@
+// @vitest-environment nuxt
+import { describe, it, expect } from 'vitest';
+import { useFilterChipsItems } from './use-model-filter-chips';
+
+const t = (key: string) => key;
+
+describe('useFilterChipsItems', () => {
+  it('пустой массив без filter_ в query', () => {
+    const filters = ref([]);
+    const route = { query: {} };
+    const { chipsItems } = useFilterChipsItems(filters, route, t);
+    expect(chipsItems.value).toEqual([]);
+  });
+
+  it('игнорирует не-filter параметры', () => {
+    const filters = ref([]);
+    const route = { query: { page: '1', sort: 'popular' } };
+    const { chipsItems } = useFilterChipsItems(filters, route, t);
+    expect(chipsItems.value).toEqual([]);
+  });
+
+  it('создаёт чип из одного фильтра', () => {
+    const filters = ref([{
+      name: 'hair_color',
+      title: 'Hair color',
+      options: [
+        { name: 'blonde', title: 'Blonde' },
+        { name: 'brunette', title: 'Brunette' },
+      ],
+    }]);
+    const route = { query: { filter_hair_color: 'blonde' } };
+    const { chipsItems } = useFilterChipsItems(filters, route, t);
+    expect(chipsItems.value).toHaveLength(1);
+    expect(chipsItems.value[0].title).toBe('Hair color: Blonde');
+    expect(chipsItems.value[0].value).toEqual(['filter_hair_color']);
+  });
+
+  it('группирует from/to фильтры', () => {
+    const filters = ref([{
+      name: 'age',
+      title: 'Age',
+      options: [
+        { name: '18', title: '18' },
+        { name: '50', title: '50' },
+      ],
+    }]);
+    const route = { query: { filter_age_from: '18', filter_age_to: '30' } };
+    const { chipsItems } = useFilterChipsItems(filters, route, t);
+    expect(chipsItems.value).toHaveLength(1);
+    expect(chipsItems.value[0].title).toBe('Age: 18 - 30');
+    expect(chipsItems.value[0].value).toEqual(['filter_age_from', 'filter_age_to']);
+  });
+
+  it('числовое значение возвращается как есть', () => {
+    const filters = ref([{
+      name: 'weight',
+      title: 'Weight',
+      options: [
+        { name: '40', title: '40' },
+        { name: '120', title: '120' },
+      ],
+    }]);
+    const route = { query: { filter_weight: '65' } };
+    const { chipsItems } = useFilterChipsItems(filters, route, t);
+    expect(chipsItems.value[0].title).toBe('Weight: 65');
+  });
+});

package/composables/use-seo-links.test.ts

@@ -0,0 +1,74 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mockNuxtImport } from '@nuxt/test-utils/runtime';
+import { useSeoLinks } from './use-seo-links';
+
+let mockRoute = { path: '/videos', query: {} as Record<string, any> };
+
+mockNuxtImport('useRoute', () => () => mockRoute);
+
+const mockI18n = {
+  locale: { value: 'en' },
+  locales: { value: ['en', 'fr', 'de', 'ja', 'zh'] },
+};
+
+const mockLocalePath = (path: string, locale: string) =>
+  locale === 'en' ? path : `/${locale}${path}`;
+
+describe('useSeoLinks', () => {
+  beforeEach(() => {
+    mockRoute = { path: '/videos', query: {} };
+    mockI18n.locale.value = 'en';
+  });
+
+  it('canonical URL', () => {
+    const { canonicalUrl } = useSeoLinks('https://example.com', false, mockI18n, mockLocalePath);
+    expect(canonicalUrl.value).toBe('https://example.com/videos');
+  });
+
+  it('canonical с query params', () => {
+    mockRoute = { path: '/videos', query: { page: '2', sort: 'popular' } };
+    const { canonicalUrl } = useSeoLinks('https://example.com', false, mockI18n, mockLocalePath);
+    expect(canonicalUrl.value).toContain('page=2');
+    expect(canonicalUrl.value).toContain('sort=popular');
+  });
+
+  it('исключает sort при alonePage', () => {
+    mockRoute = { path: '/videos', query: { page: '2', sort: 'popular' } };
+    const { canonicalUrl } = useSeoLinks('https://example.com', true, mockI18n, mockLocalePath);
+    expect(canonicalUrl.value).toContain('page=2');
+    expect(canonicalUrl.value).not.toContain('sort');
+  });
+
+  it('alternate links для всех локалей', () => {
+    const { alternateLinks } = useSeoLinks('https://example.com', false, mockI18n, mockLocalePath);
+    const hreflangs = alternateLinks.value.map(l => l.hreflang);
+    expect(hreflangs).toContain('en');
+    expect(hreflangs).toContain('fr');
+    expect(hreflangs).toContain('de');
+    expect(hreflangs).toContain('ja-JP');
+    expect(hreflangs).toContain('zh-CN');
+    expect(hreflangs).toContain('x-default');
+  });
+
+  it('ja маппится в ja-JP', () => {
+    const { alternateLinks } = useSeoLinks('https://example.com', false, mockI18n, mockLocalePath);
+    const jaLink = alternateLinks.value.find(l => l.hreflang === 'ja-JP');
+    expect(jaLink).toBeDefined();
+    expect(jaLink!.href).toContain('/ja/videos');
+  });
+
+  it('x-default указывает на en', () => {
+    const { alternateLinks } = useSeoLinks('https://example.com', false, mockI18n, mockLocalePath);
+    const xDefault = alternateLinks.value.find(l => l.hreflang === 'x-default');
+    expect(xDefault!.href).toBe('https://example.com/videos');
+  });
+
+  it('игнорирует неразрешённые query params', () => {
+    mockRoute = { path: '/videos', query: { page: '1', foo: 'bar', categories: 'teen' } };
+    const { canonicalUrl } = useSeoLinks('https://example.com', false, mockI18n, mockLocalePath);
+    expect(canonicalUrl.value).toContain('page=1');
+    expect(canonicalUrl.value).toContain('categories=teen');
+    expect(canonicalUrl.value).not.toContain('foo');
+  });
+});

package/composables/use-slug.test.ts

@@ -0,0 +1,36 @@
+// @vitest-environment nuxt
+import { vi, describe, it, expect } from 'vitest';
+
+vi.mock('vue-router', async (importOriginal) => {
+  const mod = await importOriginal<typeof import('vue-router')>();
+  return { ...mod, useRoute: vi.fn() };
+});
+
+import { useRoute } from 'vue-router';
+import { useSlug } from './use-slug';
+
+describe('useSlug', () => {
+  it('конвертирует kebab-case slug', () => {
+    vi.mocked(useRoute).mockReturnValue({ params: { slug: 'john-doe' } } as any);
+    const slug = useSlug();
+    expect(slug.value).toBe('john doe');
+  });
+
+  it('пустая строка если slug отсутствует', () => {
+    vi.mocked(useRoute).mockReturnValue({ params: {} } as any);
+    const slug = useSlug();
+    expect(slug.value).toBe('');
+  });
+
+  it('кастомное имя параметра', () => {
+    vi.mocked(useRoute).mockReturnValue({ params: { name: 'big-tits' } } as any);
+    const slug = useSlug('name');
+    expect(slug.value).toBe('big tits');
+  });
+
+  it('slug с подчёркиваниями', () => {
+    vi.mocked(useRoute).mockReturnValue({ params: { slug: 'some_thing' } } as any);
+    const slug = useSlug();
+    expect(slug.value).toBe('some-thing');
+  });
+});

package/composables/use-snackbar.test.ts

@@ -0,0 +1,64 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { useSnackbar } from './use-snackbar';
+
+describe('useSnackbar', () => {
+  beforeEach(() => {
+    useNuxtApp().payload.state = {};
+    vi.useFakeTimers();
+    const { resetSnackbar } = useSnackbar();
+    resetSnackbar();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('дефолтное состояние', () => {
+    const { snackbarTheme, snackbarText, snackbarIcon, snackbarTimer } = useSnackbar();
+    expect(snackbarTheme.value).toBe('success');
+    expect(snackbarText.value).toBe('');
+    expect(snackbarIcon.value).toBe('check');
+    expect(snackbarTimer.value).toBe(2000);
+  });
+
+  it('setErrorState устанавливает ошибку', () => {
+    const { setErrorState, snackbarTheme, snackbarIcon, snackbarTimer, snackbarText } = useSnackbar();
+    setErrorState({ message: 'Something failed' });
+    expect(snackbarTheme.value).toBe('error');
+    expect(snackbarIcon.value).toBe('close');
+    expect(snackbarTimer.value).toBe(4000);
+    expect(snackbarText.value).toBe('Something failed');
+  });
+
+  it('showErrorSnack показывает и авто-сбрасывает', () => {
+    const { showErrorSnack, snackbarText, snackbarTheme } = useSnackbar();
+    showErrorSnack('Error!');
+    expect(snackbarText.value).toBe('Error!');
+    expect(snackbarTheme.value).toBe('error');
+
+    vi.advanceTimersByTime(4000);
+    expect(snackbarText.value).toBe('');
+    expect(snackbarTheme.value).toBe('success');
+  });
+
+  it('повторный showErrorSnack сбрасывает предыдущий таймер', () => {
+    const { showErrorSnack, snackbarText } = useSnackbar();
+    showErrorSnack('First');
+    vi.advanceTimersByTime(2000);
+    showErrorSnack('Second');
+    expect(snackbarText.value).toBe('Second');
+
+    vi.advanceTimersByTime(4000);
+    expect(snackbarText.value).toBe('');
+  });
+
+  it('resetSnackbar сбрасывает всё', () => {
+    const { showErrorSnack, resetSnackbar, snackbarText, snackbarTheme, snackbarIcon } = useSnackbar();
+    showErrorSnack('Error');
+    resetSnackbar();
+    expect(snackbarText.value).toBe('');
+    expect(snackbarTheme.value).toBe('success');
+    expect(snackbarIcon.value).toBe('check');
+  });
+});

package/composables/use-units.test.ts

@@ -0,0 +1,51 @@
+// @vitest-environment nuxt
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useUnits } from './use-units';
+
+describe('useUnits', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useNuxtApp().payload.state = {};
+  });
+
+  it('по умолчанию metric', () => {
+    const { units } = useUnits();
+    expect(units.value).toBe('metric');
+  });
+
+  it('imperial для US', () => {
+    useState<string>('clientCountryCode', () => 'us');
+    const { units } = useUnits();
+    expect(units.value).toBe('imperial');
+  });
+
+  it('imperial для Liberia', () => {
+    useState<string>('clientCountryCode', () => 'lr');
+    const { units } = useUnits();
+    expect(units.value).toBe('imperial');
+  });
+
+  it('берёт сохранённое значение из localStorage', () => {
+    localStorage.setItem('units', 'imperial');
+    const { units } = useUnits();
+    expect(units.value).toBe('imperial');
+  });
+
+  it('localStorage приоритетнее country code', () => {
+    useState<string>('clientCountryCode', () => 'us');
+    localStorage.setItem('units', 'metric');
+    const { units } = useUnits();
+    expect(units.value).toBe('metric');
+  });
+
+  it('hiddenByUnits для metric — скрывает дюймы и фунты', () => {
+    const { hiddenByUnits } = useUnits();
+    expect(hiddenByUnits.value).toEqual(new Set(['height_in', 'weight_lb']));
+  });
+
+  it('hiddenByUnits для imperial — скрывает см и кг', () => {
+    localStorage.setItem('units', 'imperial');
+    const { hiddenByUnits } = useUnits();
+    expect(hiddenByUnits.value).toEqual(new Set(['height_cm', 'weight_kg']));
+  });
+});

package/composables/use-units.ts

@@ -0,0 +1,21 @@
+const imperialCountries = new Set(['us', 'lr', 'mm']);
+
+export function useUnits() {
+  const clientCountryCode = useState<string>('clientCountryCode', () => '');
+  const savedUnits = import.meta.client ? localStorage.getItem('units') : null;
+  const defaultUnits = imperialCountries.has(clientCountryCode.value) ? 'imperial' : 'metric';
+  const units = useState('units', () => savedUnits || defaultUnits);
+
+  const hiddenByUnits = computed(() => {
+    if (units.value === 'metric') {
+      return new Set(['height_in', 'weight_lb']);
+    }
+    return new Set(['height_cm', 'weight_kg']);
+  });
+
+  watch(units, (val) => {
+    localStorage.setItem('units', val);
+  });
+
+  return { units, hiddenByUnits };
+}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.706",
+  "version": "0.0.710",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {
     "prepublishOnly": "npm install && npx nuxi prepare",
     "patch": "npm version patch",
-    "eslint fix": "npx eslint . --ext .ts,.vue,.js --fix"
+    "eslint fix": "npx eslint . --ext .ts,.vue,.js --fix",
+    "test": "NODE_OPTIONS='--no-warnings' vitest"
   },
   "exports": {
     ".": {
@@ -40,11 +41,15 @@
   "devDependencies": {
     "@nuxt/eslint": "latest",
     "@nuxt/icon": "1.15.0",
+    "@nuxt/test-utils": "^3.23.0",
     "@nuxtjs/i18n": "9.5.6",
     "@types/node": "^20.19.19",
+    "@vue/test-utils": "^2.4.6",
     "eslint": "^9.37.0",
+    "happy-dom": "^18.0.1",
     "nuxt": "3.17.6",
     "typescript": "^5.9.3",
+    "vitest": "^3.2.4",
     "vue": "3.5.17"
   },
   "dependencies": {

package/runtime/utils/format-time-ago.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { formatTimeAgo } from './format-time-ago';
+
+const t = (key: string) => key;
+
+describe('formatTimeAgo', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2025-06-15T12:00:00Z'));
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const now = () => Math.floor(Date.now() / 1000);
+
+  it('сегодня', () => {
+    expect(formatTimeAgo(now(), t)).toBe('today');
+  });
+
+  it('1 день назад', () => {
+    expect(formatTimeAgo(now() - 86400, t)).toBe('day_ago');
+  });
+
+  it('5 дней назад', () => {
+    expect(formatTimeAgo(now() - 5 * 86400, t)).toBe('5 days_ago');
+  });
+
+  it('29 дней назад', () => {
+    expect(formatTimeAgo(now() - 29 * 86400, t)).toBe('29 days_ago');
+  });
+
+  it('1 месяц', () => {
+    expect(formatTimeAgo(now() - 31 * 86400, t)).toBe('1 month ago');
+  });
+
+  it('3 месяца — plural', () => {
+    expect(formatTimeAgo(now() - 90 * 86400, t)).toBe('3 months ago');
+  });
+
+  it('1 год', () => {
+    expect(formatTimeAgo(now() - 366 * 86400, t)).toBe('1 year ago');
+  });
+
+  it('2 года — plural', () => {
+    expect(formatTimeAgo(now() - 730 * 86400, t)).toBe('2 years ago');
+  });
+});