chore: update commit

src/views/commits/CommitContent.vue

@@ -1,11 +1,17 @@
 <template>
   <div class="commit-box" @click="openCommit()">
-    <div v-if="commit.pushedDate" class="commit-information">
-      <span class="tooltip" :data-tooltip="commit.getPushedLocalDate()">
-        <i class="fas fa-clock"></i>{{ commit.getPushedRelativeDate() }}
+    <div class="commit-information">
+      <span class="tooltip" :data-tooltip="commit.committedDate">
+        <i class="fas fa-clock"></i>{{ commit.getCommittedRelativeDate() }}
       </span>
+      <span class="tooltip" :data-tooltip="commitHash">
+        <span>{{ commitHash?.slice(0, 8) }}</span>
+      </span>
+    </div>
+    <div>
+      <p class="commit-message_headline">{{ commitMessage.firstLine }}</p>
+      <p class="commit-message">{{ commitMessage.other }}</p>
     </div>
-    <div class="commit-message">{{ commit.message }}</div>
     <span class="commit-description">
       <span class="tooltip" :data-tooltip="commit.getAuthoredLocalDate()">
         {{ commit.getAuthorInformation() }},
@@ -18,10 +24,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
 import { Commit } from '@/application/domain/model/github'
 import { inject } from '@/plugins/di/injector'
 import { WebBrowserUserCaseKey } from '@/plugins/di/types'
+import { computed, defineComponent } from 'vue'
 
 type PropsType = {
   commit: Commit
@@ -39,8 +45,21 @@ export default defineComponent({
     const webBrowserUserCase = inject(WebBrowserUserCaseKey)
     const openCommit = () => webBrowserUserCase.openUrl(props.commit.commitUrl)
 
+    const commitMessage = computed(() => {
+      const message = props.commit.message
+      const firstLine = message.split('\n', 1)[0]
+      const other = message.replace(firstLine, '')
+      return {
+        firstLine,
+        other: other.startsWith('\n') ? other.replace('\n', '') : other,
+      }
+    })
+    const commitHash = computed(() => props.commit.commitUrl.split('/').pop())
+
     return {
       openCommit,
+      commitMessage,
+      commitHash,
     }
   },
 })
@@ -58,9 +77,11 @@ export default defineComponent({
   white-space: pre-wrap;
   text-align: left;
   padding-left: 20px;
-  font-weight: bold;
-  font-size: 95%;
-  margin: 15px 0;
+  font-size: 90%;
+  &_headline {
+    text-align: center;
+    font-weight: bold;
+  }
 }
 
 .commit-information {

tests/unit/views/commits/CommitContent.spec.ts

@@ -1,9 +1,9 @@
-import { mount } from '@vue/test-utils'
-import { vi } from 'vitest'
 import { Commit } from '@/application/domain/model/github'
 import { WebBrowserUserCase } from '@/application/usecase/webBrowser'
 import { WebBrowserUserCaseKey } from '@/plugins/di/types'
 import CommitContent from '@/views/commits/CommitContent.vue'
+import { mount } from '@vue/test-utils'
+import { vi } from 'vitest'
 
 const MockedWebBrowserUserCase = vi.fn()
 const openUrlMock = vi.fn()
@@ -20,7 +20,7 @@ describe('CommitContent.vue', () => {
   })
 
   const commitMessage = 'commit message'
-  const commitUrl = 'https://github.com/ytakahashi/miru/commits/1234'
+  const commitUrl = 'https://github.com/ytakahashi/miru/commits/1234567898765432'
   const commit = new Commit(
     commitMessage,
     commitUrl,
@@ -34,7 +34,7 @@ describe('CommitContent.vue', () => {
     '2021-03-13T00:00:02Z'
   )
 
-  it('renders issue (opened)', async () => {
+  it('renders commit', async () => {
     const wrapper = mount(CommitContent, {
       global: {
         provide: {
@@ -46,9 +46,15 @@ describe('CommitContent.vue', () => {
       },
     })
 
-    expect(wrapper.text()).toMatch(/ytakahashi authored .+ .+ ago/)
-    expect(wrapper.text()).toMatch(/ytakahashi committed .+ .+ ago/)
-    expect(wrapper.text()).toContain(commitMessage)
+    const spans = wrapper.findAll('span.tooltip')
+    expect(spans).toHaveLength(4)
+    expect(spans[0].text()).toMatch(/.+ ago/)
+    expect(spans[1].text()).toBe('12345678')
+    expect(spans[2].text()).toMatch(/ytakahashi authored .+ .+ ago/)
+    expect(spans[3].text()).toMatch(/ytakahashi committed .+ .+ ago/)
+
+    expect(wrapper.find('p.commit-message_headline').text()).toBe('commit message')
+    expect(wrapper.find('p.commit-message').text()).toBe('')
   })
 
   it('can open url', async () => {