Snapshots with globalcontext and translation

Signed-off-by: Virginie Ky <virginie.ky@gmail.com>
Signed-off-by: Bart Duisters <bartduisters@bartduisters.com>
This commit is contained in:
Virginie Ky 2020-01-27 18:32:57 +01:00 committed by Bart Duisters
parent 821148d4e4
commit 7e65d058c1
9 changed files with 3344 additions and 2456 deletions

View File

@ -2,7 +2,7 @@
exports[`<EventInput /> should render properly 1`] = `
<div
className="sc-bdVaJa ijTqpx"
className="sc-jAaTju cbZcAq"
>
<table>
<thead>

View File

@ -0,0 +1,163 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Admin | components | HeadersInput should render properly render component 1`] = `
<DocumentFragment>
<div
class="sc-bAeIUo feDjmh"
>
<ul>
<li>
<section>
<p>
<span>
Settings.webhooks.key
</span>
</p>
</section>
<section>
<p>
<span>
Settings.webhooks.value
</span>
</p>
</section>
</li>
<li>
<section>
<div
class=" css-2b097c-container"
>
<div
class=" css-1w9ejix-control"
>
<div
class=" css-1hwfws3"
>
<div
class=" css-1uccc91-singleValue"
/>
<div
class="css-b8ldur-Input"
>
<div
class=""
style="display: inline-block;"
>
<input
aria-autocomplete="list"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
id="react-select-2-input"
spellcheck="false"
style="box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
<div
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
/>
</div>
</div>
</div>
<div
class=" css-1hb7zxy-IndicatorsContainer"
>
<div
aria-hidden="true"
class=" css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-6q0nyr-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
/>
</svg>
</div>
<span
class=" css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-6q0nyr-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
<input
name="headers.0.key"
type="hidden"
value=""
/>
</div>
</section>
<section>
<div
class="sc-kAzzGY ibeNzJ"
>
<input
autocomplete="off"
class="sc-cSHVUG jRAEee"
id="headers.0.value"
name="headers.0.value"
tabindex="0"
type="text"
value=""
/>
</div>
</section>
<div>
<button
class="sc-fBuWsC imrARH"
type="button"
/>
</div>
</li>
</ul>
<button
type="button"
>
<svg
fill="#007eff"
height="13px"
viewBox="0 0 13 13"
width="10px"
xmlns="http://www.w3.org/2000/svg"
>
<g
data-name="Layer 2"
>
<path
d="M6.5.5v12m6-6H.5"
fill="none"
stroke="#007eff"
stroke-linecap="round"
/>
</g>
</svg>
<span>
Settings.webhooks.create.header
</span>
</button>
</div>
</DocumentFragment>
`;

View File

