connect가 실행된 컴포넌트를 (enzyme) mount로 테스트한 경우 실패 케이스가 발생해서 찾아본 내용들 인 것 같은데 정확하게 기억이 안남. shallow로 변경했더니 이번에는 ref를 못쓰는 문제도 있었다고 하고… 여담이지만 컴포넌트를 명확하게 정의하고 분리해서 테스팅 스트레스를 줄이는 게 중요합니다.

#test
#161

Google Optimize는 2023년 9월 30일 종료됐다1 — 아래 Optimize 링크 둘은 살아 있지 않다. 남는 건 서비스가 아니라 교훈이다: 리다이렉트에서 query를 갈아끼우면 그 query에 실려 있던 측정 정보가 사라진다.

Google Optimize에서 Redirect 테스트를 진행했는데 기능 구현은 문제없는데 세션수가 안 잡히는 문제가 발생했다.

이번에 문제되었던 부분은 query 처리를 인지하지 못했던 점이었다. Optimize에서 redirect 처리가 이루어질 때 query에 정보(예. utm_expid)들이 추가되는데 리다이렉트 url 변경하는 부분이 있었고 optimize에서 참조되어야 할 query를 날려버리면서 측정이 불가능했던 것. 결국 replace 실행 코드를 이전 query를 assign 시켜주도록 변경해서 해결.

여담이지만 Charles를 사용하고 있어서 배포 없이 테스트 가능했던 점도 같이 메모.

Footnotes

  1. Google Optimize sunset ↩

#optimize#charles
#160
import isAfter from 'date-fns/isAfter';

isAfter(new Date(), new Date(DATE))

날짜 비교 할 일이 있어서 별 생각 없이 new Date를 때렸는데 safari에서 안되는 문제가 발견되었다. 콘솔을 확인해보니 yyyy-MM-dd HH:mm:ss 해당 형태의 포멧 에서는 안된다. 평소에 new Date 보다는 moment나 date-fns같은 라이브러리를 당연하게 써오다 보니 몰랐다. 그런데 또 다른 생각을 해보자면 저런 문제가 있기 때문에 더 적극적으로 라이브러리를 사용해야 한다는 게 함정.

import isAfter from 'date-fns/isAfter';
import format from 'date-fns/format';

isAfter(new Date(), format(DATE))
#javascript#date
#159

live2d 구현이 필요할 경우 pixi+plugin을 사용하면 된다

#live2dcodesandbox.io
#152
**title**: 반품 및 교환은 재고로 이동합니다.

**as a** 가게 주인으로서,
**I want** 반품 또는 교환 시 상품을 재고에 다시 추가하고 싶습니다.
**so that** 인벤토리를 추적할 수 있습니다.

**Scenario 1:** 환불을 위해 반품된 항목은 인벤토리에 추가되어야 합니다.
**Given** 고객이 이전에 나에게서 검은색 스웨터를 구매했다는 점을 감안할 때
**and** 인벤토리에 검은색 스웨터 3개가 있습니다.
**when** 환불을 위해 검은색 스웨터를 반환할 때
**then** 그러면 인벤토리에 4개의 검은색 스웨터가 있어야 합니다.

Feature > […Scenario] > […Step]

Given 초기 상태 — 보통 과거에 일어난 일. When 이벤트나 동작. Then 예상 결과. 단계를 이을 때 And·But.

Scenario: 항목 검색 후 결제 페이지로 이동
Given 사용자가 Greencart 방문 페이지에 있다
When 사용자가 야채<이름>를 검색했을 때
And 장바구니에 항목이 추가된다
And 사용자는 구매를 위해 Checkout 페이지로 이동한다
Then 선택한 <이름> 항목이 체크아웃 페이지에 표시된다

출처

#test#bdd
#149

테스트 코드에서 mock으로 처리하는 경우1

Footnotes

  1. 그래서 내가 내린 결론은 저렇게 까지는 테스트할 필요가 없고 오히려 애매하게 결합된 컴포넌트들을 분리해서 관리하는게 맞을 것 같다는 생각을 해봤다. ↩

#mock#test
#148

테스트 하다가 특정 사이즈 파일이 필요한 경우. 순수하게 사이즈 관련된 내용만 테스트가 가능하다.1

mkfile 100m some100mfile.pdf

Footnotes

  1. How to create large PDF files (10MB, 50MB, 100MB, 200MB, 500MB, 1GB, etc.) for testing purposes? - Stack Overflow ↩

#test
#147
# 개발할때 편하다
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
})
#test#cypress
#146

📌 테스트 전반에 대한 가이드 및 베스트 프랙티스

#test
#145

html

<head />

구조화된 데이터

lang

favicon

Microdata

attributes

Footnotes

  1. 다양한 관점에서 파비콘을 분석한 글 ↩

#html
#143
31 중 24페이지
이전 페이지다음 페이지