maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 12:43:11 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #580 from sharetribe/test-translations

Browse source 
Make snapshots stable again
This commit is contained in:
Kimmo Puputti 2017-11-30 12:28:24 +02:00 • committed by GitHub
commit 356e64a152
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 99 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.env.development Normal file
View file

@ -0,0 +1,2 @@
NODE_ENV=development
REACT_APP_ENV=development

3
.env.test Normal file
View file

@ -0,0 +1,3 @@
NODE_ENV=test
REACT_APP_ENV=test
REACT_APP_SHARETRIBE_MARKETPLACE_CURRENCY=USD

6
package.json
View file

@ -55,12 +55,12 @@
},
"scripts": {
"clean": "rm -rf build/*",
"dev": "REACT_APP_ENV=development sharetribe-scripts start",
"dev": "sharetribe-scripts start",
"build": "sharetribe-scripts build",
"format": "prettier --write '**/*.{js,css}'",
"format-ci": "prettier --list-different '**/*.{js,css}'",
"test": "export REACT_APP_SHARETRIBE_MARKETPLACE_CURRENCY=USD&&sharetribe-scripts test --env=jsdom",
"test-ci": "export REACT_APP_SHARETRIBE_MARKETPLACE_CURRENCY=USD&&sharetribe-scripts test --env=jsdom --runInBand",
"test": "sharetribe-scripts test --env=jsdom",
"test-ci": "sharetribe-scripts test --env=jsdom --runInBand",
"eject": "sharetribe-scripts eject",
"start": "node server/index.js",
"dev-server": "export REACT_APP_ENV=development REACT_APP_CANONICAL_ROOT_URL=http://localhost:4000&&yarn run build&&nodemon --watch server server/index.js",

17
src/app.js
View file

@ -4,6 +4,7 @@ import ReactDOMServer from 'react-dom/server';
import Helmet from 'react-helmet';
import { BrowserRouter, StaticRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { mapValues } from 'lodash';
import moment from 'moment';
import { IntlProvider, addLocaleData } from 'react-intl';
import configureStore from './store';
@ -18,7 +19,19 @@ import config from './config';
import localeData from 'react-intl/locale-data/en';
import messages from './translations/en.json';
const isTestEnv = process.env.NODE_ENV === 'test';
// Locale should not affect the tests. We ensure this by providing
// messages with the key as the value of each message.
const testMessages = mapValues(messages, (val, key) => key);
const localeMessages = isTestEnv ? testMessages : messages;
const setupLocale = () => {
if (isTestEnv) {
// Don't change the locale in tests
return;
}
// Add the translation messages
addLocaleData([...localeData]);
@ -31,7 +44,7 @@ export const ClientApp = props => {
const { store } = props;
setupLocale();
return (
<IntlProvider locale={config.locale} messages={messages}>
<IntlProvider locale={config.locale} messages={localeMessages}>
<Provider store={store}>
<BrowserRouter>
<Routes routes={routeConfiguration()} />
@ -49,7 +62,7 @@ export const ServerApp = props => {
const { url, context, store } = props;
setupLocale();
return (
<IntlProvider locale={config.locale} messages={messages}>
<IntlProvider locale={config.locale} messages={localeMessages}>
<Provider store={store}>
<StaticRouter location={url} context={context}>
<Routes routes={routeConfiguration()} />

20
src/app.test.js
View file

@ -34,16 +34,16 @@ describe('Application', () => {
it('server renders pages that do not require authentication', () => {
const urlTitles = {
'/': 'Book saunas everywhere',
'/s': 'Search results for map search',
'/l/listing-title-slug/1234': 'Loading listing…',
'/l/1234': 'Loading listing…',
'/u/1234': ' | Saunatime',
'/login': 'Log in',
'/signup': 'Sign up',
'/recover-password': 'Request a new password',
'/this-url-should-not-be-found': 'Page not found',
'/reset-password?t=token&e=email': 'Reset password',
'/': 'LandingPage.schemaTitle',
'/s': 'SearchPage.schemaTitle',
'/l/listing-title-slug/1234': 'ListingPage.loadingListingTitle',
'/l/1234': 'ListingPage.loadingListingTitle',
'/u/1234': 'ProfilePage.schemaTitle',
'/login': 'AuthenticationPage.schemaTitleLogin',
'/signup': 'AuthenticationPage.schemaTitleSignup',
'/recover-password': 'PasswordRecoveryPage.title',
'/this-url-should-not-be-found': 'NotFoundPage.title',
'/reset-password?t=token&e=email': 'PasswordResetPage.title',
};
forEach(urlTitles, (title, url) => {
const context = {};

80
src/components/BookingBreakdown/__snapshots__/BookingBreakdown.test.js.snap
View file

@ -11,7 +11,7 @@ exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
className={undefined}
>
<span>
Price per night
BookingBreakdown.pricePerNight
</span>
</span>
<span
@ -27,17 +27,7 @@ exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
className={undefined}
>
<span>
<span
className={undefined}
>
2017-04-14
</span>
–
<span
className={undefined}
>
2017-04-16
</span>
BookingBreakdown.bookingPeriod
</span>
</span>
<span
@ -46,7 +36,7 @@ exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
<span
dangerouslySetInnerHTML={
Object {
"__html": "2 nights",
"__html": "BookingBreakdown.nightCount",
}
}
/>
@ -62,7 +52,7 @@ exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
className={undefined}
>
<span>
Total price
BookingBreakdown.total
</span>
</div>
<div
@ -85,7 +75,7 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
className={undefined}
>
<span>
Price per night
BookingBreakdown.pricePerNight
</span>
</span>
<span
@ -101,17 +91,7 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
className={undefined}
>
<span>
<span
className={undefined}
>
2017-04-14
</span>
–
<span
className={undefined}
>
2017-04-16
</span>
BookingBreakdown.bookingPeriod
</span>
</span>
<span
@ -120,7 +100,7 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
<span
dangerouslySetInnerHTML={
Object {
"__html": "2 nights",
"__html": "BookingBreakdown.nightCount",
}
}
/>
@ -136,7 +116,7 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
className={undefined}
>
<span>
Total price
BookingBreakdown.total
</span>
</div>
<div
@ -159,7 +139,7 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
className={undefined}
>
<span>
Price per night
BookingBreakdown.pricePerNight
</span>
</span>
<span
@ -175,17 +155,7 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
className={undefined}
>
<span>
<span
className={undefined}
>
2017-04-14
</span>
–
<span
className={undefined}
>
2017-04-16
</span>
BookingBreakdown.bookingPeriod
</span>
</span>
<span
@ -194,7 +164,7 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
<span
dangerouslySetInnerHTML={
Object {
"__html": "2 nights",
"__html": "BookingBreakdown.nightCount",
}
}
/>
@ -207,7 +177,7 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
className={undefined}
>
<span>
Subtotal
BookingBreakdown.subTotal
</span>
</span>
<span
@ -223,7 +193,7 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
className={undefined}
>
<span>
Refund
BookingBreakdown.refund
</span>
</span>
<span
@ -242,7 +212,7 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
className={undefined}
>
<span>
Total price
BookingBreakdown.providerTotalCanceled
</span>
</div>
<div
@ -265,7 +235,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
className={undefined}
>
<span>
Price per night
BookingBreakdown.pricePerNight
</span>
</span>
<span
@ -281,17 +251,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
className={undefined}
>
<span>
<span
className={undefined}
>
2017-04-14
</span>
–
<span
className={undefined}
>
2017-04-16
</span>
BookingBreakdown.bookingPeriod
</span>
</span>
<span
@ -300,7 +260,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
<span
dangerouslySetInnerHTML={
Object {
"__html": "2 nights",
"__html": "BookingBreakdown.nightCount",
}
}
/>
@ -313,7 +273,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
className={undefined}
>
<span>
Subtotal
BookingBreakdown.subTotal
</span>
</span>
<span
@ -329,7 +289,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
className={undefined}
>
<span>
Saunatime fee
BookingBreakdown.commission
</span>
</span>
<span
@ -348,7 +308,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
className={undefined}
>
<span>
You'll make
BookingBreakdown.providerTotalDefault
</span>
</div>
<div

8
src/components/DateInputField/__snapshots__/DateInputField.test.js.snap
View file

@ -16,7 +16,7 @@ exports[`DateInput matches snapshot 1`] = `
>
<input
aria-describedby="DateInput__screen-reader-message-DateInputField_DateInputComponent_someDate"
aria-label="Date input"
aria-label="DateInput.defaultPlaceholder"
autoComplete="off"
className="DateInput__input needsclick"
disabled={false}
@ -25,7 +25,7 @@ exports[`DateInput matches snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Date input"
placeholder="DateInput.defaultPlaceholder"
readOnly={false}
required={false}
type="text"
@ -35,12 +35,12 @@ exports[`DateInput matches snapshot 1`] = `
className="screen-reader-only"
id="DateInput__screen-reader-message-DateInputField_DateInputComponent_someDate"
>
Date input
DateInput.screenReaderInputMessage
</p>
<div
className="DateInput__display-text"
>
Date input
DateInput.defaultPlaceholder
</div>
</div>
</div>

4
src/components/DateRangeInputField/__snapshots__/DateRangeInputField.test.js.snap
View file

@ -35,7 +35,7 @@ exports[`DateRangeInput matches snapshot 1`] = `
className="screen-reader-only"
id="DateInput__screen-reader-message-bookingStartDate"
>
Date input
DateRangeInputField.screenReaderInputMessage
</p>
<div
className="DateInput__display-text"
@ -74,7 +74,7 @@ exports[`DateRangeInput matches snapshot 1`] = `
className="screen-reader-only"
id="DateInput__screen-reader-message-bookingEndDate"
>
Date input
DateRangeInputField.screenReaderInputMessage
</p>
<div
className="DateInput__display-text"

8
src/components/SectionHero/__snapshots__/SectionHero.test.js.snap
View file

@ -8,14 +8,14 @@ exports[`SectionHero matches snapshot 1`] = `
className={undefined}
>
<span>
Book saunas everywhere.
SectionHero.title
</span>
</h1>
<h2
className={undefined}
>
<span>
The largest online community to rent saunas in Finland.
SectionHero.subTitle
</span>
</h2>
<button
@ -49,7 +49,7 @@ exports[`SectionHero matches snapshot 1`] = `
</g>
</svg>
<span>
Search saunas
SectionHero.mobileSearchButtonText
</span>
</button>
<form
@ -100,7 +100,7 @@ exports[`SectionHero matches snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Search saunas…"
placeholder="LocationSearchForm.placeholder"
type="search"
value=""
/>

14
src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap
View file

@ -65,7 +65,7 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Search saunas…"
placeholder="TopbarSearchForm.placeholder"
type="search"
value=""
/>
@ -82,7 +82,7 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
className={undefined}
>
<span>
+ Add your sauna
TopbarDesktop.createListing
</span>
</span>
</a>
@ -97,7 +97,7 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
className={undefined}
>
<span>
Inbox
TopbarDesktop.inbox
</span>
</span>
</a>
@ -142,7 +142,7 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
className={undefined}
/>
<span>
Your listings
TopbarDesktop.yourListingsLink
</span>
</a>
</li>
@ -161,7 +161,7 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
className={undefined}
/>
<span>
Profile settings
TopbarDesktop.profileSettingsLink
</span>
</a>
</li>
@ -180,7 +180,7 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
className={undefined}
/>
<span>
Account settings
TopbarDesktop.accountSettingsLink
</span>
</a>
</li>
@ -197,7 +197,7 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
className={undefined}
/>
<span>
Log out
TopbarDesktop.logout
</span>
</button>
</li>

8
src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap
View file

@ -13,7 +13,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
<label
htmlFor="fakeTestForm.title"
>
The name of your sauna
EditListingDescriptionForm.title
</label>
<input
autoFocus={true}
@ -26,7 +26,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder="What's the name of your sauna?"
placeholder="EditListingDescriptionForm.titlePlaceholder"
type="text"
value=""
/>
@ -37,7 +37,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
<label
htmlFor="fakeTestForm.description"
>
Describe your sauna
EditListingDescriptionForm.description
</label>
<textarea
className="undefined"
@ -49,7 +49,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder="How many people can fit at once? Does the sauna come with towels?"
placeholder="EditListingDescriptionForm.descriptionPlaceholder"
rows={1}
value=""
/>

4
src/containers/EditListingPricingForm/__snapshots__/EditListingPricingForm.test.js.snap
View file

@ -13,7 +13,7 @@ exports[`EditListingPricingForm matches snapshot 1`] = `
<label
htmlFor="EditListingPricingForm.CurrencyInputField"
>
Price per night in euros
EditListingPricingForm.pricePerNight
</label>
<input
autoFocus={true}
@ -22,7 +22,7 @@ exports[`EditListingPricingForm matches snapshot 1`] = `
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Choose your price…"
placeholder="EditListingPricingForm.priceInputPlaceholder"
type="text"
value=""
/>

23
src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap
View file

@ -14,7 +14,7 @@ exports[`LoginForm matches snapshot 1`] = `
<label
htmlFor="LoginForm.email"
>
Email
LoginForm.emailLabel
</label>
<input
className=""
@ -25,7 +25,7 @@ exports[`LoginForm matches snapshot 1`] = `
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder="john.doe@example.com"
placeholder="LoginForm.emailPlaceholder"
type="email"
value=""
/>
@ -36,7 +36,7 @@ exports[`LoginForm matches snapshot 1`] = `
<label
htmlFor="LoginForm.password"
>
Password
LoginForm.passwordLabel
</label>
<input
className=""
@ -47,7 +47,7 @@ exports[`LoginForm matches snapshot 1`] = `
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder="Enter your password…"
placeholder="LoginForm.passwordPlaceholder"
type="password"
value=""
/>
@ -63,18 +63,7 @@ exports[`LoginForm matches snapshot 1`] = `
className={undefined}
>
<span>
Forgot your password?
<a
className=""
href="/recover-password"
onClick={[Function]}
style={Object {}}
title={null}
>
<span>
Reset password.
</span>
</a>
LoginForm.forgotPasswordInfo
</span>
</span>
</p>
@ -84,7 +73,7 @@ exports[`LoginForm matches snapshot 1`] = `
type="submit"
>
<span>
Log in
LoginForm.logIn
</span>
</button>
</div>

31
src/containers/SignupForm/__snapshots__/SignupForm.test.js.snap
View file

@ -14,7 +14,7 @@ exports[`SignupForm matches snapshot 1`] = `
<label
htmlFor="SignupForm.email"
>
Email
SignupForm.emailLabel
</label>
<input
className=""
@ -25,7 +25,7 @@ exports[`SignupForm matches snapshot 1`] = `
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder="john.doe@example.com"
placeholder="SignupForm.emailPlaceholder"
type="email"
value=""
/>
@ -39,7 +39,7 @@ exports[`SignupForm matches snapshot 1`] = `
<label
htmlFor="SignupForm.firstName"
>
First name
SignupForm.firstNameLabel
</label>
<input
className=""
@ -50,7 +50,7 @@ exports[`SignupForm matches snapshot 1`] = `
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder="John"
placeholder="SignupForm.firstNamePlaceholder"
type="text"
value=""
/>
@ -61,7 +61,7 @@ exports[`SignupForm matches snapshot 1`] = `
<label
htmlFor="SignupForm.lastName"
>
Last name
SignupForm.lastNameLabel
</label>
<input
className=""
@ -72,7 +72,7 @@ exports[`SignupForm matches snapshot 1`] = `
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder="Doe"
placeholder="SignupForm.lastNamePlaceholder"
type="text"
value=""
/>
@ -84,7 +84,7 @@ exports[`SignupForm matches snapshot 1`] = `
<label
htmlFor="SignupForm.password"
>
Password
SignupForm.passwordLabel
</label>
<input
className=""
@ -95,7 +95,7 @@ exports[`SignupForm matches snapshot 1`] = `
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder="Enter your password…"
placeholder="SignupForm.passwordPlaceholder"
type="password"
value=""
/>
@ -111,18 +111,7 @@ exports[`SignupForm matches snapshot 1`] = `
className={undefined}
>
<span>
By signing up you accept the
<span
className={undefined}
onClick={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex="0"
>
<span>
terms and conditions
</span>
</span>
SignupForm.termsAndConditionsAcceptText
</span>
</span>
</p>
@ -132,7 +121,7 @@ exports[`SignupForm matches snapshot 1`] = `
type="submit"
>
<span>
Sign up
SignupForm.signUp
</span>
</button>
</div>

9
src/util/test-helpers.js
View file

@ -1,5 +1,6 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { mapValues } from 'lodash';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { IntlProvider, addLocaleData } from 'react-intl';
@ -7,7 +8,11 @@ import en from 'react-intl/locale-data/en';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import configureStore from '../store';
import localeData from '../translations/en.json';
import messages from '../translations/en.json';
// Locale should not affect the tests. We ensure this by providing
// messages with the key as the value of each message.
const testMessages = mapValues(messages, (val, key) => key);
// Provide all the context for components that connect to the Redux
// store, i18n, router, etc.
@ -15,7 +20,7 @@ export const TestProvider = props => {
const store = configureStore();
addLocaleData([...en]);
return (
<IntlProvider locale="en" messages={localeData}>
<IntlProvider locale="en" messages={testMessages}>
<BrowserRouter>
<Provider store={store}>{props.children}</Provider>
</BrowserRouter>