itube-specs 0.0.777 → 0.0.779

package/components/adv/native-banner.vue

@@ -0,0 +1,135 @@
+<template>
+  <ClientOnly>
+    <div v-if="spot"
+         :class="{
+           'ntv': isNtv,
+         }"
+         class="adv-native-card"
+    >
+      <div v-once
+           class="adv-native-card__slot"
+      >
+        <div data-asg-ins
+             :data-spots="spot"
+        />
+      </div>
+      <div v-if="!isNtv"
+           class="adv-native-card__bottom"
+      >
+        <UiImg :alt="t('advertising_banner')"
+               class="adv-native-card__channel-logo"
+               width="32"
+               height="32"
+               src="/img/user-uploaded.svg"
+               sizes="32px"
+        />
+
+        <div class="adv-native-card__titles">
+          <p class="adv-native-card__secondary">
+            {{ t('advertising_banner') }}
+          </p>
+          <p class="adv-native-card__primary">
+            {{ title }}
+          </p>
+          <p class="adv-native-card__secondary">
+            {{ text }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  isNtv: boolean;
+  spot: number,
+}>();
+
+const { t } = useI18n();
+
+const title = ref(t('loading'));
+const text = ref(t('loading'));
+
+const freeze = ref(false);
+
+function getBannerTexts() {
+  let counter = 0;
+  const limit = 50;
+
+  function getBannerTextInner() {
+    const titleContainer = document?.querySelector('.exo-native-widget-item-title');
+    const textContainer = document?.querySelector('.exo-native-widget-item-text');
+
+    if (counter < limit && !titleContainer && !textContainer) {
+      counter++;
+
+      setTimeout(getBannerTextInner, 50);
+    } else {
+      title.value = titleContainer?.innerHTML || '';
+      text.value = textContainer?.innerHTML || '';
+
+      freeze.value = true;
+    }
+  }
+
+  getBannerTextInner();
+}
+
+onMounted(() => {
+  getBannerTexts();
+});
+</script>
+
+<style lang="scss">
+.adv-native-card {
+  @include video-card;
+
+  overflow: hidden;
+  margin-bottom: 300px;
+  background-color: $native-card-bg;
+}
+
+.adv-native-card__bottom {
+  display: grid;
+  align-items: start;
+  align-content: start;
+  grid-template-columns: 32px 1fr;
+  gap: 8px;
+}
+
+.adv-native-card__titles {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.adv-native-card__primary {
+  color: $native-card-primary;
+}
+
+.adv-native-card__secondary {
+  font-size: 12px;
+  color: $native-card-secondary;
+}
+
+.adv-native-card__slot {
+  @include video-card-poster;
+}
+
+.ntv .adv-native-card__slot {
+  aspect-ratio: 1 / 1;
+  width: 300px;
+  height: 250px;
+  align-self: center;
+}
+
+.adv-native-card__slot > div {
+  position: absolute;
+  inset: 0;
+}
+
+.adv-native-card__slot div {
+  width: 100% !important;
+}
+</style>

package/components/adv/native-bottom.vue

@@ -0,0 +1,25 @@
+<template>
+  <iframe :src="`/embed/${BannerHelper.getBannerSpot(AdBannerType.NativeBottom, AdSpotType.Primary)}`"
+          class="adv-native-bottom"
+          title="content"
+  />
+  <iframe :src="`/embed/${BannerHelper.getBannerSpot(AdBannerType.NativeBottom, AdSpotType.Secondary)}`"
+          class="adv-native-bottom"
+          title="content"
+  />
+</template>
+
+<script setup lang="ts">
+import { BannerHelper } from '~/utils/banner-helper';
+import { AdBannerType, AdSpotType } from '../../runtime';
+</script>
+
+<style lang="scss">
+.adv-native-bottom {
+  width: 100%;
+  height: auto;
+  min-height: 240px;
+  aspect-ratio: 285 / 248;
+  border: none;
+}
+</style>

package/components/adv/native-player.vue

@@ -0,0 +1,23 @@
+<template>
+  <iframe :src="`/embed/${BannerHelper.getBannerSpot(AdBannerType.NativePlayer, AdSpotType.Primary)}`"
+          class="adv-native-player"
+          title="content"
+  />
+  <iframe :src="`/embed/${BannerHelper.getBannerSpot(AdBannerType.NativePlayer, AdSpotType.Secondary)}`"
+          class="adv-native-player"
+          title="content"
+  />
+</template>
+
+<script setup lang="ts">
+import { BannerHelper } from '~/utils/banner-helper';
+import { AdBannerType, AdSpotType } from '../../runtime';
+</script>
+
+<style lang="scss">
+.adv-native-player {
+  aspect-ratio: 7 / 5.7;
+  border: none;
+  overflow: hidden;
+}
+</style>

package/components/adv/ntv.vue

@@ -0,0 +1,19 @@
+<template>
+  <iframe :src="`/embed/${BannerHelper.getBannerSpot(AdBannerType.NTV, AdSpotType.Primary)}?ntv=1`"
+          class="adv-ntv"
+          title="content"
+  />
+</template>
+
+<script setup lang="ts">
+
+import { BannerHelper } from '~/utils/banner-helper';
+import { AdBannerType, AdSpotType } from '../../runtime';
+</script>
+
+<style lang="scss">
+.adv-ntv {
+  aspect-ratio: 1 / 1;
+  border: none;
+}
+</style>

package/components/auth/__tests__/login.test.ts

@@ -0,0 +1,123 @@
+// @vitest-environment nuxt
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime';
+import { flushPromises } from '@vue/test-utils';
+import AuthLogin from '../login.vue';
+
+const h = vi.hoisted(() => {
+  const login = vi.fn();
+  const closeAuthPopup = vi.fn();
+  const showError = vi.fn();
+  const showSuccess = vi.fn();
+  const setErrorState = vi.fn();
+  const resetSnackbar = vi.fn();
+  return {
+    login,
+    closeAuthPopup,
+    showError,
+    showSuccess,
+    setErrorState,
+    resetSnackbar,
+    useUserMock: vi.fn(() => ({ login })),
+    useAuthPopupMock: vi.fn(() => ({ closeAuthPopup })),
+    useSnackbarMock: vi.fn(() => ({ showError, showSuccess, setErrorState, resetSnackbar })),
+  };
+});
+
+mockNuxtImport('useUser', () => h.useUserMock);
+mockNuxtImport('useAuthPopup', () => h.useAuthPopupMock);
+mockNuxtImport('useSnackbar', () => h.useSnackbarMock);
+
+const VALID_USER = 'john_doe';
+const VALID_PASS = 'secret';
+
+function mountLogin() {
+  return mountSuspended(AuthLogin, {
+    global: { stubs: { AuthIcon: true, UiIcon: true } },
+  });
+}
+
+async function setCredentials(wrapper: Awaited<ReturnType<typeof mountLogin>>, user: string, pass: string) {
+  const inputs = wrapper.findAll('input');
+  await inputs[0].setValue(user);
+  await inputs[1].setValue(pass);
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('AuthLogin', () => {
+  it('эмитит forgot по клику «забыли пароль»', async () => {
+    const wrapper = await mountLogin();
+    await wrapper.find('.auth-login__forgot').trigger('click');
+    expect(wrapper.emitted('forgot')).toBeTruthy();
+  });
+
+  it('эмитит create по клику «регистрация»', async () => {
+    const wrapper = await mountLogin();
+    await wrapper.find('.auth-login__back-button').trigger('click');
+    expect(wrapper.emitted('create')).toBeTruthy();
+  });
+
+  it('невалидный username → поле в ошибке, снекбар error_username, login не вызывается', async () => {
+    const wrapper = await mountLogin();
+    await setCredentials(wrapper, 'a', VALID_PASS);
+    await wrapper.find('.auth-login__login').trigger('click');
+    await flushPromises();
+    expect(wrapper.findAll('.ui-input')[0].classes()).toContain('ui-input--error');
+    expect(h.showError).toHaveBeenCalledWith('error_username');
+    expect(h.login).not.toHaveBeenCalled();
+  });
+
+  it('невалидный password → поле в ошибке, снекбар error_password, login не вызывается', async () => {
+    const wrapper = await mountLogin();
+    await setCredentials(wrapper, VALID_USER, 'abc');
+    await wrapper.find('.auth-login__login').trigger('click');
+    await flushPromises();
+    expect(wrapper.findAll('.ui-input')[1].classes()).toContain('ui-input--error');
+    expect(h.showError).toHaveBeenCalledWith('error_password');
+    expect(h.login).not.toHaveBeenCalled();
+  });
+
+  it('login очищает снекбар в начале (resetSnackbar)', async () => {
+    const wrapper = await mountLogin();
+    await setCredentials(wrapper, 'a', 'abc');
+    await wrapper.find('.auth-login__login').trigger('click');
+    await flushPromises();
+    expect(h.resetSnackbar).toHaveBeenCalled();
+  });
+
+  it('валидные данные → login(form), снекбар успеха, закрытие попапа', async () => {
+    h.login.mockResolvedValueOnce(undefined);
+    const wrapper = await mountLogin();
+    await setCredentials(wrapper, VALID_USER, VALID_PASS);
+    await wrapper.find('.auth-login__login').trigger('click');
+    await flushPromises();
+    expect(h.login).toHaveBeenCalledWith({ username: VALID_USER, password_hash: VALID_PASS });
+    expect(h.closeAuthPopup).toHaveBeenCalled();
+    expect(h.showSuccess).toHaveBeenCalledWith('Welcome back!');
+  });
+
+  it('ошибка login → снекбар ошибки (setErrorState), попап не закрывается', async () => {
+    const err = new Error('bad creds');
+    h.login.mockRejectedValueOnce(err);
+    const wrapper = await mountLogin();
+    await setCredentials(wrapper, VALID_USER, VALID_PASS);
+    await wrapper.find('.auth-login__login').trigger('click');
+    await flushPromises();
+    expect(h.login).toHaveBeenCalled();
+    expect(h.setErrorState).toHaveBeenCalledWith(err);
+    expect(h.closeAuthPopup).not.toHaveBeenCalled();
+    expect(h.showSuccess).not.toHaveBeenCalled();
+  });
+
+  it('Enter в поле пароля запускает вход', async () => {
+    h.login.mockResolvedValueOnce(undefined);
+    const wrapper = await mountLogin();
+    await setCredentials(wrapper, VALID_USER, VALID_PASS);
+    await wrapper.find('input[type="password"]').trigger('keyup.enter');
+    await flushPromises();
+    expect(h.login).toHaveBeenCalled();
+  });
+});

package/components/auth/__tests__/recovery.test.ts

@@ -0,0 +1,86 @@
+// @vitest-environment nuxt
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime';
+import { flushPromises } from '@vue/test-utils';
+import AuthRecovery from '../recovery.vue';
+
+const h = vi.hoisted(() => {
+  const password = vi.fn();
+  const closeAuthPopup = vi.fn();
+  const showError = vi.fn();
+  const showSuccess = vi.fn();
+  const setErrorState = vi.fn();
+  const resetSnackbar = vi.fn();
+  const getRecaptchaToken = vi.fn(() => Promise.resolve('test-token'));
+  const initRecaptcha = vi.fn(() => Promise.resolve());
+  return {
+    password,
+    closeAuthPopup,
+    showError,
+    showSuccess,
+    setErrorState,
+    resetSnackbar,
+    getRecaptchaToken,
+    initRecaptcha,
+    useUserMock: vi.fn(() => ({ password })),
+    useAuthPopupMock: vi.fn(() => ({ closeAuthPopup })),
+    useSnackbarMock: vi.fn(() => ({ showError, showSuccess, setErrorState, resetSnackbar })),
+    useRecaptchaMock: vi.fn(() => ({ getRecaptchaToken, initRecaptcha })),
+  };
+});
+
+mockNuxtImport('useUser', () => h.useUserMock);
+mockNuxtImport('useAuthPopup', () => h.useAuthPopupMock);
+mockNuxtImport('useSnackbar', () => h.useSnackbarMock);
+mockNuxtImport('useRecaptcha', () => h.useRecaptchaMock);
+
+function mountRecovery() {
+  return mountSuspended(AuthRecovery, {
+    global: { stubs: { AuthIcon: true, UiIcon: true } },
+  });
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('AuthRecovery', () => {
+  it('эмитит login по клику «назад ко входу»', async () => {
+    const wrapper = await mountRecovery();
+    await wrapper.find('.auth-recovery__login').trigger('click');
+    expect(wrapper.emitted('login')).toBeTruthy();
+  });
+
+  it('невалидный email → поле в ошибке, снекбар error_email, password не вызывается', async () => {
+    const wrapper = await mountRecovery();
+    await wrapper.find('input').setValue('bad');
+    await wrapper.find('.auth-recovery__button').trigger('click');
+    await flushPromises();
+    expect(wrapper.find('.ui-input').classes()).toContain('ui-input--error');
+    expect(h.showError).toHaveBeenCalledWith('error_email');
+    expect(h.password).not.toHaveBeenCalled();
+  });
+
+  it('валидный email → password(form с токеном), закрытие попапа, снекбар успеха', async () => {
+    h.password.mockResolvedValueOnce(undefined);
+    const wrapper = await mountRecovery();
+    await wrapper.find('input').setValue('user@example.com');
+    await wrapper.find('.auth-recovery__button').trigger('click');
+    await flushPromises();
+    expect(h.getRecaptchaToken).toHaveBeenCalledWith('password_reset');
+    expect(h.password).toHaveBeenCalledWith({ email: 'user@example.com', token: 'test-token' });
+    expect(h.closeAuthPopup).toHaveBeenCalled();
+    expect(h.showSuccess).toHaveBeenCalledWith('Check your email');
+  });
+
+  it('ошибка запроса → снекбар ошибки, попап не закрывается', async () => {
+    const err = new Error('not found');
+    h.password.mockRejectedValueOnce(err);
+    const wrapper = await mountRecovery();
+    await wrapper.find('input').setValue('user@example.com');
+    await wrapper.find('.auth-recovery__button').trigger('click');
+    await flushPromises();
+    expect(h.setErrorState).toHaveBeenCalledWith(err);
+    expect(h.closeAuthPopup).not.toHaveBeenCalled();
+  });
+});

package/components/auth/__tests__/register.test.ts

@@ -0,0 +1,122 @@
+// @vitest-environment nuxt
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime';
+import { flushPromises } from '@vue/test-utils';
+import AuthRegister from '../register.vue';
+
+const h = vi.hoisted(() => {
+  const register = vi.fn();
+  const closeAuthPopup = vi.fn();
+  const showError = vi.fn();
+  const showSuccess = vi.fn();
+  const setErrorState = vi.fn();
+  const resetSnackbar = vi.fn();
+  const getRecaptchaToken = vi.fn(() => Promise.resolve('test-token'));
+  const initRecaptcha = vi.fn(() => Promise.resolve());
+  return {
+    register,
+    closeAuthPopup,
+    showError,
+    showSuccess,
+    setErrorState,
+    resetSnackbar,
+    getRecaptchaToken,
+    initRecaptcha,
+    useUserMock: vi.fn(() => ({ register })),
+    useAuthPopupMock: vi.fn(() => ({ closeAuthPopup })),
+    useSnackbarMock: vi.fn(() => ({ showError, showSuccess, setErrorState, resetSnackbar })),
+    useRecaptchaMock: vi.fn(() => ({ getRecaptchaToken, initRecaptcha })),
+  };
+});
+
+mockNuxtImport('useUser', () => h.useUserMock);
+mockNuxtImport('useAuthPopup', () => h.useAuthPopupMock);
+mockNuxtImport('useSnackbar', () => h.useSnackbarMock);
+mockNuxtImport('useRecaptcha', () => h.useRecaptchaMock);
+
+const VALID = { email: 'user@example.com', username: 'john_doe', password: 'secret' };
+
+function mountRegister() {
+  return mountSuspended(AuthRegister, {
+    global: { stubs: { AuthIcon: true, UiIcon: true } },
+  });
+}
+
+async function fillForm(
+  wrapper: Awaited<ReturnType<typeof mountRegister>>,
+  email: string,
+  username: string,
+  password: string,
+) {
+  await wrapper.find('input[type="email"]').setValue(email);
+  await wrapper.find('input[name="login-name"]').setValue(username);
+  await wrapper.find('input[type="password"]').setValue(password);
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('AuthRegister', () => {
+  it('эмитит login по клику «уже есть аккаунт»', async () => {
+    const wrapper = await mountRegister();
+    await wrapper.find('.auth-register__login-button').trigger('click');
+    expect(wrapper.emitted('login')).toBeTruthy();
+  });
+
+  it('невалидный email → снекбар error_email, register не вызывается', async () => {
+    const wrapper = await mountRegister();
+    await fillForm(wrapper, 'bad', VALID.username, VALID.password);
+    await wrapper.find('.ui-btn').trigger('click');
+    await flushPromises();
+    expect(h.showError).toHaveBeenCalledWith('error_email');
+    expect(h.register).not.toHaveBeenCalled();
+  });
+
+  it('невалидный username → снекбар error_username, register не вызывается', async () => {
+    const wrapper = await mountRegister();
+    await fillForm(wrapper, VALID.email, 'a', VALID.password);
+    await wrapper.find('.ui-btn').trigger('click');
+    await flushPromises();
+    expect(h.showError).toHaveBeenCalledWith('error_username');
+    expect(h.register).not.toHaveBeenCalled();
+  });
+
+  it('невалидный password → снекбар error_password, register не вызывается', async () => {
+    const wrapper = await mountRegister();
+    await fillForm(wrapper, VALID.email, VALID.username, 'abc');
+    await wrapper.find('.ui-btn').trigger('click');
+    await flushPromises();
+    expect(h.showError).toHaveBeenCalledWith('error_password');
+    expect(h.register).not.toHaveBeenCalled();
+  });
+
+  it('валидные данные → register(form с reCAPTCHA-токеном), закрытие попапа, снекбар успеха', async () => {
+    h.register.mockResolvedValueOnce(undefined);
+    const wrapper = await mountRegister();
+    await fillForm(wrapper, VALID.email, VALID.username, VALID.password);
+    await wrapper.find('.ui-btn').trigger('click');
+    await flushPromises();
+    expect(h.getRecaptchaToken).toHaveBeenCalledWith('register');
+    expect(h.register).toHaveBeenCalledWith({
+      email: VALID.email,
+      username: VALID.username,
+      password_hash: VALID.password,
+      token: 'test-token',
+    });
+    expect(h.closeAuthPopup).toHaveBeenCalled();
+    expect(h.showSuccess).toHaveBeenCalledWith('Registration success');
+  });
+
+  it('ошибка register → снекбар ошибки, попап не закрывается', async () => {
+    const err = new Error('taken');
+    h.register.mockRejectedValueOnce(err);
+    const wrapper = await mountRegister();
+    await fillForm(wrapper, VALID.email, VALID.username, VALID.password);
+    await wrapper.find('.ui-btn').trigger('click');
+    await flushPromises();
+    expect(h.setErrorState).toHaveBeenCalledWith(err);
+    expect(h.closeAuthPopup).not.toHaveBeenCalled();
+    expect(h.showSuccess).not.toHaveBeenCalled();
+  });
+});

package/components/auth/icon.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="auth-icon">
+    <UiIcon :name="icon"
+            class="auth-icon__icon"
+            size="24"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  icon?: string
+}>(), {
+  icon: 'user-filled'
+});
+</script>
+
+<style lang="scss">
+.auth-icon {
+  --size: 64px;
+
+  display: grid;
+  place-content: center;
+  border-radius: $radius-full;
+  width: var(--size);
+  height: var(--size);
+  background-color: $popup-auth-icon-bg;
+
+  @include from-br(sm) {
+    --size: 48px;
+  }
+}
+
+.auth-icon__icon {
+  --size: 32px;
+
+  width: var(--size);
+  height: var(--size);
+  color: $popup-auth-icon;
+}
+</style>