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