Skip to content

Commit

Permalink
feat(vue): set data-attribute on Vue plugin to be 1:1 with other plug…
Browse files Browse the repository at this point in the history 
…ins + bring back full test suite
  • Loading branch information
@Grsmto
Grsmto committed Jan 19, 2023
1 parent 8a2fdfd commit 6443447
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 104 deletions.
4 changes: 2 additions & 2 deletions packages/simplebar-react/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,8 @@ const SimpleBar = React.forwardRef<SimpleBarCore | null, Props>(
}, []);

return (
<div ref={elRef} {...rest}>
<div className="simplebar-wrapper" data-simplebar="init">
<div data-simplebar="init" ref={elRef} {...rest}>
<div className="simplebar-wrapper">
<div className="simplebar-height-auto-observer-wrapper">
<div className="simplebar-height-auto-observer" />
</div>
Expand Down
114 changes: 68 additions & 46 deletions packages/simplebar-vue/component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,57 +33,79 @@ import { h, isVue3 } from 'vue-demi';
function renderFn({ h, emit, slots, props }) {
const onScroll = (event) => emit('scroll', event);

return h('div', { ref: 'element' }, [
h('div', { class: 'simplebar-wrapper' }, [
h('div', { class: 'simplebar-height-auto-observer-wrapper' }, [
h('div', { class: 'simplebar-height-auto-observer' }),
]),
h('div', { class: 'simplebar-mask' }, [
h('div', { class: 'simplebar-offset' }, [
h(
'div',
{
...(isVue3
? {
onScroll,
class: 'simplebar-content-wrapper',
tabIndex: 0,
role: 'region',
'aria-label':
props.ariaLabel || SimpleBarCore.defaultOptions.ariaLabel,
}
: {
attrs: {
class: 'simplebar-content-wrapper',
tabIndex: 0,
role: 'region',
'aria-label':
props.ariaLabel ||
SimpleBarCore.defaultOptions.ariaLabel,
},
on: { scroll: onScroll },
}),
ref: 'scrollElement',
return h(
'div',
{
ref: 'element',
...(isVue3
? {
'data-simplebar': 'init',
}
: {
attrs: {
'data-simplebar': 'init',
},
[
}),
},
[
h(
'div',
{
class: 'simplebar-wrapper',
},
[
h('div', { class: 'simplebar-height-auto-observer-wrapper' }, [
h('div', { class: 'simplebar-height-auto-observer' }),
]),
h('div', { class: 'simplebar-mask' }, [
h('div', { class: 'simplebar-offset' }, [
h(
'div',
{ class: 'simplebar-content', ref: 'contentElement' },
slots.default?.()
{
...(isVue3
? {
onScroll,
class: 'simplebar-content-wrapper',
tabIndex: 0,
role: 'region',
'aria-label':
props.ariaLabel ||
SimpleBarCore.defaultOptions.ariaLabel,
}
: {
attrs: {
class: 'simplebar-content-wrapper',
tabIndex: 0,
role: 'region',
'aria-label':
props.ariaLabel ||
SimpleBarCore.defaultOptions.ariaLabel,
},
on: { scroll: onScroll },
}),
ref: 'scrollElement',
},
[
h(
'div',
{ class: 'simplebar-content', ref: 'contentElement' },
slots.default?.()
),
]
),
]
),
]),
]),
]),
h('div', { class: 'simplebar-placeholder' }),
]
),
h('div', { class: 'simplebar-track simplebar-horizontal' }, [
h('div', { class: 'simplebar-scrollbar' }),
]),
h('div', { class: 'simplebar-track simplebar-vertical' }, [
h('div', { class: 'simplebar-scrollbar' }),
]),
h('div', { class: 'simplebar-placeholder' }),
]),
h('div', { class: 'simplebar-track simplebar-horizontal' }, [
h('div', { class: 'simplebar-scrollbar' }),
]),
h('div', { class: 'simplebar-track simplebar-vertical' }, [
h('div', { class: 'simplebar-scrollbar' }),
]),
]);
]
);
}

export default {
Expand Down
26 changes: 26 additions & 0 deletions packages/simplebar-vue/tests/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`simplebar snapshots renders with default slot 1`] = `
<div data-simplebar="init">
<div class="simplebar-wrapper">
<div class="simplebar-height-auto-observer-wrapper">
<div class="simplebar-height-auto-observer"></div>
</div>
<div class="simplebar-mask">
<div class="simplebar-offset" style="right: 0px; bottom: 0px;">
<div class="simplebar-content-wrapper" tabindex="0" role="region" aria-label="scrollable content" style="height: auto; overflow-x: hidden; overflow-y: hidden;">
<div class="simplebar-content">
<div class="inner-content"></div>
</div>
</div>
</div>
</div>
<div class="simplebar-placeholder" style="width: 0px; height: 0px;"></div>
</div>
<div class="simplebar-track simplebar-horizontal" style="visibility: hidden;">
<div class="simplebar-scrollbar" style="width: 0px; display: none;"></div>
</div>
<div class="simplebar-track simplebar-vertical" style="visibility: hidden;">
<div class="simplebar-scrollbar" style="height: 0px; display: none;"></div>
</div>
</div>
`;

exports[`simplebar snapshots renders without crashing 1`] = `
<div data-simplebar="init">
<div class="simplebar-wrapper">
Expand Down
112 changes: 56 additions & 56 deletions packages/simplebar-vue/tests/index.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { shallowMount, destroyWrapper, isVue3 } from './test-utils';
import simplebar from '../component.js';
import SimpleBar from 'simplebar';
import SimpleBar from 'simplebar-core';

describe('simplebar', () => {
describe('snapshots', () => {
Expand All @@ -15,72 +15,72 @@ describe('simplebar', () => {
destroyWrapper(wrapper);
});

// it('renders with default slot', () => {
// const wrapper = shallowMount(simplebar, {
// slots: {
// default: '<div class="inner-content" />',
// },
// });
// expect(wrapper.html()).toMatchSnapshot();
// });
it('renders with default slot', () => {
const wrapper = shallowMount(simplebar, {
slots: {
default: '<div class="inner-content" />',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
});

// it('can access SimpleBar instance', () => {
// const wrapper = shallowMount(simplebar);
// expect(wrapper.vm.SimpleBar).toBeInstanceOf(SimpleBar);
// });
it('can access SimpleBar instance', () => {
const wrapper = shallowMount(simplebar);
expect(wrapper.vm.SimpleBar).toBeInstanceOf(SimpleBar);
});

// it('can access root element ref property', () => {
// const wrapper = shallowMount(simplebar);
// expect(wrapper.element).toEqual(wrapper.vm.$refs.element);
// });
it('can access root element ref property', () => {
const wrapper = shallowMount(simplebar);
expect(wrapper.element).toEqual(wrapper.vm.$refs.element);
});

// it('can access scrollElement property', () => {
// const wrapper = shallowMount(simplebar);
// const scrollElement = wrapper.vm.scrollElement;
it('can access scrollElement property', () => {
const wrapper = shallowMount(simplebar);
const scrollElement = wrapper.vm.scrollElement;

// expect(scrollElement).toEqual(
// wrapper.find('.simplebar-content-wrapper').element
// );
// });
expect(scrollElement).toEqual(
wrapper.find('.simplebar-content-wrapper').element
);
});

// it('can access contentElement property', () => {
// const wrapper = shallowMount(simplebar);
// const scrollElement = wrapper.vm.contentElement;
it('can access contentElement property', () => {
const wrapper = shallowMount(simplebar);
const scrollElement = wrapper.vm.contentElement;

// expect(scrollElement).toEqual(wrapper.find('.simplebar-content').element);
// });
expect(scrollElement).toEqual(wrapper.find('.simplebar-content').element);
});

// it('works with options as data attributes', () => {
// const wrapper = shallowMount(simplebar, {
// attrs: { 'data-simplebar-force-visible': 'true' },
// });
// expect(wrapper.vm.SimpleBar.options.forceVisible).toEqual(true);
// });
it('works with options as data attributes', () => {
const wrapper = shallowMount(simplebar, {
attrs: { 'data-simplebar-force-visible': 'true' },
});
expect(wrapper.vm.SimpleBar.options.forceVisible).toEqual(true);
});

// it('works with options as props', () => {
// const wrapper = shallowMount(simplebar, {
// propsData: { forceVisible: true },
// });
// expect(wrapper.vm.SimpleBar.options.forceVisible).toEqual(true);
// });
it('works with options as props', () => {
const wrapper = shallowMount(simplebar, {
propsData: { forceVisible: true },
});
expect(wrapper.vm.SimpleBar.options.forceVisible).toEqual(true);
});

// it('emits a scroll event', async () => {
// const wrapper = shallowMount(simplebar);
// const scrollElement = wrapper.find('.simplebar-content-wrapper');
it('emits a scroll event', async () => {
const wrapper = shallowMount(simplebar);
const scrollElement = wrapper.find('.simplebar-content-wrapper');

// expect(wrapper.emitted()).not.toHaveProperty('scroll');
// await scrollElement.trigger('scroll');
// expect(wrapper.emitted()).toHaveProperty('scroll');
// });
expect(wrapper.emitted()).not.toHaveProperty('scroll');
await scrollElement.trigger('scroll');
expect(wrapper.emitted()).toHaveProperty('scroll');
});

// it('destroys Simplebar instance when component is unmounted to prevent memory leaks', () => {
// // expect.assertions(1);
// const wrapper = shallowMount(simplebar);
// const instance = wrapper.vm.SimpleBar;
// jest.spyOn(instance, 'unMount');
it('destroys Simplebar instance when component is unmounted to prevent memory leaks', () => {
// expect.assertions(1);
const wrapper = shallowMount(simplebar);
const instance = wrapper.vm.SimpleBar;
jest.spyOn(instance, 'unMount');

// destroyWrapper(wrapper);
// expect(instance.unMount).toHaveBeenCalledTimes(1);
// });
destroyWrapper(wrapper);
expect(instance.unMount).toHaveBeenCalledTimes(1);
});
});

0 comments on commit 6443447

Please sign in to comment.