[OKKYCON] 이혜승 - 테알못 신입은 어떻게 테스트를 시작했을까?12. // YY. M. DD. -> YYMMDD
export function formatDateForQueryString(dateString) {
const splitArray = dateString.split('.');
splitArray.map((el, i, arr) => {
arr[i] = el.replace(/ /gi, '').length === 1 ? '0' + el : el;
});
return splitArray.join('').replace(/ /gi, '');
}
Code easy
to test
.
// dateHelper.test.js
describe('formatDateForQueryString ', () => {
describe('YY. M. DD. , ', () => {
test('YYMMDD .', () => {
const actual = formatDateForQueryString('18. 1. 10.');
expect(actual).toBe('180110');
});
});
});
13. // YY. M. DD.-> YYMMDD
export function formatDateForQueryString(dateString) {
const splitArray = dateString.split('.');
splitArray.map((el, i, arr) => {
arr[i] = el.replace(/ /gi, '').length === 1 ? '0' + el : el;
});
return splitArray.join('').replace(/ /gi, '');
}
Code easy
to test
. .
// dateHelper.test.js
describe('formatDateForQueryString ', () => {
describe('YY. M. DD. , ', () => {
test('YYMMDD .', () => {
const actual = formatDateForQueryString('18. 1. 10.');
expect(actual).toBe('180110');
});
});
});
14. // YY. M. DD.-> YYMMDD
export function formatDateForQueryString(dateString) {
const splitArray = dateString.split('.');
splitArray.map((el, i, arr) => {
arr[i] = el.replace(/ /gi, '').length === 1 ? '0' + el : el;
});
return splitArray.join('').replace(/ /gi, '');
}
Code easy
to test
export function formatDateForQueryString(dateString) {
return `${dateString} `
.split('. ')
.map(x => (x.length === 1 ? `0${x}` : x))
.join('');
}
Refactor
17. class RegistrationFormContainer extends Component {
/* */
handleSubmit = async () => {
const { validValues } = this.props.form;
const phone = validValues.phone
? '+82' + validValues.phone.slice(1)
: null;
const command = {
username: validValues.username || validValues.email,
email: validValues.email,
phone: phone,
};
try {
await postRegisterRequest(command);
this.closeModal();
} catch (err) {
Modal.error({ /* ... */ });
}
};
render() { /* ... */ }
}
}
Code hard
to test
I *() A
A 2
. 1
18. function formatRegisterCommand() {
const { validValues } = this.props.form;
const phone = validValues.phone
? '+82' + validValues.phone.slice(1)
: null;
const command = {
username:
validValues.username || validValues.email,
email: validValues.email,
phone: phone,
};
return command;
}
export default formatRegisterCommand;
import formatRegisterCommand /* ... */
describe('formatRegisterCommand ', () => {
test(' .', () => {
expect(formatRegisterCommand).not.toThrowError();
});
});
UTF-8 LF JavaScript React Prettier:
formatRegisterCommand.js formatRegisterCommand.test.js
19. function formatRegisterCommand() {
const { validValues } = this.props.form;
const phone = validValues.phone
? '+82' + validValues.phone.slice(1)
: null;
const command = {
username:
validValues.username || validValues.email,
email: validValues.email,
phone: phone,
};
return command;
}
export default formatRegisterCommand;
import formatRegisterCommand /* ... */
describe('formatRegisterCommand ', () => {
test(' ) .', () => {
expect(formatRegisterCommand).not.toThrowError();
});
});
UTF-8 LF JavaScript React Prettier:
formatRegisterCommand.js
=(
formatRegisterCommand.test.js
20. function formatRegisterCommand(validValues={}){
const phone = validValues.phone
? '+82' + validValues.phone.slice(1)
: null;
const command = {
username:
validValues.username || validValues.email,
email: validValues.email,
phone: phone,
};
return command;
}
export default formatRegisterCommand;
import formatRegisterCommand /* ... */
describe('formatRegisterCommand ', () => {
test(' .', () => {
expect(formatRegisterCommand).not.toThrowError();
});
});
UTF-8 LF JavaScript React Prettier:
formatRegisterCommand.js formatRegisterCommand.test.js
21. function formatRegisterCommand(validValues={}){
const phone = validValues.phone
? '+82' + validValues.phone.slice(1)
: null;
const command = {
username:
validValues.username || validValues.email,
email: validValues.email,
phone: phone,
};
return command;
}
export default formatRegisterCommand;
/* ... */
describe(' , ', () => {
const param = {
username: 'user',
email: 'user@email.com',
phone: '01012345678',
agreement: [true, true, true],
};
describe('username ', () => {
test(' username .’,() => {
const actual = formatRegisterCommand(param);
expect(actual.username).toBe(param.username);
});
});
});
UTF-8 LF JavaScript React Prettier:
formatRegisterCommand.js formatRegisterCommand.test.js
25. /* ... */
describe(' agreement ', () => {
test(' false false .', () => {
const actual = formatRegisterCommand({
...param,
agreement: [true, true, false],
});
expect(actual).toBe(false);
});
});
/* ... */
UTF-8 LF JavaScript React Prettier:
formatRegisterCommand.js formatRegisterCommand.test.js
function formatRegisterCommand(source = {}) {
const { username, email, phone } = source;
return {
username: username || email,
email,
phone: phone ? `+82${phone.slice(1)}` : null,
};
}
export default formatRegisterCommand;
26. /* ... */
describe(' agreement ', () => {
test(' false false .', () => {
const actual = formatRegisterCommand({
...param,
agreement: [true, true, false],
});
expect(actual).toBe(false);
});
});
/* ... */
UTF-8 LF JavaScript React Prettier:
formatRegisterCommand.js formatRegisterCommand.test.js
function formatRegisterCommand(source = {}) {
const { username, email, phone } = source;
if (source.agreement.some(agree => !agree)) {
return false;
}
return {
username: username || email,
email,
phone: phone ? `+82${phone.slice(1)}` : null,
};
}
export default formatRegisterCommand;
if (source.agreement.some(agree => !agree)) {
return false;
}
28. X * D
* 1 (
. .
* ) ) (
*
2* +)
.
*
T
32. /* ... */
describe('formatRegisterCommand ', () => {
test(' .', () => {
expect(formatRegisterCommand).not.toThrowError();
});
});
describe(' agreement ', () => {
test(' false false .', () => {
const actual = formatRegisterCommand({
...param,
agreement: [true, true, false],
});
expect(actual).toBe(false);
});
});
/* ... */
UTF-8 LF JavaScript React Prettier:
formatRegisterCommand.js formatRegisterCommand.test.js
function formatRegisterCommand(source = {}) {
const { username, email, phone } = source;
if (source.agreement.some(agree => !agree)) {
return false;
}
return {
username: username || email,
email,
phone: phone ? `+82${phone.slice(1)}` : null,
};
}
export default formatRegisterCommand;
if (source.agreement.some(agree => !agree)) {
return false;
}
FAIL src/business/formatRegisterCommand.test.js
● formatRegisterCommand › .
expect(function).not.toThrowError()
Expected the function not to throw an error.
Instead, it threw:
TypeError: Cannot read property 'some' of undefined
at formatRegisterCommand (src/business/formatRegisterCommand.js:9:17)
/* ... */
formatRegisterCommand
✓ .
,
UTF-8 LF JavaScript React Prettier:
37. formatRegisterCommand.js
function formatRegisterCommand(source = {}) {
const { username, email, phone } = source;
const agreement = source.agreement || [];
if (agreement.some(agree => !agree))
return false;
return {
username: username || email,
email,
phone: phone
? `+82${phone.slice(1)}`
: null,
};
}
export default formatRegisterCommand;
UTF-8 LF JavaScript React Prettier:
42. /88 0 8/ 1. 46- 6. 4 / 8 8-- 42:.
( .
)
46. describe('content falsy value ,', () => {
test(' "N/A" .', () => {
const props = { content: '' };
const wrapper = shallow(<DescriptionItem {...props} />);
expect(wrapper.childAt(1).text()).toBe('N/A');
});
});
O
M
M D
<div>
<p>
Text
<h1>
Text
<div>
<div>
Text
<h1>
<p>
Text
47. describe('content falsy value ,', () => {
test(' "N/A" .', () => {
const props = { content: '' };
const wrapper = shallow(<DescriptionItem {...props} />);
expect(wrapper.contains('N/A')).toBe(true);
});
});
( ( )
(
<div>
<p>
Text
<h1>
Text
<div>
<div>
Text
<h1>
<p>
Text
49. describe('ProductList component ', () => {
test('should display the product name in each `<li>` element', () => {
const fixture = [
{ id: 1, name: 'Product 1’ },
{ id: 2, name: 'Product 2’ },
{ id: 3, name: 'Product 3’ },
];
const wrapper = shallow(<ProductList products={fixture} />);
const firstElement = wrapper.find('li').first();
expect(firstElement.contains(fixture[0].name)).toBe(true);
});
});
,
50. describe('ProductList component ', () => {
test('should display the product name in first `<li>` element', () => {
const fixture = [
{ id: 1, name: 'Product 1’ },
{ id: 2, name: 'Product 2’ },
{ id: 3, name: 'Product 3’ },
];
const wrapper = shallow(<ProductList products={fixture} />);
const firstElement = wrapper.find('li').first();
expect(firstElement.contains(fixture[0].name)).toBe(true);
});
});
51. export default class ProductList extends Component {
render() {
return (
<ul>{this.props.products.map(product => <li>{product.name}</li>)}</ul>
);
}
}
,
.
. .
52. ,
, !
export default class ProductList extends Component {
render() {
return (
<ul><li>{products[0].name}</li></ul>
);
}
}
54. describe('phone ', () => {
const param = {
username: 'user',
email: 'user@email.com',
phone: '01012345678',
agreement: [true, true, true],
};
test(' 0 +82 .', () => {
const actual = formatRegisterCommand(param);
expect(actual.phone).toBe('+821012345678');
});
});
55. {
"brandId": "3de0af54-3eb5-48a6-81b3-0618b7f6c6d1",
"products": [
{
"id": "b0dc7f67-258a-44be-9d58-cc033c5b2100",
"name": "Pure Soup - Liquid",
"color": ["Blue", "Green", "Pink"],
"price": "$2.99",
"channels": [
{
"id": "688b0956-ab2b-4cc4-826d-66e29aa6ad2c",
"name": "Amazon"
},
{
"id": "c12cba69-8a51-40b9-80b5-122ffff1e378",
"name": "ebay"
},
{
"id": "5fc2502e-b6eb-42c6-af40-1de5fc49179c",
"name": "FlipKart"
}
]
},
...
57. ph g C LH C C l
l i s ph
e n LH o u
o ) . ( . .. ( . , )
l