**title**: 반품 및 교환은 재고로 이동합니다.
**as a** 가게 주인으로서,
**I want** 반품 또는 교환 시 상품을 재고에 다시 추가하고 싶습니다.
**so that** 인벤토리를 추적할 수 있습니다.
**Scenario 1:** 환불을 위해 반품된 항목은 인벤토리에 추가되어야 합니다.
**Given** 고객이 이전에 나에게서 검은색 스웨터를 구매했다는 점을 감안할 때
**and** 인벤토리에 검은색 스웨터 3개가 있습니다.
**when** 환불을 위해 검은색 스웨터를 반환할 때
**then** 그러면 인벤토리에 4개의 검은색 스웨터가 있어야 합니다.
Feature > […Scenario] > […Step]
Given: Given단계는 시스템의 초기 컨텍스트( 시나리오 장면) 를 설명하는 데 사용됩니다 . 그것은 일반적으로 과거에 일어난 일입니다.When: When단계는 이벤트 또는 작업 을 설명하는 데 사용됩니다 . 이것은 시스템과 상호 작용하는 사람이거나 다른 시스템에 의해 트리거되는 이벤트일 수 있습니다.Then: Then단계는 예상되는 결과 또는 결과 를 설명하는 데 사용됩니다 .And,But
Scenario: 항목 검색 후 결제 페이지로 이동
Given 사용자가 Greencart 방문 페이지에 있다
When 사용자가 야채<이름>를 검색했을 때
And 장바구니에 항목이 추가된다
And 사용자는 구매를 위해 Checkout 페이지로 이동한다
Then 선택한 <이름> 항목이 체크아웃 페이지에 표시된다
테스트 코드에서 mock으로 처리하는 경우1
- Mocking React custom hook with Jest - Stack Overflow
- mrbenhowl/mocking-firebase-initializeApp-and-firebase-auth-using-jest
- Avoid Nesting when you’re Testing
Footnotes
-
그래서 내가 내린 결론은 저렇게 까지는 테스트할 필요가 없고 오히려 애매하게 결합된 컴포넌트들을 분리해서 관리하는게 맞을 것 같다는 생각을 해봤다. ↩
# 개발할때 편하다
yarn add -D @types/cypress
// react-devtools 같은 확장도구가 필요할 경우
// /plugins/index.js
const path = require('path')
module.exports = (on, _config) => {
on('before:browser:launch', (browser, launchOptions) => {
if (browser.family === 'chromium') {
const extensionFolder = path.resolve(__dirname, '..', '..', '4.7.0_1')
launchOptions.args.push(`--load-extension=${extensionFolder}`)
return launchOptions
}
})
}
// /support/commands.js
Cypress.on('window:before:load', (win) => {
win.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__
})
// 파일업로드 기능 테스트
Cypress.Commands.add(
'uploadFile',
{ prevSubject: true },
(subject, fileName) => {
cy.fixture(fileName).then((content) => {
const el = subject[0]
const testFile = new File([content], fileName)
const dataTransfer = new DataTransfer()
dataTransfer.items.add(testFile)
el.files = dataTransfer.files
cy.wrap(subject).trigger('change', { force: true })
})
}
)
// 에러때문에 테스트가 끊길 경우
Cypress.on('uncaught:exception', (err, runnable) => {
console.log(err)
return false
})
html
<head />
구조화된 데이터
- Using Structured Data to Enhance Search Engine Optimization | CSS-Tricks
- Understand How Structured Data Works | Google Search Central
lang
favicon
- How to Favicon in 2021: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog
- How to Create a Favicon That Changes Automatically | CSS-Tricks
- Emojis as Favicons | CSS-Tricks
- We Analyzed 425,909 Favicons • iconmap.io1
Footnotes
-
다양한 관점에서 파비콘을 분석한 글 ↩
Under-Engineered Select Menus | Adrian Roselli
font,letter-spacing,word-spacing상속appearance화살표 수정- 상태(focus, required, invalid)에 따른 스타일 추가
Building a multi-select component
다중 선택 UI를 구현하기위해서 checkbox, select 두가지 방법으로 작업하는 방식을 소개하고 있다. 그외 선택된 상태값을 얻기위한 counter() 함수, 모바일 체크를 위한 미디어쿼리도 알려주고 있다.
aside {
counter-reset: filters;
& :checked {
counter-increment: filters;
}
&::after {
content: counter(filters);
}
}
@media (pointer: coarse) {
//
}
디자인 된 <select />에 placeholder 개념이 있어서 어떻게 하면 좋을지 찾아봤다. 간략하게 설명하자면 선택이 불가능하게 disabled 추가하고 hidden으로 숨김 마지막으로 selected로 디폴트값을 처리하면 완성.
function Select({ placeholder, children }) {
return (
<select>
<option value="" disabled hidden selected>
{placeholder}
</option>
{children}
</select>
);
}
TIL — The power of JSON.stringify replacer parameter | pawelgrzybek.com
JSON.stringify(dude, (key, value) =>
value instanceof Set ? [...value] : value
);
JSON.stringify(dude, null, "🍆");