はじめに
2023年アドベントカレンダー10日目です。
前回は「ユーザーはトップページで固定値のブログタイトルを見ることができる」のストーリーを進めました。
今回から「ユーザーはトップページでブログの一覧を見ることができる」を進めていきます。
Web部分の開発を進めます。
画面デザイン
以前Figmaで作成したデザインで進めていきます。
今回は前回コンポーネント設計をした、Blogsコンポーネントを作成していくイメージを持っておきます。
E2Eテスト
前回同様、まずはE2Eテストを書いていきます。
今回はブログのタイトルと、作成日時が見えていることが確認できるテストを追加しようと思います。
Figmaのデザインに書かれているデータをBFFから取得できているかを確認していこうと思います
top/display.cy.js
/// <reference types="cypress" />
describe('トップ画面の表示', () => {
beforeEach(() => {
cy.visit(cy.config('baseUrl'))
})
it('h1タグで"Life Sync"が表示されていること', () => {
cy.get('h1').should('have.text', 'Life Sync')
})
it('h2タグで"ブログ一覧"の文字が表示されていること', () => {
cy.get('h2').should('have.text', 'ブログ一覧')
})
it('"新規登作成"のボタンが表示されていること', () => {
cy.get('button').should('have.text', '新規作成')
})
it('ブログのタイトルが表示されていること', () => {
- cy.get('.blog-card').eq(0).should('include.text', 'タイトル')
+ cy.get('.blog-card')
+ .eq(0)
+ .should('include.text', '心地よい一時：お気に入りのカフェでのひととき')
+ cy.get('.blog-card')
+ .eq(1)
+ .should(
+ 'include.text',
+ 'カフェの隅で見つけた幸せ：私のお気に入りの隠れ家'
+ )
+ cy.get('.blog-card')
+ .eq(2)
+ .should(
+ 'include.text',
+ 'コーヒーと共に過ごす静かな時間：愛すべきカフェでの体験'
+ )
+ })
+
+ it('ブログの日付が表示されていること', () => {
- cy.get('.blog-card').eq(0).should('include.text', '2021/01/01 09:00:00')
+ cy.get('.blog-card').eq(0).should('include.text', '2023/12/01 09:00:00')
+ cy.get('.blog-card').eq(1).should('include.text', '2023/12/02 09:00:00')
+ cy.get('.blog-card').eq(2).should('include.text', '2023/12/03 09:00:00')
+ })
})
実行してみます。
トップ画面の表示
1) h1タグで"Life Sync"が表示されていること
2) h2タグで"ブログ一覧"の文字が表示されていること
3) "新規登作成"のボタンが表示されていること
4) ブログのタイトルが表示されていること
5) ブログの日付が表示されていること
3 passing
2 failing
追加したテストが失敗することが確認できました
Unitテスト準備
ユニットテストにはJestを採用しようと思います。
Jest
Install
公式のリファクタリングをもとに進めていきます。
npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
jest.config.mjs
import nextJest from 'next/jest.js'
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './',
})
// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
// Add more setup options before each test is run
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testEnvironment: 'jest-environment-jsdom',
}
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)
これで設定完了です！
次回はクリーンアーキテクチャの思想に基づいて開発を進めていきます。