import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { describe, expect, it, vi } from 'vitest';
import { ValueSync } from './decorators';

describe('Decorator: ValueSync', () => {
  const propertyName = 'PROPERTY_NAME';
  const accessorName = 'GETTER_NAME';

  @Component
  class Test extends Vue {
    @ValueSync(propertyName, { type: String, required: true }) [accessorName]!: string;

    changeName(newName: string) {
      this[accessorName] = newName;
    }
  }

  const value = 'John';
  const component = new Test({ propsData: { [propertyName]: value } });
  const mockFn = vi.fn();
  component.$emit = mockFn;

  it('should define prop with options', () => {
    const props = component.$options.props as any;
    expect(props[propertyName]).toEqual({ type: String, required: true });
  });

  it('should set a getter for the provided accessorName', () => {
    expect(component[accessorName]).toBe(value);
  });

  it('should call $emit method', () => {
    const newValue = 'Ola';
    component.changeName(newValue);

    expect(mockFn).toHaveBeenCalled();
    expect(mockFn.mock.calls[0][0]).toBe('input');
    expect(mockFn.mock.calls[0][1]).toBe(newValue);
  });
});