arrow2nd · arrow2nd · Jan 14, 2024 · Jan 14, 2024 · Jan 14, 2024 · Jan 14, 2024
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@
 # testing
 /coverage
 /e2e/results/
+test-results/
 
 # next.js
 /.next/

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,15 +1,23 @@
+import { M_PLUS_Rounded_1c } from 'next/font/google'
 import React from 'react'
 
 import 'styles/globals.css'
 
+const mPlusRounded1c = M_PLUS_Rounded_1c({
+  display: 'swap',
+  weight: ['400'],
+  subsets: ['latin'],
+  adjustFontFallback: false
+})
+
 export default function RootLayout({
   children
 }: {
   children: React.ReactNode
 }) {
   return (
     <html lang="ja">
-      <body>{children}</body>
+      <body className={mPlusRounded1c.className}>{children}</body>
     </html>
   )
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,4 +1,3 @@
-import { M_PLUS_Rounded_1c } from 'next/font/google'
 import { Metadata } from 'next/types'
 
 import Footer from 'components/organisms/footer'
@@ -7,12 +6,6 @@ import UI from 'components/organisms/ui'
 
 import { seo } from 'data/seo'
 
-const mPlusRounded1c = M_PLUS_Rounded_1c({
-  weight: ['400'],
-  subsets: ['latin'],
-  variable: '--m-plus-rounded-1c'
-})
-
 export async function generateMetadata(): Promise<Metadata> {
   const { title, description, url, ogpImgUrl } = seo
 
@@ -39,9 +32,7 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default function Page() {
   return (
-    <div
-      className={`flex flex-col mx-8 my-20 min-h-screen ${mPlusRounded1c.className}`}
-    >
+    <div className="flex flex-col mx-8 my-20 min-h-screen">
       <Header desc={seo.description} />
       <UI />
       <Footer />

diff --git a/components/molecules/not-found-card/__snapshots__/index.test.tsx.snap b/components/molecules/not-found-card/__snapshots__/index.test.tsx.snap
@@ -3,47 +3,65 @@
 exports[`NotFoundCard 見た目が変化していないか 1`] = `
 <div>
   <div
-    class="w-96 m-2 p-6 rounded-lg shadow-md bg-white flex flex-row items-center justify-center"
+    class="w-96 m-2 p-6 rounded-lg shadow-md bg-white flex flex-col"
   >
-    <svg
-      fill="currentColor"
-      height="1em"
-      stroke="currentColor"
-      stroke-width="0"
-      version="1.1"
-      viewBox="0 0 16 16"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      class="flex flex-row items-center"
     >
-      <path
-        d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zM8 1.5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5-6.5-2.91-6.5-6.5 2.91-6.5 6.5-6.5z"
-      />
-      <path
-        d="M12.5 6h-2c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"
-      />
-      <path
-        d="M5.5 6h-2c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"
-      />
-      <path
-        d="M9.5 13.375c-0.128 0-0.256-0.049-0.354-0.146-0.072-0.072-0.46-0.229-1.146-0.229s-1.075 0.157-1.146 0.229c-0.195 0.195-0.512 0.195-0.707 0s-0.195-0.512 0-0.707c0.471-0.471 1.453-0.521 1.854-0.521s1.383 0.051 1.854 0.521c0.195 0.195 0.195 0.512 0 0.707-0.098 0.098-0.226 0.146-0.354 0.146z"
-      />
-      <path
-        d="M11.5 9c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z"
-      />
-      <path
-        d="M11.5 12c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z"
-      />
-      <path
-        d="M4.5 9c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z"
-      />
-      <path
-        d="M4.5 12c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z"
-      />
-    </svg>
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        version="1.1"
+        viewBox="0 0 16 16"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zM8 1.5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5-6.5-2.91-6.5-6.5 2.91-6.5 6.5-6.5z"
+        />
+        <path
+          d="M12.5 6h-2c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"
+        />
+        <path
+          d="M5.5 6h-2c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h2c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"
+        />
+        <path
+          d="M9.5 13.375c-0.128 0-0.256-0.049-0.354-0.146-0.072-0.072-0.46-0.229-1.146-0.229s-1.075 0.157-1.146 0.229c-0.195 0.195-0.512 0.195-0.707 0s-0.195-0.512 0-0.707c0.471-0.471 1.453-0.521 1.854-0.521s1.383 0.051 1.854 0.521c0.195 0.195 0.195 0.512 0 0.707-0.098 0.098-0.226 0.146-0.354 0.146z"
+        />
+        <path
+          d="M11.5 9c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z"
+        />
+        <path
+          d="M11.5 12c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z"
+        />
+        <path
+          d="M4.5 9c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z"
+        />
+        <path
+          d="M4.5 12c-0.276 0-0.5-0.224-0.5-0.5v-1c0-0.276 0.224-0.5 0.5-0.5s0.5 0.224 0.5 0.5v1c0 0.276-0.224 0.5-0.5 0.5z"
+        />
+      </svg>
+      <p
+        class="ml-2 font-bold"
+      >
+        見つかりませんでした…
+      </p>
+    </div>
     <p
-      class="ml-2"
+      class="mt-2 text-sm text-natural-gray"
     >
-      みつかりませんでした...
+      アイドル・ユニット名が間違っているか、
+      <a
+        class="underline hover:text-imas transition-colors"
+        href="https://sparql.crssnky.xyz/imas/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        im@sparql
+      </a>
+      にイメージカラーの情報が登録されていないようです。
     </p>
   </div>
 </div>

diff --git a/components/molecules/not-found-card/index.tsx b/components/molecules/not-found-card/index.tsx
@@ -3,9 +3,23 @@ import { ImCrying } from 'react-icons/im'
 import Card from 'components/atoms/card'
 
 const NotFoundCard = () => (
-  <Card className="flex flex-row items-center justify-center">
-    <ImCrying />
-    <p className="ml-2">みつかりませんでした...</p>
+  <Card className="flex flex-col">
+    <div className="flex flex-row items-center">
+      <ImCrying />
+      <p className="ml-2 font-bold">見つかりませんでした…</p>
+    </div>
+    <p className="mt-2 text-sm text-natural-gray">
+      アイドル・ユニット名が間違っているか、
+      <a
+        className="underline hover:text-imas transition-colors"
+        href="https://sparql.crssnky.xyz/imas/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        im@sparql
+      </a>
+      にイメージカラーの情報が登録されていないようです。
+    </p>
   </Card>
 )
 

diff --git a/components/organisms/color-card/__snapshots__/index.test.tsx.snap b/components/organisms/color-card/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`CardDefault Keepボタンを押したときにコールバックが呼
 <div>
   <div
     class="w-96 m-2 p-6 rounded-lg shadow-md bg-white h-64"
-    data-testid="color-card"
   >
     <div
       class="flex flex-row items-center"
@@ -195,7 +194,6 @@ exports[`CardDefault Removeボタンを押したときにコールバックが
 <div>
   <div
     class="w-96 m-2 p-6 rounded-lg shadow-md bg-white h-64"
-    data-testid="color-card"
   >
     <div
       class="flex flex-row items-center"

diff --git a/components/organisms/color-card/__snapshots__/mobile.test.tsx.snap b/components/organisms/color-card/__snapshots__/mobile.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`CardDefault Keepボタンを押したときにコールバックが呼
 <div>
   <div
     class="w-96 m-2 p-6 rounded-lg shadow-md bg-white "
-    data-testid="color-card"
   >
     <div
       class="flex flex-row items-center"
@@ -195,7 +194,6 @@ exports[`CardDefault Removeボタンを押したときにコールバックが
 <div>
   <div
     class="w-96 m-2 p-6 rounded-lg shadow-md bg-white "
-    data-testid="color-card"
   >
     <div
       class="flex flex-row items-center"

diff --git a/components/organisms/color-card/index.tsx b/components/organisms/color-card/index.tsx
@@ -11,7 +11,7 @@ import ColorInfo from 'components/organisms/color-info'
 import { Props } from './props'
 
 const CardDefault = ({ data, isKeep, onClickKeep, onClickRemove }: Props) => (
-  <Card className="h-64" dataTestId="color-card">
+  <Card className="h-64">
     <CardTitle name={data.name} nameSuppl={data.nameSuppl} hex={data.color.hex}>
       {isKeep ? (
         <RemoveButton className="ml-4" onClick={onClickRemove} />

diff --git a/components/organisms/color-card/mobile.tsx b/components/organisms/color-card/mobile.tsx
@@ -11,7 +11,7 @@ import ColorInfo from 'components/organisms/color-info'
 import { Props } from './props'
 
 const CardMobile = ({ data, isKeep, onClickKeep, onClickRemove }: Props) => (
-  <Card dataTestId="color-card">
+  <Card>
     <CardTitle
       name={data.name}
       nameSuppl={data.nameSuppl}

diff --git a/components/organisms/color-cards/__snapshots__/index.test.tsx.snap b/components/organisms/color-cards/__snapshots__/index.test.tsx.snap
@@ -4,10 +4,10 @@ exports[`ColorCards 見た目が変化していないか 1`] = `
 <div>
   <div
     class="flex flex-row flex-wrap justify-center "
+    data-testid="card-area"
   >
     <div
       class="w-96 m-2 p-6 rounded-lg shadow-md bg-white h-64"
-      data-testid="color-card"
     >
       <div
         class="flex flex-row items-center"
@@ -193,7 +193,6 @@ exports[`ColorCards 見た目が変化していないか 1`] = `
     </div>
     <div
       class="w-96 m-2 p-6 rounded-lg shadow-md bg-white h-64"
-      data-testid="color-card"
     >
       <div
         class="flex flex-row items-center"
@@ -379,7 +378,6 @@ exports[`ColorCards 見た目が変化していないか 1`] = `
     </div>
     <div
       class="w-96 m-2 p-6 rounded-lg shadow-md bg-white h-64"
-      data-testid="color-card"
     >
       <div
         class="flex flex-row items-center"

diff --git a/components/organisms/color-cards/index.test.tsx b/components/organisms/color-cards/index.test.tsx
@@ -14,7 +14,7 @@ describe('ColorCards', () => {
 
   test('カードが無いときの表示が正しいか', () => {
     const { getByText } = render(<ColorCards {...props} items={[]} />)
-    expect(getByText('みつかりませんでした...')).toBeTruthy()
+    expect(getByText('見つかりませんでした…')).toBeTruthy()
   })
 
   test('見た目が変化していないか', () => {

diff --git a/components/organisms/color-cards/index.tsx b/components/organisms/color-cards/index.tsx
@@ -78,18 +78,18 @@ const ColorCards = ({
   }
 
   return items.length === 0 ? (
-    <div className={`flex justify-center ${className}`}>
+    <div className={`flex justify-center ${className}`} data-testid="card-area">
       <NotFoundCard />
     </div>
   ) : (
     <InfiniteScroll
       className={`flex flex-row flex-wrap justify-center ${className}`}
       loadMore={handleLoadMore}
       hasMore={hasMore}
+      data-testid="card-area"
     >
       {cards.slice(0, offset)}
     </InfiniteScroll>
   )
 }
-
 export default ColorCards
diff --git a/components/organisms/ui/index.test.tsx b/components/organisms/ui/index.test.tsx
@@ -19,7 +19,7 @@ describe('UI', () => {
       fireEvent.click(getByTestId('search-button'))
     })
 
-    expect(getByText('みつかりませんでした...')).toBeTruthy()
+    expect(getByText('見つかりませんでした…')).toBeTruthy()
   })
 
   test('ブランドから検索ができるか', () => {

diff --git a/e2e/filter.spec.ts b/e2e/filter.spec.ts
@@ -0,0 +1,33 @@
+import { expect, test } from '@playwright/test'
+
+import { search } from './utils'
+
+test.describe('色味で絞り込める', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+  })
+
+  test('正しく絞り込めている', async ({ page }) => {
+    await page.selectOption('[data-testid="search-select"]', 'Dearly Stars')
+    await page.click('[data-testid="search-color-button-1"]')
+    await expect(page.getByTestId('card-area')).toContainText('日高愛')
+  })
+
+  test('キーワードでさらに絞り込める', async ({ page }) => {
+    await page.selectOption(
+      '[data-testid="search-select"]',
+      'シャイニーカラーズ'
+    )
+    await page.click('[data-testid="search-color-button-2"]')
+
+    const cardArea = page.getByTestId('card-area')
+
+    await search(page, '西城樹里')
+    await expect(cardArea, 'ヒットする').toContainText('西城樹里')
+
+    await search(page, '風野灯織')
+    await expect(cardArea, '色味が異なるアイドルはヒットしない').toContainText(
+      '見つかりませんでした'
+    )
+  })
+})
diff --git a/e2e/imas-palette.spec.ts b/e2e/imas-palette.spec.ts
@@ -1,35 +1 @@
 import { expect, test } from '@playwright/test'
-
-test('検索して画面を記録', async ({ contextOptions, browser }, { project }) => {
-  const saveDir = `e2e/results/${project.name}`
-  const context = await browser.newContext({
-    ...contextOptions,
-    recordVideo: { dir: saveDir }
-  })
-
-  const page = await context.newPage()
-  await page.goto('http://localhost:3000')
-
-  // ブランドを指定
-  await page.selectOption('[data-testid="search-select"]', '765AS')
-
-  // アイドル名を入力
-  await page.click('[data-testid="search-textbox"]')
-  await page.locator('[data-testid="search-textbox"]').fill('あまみはるか')
-
-  // 検索実行
-  await page.click('[data-testid="search-button"]')
-
-  // 色味で絞り込み
-  await page.click('[data-testid="search-color-button-1"]')
-
-  await expect(page.locator('[data-testid="name-label"] > p')).toHaveText([
-    '天海春香',
-    'Haruka Amami'
-  ])
-
-  // ページ全体のスクリーンショット
-  await page.screenshot({ path: `${saveDir}/full-page.png`, fullPage: true })
-
-  await context.close()
-})