fix(toggle-refinement): display label

[francoischalifour]

The required label of the ais-toggle-refinement widget was not used in the template, thus ignored. The deployed story should display "Free shipping" but displays the attribute name "free_shipping".

This issue was reported by a user.

[francoischalifour]

@Haroenv There are still issues with conflicting Vue dependencies.

Locally, I still have errors with:

vue-instantsearch/stories/RangeInput.stories.js

Line 5 in e3010f6

import 'vue-slider-component/theme/default.css';

[Haroenv]

Weird, I solved that issue I thought

[Haroenv]

I'm surprised that this didn't break any tests 🤔

[francoischalifour]

So am I. The Vue testing environment seems to be different:

vue-instantsearch/src/components/__tests__/ToggleRefinement.js

Lines 72 to 80 in e3010f6

	it('renders correctly', () => {
	__setState({ ...defaultState });
	const wrapper = mount(Toggle, {
	propsData: defaultProps,
	});
	expect(wrapper.html()).toMatchSnapshot();
	});

vue-instantsearch/src/components/__tests__/__snapshots__/ToggleRefinement.js.snap

Lines 65 to 83 in e3010f6

	exports[`default render renders correctly 1`] = `
	<div class="ais-ToggleRefinement">
	<label class="ais-ToggleRefinement-label">
	<input type="checkbox"
	name="Free Shipping"
	class="ais-ToggleRefinement-checkbox"
	value="true"
	>
	<span class="ais-ToggleRefinement-labelText">
	Free Shipping
	</span>
	<span class="ais-ToggleRefinement-count">
	100
	</span>
	</label>
	</div>
	`;

[Haroenv]

Can you change the test so that the name isn't the same as the label?

vue-instantsearch/src/components/__tests__/ToggleRefinement.js

Line 9 in e3010f6

name: 'Free Shipping',

[francoischalifour]

All right – the test covers more cases now.

[Haroenv]

Netlify failures are the fault of their cache, it works consistently on my machine

[Haroenv]

This is technically a breaking change, but small enough to ignore IMO