diff --git a/code/websites/pokedex.online/tests/unit/components/BaseButton.test.js b/code/websites/pokedex.online/tests/unit/components/BaseButton.test.js index 2148972..c98d22f 100644 --- a/code/websites/pokedex.online/tests/unit/components/BaseButton.test.js +++ b/code/websites/pokedex.online/tests/unit/components/BaseButton.test.js @@ -10,7 +10,7 @@ describe('BaseButton', () => { default: 'Click me' } }); - + expect(wrapper.find('button').exists()).toBe(true); expect(wrapper.text()).toBe('Click me'); expect(wrapper.classes()).toContain('base-button--primary'); @@ -19,26 +19,26 @@ describe('BaseButton', () => { it('renders all button variants', () => { const variants = ['primary', 'secondary', 'danger', 'ghost', 'icon-only']; - + variants.forEach(variant => { const wrapper = mount(BaseButton, { props: { variant }, slots: { default: 'Button' } }); - + expect(wrapper.classes()).toContain(`base-button--${variant}`); }); }); it('renders all button sizes', () => { const sizes = ['small', 'medium', 'large']; - + sizes.forEach(size => { const wrapper = mount(BaseButton, { props: { size }, slots: { default: 'Button' } }); - + expect(wrapper.classes()).toContain(`base-button--${size}`); }); }); @@ -51,7 +51,7 @@ describe('BaseButton', () => { }, slots: { default: 'Launch' } }); - + const icons = wrapper.findAll('.icon'); expect(icons.length).toBe(1); expect(icons[0].classes()).toContain('icon-left'); @@ -66,7 +66,7 @@ describe('BaseButton', () => { }, slots: { default: 'Next' } }); - + const icons = wrapper.findAll('.icon'); expect(icons.length).toBe(1); expect(icons[0].classes()).toContain('icon-right'); @@ -79,7 +79,7 @@ describe('BaseButton', () => { icon: '×' } }); - + expect(wrapper.classes()).toContain('base-button--icon-only'); expect(wrapper.text()).toBe('×'); }); @@ -89,7 +89,7 @@ describe('BaseButton', () => { props: { fullWidth: true }, slots: { default: 'Button' } }); - + expect(wrapper.classes()).toContain('base-button--full-width'); }); }); @@ -121,7 +121,7 @@ describe('BaseButton', () => { props: { loading: true }, slots: { default: 'Loading...' } }); - + expect(wrapper.find('.spinner').exists()).toBe(true); expect(wrapper.classes()).toContain('base-button--loading'); }); @@ -134,7 +134,7 @@ describe('BaseButton', () => { }, slots: { default: 'Launch' } }); - + expect(wrapper.find('.icon').exists()).toBe(false); expect(wrapper.find('.spinner').exists()).toBe(true); }); @@ -144,7 +144,7 @@ describe('BaseButton', () => { props: { loading: true }, slots: { default: 'Processing' } }); - + const textSpan = wrapper.find('span:not(.spinner)'); expect(textSpan.classes()).toContain('sr-only'); }); @@ -154,7 +154,7 @@ describe('BaseButton', () => { props: { loading: true }, slots: { default: 'Button' } }); - + await wrapper.trigger('click'); expect(wrapper.emitted('click')).toBeUndefined(); }); @@ -166,7 +166,7 @@ describe('BaseButton', () => { props: { disabled: true }, slots: { default: 'Button' } }); - + expect(wrapper.classes()).toContain('base-button--disabled'); expect(wrapper.attributes('disabled')).toBeDefined(); }); @@ -176,7 +176,7 @@ describe('BaseButton', () => { props: { disabled: true }, slots: { default: 'Button' } }); - + await wrapper.trigger('click'); expect(wrapper.emitted('click')).toBeUndefined(); }); @@ -187,7 +187,7 @@ describe('BaseButton', () => { const wrapper = mount(BaseButton, { slots: { default: 'Button' } }); - + await wrapper.trigger('click'); expect(wrapper.emitted('click')).toBeTruthy(); expect(wrapper.emitted('click')).toHaveLength(1); @@ -197,7 +197,7 @@ describe('BaseButton', () => { const wrapper = mount(BaseButton, { slots: { default: 'Button' } }); - + await wrapper.trigger('click'); const clickEvents = wrapper.emitted('click'); expect(clickEvents[0][0]).toBeInstanceOf(Event); @@ -207,11 +207,11 @@ describe('BaseButton', () => { const wrapper = mount(BaseButton, { slots: { default: 'Button' } }); - + await wrapper.trigger('click'); await wrapper.trigger('click'); await wrapper.trigger('click'); - + expect(wrapper.emitted('click')).toHaveLength(3); }); }); @@ -221,7 +221,7 @@ describe('BaseButton', () => { const wrapper = mount(BaseButton, { slots: { default: 'Button' } }); - + // Check that focus-visible class exists in CSS (component has focus styling) expect(wrapper.html()).toContain('button'); }); @@ -231,7 +231,7 @@ describe('BaseButton', () => { props: { loading: true }, slots: { default: 'Loading' } }); - + const spinner = wrapper.find('.spinner'); expect(spinner.attributes('aria-hidden')).toBe('true'); }); @@ -241,7 +241,7 @@ describe('BaseButton', () => { props: { loading: true }, slots: { default: 'Submit Form' } }); - + expect(wrapper.text()).toContain('Submit Form'); }); }); @@ -260,7 +260,7 @@ describe('BaseButton', () => { }, slots: { default: 'Button' } }); - + expect(wrapper.classes()).toContain('base-button--loading'); expect(wrapper.classes()).toContain('base-button--disabled'); expect(wrapper.attributes('disabled')).toBeDefined();