[OKKYCON] 이혜승 - 테알못 신입은 어떻게 테스트를 시작했을까?

테알못 신입은 어떻게 테스트를 시작했을까?

안녕하세요!!!
/ / 3 ) 1 /0 31
. ( / . 31 . 9
:
@ @
: :

D T8
5 ,
. 5
D +)) (+ 52 T8
1D 0
D +
O 8C +))

Red Green
Refactor
TDD
(실패) (성공)
(성공)
코드가 없어서
Test Last
Red Green
Refactor
(실패) (성공)
(성공)
버그가 있어서

Code easy
to test
Code hard
to test
Production code
(
YES
NO
D )
,

// 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');
});
});
});

// YY. M. DD.-> YYMMDD
});
}
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');
});
});
});

// YY. M. DD.-> YYMMDD
});
}
Code easy
to test
return `${dateString} `
.split('. ')
.map(x => (x.length === 1 ? `0${x}` : x))
.join('');
}
Refactor

( *
?
Code easy
to test
Code hard
to test
Production code
X )
) *
. ?
. .
* ) ) (

Code hard
to test
easy
hard
easy
! !
Refactor
Red
Green
or

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

function formatRegisterCommand() {
: null;
const command = {
username:
phone: phone,
};
return command;
}
test(' ) .', () => {
});
});
formatRegisterCommand.js
=(
formatRegisterCommand.test.js

function formatRegisterCommand(validValues={}){
: null;
const command = {
username:
phone: phone,
};
return command;
}
test(' .', () => {
});
});

/* ... */
describe(' agreement ', () => {
test(' false false .', () => {
const actual = formatRegisterCommand({
...param,
agreement: [true, true, false],
});
expect(actual).toBe(false);
});
});
/* ... */
function formatRegisterCommand(source = {}) {
const { username, email, phone } = source;
return {
username: username || email,
email,
phone: phone ? `+82${phone.slice(1)}` : null,
};
}

/* ... */
...param,
});
});
});
/* ... */
if (source.agreement.some(agree => !agree)) {
return false;
}
return {
email,
};
}
return false;
}

X * D
* 1 (
. .
* ) ) (
*
2* +)
.
*
T

/* ... */
test(' .', () => {
});
});
...param,
});
});
});
/* ... */
return false;
}
return {
email,
};
}
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
✓ .
,

PASS src/business/formatRegisterCommand.test.js
✓ .
,
username
✓ username .
✓ username falsy value email
email
✓ email .
phone
✓ phone 0 +82 .
agreement
✓ false false .

PASS src/business/formatRegisterCommand.test.js
✓ .
a e , a
username
✓ username f - f .
✓ username falsy value email
email
✓ email f - f .
phone
✓ phone - 0 +82 - f .
- agreement
✓ e false b - false .
a
)) (
a

formatRegisterCommand.js
const agreement = source.agreement || [];
if (agreement.some(agree => !agree))
return false;
return {
email,
phone: phone
? `+82${phone.slice(1)}`
: null,
};
}

/88 0 8/ 1. 46- 6. 4 / 8 8-- 42:.
( .
)

PASS src/components/headers/InventoryHeader/InventoryHeader.test.js
InventoryHeader
1 Col
√ Select . 1 . (1ms)
√ defaultValue both. . (1ms)
Option components:
√ 2 , Option . (2ms)
√ Option value prop text . (1ms)
2 Col
√ 2 . (1ms)
√ Button 1 . . (1ms)
√ Modal 1 . . (2ms)
√ Dropdown 1 .
( !
)

PASS src/components/common/DescriptionItem/DescriptionItem.test.js
DescriptionItem title conten props ,
√ div . (15ms)
√ div p , 2 .
) *
) (
<
,
(

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

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

//...
test('div .', () => {
expect(wrapper.childAt(1).type()).toBeUndefined();
});
//...
});
//...
,
/ .

describe('ProductList component ', () => {
test('should display the product name in each `<li>` element', () => {
const fixture = [
{ id: 1, name: 'Product 1’ },
];
const wrapper = shallow(<ProductList products={fixture} />);
const firstElement = wrapper.find('li').first();
expect(firstElement.contains(fixture[0].name)).toBe(true);
});
});
,

describe('ProductList component ', () => {
test('should display the product name in first `<li>` element', () => {
const fixture = [
];
const wrapper = shallow(<ProductList products={fixture} />);
const firstElement = wrapper.find('li').first();
expect(firstElement.contains(fixture[0].name)).toBe(true);
});
});

export default class ProductList extends Component {
render() {
return (
<ul>{this.props.products.map(product => <li>{product.name}</li>)}</ul>
);
}
}
,
.
. .

,
, !
export default class ProductList extends Component {
render() {
return (
<ul><li>{products[0].name}</li></ul>
);
}
}

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');
});
});

{
"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"
}
]
},
...

ph g C LH C C l
l i s ph
e n LH o u
o ) . ( . .. ( . , )
l

[OKKYCON] 이혜승 - 테알못 신입은 어떻게 테스트를 시작했을까?

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

[OKKYCON] 이혜승 - 테알못 신입은 어떻게 테스트를 시작했을까?