import { mount } from '@vue/test-utils';
import ColourPalette from '@/components/shared/ColourPalette.vue';
import { VBtn } from 'vuetify/components';

describe('ColourPalette', () => {
  it('updates modelValue when colour is clicked', async () => {
    const colours = ['#FF0000', '#00FF00', '#0000FF'];
    const wrapper = mount(ColourPalette, {
      props: { colours },
    });
    const button = wrapper.findAllComponents(VBtn)[0];
    await button.trigger('click');
    expect(wrapper.vm.modelValue).toBe('#FF0000');
    const button2 = wrapper.findAllComponents(VBtn)[1];
    await button2.trigger('click');
    expect(wrapper.vm.modelValue).toBe('#00FF00');
    const button3 = wrapper.findAllComponents(VBtn)[2];
    await button3.trigger('click');
    expect(wrapper.vm.modelValue).toBe('#0000FF');
  });
});