sprof 0.0.2 → 0.0.11

package/src/components/atoms/PRadio/PRadio.test.ts

@@ -1,110 +0,0 @@
-import { mount } from '@vue/test-utils';
-
-import PRadio from './PRadio.vue';
-
-describe('PRadio', () => {
-  //1. Тест задания и рендеринга лейбла
-  test('renders label and input', () => {
-    const wrapper = mount(PRadio, {
-      props: {
-        label: 'Test Radio',
-      },
-    });
-
-    // Проверяем наличие текста label
-    expect(wrapper.text()).toContain('Test Radio');
-
-    // Проверяем наличие радио инпута
-    const input = wrapper.find('input[type="radio"]');
-    expect(input.exists()).toBe(true);
-  });
-});
-
-describe('PRadio Styles', () => {
-  //2. Тесты работы задаваемых параметрами стилей
-  test('applies custom padding, margin, size, and borderRadius', () => {
-    const wrapper = mount(PRadio, {
-      props: {
-        padding: '10px',
-        margin: '5px',
-        size: '24px',
-        borderRadius: '50%',
-      },
-    });
-
-    const box = wrapper.find('.box');
-    const radioLine = wrapper.find('.radio-line');
-
-    // Проверяем стили
-    expect(radioLine.attributes('style')).toContain('padding: 10px');
-    expect(radioLine.attributes('style')).toContain('margin: 5px');
-    expect(box.attributes('style')).toContain('width: 24px');
-    expect(box.attributes('style')).toContain('height: 24px');
-    expect(box.attributes('style')).toContain('border-radius: 50%');
-  });
-  //3. Тесты работы параметра размера шрифта
-  test('applies custom fontSize to label', () => {
-    const wrapper = mount(PRadio, {
-      props: {
-        fontSize: '18px',
-      },
-    });
-
-    const label = wrapper.find('.radio-field__label');
-
-    // Проверяем размер шрифта label
-    expect(label.attributes('style')).toContain('font-size: 18px');
-  });
-  //4. Тест работы выбора
-  test('checks radio button when value matches model', async () => {
-    const wrapper = mount(PRadio, {
-      props: {
-        value: 'option1',
-        modelValue: 'option1',
-      },
-    });
-
-    const input = wrapper.find('input[type="radio"]').element as HTMLInputElement;
-
-    // Проверяем, что инпут отмечен, если value совпадает с modelValue
-    expect(input.checked).toBe(true);
-  });
-
-  test('does not check radio button when value does not match model', async () => {
-    const wrapper = mount(PRadio, {
-      props: {
-        value: 'option1',
-        modelValue: 'option2',
-      },
-    });
-
-    const input = wrapper.find('input[type="radio"]').element as HTMLInputElement;
-
-    // Проверяем, что инпут не отмечен, если value не совпадает с modelValue
-    expect(input.checked).toBe(false);
-  });
-});
-
-// describe('PRadio Events', () => {
-//   test('emits change event when clicked', async () => {
-//     const wrapper = mount(PRadio, {
-//       props: {
-//         value: 'option1',
-//         modelValue: '',
-//       },
-//     });
-
-//     const input = wrapper.find('input[type="radio"]');
-
-//     await input.trigger('click');
-
-//     // Проверяем, что событие change эмитится
-//     const emitted = wrapper.emitted('change');
-//     expect(emitted).toBeTruthy();
-
-//     // Проверяем, что событие содержит корректное значение
-//     if (emitted && emitted[0]) {
-//       expect(emitted[0]).toEqual(['option1']);
-//     }
-//   });
-// });

package/src/components/atoms/PRadio/PRadio.vue