@ -1,11 +1,19 @@
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { shallow } from 'enzyme';
import CreatableSelect from 'react-select/creatable';
import { render, cleanup } from '@testing-library/react';
import { createMemoryHistory } from 'history';
import { InputText } from '@buffetjs/core';
import { CircleButton } from 'strapi-helper-plugin';
import { CircleButton, GlobalContextProvider } from 'strapi-helper-plugin';
import { IntlProvider } from 'react-intl';
import { translationMessages } from '../../../i18n';
import HeadersInput from '../index';
const history = createMemoryHistory();
describe('Admin | components | HeadersInput', () => {
const props = {
name: 'headers',
@ -19,11 +27,38 @@ describe('Admin | components | HeadersInput', () => {
onClick: jest.fn(),
onRemove: jest.fn(),
};
describe('Render', () => {
describe('should render properly', () => {
afterEach(cleanup);
it('It should not crash', () => {
shallow(<HeadersInput {...props} />);
});
it('render component', () => {
const intlProvider = new IntlProvider(
{
locale: 'en',
messages: translationMessages.en,
},
{}
);
const { intl: originalIntl } = intlProvider.getChildContext();
const { asFragment } = render(
<IntlProvider locale={intlProvider.locale}>
<GlobalContextProvider formatMessage={originalIntl.formatMessage}>
<Router history={history}>
<Switch>
<Route>
<HeadersInput {...props} />
</Route>
</Switch>
</Router>
</GlobalContextProvider>
</IntlProvider>
);
expect(asFragment()).toMatchSnapshot();
});
it('It should render as many key/value rows as value', () => {
const renderedComponent = shallow(<HeadersInput {...props} />);

View File

@ -2,7 +2,7 @@
exports[`<TriggerContainer /> should render properly 1`] = `
<div
className="sc-bdVaJa eiJQUQ"
className="sc-htpNat famwcA"
>
<table>
<tbody>

View File

@ -40,10 +40,7 @@ LanguageProvider.propTypes = {
messages: PropTypes.object.isRequired,
};
const mapStateToProps = createSelector(
selectLocale(),
locale => ({ locale })
);
const mapStateToProps = createSelector(selectLocale(), locale => ({ locale }));
function mapDispatchToProps(dispatch) {
return {
@ -51,7 +48,4 @@ function mapDispatchToProps(dispatch) {
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(LanguageProvider);
export default connect(mapStateToProps, mapDispatchToProps)(LanguageProvider);

View File

@ -98,15 +98,16 @@ function EditView() {
const headerTitle = isCreating
? formatMessage({
id: 'Settings.webhooks.create',
defaultMessage: 'Create a new Webhook',
})
: name;
const headersActions = [
{
color: 'primary',
disabled: isTriggerActionDisabled,
label: formatMessage({
id: 'Settings.webhooks.trigger',
defaultMessage: 'Trigger',
}),
onClick: () => handleTrigger(),
style: {
@ -115,6 +116,7 @@ function EditView() {
title: isTriggerActionDisabled
? formatMessage({
id: 'Settings.webhooks.trigger.save',
defaultMessage: 'Save before trigger',
})
: null,
type: 'button',
@ -131,6 +133,7 @@ function EditView() {
disabled: areActionDisabled,
label: formatMessage({
id: 'app.components.Button.reset',
defaultMessage: 'Reset',
}),
onClick: () => handleReset(),
style: {
@ -143,6 +146,7 @@ function EditView() {
disabled: areActionDisabled,
label: formatMessage({
id: 'app.components.Button.save',
defaultMessage: 'Save',
}),
style: {
minWidth: 140,
@ -209,6 +213,7 @@ function EditView() {
return formatMessage({
id: error.id,
defaultMessage: 'error',
});
};
@ -386,6 +391,7 @@ function EditView() {
}}
label={formatMessage({
id: form[key].label,
defaultMessage: form[key].label,
})}
error={getErrorMessage(get(formErrors, key, null))}
name={key}

View File

@ -1,18 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders 1`] = `
exports[`Admin | containers | EditView should render EditView 1`] = `
<DocumentFragment>
<div
class="sc-lhVmIH cvdvuq"
class="sc-daURTG fMRnCr"
>
<div
class="sc-bdVaJa fgkLzW"
/>
<form>
<div
class="sc-jzJRlG dRoksE"
class="sc-eXEjpC iCEvSZ"
>
<div>
<div
class="sticky-wrapper"
>
<div
class="row"
>
@ -20,7 +22,7 @@ exports[`renders 1`] = `
class="col-sm-6 header-title"
>
<div
class="sc-kAzzGY bmsQPa"
class="sc-RefOD zPzYC"
>
<h1 />
</div>
@ -30,17 +32,17 @@ exports[`renders 1`] = `
class="col-sm-6 justify-content-end"
>
<div
class="sc-cSHVUG lhjwRj"
class="sc-ibxdXY flSTRO"
>
<button
class="sc-bdVaJa kwkDoJ"
class="sc-btzYZH kxlTHJ"
color="primary"
label="Settings.webhooks.trigger"
label="Trigger"
style="padding: 0px 15px;"
type="button"
>
<span
class="sc-bwzfXH kUxxJv"
class="sc-bMVAic dKLfTw"
>
<svg
height="14px"
@ -78,27 +80,27 @@ exports[`renders 1`] = `
</g>
</svg>
</span>
Settings.webhooks.trigger
Trigger
</button>
<button
class="sc-bdVaJa gILpUT"
class="sc-btzYZH fvqYKR"
color="cancel"
disabled=""
label="app.components.Button.reset"
label="Reset"
style="padding: 0px 20px;"
type="button"
>
app.components.Button.reset
Reset
</button>
<button
class="sc-bdVaJa icMrdU"
class="sc-btzYZH dUnkjl"
color="success"
disabled=""
label="app.components.Button.save"
label="Save"
style="min-width: 140px;"
type="submit"
>
app.components.Button.save
Save
</button>
</div>
</div>
@ -116,16 +118,437 @@ exports[`renders 1`] = `
>
<div
class="col-6"
/>
>
<div
class="sc-iujRgT fEHRdC"
>
<label
class="sc-iQKALj huPjOb"
for="name"
>
Name
</label>
<div
class="sc-kIPQKe lgGZs"
>
<input
aria-describedby=" "
aria-invalid="false"
autocomplete="off"
class="sc-esjQYD eqKmMI"
id="name"
name="name"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<span
style="display: none;"
/>
</div>
<div
class="col-12"
/>
>
<div
class="sc-iujRgT fEHRdC"
>
<label
class="sc-iQKALj huPjOb"
for="url"
>
Url
</label>
<div
class="sc-kIPQKe lgGZs"
>
<input
aria-describedby=" "
aria-invalid="false"
autocomplete="off"
class="sc-esjQYD eqKmMI"
id="url"
name="url"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<span
style="display: none;"
/>
</div>
<div
class="col-12"
/>
>
<div
class="sc-cQFLBn jtxpvN"
>
<label
class="sc-iQKALj huPjOb"
for="headers"
>
Headers
</label>
<div
class="sc-GMQeP BdDxy"
>
<ul>
<li>
<section>
<p>
<span>
Settings.webhooks.key
</span>
</p>
</section>
<section>
<p>
<span>
Settings.webhooks.value
</span>
</p>
</section>
</li>
<li>
<section>
<div
class=" css-2b097c-container"
>
<div
class=" css-1w9ejix-control"
>
<div
class=" css-1hwfws3"
>
<div
class=" css-1uccc91-singleValue"
/>
<div
class="css-b8ldur-Input"
>
<div
class=""
style="display: inline-block;"
>
<input
aria-autocomplete="list"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
id="react-select-2-input"
spellcheck="false"
style="box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
<div
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
/>
</div>
</div>
</div>
<div
class=" css-1hb7zxy-IndicatorsContainer"
>
<div
aria-hidden="true"
class=" css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-6q0nyr-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
/>
</svg>
</div>
<span
class=" css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-6q0nyr-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
<input
name="headers.0.key"
type="hidden"
value=""
/>
</div>
</section>
<section>
<div
class="sc-kIPQKe lgGZs"
>
<input
autocomplete="off"
class="sc-esjQYD eqKmMI"
id="headers.0.value"
name="headers.0.value"
tabindex="0"
type="text"
value=""
/>
</div>
</section>
<div>
<button
class="sc-gzVnrw gineUH"
type="button"
/>
</div>
</li>
</ul>
<button
type="button"
>
<svg
fill="#007eff"
height="13px"
viewBox="0 0 13 13"
width="10px"
xmlns="http://www.w3.org/2000/svg"
>
<g
data-name="Layer 2"
>
<path
d="M6.5.5v12m6-6H.5"
fill="none"
stroke="#007eff"
stroke-linecap="round"
/>
</g>
</svg>
<span>
Settings.webhooks.create.header
</span>
</button>
</div>
</div>
</div>
<div
class="col-12"
/>
>
<div
class="sc-cQFLBn jtxpvN"
>
<label
class="sc-iQKALj huPjOb"
for="events"
>
Events
</label>
<div
class="sc-exAgwC dGuqTZ"
>
<table>
<thead>
<tr>
<td />
<td>
<span>
Settings.webhooks.events.create
</span>
</td>
<td>
<span>
Settings.webhooks.events.edit
</span>
</td>
<td>
<span>
Settings.webhooks.events.delete
</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div
class="sc-elJkPf goFnYl"
>
<input
autocomplete="off"
class="sc-bYSBpT fFzyOc"
id="entry"
name="entry"
tabindex="0"
type="checkbox"
/>
<label
class="sc-iQKALj huPjOb"
for="entry"
>
entry
</label>
</div>
</td>
<td>
<div
class="sc-elJkPf goFnYl"
>
<input
autocomplete="off"
class="sc-bYSBpT fFzyOc"
id="entry.create"
name="entry.create"
tabindex="0"
type="checkbox"
/>
<label
class="sc-iQKALj huPjOb"
for="entry.create"
/>
</div>
</td>
<td>
<div
class="sc-elJkPf goFnYl"
>
<input
autocomplete="off"
class="sc-bYSBpT fFzyOc"
id="entry.update"
name="entry.update"
tabindex="0"
type="checkbox"
/>
<label
class="sc-iQKALj huPjOb"
for="entry.update"
/>
</div>
</td>
<td>
<div
class="sc-elJkPf goFnYl"
>
<input
autocomplete="off"
class="sc-bYSBpT fFzyOc"
id="entry.delete"
name="entry.delete"
tabindex="0"
type="checkbox"
/>
<label
class="sc-iQKALj huPjOb"
for="entry.delete"
/>
</div>
</td>
</tr>
<tr>
<td>
<div
class="sc-elJkPf goFnYl"
>
<input
autocomplete="off"
class="sc-bYSBpT fFzyOc"
id="media"
name="media"
tabindex="0"
type="checkbox"
/>
<label
class="sc-iQKALj huPjOb"
for="media"
>
media
</label>
</div>
</td>
<td>
<div
class="sc-elJkPf goFnYl"
>
<input
autocomplete="off"
class="sc-bYSBpT fFzyOc"
id="media.create"
name="media.create"
tabindex="0"
type="checkbox"
/>
<label
class="sc-iQKALj huPjOb"
for="media.create"
/>
</div>
</td>
<td>
<div
class="sc-elJkPf goFnYl"
>
<input
autocomplete="off"
class="sc-bYSBpT fFzyOc"
disabled=""
id="media.update"
name="media.update"
tabindex="0"
type="checkbox"
/>
<label
class="sc-iQKALj huPjOb"
for="media.update"
/>
</div>
</td>
<td>
<div
class="sc-elJkPf goFnYl"
>
<input
autocomplete="off"
class="sc-bYSBpT fFzyOc"
id="media.delete"
name="media.delete"
tabindex="0"
type="checkbox"
/>
<label
class="sc-iQKALj huPjOb"
for="media.delete"
/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<span
style="display: none;"
/>
</div>
</div>
</div>
</div>
</div>

View File

@ -5,34 +5,38 @@ import { createMemoryHistory } from 'history';
import { GlobalContextProvider } from 'strapi-helper-plugin';
import { IntlProvider } from 'react-intl';
import { translationMessages } from '../../../../i18n';
import EditView from '../index';
const history = createMemoryHistory();
afterEach(cleanup);
describe('Admin | containers | EditView', () => {
afterEach(cleanup);
it('renders', () => {
const intlProvider = new IntlProvider(
{
locale: 'en',
formatMessage: jest.fn(),
},
{}
);
const { intl: originalIntl } = intlProvider.getChildContext();
it('should render EditView', () => {
const intlProvider = new IntlProvider(
{
locale: 'en',
messages: translationMessages.en,
},
{}
);
const { intl: originalIntl } = intlProvider.getChildContext();
const { asFragment } = render(
<IntlProvider locale="en" message={{}}>
<GlobalContextProvider formatMessage={originalIntl.formatMessage}>
<Router history={history}>
<Switch>
<Route>
<EditView />
</Route>
</Switch>
</Router>
</GlobalContextProvider>
</IntlProvider>
);
expect(asFragment()).toMatchSnapshot();
const { asFragment } = render(
<IntlProvider locale={intlProvider.locale}>
<GlobalContextProvider formatMessage={originalIntl.formatMessage}>
<Router history={history}>
<Switch>
<Route>
<EditView />
</Route>
</Switch>
</Router>
</GlobalContextProvider>
</IntlProvider>
);
expect(asFragment()).toMatchSnapshot();
});
});

5059
yarn.lock

File diff suppressed because it is too large Load Diff