【Day 9】ブログタイトルの固定値を表示する

はじめに

---

2023年アドベントカレンダー9日目です。

前回は「ユーザーはトップページを開くことができる」のストーリーを進めました。

今回から「ユーザーはトップページで固定値のブログタイトルを見ることができる」を進めていきます。

Web部分の開発を進めます。

画面デザイン

以前Figmaで作成したデザインで進めていきます。

今回は前回コンポーネント設計をした、Blogsコンポーネントを作成していくイメージを持っておきます。

E2Eテスト

前回同様、まずはE2Eテストを書いていきます。

今回はブログの固定タイトルと、固定の作成日時が見えていることが確認できるテストを追加しようと思います。

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', 'タイトル')
+ })
+
+ it('ブログの固定日付が表示されていること', () => {
+   cy.get('.blog-card').eq(0).should('include.text', '2021/01/01 09:00:00')
+ })
})

実行してみます。

  トップ画面の表示
    1) h1タグで"Life Sync"が表示されていること
    2) h2タグで"ブログ一覧"の文字が表示されていること
    3) "新規登作成"のボタンが表示されていること
    4) ブログのタイトルが表示されていること
    5) ブログの日付が表示されていること


  3 passing
  2 failing

追加したテストが失敗することが確認できました

実装

Blogsコンポーネントを作成していきます

前回同様、まずはテストが通る最低限を目指します。

src/components/Blogs.tsx

'use client'

export const Blogs = () => {
  return (
    <div>
      <div>
        タイトル
      </div>
      <div>
        2021/01/01 09:00:00
      </div>
    </div>
  )
}

テストを流してみます

  トップ画面の表示
    1) h1タグで"Life Sync"が表示されていること
    2) h2タグで"ブログ一覧"の文字が表示されていること
    3) "新規登作成"のボタンが表示されていること
    4) ブログのタイトルが表示されていること
    5) ブログの日付が表示されていること


  5 passing

通りました！

次にスタイルを当てていきます。

完成しました！

参考）Blogs.tsx

'use client'

import React from 'react'
import { BsArrowRightCircle } from 'react-icons/bs'

export const Blogs = () => {
  return (
    <div className='flex flex-col gap-4'>
      <div className='flex flex-col blog-card'>
        <div className='bg-stone-100 p-6 rounded-xl flex justify-between items-center'>
          タイトル
          <BsArrowRightCircle size={35} />
        </div>
        <div className='self-end'>2021/01/01 09:00:00</div>
      </div>
    </div>
  )
}

これで「ユーザーはトップページで固定値のブログタイトルを見ることができる」が終了です👍

明日からは「ユーザーはトップページでブログタイトルの一覧を見ることができる 」をすすめていきます。