sprof 0.1.0

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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,97 @@
+<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

@@ -0,0 +1,123 @@
+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

@@ -0,0 +1,149 @@
+<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

@@ -0,0 +1,74 @@
+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']);
+  // });
+});