@@ -1,97 +0,0 @@
-<template>
-  <div class="radio-line" :style="{ padding: padding, margin: margin, maxWidth: width }">
-    <label class="radio-field__label" :for="id" :style="{ fontSize: fontSize }">
-      <input :id="id" v-model="model" :name="name" :checked="checked" class="radio-field__input" type="radio" :value="value" />
-      <div class="box" :style="{ width: size, height: size, borderRadius: borderRadius }" @click="change">
-        <div v-if="model === value" class="radio-dot" :style="{ width: `calc(${size} - 50%)`, height: `calc(${size} - 50%)` }"></div>
-      </div>
-      <span @click="change">
-        {{ label }}
-      </span>
-    </label>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const model = defineModel<string>();
-const emits = defineEmits(['change']);
-const props = defineProps({
-  label: { type: String, default: '' },
-  name: { type: String, default: 'group' },
-  fontSize: { type: String, default: '14px' },
-  size: { type: String, default: '20px' },
-  borderRadius: { type: String, default: '' },
-  padding: { type: String, default: '' },
-  margin: { type: String, default: '' },
-  width: { type: String, default: 'auto' },
-  value: { type: [String, Boolean], default: undefined },
-});
-const id = Strings.CreateGuid();
-const checked = computed(() => {
-  return model.value === props.value;
-});
-const change = () => {
-  emits('change', props.value);
-};
-</script>
-
-<style scoped>
-.radio-line {
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  display: flex;
-  justify-content: left;
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 10px 0;
-}
-
-.box {
-  position: relative;
-  border: 1px solid;
-  border-color: var(--checkbox-border-color);
-  border-radius: 100px;
-  box-sizing: border-box;
-  margin-right: 10px;
-}
-
-.radio-dot {
-  box-sizing: border-box;
-  position: absolute;
-  z-index: 2;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  margin: 0;
-  padding: 0;
-  background: var(--checkbox-border-color);
-  border-radius: 100px;
-}
-
-.radio-field__label {
-  box-sizing: border-box;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  font-family: var(--base-font);
-  color: var(--checkbox-label-color);
-  -webkit-user-select: none; /* Safari */
-  -ms-user-select: none; /* IE 10 and IE 11 */
-  user-select: none; /* Standard syntax */
-  cursor: pointer;
-}
-
-.radio-field__label:hover {
-  color: var(--checkbox-border-color-hovered);
-}
-
-.radio-field__label:hover > .box {
-  border-color: var(--checkbox-border-color-hovered);
-  color: var(--checkbox-border-color-hovered);
-}
-
-.radio-field__input {
-  display: none;
-}
-</style>

package/src/components/atoms/PRightSlider/PRightSlider.test.ts

