LoginSignup
3
0

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

Last updated at Posted at 2023-12-08

はじめに

スライド10.PNG


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

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

image.png

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

image.png

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

画面デザイン

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

image.png

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

image.png

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

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

実装

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

image.png

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

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

通りました!

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

image.png

:ok: 完成しました!

参考)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>
  )
}

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

image.png

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

image.png

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0