tag', async () => {
34 | const { findByText } = renderComponent({ count: 73 });
35 | expect(await findByText('count:73')).not.toBeNull();
36 | });
37 |
38 | it('should call increment when increment button is clicked', async () => {
39 | const onIncrementSpy = jest.fn();
40 | const { findByText } = renderComponent({ increment: onIncrementSpy });
41 |
42 | fireEvent.click(await findByText('increment-button')!);
43 |
44 | expect(onIncrementSpy).toHaveBeenCalledTimes(1);
45 | });
46 |
47 | it('should call decrement when decrement button is clicked', async () => {
48 | const onDecrementSpy = jest.fn();
49 | const { findByText } = renderComponent({ decrement: onDecrementSpy });
50 |
51 | fireEvent.click(await findByText('decrement-button')!);
52 |
53 | expect(onDecrementSpy).toHaveBeenCalledTimes(1);
54 | });
55 |
56 | it('should call set when set button is clicked', async () => {
57 | const onSetSpy = jest.fn();
58 | const { findByText } = renderComponent({ set: onSetSpy });
59 |
60 | fireEvent.click(await findByText('set-button')!);
61 |
62 | expect(onSetSpy).toHaveBeenCalledTimes(1);
63 | });
64 | });
65 |
--------------------------------------------------------------------------------
/src/components/counter/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import messages from './messages';
4 | import { FormattedMessage, useIntl } from 'react-intl';
5 |
6 | type Props = {
7 | count: number;
8 | increment(): void;
9 | decrement(): void;
10 | set(): void;
11 | };
12 |
13 | const Counter = ({ count, increment, decrement, set }: Props) => {
14 | const { formatMessage } = useIntl();
15 | const countText = formatMessage(messages.countText, { count });
16 |
17 | return (
18 |
19 |
20 |
21 |
22 |
23 |
26 |
27 |
30 |
33 |
36 | {countText}
37 |
38 | );
39 | };
40 |
41 | export default Counter;
42 |
--------------------------------------------------------------------------------
/src/components/counter/messages.ts:
--------------------------------------------------------------------------------
1 | import { defineMessages } from 'react-intl';
2 |
3 | const scope = `editor.components.counter`;
4 |
5 | export default defineMessages({
6 | helloText: {
7 | id: `${scope}.helloText`,
8 | defaultMessage: 'Sayaç Örneği'
9 | },
10 | switchButtonText: {
11 | id: `${scope}.switchButtonText`,
12 | defaultMessage: 'Sayfa Değiştir'
13 | },
14 | incrementButtonText: {
15 | id: `${scope}.incrementButtonText`,
16 | defaultMessage: 'Arttır'
17 | },
18 | decrementButtonText: {
19 | id: `${scope}.decrementButtonText`,
20 | defaultMessage: 'Azalt'
21 | },
22 | setButtonText: {
23 | id: `${scope}.setButtonText`,
24 | defaultMessage: `Tanımla`
25 | },
26 | countText: {
27 | id: `${scope}.countText`,
28 | defaultMessage: 'Şu an sayı: {count}'
29 | }
30 | });
31 |
--------------------------------------------------------------------------------
/src/components/index.scss:
--------------------------------------------------------------------------------
1 | @import './ip-check/index';
2 | @import './counter/index';
3 | @import './seller-store-editor/index';
4 |
--------------------------------------------------------------------------------
/src/components/ip-check/index.scss:
--------------------------------------------------------------------------------
1 | .ip-check {
2 | &__container {
3 | display: flex;
4 | width: 100%;
5 | flex-direction: column;
6 | justify-content: center;
7 | align-items: center;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/components/ip-check/index.test.tsx:
--------------------------------------------------------------------------------
1 | import React, { ComponentProps } from 'react';
2 | import { render } from '@testing-library/react';
3 | import IPCheck from './index';
4 | import IntlProvider from 'react-intl/dist/components/provider';
5 | import { StaticRouter as Router } from 'react-router-dom';
6 |
7 | const scope = `editor.components.ip-check`;
8 | const messages = {
9 | [`${scope}.loadingText`]: 'loading-text',
10 | [`${scope}.failedText`]: 'failed:{time}',
11 | [`${scope}.successText`]: 'success:{ip}-{time}',
12 | [`${scope}.switchButtonText`]: 'switch'
13 | };
14 |
15 | const renderComponent = (props: ComponentProps) =>
16 | render(
17 |
18 |
19 |
20 |
21 |
22 | );
23 |
24 | describe('', () => {
25 | it('should loading should render the loading text', async () => {
26 | const { container, findByText } = renderComponent({ loading: true, status: null as any });
27 | expect(container.querySelector('button')).not.toBeNull();
28 | expect(await findByText('loading-text')).not.toBeNull();
29 | });
30 |
31 | it('should render status text success', () => {
32 | const { container } = renderComponent({ loading: false, status: { ip: '127.0.0.1', success: true, time: 73 } });
33 | const span = container.querySelector('span');
34 |
35 | expect(span).not.toBeNull();
36 | expect(span!.innerHTML.startsWith('success:127.0.0.1-')).toBe(true);
37 | });
38 |
39 | it('should render status text failed', () => {
40 | const { container } = renderComponent({ loading: false, status: { ip: undefined, success: false, time: 73 } });
41 | const span = container.querySelector('span');
42 |
43 | expect(span).not.toBeNull();
44 | expect(span!.innerHTML.startsWith('failed:')).toBe(true);
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/src/components/ip-check/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { FormattedMessage, useIntl } from 'react-intl';
4 | import messages from './messages';
5 |
6 | type StatusProps = { ip?: string; success: boolean; time: number };
7 |
8 | type Props = {
9 | loading: boolean;
10 | status: StatusProps;
11 | };
12 |
13 | const Loading = () => (
14 |
15 |
16 |
17 | );
18 |
19 | const StatusComponent = ({ ip, success, time }: StatusProps) => {
20 | const message = success ? messages.successText : messages.failedText;
21 | const { formatMessage, formatTime } = useIntl();
22 | const timeText = formatTime(time);
23 | const text = formatMessage(message, { ip, time: timeText });
24 |
25 | return {text};
26 | };
27 |
28 | const IPCheck = ({ loading, status }: Props) => (
29 |
30 | {loading ? : }
31 |
32 |
35 |
36 |
37 | );
38 |
39 | export default IPCheck;
40 |
--------------------------------------------------------------------------------
/src/components/ip-check/messages.ts:
--------------------------------------------------------------------------------
1 | import { defineMessages } from 'react-intl';
2 |
3 | const scope = `editor.components.ip-check`;
4 |
5 | export default defineMessages({
6 | loadingText: {
7 | id: `${scope}.loadingText`,
8 | defaultMessage: 'IP Kontrol ediliyor...'
9 | },
10 | failedText: {
11 | id: `${scope}.failedText`,
12 | defaultMessage: "API'ye erişilirken bir hata yaşandı. Adblock kapatmayı denedin mi? Son kontrol: {time}"
13 | },
14 | successText: {
15 | id: `${scope}.successText`,
16 | defaultMessage: 'IP Adresin: {ip} - Son kontrol: {time}'
17 | },
18 | switchButtonText: {
19 | id: `${scope}.switchButtonText`,
20 | defaultMessage: 'Sayfa Değiştir'
21 | }
22 | });
23 |
--------------------------------------------------------------------------------
/src/components/seller-store-editor/index.scss:
--------------------------------------------------------------------------------
1 | .editor {
2 | display: flex;
3 | width: 100%;
4 | height: 100vh;
5 | flex-direction: column;
6 | justify-content: center;
7 | align-items: center;
8 | background-color: #f1f2f7;
9 |
10 | &__content {
11 | color: white;
12 | border-radius: 5px;
13 | background-color: #273142;
14 | display: flex;
15 | flex-direction: column;
16 | justify-content: center;
17 | align-items: center;
18 | width: 500px;
19 | height: 500px;
20 | user-select: none;
21 |
22 | button {
23 | margin: 2px 0;
24 | background-color: orange;
25 | font-size: 14px;
26 | color: white;
27 | border: none;
28 | border-radius: 3px;
29 | width: 200px;
30 | height: 50px;
31 | cursor: pointer;
32 | }
33 |
34 | span {
35 | font-weight: bold;
36 | margin: 30px 0;
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/seller-store-editor/index.test.tsx:
--------------------------------------------------------------------------------
1 | import React, { ComponentProps } from 'react';
2 | import { render } from '@testing-library/react';
3 | import SellerStoreEditorComponent from './index';
4 | import IntlProvider from 'react-intl/dist/components/provider';
5 | import { StaticRouter as Router } from 'react-router-dom';
6 |
7 | const renderComponent = (props: Partial> = {}) =>
8 | render(
9 |
10 |
11 |
12 |
13 |
14 | );
15 |
16 | describe('', () => {
17 | it('should render with .editor class', () => {
18 | const { container } = renderComponent();
19 |
20 | expect(container.firstElementChild).not.toBeNull();
21 | expect(container.firstElementChild?.className).toEqual('editor');
22 | });
23 |
24 | it('should render the given children', () => {
25 | const childElement = hello;
26 | const { container } = renderComponent({ children: childElement });
27 |
28 | expect(container.querySelector('span')).not.toBeNull();
29 | });
30 | });
31 |
--------------------------------------------------------------------------------
/src/components/seller-store-editor/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { FC } from 'react';
3 |
4 | const SellerStoreEditor: FC = ({ children }) => (
5 |
8 | );
9 |
10 | export default SellerStoreEditor;
11 |
--------------------------------------------------------------------------------
/src/containers/counter/actions.ts:
--------------------------------------------------------------------------------
1 | import { createAction } from 'typesafe-actions';
2 |
3 | export const increment = createAction(`editor/containers/counter/INCREMENT`)();
4 | export const decrement = createAction(`editor/containers/counter/DECREMENT`)();
5 | export const set = createAction(`editor/containers/counter/SET`, (value: number) => value)();
6 |
--------------------------------------------------------------------------------
/src/containers/counter/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { ComponentProps } from 'react';
2 | import { connect } from 'react-redux';
3 | import CounterComponent from '../../components/counter';
4 | import * as actions from './actions';
5 | import { createSelector } from 'reselect';
6 | import { countSelector } from './selector';
7 |
8 | type CounterComponentProps = ComponentProps;
9 |
10 | const dispatchProps = {
11 | increment: actions.increment,
12 | decrement: actions.decrement,
13 | set: actions.set
14 | };
15 |
16 | type Props = typeof dispatchProps & {
17 | count: CounterComponentProps['count'];
18 | };
19 |
20 | export const Counter = ({ count, increment, decrement, set }: Props) => (
21 | set(73)} />
22 | );
23 |
24 | const mapStateToProps = createSelector(countSelector, count => ({ count }));
25 |
26 | export default connect(mapStateToProps, dispatchProps)(Counter);
27 |
--------------------------------------------------------------------------------
/src/containers/counter/reducer.test.tsx:
--------------------------------------------------------------------------------
1 | import reducer from './reducer';
2 | import * as actions from './actions';
3 |
4 | describe('counter@reducer', () => {
5 | it('should return the initial state', () => {
6 | const state = reducer(undefined, {} as any);
7 | expect(state).toEqual({ count: 0 });
8 | });
9 |
10 | it('should increment the count', () => {
11 | const state = reducer({ count: 1 }, actions.increment());
12 | expect(state).toEqual({ count: 2 });
13 | });
14 |
15 | it('should decrement the count', () => {
16 | const state = reducer({ count: 1 }, actions.decrement());
17 | expect(state).toEqual({ count: 0 });
18 | });
19 |
20 | it('should set the count', () => {
21 | const state = reducer({ count: 1 }, actions.set(73));
22 | expect(state).toEqual({ count: 73 });
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/src/containers/counter/reducer.ts:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import * as actions from './actions';
3 | import { ActionType, createReducer } from 'typesafe-actions';
4 |
5 | type EditorActions = ActionType;
6 |
7 | const count = createReducer(0)
8 | .handleAction(actions.increment, state => state + 1)
9 | .handleAction(actions.decrement, state => state - 1)
10 | .handleAction(actions.set, (_, action) => action.payload);
11 |
12 | export default combineReducers({ count });
13 |
--------------------------------------------------------------------------------
/src/containers/counter/selector.test.ts:
--------------------------------------------------------------------------------
1 | import { RootState } from 'MyTypes';
2 | import { countSelector } from './selector';
3 |
4 | describe('counter@reducer', () => {
5 | describe('countSelector', () => {
6 | it('should return count', () => {
7 | const state: Partial = { counter: { count: 73 } };
8 | expect(countSelector(state as RootState)).toBe(73);
9 | });
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/containers/counter/selector.ts:
--------------------------------------------------------------------------------
1 | import { RootState } from 'MyTypes';
2 | import { createSelector } from 'reselect';
3 |
4 | const counterSelector = (state: RootState) => state.counter;
5 | export const countSelector = createSelector(counterSelector, counter => counter.count);
6 |
--------------------------------------------------------------------------------
/src/containers/ip-check/__snapshots__/index.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` should render and match the snapshot 1`] = `
4 |
7 |
27 |
28 | `;
29 |
--------------------------------------------------------------------------------
/src/containers/ip-check/actions.ts:
--------------------------------------------------------------------------------
1 | import { createAsyncAction } from 'typesafe-actions';
2 | import { IPQueryResponse } from '../../services/ip-api/models/IPQueryResponse';
3 |
4 | export const lookupAsync = createAsyncAction(
5 | `editor/containers/ip-check/LOOKUP_REQUEST`,
6 | `editor/containers/ip-check/LOOKUP_SUCCESS`,
7 | `editor/containers/ip-check/LOOKUP_FAILED`
8 | )();
9 |
--------------------------------------------------------------------------------
/src/containers/ip-check/epics.test.ts:
--------------------------------------------------------------------------------
1 | import { ipLookupEpic, triggerLookupEpic } from './epics';
2 | import { take, toArray } from 'rxjs/operators';
3 | import * as actions from './actions';
4 | import { instance, mock, reset, verify, when } from 'ts-mockito';
5 | import IPAPI from '../../services/ip-api';
6 | import { from, of } from 'rxjs';
7 |
8 | describe('ip-check@epics', () => {
9 | describe('triggerLookupEpic', () => {
10 | it('should emit lookup request', async () => {
11 | // Arrange
12 | const expectedActions = [actions.lookupAsync.request()];
13 | const trigger$ = triggerLookupEpic(null as any, null as any, null as any);
14 | // Act
15 | const result = await trigger$.pipe(take(1), toArray()).toPromise();
16 | // Assert
17 | expect(result).toEqual(expectedActions);
18 | });
19 | });
20 |
21 | describe('ipLookupEpic', () => {
22 | const mockIPAPI = mock(IPAPI);
23 | const ipAPI = instance(mockIPAPI);
24 | const dependencies = { ip: ipAPI };
25 |
26 | afterEach(() => {
27 | reset(mockIPAPI);
28 | });
29 |
30 | it('should call ip api and create action with the result', async () => {
31 | // Arrange
32 | const action$: any = from([actions.lookupAsync.request()]);
33 | const state$: any = of({});
34 | const epic$ = ipLookupEpic(action$, state$, dependencies);
35 | const expectedAction = actions.lookupAsync.success({} as any);
36 |
37 | when(mockIPAPI.lookup()).thenResolve({} as any);
38 |
39 | // Act
40 | const result = await epic$.pipe(toArray()).toPromise();
41 |
42 | // Assert
43 | expect(result).toEqual([expectedAction]);
44 | verify(mockIPAPI.lookup()).once();
45 | });
46 |
47 | it('should call ip api and create action with the error', async () => {
48 | // Arrange
49 | const action$: any = from([actions.lookupAsync.request()]);
50 | const state$: any = of({});
51 | const epic$ = ipLookupEpic(action$, state$, dependencies);
52 | const expectedError = new Error('unknown');
53 | const expectedAction = actions.lookupAsync.failure(expectedError);
54 |
55 | when(mockIPAPI.lookup()).thenReject(expectedError);
56 |
57 | // Act
58 | const result = await epic$.pipe(toArray()).toPromise();
59 |
60 | // Assert
61 | expect(result).toEqual([expectedAction]);
62 | verify(mockIPAPI.lookup()).once();
63 | });
64 | });
65 | });
66 |
--------------------------------------------------------------------------------
/src/containers/ip-check/epics.ts:
--------------------------------------------------------------------------------
1 | import { RootEpic } from 'MyTypes';
2 | import { from, interval, of } from 'rxjs';
3 | import { catchError, filter, map, startWith, switchMap } from 'rxjs/operators';
4 | import { isActionOf } from 'typesafe-actions';
5 | import * as actions from './actions';
6 |
7 | export const ipLookupEpic: RootEpic = (action$, state$, { ip }) =>
8 | action$.pipe(
9 | filter(isActionOf(actions.lookupAsync.request)),
10 | switchMap(() =>
11 | from(ip.lookup()).pipe(
12 | map(response => actions.lookupAsync.success(response)),
13 | catchError(err => of(actions.lookupAsync.failure(err)))
14 | )
15 | )
16 | );
17 |
18 | export const triggerLookupEpic: RootEpic = () =>
19 | interval(60 * 1000).pipe(
20 | startWith(null),
21 | map(() => actions.lookupAsync.request())
22 | );
23 |
--------------------------------------------------------------------------------
/src/containers/ip-check/index.test.tsx:
--------------------------------------------------------------------------------
1 | const mockIPCheckSelector = jest.fn();
2 | jest.mock('./selector', () => ({
3 | __esModule: true,
4 | ipCheckSelector: mockIPCheckSelector
5 | }));
6 |
7 | import React from 'react';
8 | import ReactTestRenderer from 'react-test-renderer/shallow';
9 | import configureStore from 'redux-mock-store';
10 | import IPCheck from './index';
11 |
12 | describe('', () => {
13 | const mockStore = configureStore([]);
14 |
15 | it('should render and match the snapshot', () => {
16 | mockIPCheckSelector.mockReturnValue({ loading: true, status: { ip: '127.0.0.1', success: true, time: 173 } });
17 | // @ts-ignore
18 | const component = ;
19 | const renderer = ReactTestRenderer.createRenderer();
20 | renderer.render(component);
21 | expect(renderer.getRenderOutput()).toMatchSnapshot();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/src/containers/ip-check/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import IPCheck from '../../components/ip-check';
3 | import { connect } from 'react-redux';
4 | import { createSelector } from 'reselect';
5 | import { ipCheckSelector } from './selector';
6 |
7 | const dispatchProps = {};
8 |
9 | const mapStateToProps = createSelector(ipCheckSelector, ipCheck => ipCheck);
10 |
11 | export default connect(mapStateToProps, dispatchProps)(IPCheck);
12 |
--------------------------------------------------------------------------------
/src/containers/ip-check/reducer.test.ts:
--------------------------------------------------------------------------------
1 | import reducer from './reducer';
2 | import * as actions from './actions';
3 |
4 | describe('ip-check@reducer', () => {
5 | it('should return the initial state', () => {
6 | const state = reducer(undefined, {} as any);
7 | expect(state).toEqual({ loading: true, status: {} });
8 | });
9 |
10 | it('should change the loading to true', () => {
11 | const state = reducer({ loading: false, status: {} as any }, actions.lookupAsync.request());
12 | expect(state).toEqual({ loading: true, status: {} });
13 | });
14 |
15 | it('should change the loading to false', () => {
16 | const loadingCompleteActions = [actions.lookupAsync.success({} as any), actions.lookupAsync.failure(new Error())];
17 |
18 | for (const action of loadingCompleteActions) {
19 | const state = reducer({ loading: true, status: {} as any }, action);
20 | expect(state.loading).toBe(false);
21 | }
22 | });
23 |
24 | it('should change the status to true for success action', () => {
25 | const action = actions.lookupAsync.success({} as any);
26 | const state = reducer({ loading: true, status: {} as any }, action);
27 | expect(state.loading).toBe(false);
28 | expect(state.status.success).toBe(true);
29 | });
30 |
31 | it('should change the status to false for failed action', () => {
32 | const action = actions.lookupAsync.failure(new Error());
33 | const state = reducer({ loading: true, status: {} as any }, action);
34 | expect(state.loading).toBe(false);
35 | expect(state.status.success).toBe(false);
36 | });
37 | });
38 |
--------------------------------------------------------------------------------
/src/containers/ip-check/reducer.ts:
--------------------------------------------------------------------------------
1 | import { ActionType, createReducer } from 'typesafe-actions';
2 | import * as actions from './actions';
3 | import { combineReducers } from 'redux';
4 |
5 | type Status = { success: boolean; time: number };
6 |
7 | type ComponentActions = ActionType;
8 |
9 | const loading = createReducer(true)
10 | .handleAction([actions.lookupAsync.request], () => true)
11 | .handleAction([actions.lookupAsync.success, actions.lookupAsync.failure], () => false);
12 |
13 | const status = createReducer({} as any)
14 | .handleAction(actions.lookupAsync.success, (state, action) => ({
15 | ip: action.payload.query,
16 | success: true,
17 | time: Date.now()
18 | }))
19 | .handleAction(actions.lookupAsync.failure, (state, action) => ({ success: false, time: Date.now() }));
20 |
21 | export default combineReducers({ loading, status });
22 |
--------------------------------------------------------------------------------
/src/containers/ip-check/selector.test.ts:
--------------------------------------------------------------------------------
1 | import { RootState } from 'MyTypes';
2 | import { ipCheckSelector } from './selector';
3 |
4 | describe('ip-check@selector', () => {
5 | describe('ipCheckSelector', () => {
6 | it('should return the state', () => {
7 | const ipCheck = {} as any;
8 | const rootState: Partial = { ipCheck };
9 | expect(ipCheckSelector(rootState as RootState)).toBe(ipCheck);
10 | });
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/src/containers/ip-check/selector.ts:
--------------------------------------------------------------------------------
1 | import { RootState } from 'MyTypes';
2 |
3 | export const ipCheckSelector = (state: RootState) => state.ipCheck;
4 |
--------------------------------------------------------------------------------
/src/containers/language-provider/actions.ts:
--------------------------------------------------------------------------------
1 | import { createAction } from 'typesafe-actions';
2 |
3 | export const setLocale = createAction(`editor/containers/language-provider/SET_LOCALE`, (locale: string) => locale)();
4 |
--------------------------------------------------------------------------------
/src/containers/language-provider/index.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import ConnectedLanguageProvider, { LanguageProvider } from './index';
4 | import { defineMessages, FormattedMessage } from 'react-intl';
5 | import { Provider } from 'react-redux';
6 | import { combineReducers, createStore } from 'redux';
7 | import reducer from './reducer';
8 |
9 | const messages = defineMessages({
10 | someMessage: {
11 | id: 'some.id',
12 | defaultMessage: 'This is some default message',
13 | de: 'Dies ist eine standardnachricht'
14 | }
15 | });
16 |
17 | describe('', () => {
18 | it('should render its children', () => {
19 | const children = Test
;
20 | const { container } = render(
21 |
22 | {children}
23 |
24 | );
25 | expect(container.querySelector('h1')).not.toBeNull();
26 | });
27 | });
28 |
29 | describe('', () => {
30 | it('should render a