@@ -1,123 +0,0 @@
-import { mount } from '@vue/test-utils';
-
-import PString from '../PString/PString.vue';
-import PRightSlider from './PRightSlider.vue';
-
-describe('PRightSlider', () => {
-  //1. Тест рендеринга слотов
-  test('renders slot content and title', () => {
-    const wrapper = mount(PRightSlider, {
-      slots: {
-        default: '<div class="slot-slider-content">Slot Slider Content</div>',
-        content: '<div class="slot-content">Slot Content</div>',
-      },
-    });
-
-    // Проверяем, что слот содержимого слайдера и слот содержимого контента отображаются
-    expect(wrapper.find('.slot-slider-content').exists()).toBe(true);
-    expect(wrapper.find('.slot-content').exists()).toBe(true);
-  });
-
-  // 2. Тест переключения состояния по клику при скрытом начальном состоянии слайдера;
-  test('toggles closed slider state on click', async () => {
-    const wrapper = mount(PRightSlider, {
-      props: { open: false },
-    });
-
-    const clickLine = wrapper.find('.click-line');
-    await clickLine.trigger('click');
-
-    // Проверяем, что событие переключения срабатывает
-    expect(wrapper.emitted('open')).toBeTruthy();
-    expect(wrapper.emitted('open')![0]).toEqual([true]);
-  });
-
-  // 3. Тест переключения состояния по клику при открытом начальном состоянии слайдера;
-  test('toggles opened slider state on click', async () => {
-    const wrapper = mount(PRightSlider, {
-      props: { open: true },
-    });
-
-    const clickLine = wrapper.find('.click-line');
-    await clickLine.trigger('click');
-
-    // Проверяем, что событие переключения срабатывает
-    expect(wrapper.emitted('open')).toBeTruthy();
-    expect(wrapper.emitted('open')![0]).toEqual([false]);
-  });
-
-  //4. Тест применения пользовательских стилей: background
-  test('applies custom styles: background', () => {
-    const wrapper = mount(PRightSlider, {
-      props: {
-        background: 'red',
-      },
-    });
-
-    const content = wrapper.find('.RS-content');
-
-    // Проверяем, что стили применены
-    expect(content.attributes('style')).toContain('background: red');
-  });
-  //5. Тест применения пользовательских стилей: тень включена
-  test('applies correct styles when shadow is enabled', () => {
-    const wrapper = mount(PRightSlider, {
-      props: {
-        shadow: true,
-      },
-    });
-
-    const body = wrapper.find('.RS-body');
-    expect(body.attributes('style')).toContain('5px 0 5px -3px rgba(0,0,0,0.3)');
-  });
-  //6. Тест применения пользовательских стилей: тень выключена
-  test('applies correct styles when shadow is disabled', () => {
-    const wrapper = mount(PRightSlider, {
-      props: {
-        shadow: false,
-      },
-    });
-
-    const body = wrapper.find('.RS-body');
-    expect(body.attributes('style')).toContain('box-shadow: none');
-  });
-
-  //7. Тест смещения слайдера за границу экрана при открытии и возвращении обратно
-  test('appearing within the screen is visibility', async () => {
-    const wrapper = mount(PRightSlider, {});
-
-    // Сначала слайдер должен быть смещен вправо за границу экрана
-    expect(wrapper.find('.RS-body').attributes('style')).toContain('margin-right: calc(30px - 300px)');
-
-    const clickLine = wrapper.find('.click-line');
-    await clickLine.trigger('click');
-
-    // Проверяем, что слайдер вернулся обратно в видимую зону экрана
-    expect(wrapper.find('.RS-body').attributes('style')).toContain('margin-right: 0');
-  });
-  //8. Тест работы параметра, задающего имя title на click-line при закрытом слайдере
-  test('displays titleOpen when slider is closed', () => {
-    const wrapper = mount(PRightSlider, {
-      props: {
-        titleClose: 'Open Menu',
-      },
-    });
-
-    const title = wrapper.findComponent(PString);
-    // Проверяем, title click-line когда слайдер в закрытом состоянии
-    expect(title.props('string')).toBe('Open Menu');
-  });
-  //9. Тест работы параметра, задающего имя title на click-line при открытом слайдере
-  test('displays titleClose when slider is opened', () => {
-    const wrapper = mount(PRightSlider, {
-      props: {
-        open: true,
-        titleOpen: 'Close Menu',
-      },
-    });
-
-    const title = wrapper.findComponent(PString);
-    // Проверяем, title click-line когда слайдер в открытом состоянии
-    expect(title.props('string')).toBe('Close Menu');
-  });
-});

package/src/components/atoms/PRightSlider/PRightSlider.vue

@@ -1,149 +0,0 @@
-<template>
-  <div class="wrapper">
-    <div class="content">
-      <slot name="content" />
-    </div>
-    <div
-      class="RS-body"
-      :style="{
-        marginRight: isOpen ? `0` : `calc(${widthClosed} - ${widthOpened})`,
-        minWidth: widthOpened,
-        maxWidth: widthOpened,
-        boxShadow: shadow ? '-5px 0 5px -3px rgba(0,0,0,0.3)' : 'none',
-        position: shift ? 'relative' : 'absolute',
-      }"
-    >
-      <div
-        class="click-line"
-        :style="{
-          width: widthClosed,
-        }"
-        @click="openSlider(!isOpen)"
-      >
-        <PString v-if="isOpen" :string="titleOpen" font-size="16px" padding="0" color="inherit" />
-        <PString v-if="!isOpen" :string="titleClose" font-size="16px" padding="0" color="inherit" />
-      </div>
-      <div
-        class="RS-content"
-        :style="{
-          width: `calc(${widthOpened} - ${widthClosed} - 2px)`,
-          background: background,
-        }"
-      >
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps({
-  open: { type: Boolean, default: false },
-  shadow: { type: Boolean, default: true },
-  border: { type: Boolean, default: true },
-  shift: { type: Boolean, default: true },
-  widthClosed: {
-    type: String,
-    required: false,
-    default: '30px',
-  },
-  widthOpened: {
-    type: String,
-    required: false,
-    default: '300px',
-  },
-  titleOpen: {
-    type: String,
-    required: false,
-    default: 'Скрыть',
-  },
-  titleClose: {
-    type: String,
-    required: false,
-    default: 'Показать',
-  },
-  background: {
-    type: String,
-    required: false,
-    default: 'inherit',
-  },
-});
-
-const emit = defineEmits(['open']);
-const isOpen = ref(props.open);
-watch(
-  () => props.open,
-  () => {
-    isOpen.value = !isOpen.value;
-  }
-);
-
-const openSlider = (open: boolean) => {
-  isOpen.value = !isOpen.value;
-  emit('open', open);
-};
-</script>
-
-<style lang="scss" scoped>
-.wrapper {
-  height: 100%;
-  display: flex;
-}
-
-.content {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-}
-
-.RS-body {
-  box-sizing: border-box;
-  // right: 0;
-  min-height: inherit;
-  display: flex;
-  height: 100%;
-  // float: left;
-  padding: 0;
-  z-index: 999;
-  -webkit-user-select: none;
-  /* Safari */
-  -ms-user-select: none;
-  /* IE 10 and IE 11 */
-  user-select: none;
-  /* Standard syntax */
-  font-family: var(--base-font);
-  font-size: var(--font-size-default);
-  transition: var(--transition-default, 0);
-}
-
-.click-line {
-  // box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  writing-mode: vertical-lr;
-  border-right: 1px solid;
-  border-left: 1px solid;
-  cursor: pointer;
-  border-color: var(--right-slider-click-line-border-color);
-  background: var(--right-slider-click-line-background);
-  color: var(--right-slider-click-line-font-color);
-  font-family: var(--base-font);
-  font-size: var(--font-size-default);
-  padding: 0 2px 0 0;
-}
-
-.click-line:hover {
-  background: var(--right-slider-click-line-background-hovered);
-  color: var(--right-slider-click-line-font-color-hovered);
-}
-
-.RS-content {
-  box-sizing: border-box;
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-</style>

package/src/components/atoms/PSelect/PSelect.test.ts

@@ -1,74 +0,0 @@
-import { mount } from '@vue/test-utils';
-
-import PSelect from './PSelect.vue';
-
-describe('PSelect', () => {
-  // 1. Тест рендеринга label и placeholder
-  test('renders label and placeholder', () => {
-    const wrapper = mount(PSelect, {
-      props: {
-        label: 'Select Label',
-        placeholder: 'Choose an option',
-      },
-    });
-
-    // Проверяем, что label отображается
-    expect(wrapper.text()).toContain('Select Label');
-    // Проверяем, что placeholder присутствует
-    expect(wrapper.find('option').text()).toBe('Choose an option');
-  });
-
-  //2. Тест кнопки очистки (clearable)
-  test('clears selection when clear button is clicked', async () => {
-    const wrapper = mount(PSelect, {
-      props: {
-        clearable: true,
-        value: 'option1',
-      },
-    });
-
-    const clearButton = wrapper.find('.clear');
-    await clearButton.trigger('click');
-
-    // Проверяем, что срабатывают события очистки и изменения
-    expect(wrapper.emitted('clear')).toBeTruthy();
-    expect(wrapper.emitted('change')).toBeTruthy();
-  });
-
-  //3. Тест применения пользовательских стилей
-  test('applies custom styles', () => {
-    const wrapper = mount(PSelect, {
-      props: {
-        width: '200px',
-        margin: '10px',
-        padding: '5px',
-      },
-    });
-
-    const selectField = wrapper.find('.text-field');
-
-    // Проверяем, что стили применены
-    expect(selectField.attributes('style')).toContain('width: 200px');
-    expect(selectField.attributes('style')).toContain('margin: 10px');
-    expect(selectField.attributes('style')).toContain('padding: 5px');
-  });
-
-  // Тест события изменения значения
-  // test('emits change event on selection', async () => {
-  //   const wrapper = mount(PSelect, {
-  //     props: {
-  //       value: 'option1',
-  //     },
-  //     slots: {
-  //       default: '<option value="option1">Option 1</option>',
-  //     },
-  //   });
-
-  //   const select = wrapper.find('select');
-  //   await select.trigger('change');
-
-  //   // Проверяем, что событие change срабатывает
-  //   expect(wrapper.emitted('change')).toBeTruthy();
-  //   expect(wrapper.emitted('change')![0]).toEqual(['option1']);
-  // });
-});