Merge pull request #24 from sora32127/add_axe_check

Playwrightのテストを改善

.github/workflows/playwright-test.yml

@@ -1,7 +1,5 @@
 name : Playwright E2E Test
-on:
-  pull_request:
-    branches: ['main']
+on: workflow_dispatch
 
 jobs:
   playwright-e2e-test:

app/components/CommentCard.tsx

@@ -106,7 +106,7 @@ export default function CommentCard({
         <button
           className={`flex items-center mr-4 bg-inherit rounded-md px-2 py-2 border ${
             isLiked ? "text-blue-500 fonr-bold" : ""
-          }`}
+          } comment-like-button`}
           onClick={() => (onCommentVote(commentId, "like"), setIsCommentLikeButtonPushed(true))}
           disabled={isCommentLikeButtonPushed || isLiked}
         >
@@ -118,7 +118,7 @@ export default function CommentCard({
         <button
           className={`flex items-center bg-inherit rounded-md px-2 py-2 border ${
             isDisliked ? "text-red-500 font-bold" : ""
-          }`}
+          } comment-dislike-button`}
           onClick={() => (onCommentVote(commentId, "dislike"), setIsCommentDislikeButtonPushed(true))}
           disabled={isCommentDislikeButtonPushed || isDisliked}
         >

app/components/ThemeSwitcher.tsx

@@ -1,12 +1,10 @@
 import { useEffect, useState } from "react";
 
 export default function ThemeSwitcher() {
-
-
-  const [nowTheme, setNowTheme] = useState<string>()
+  const [nowTheme, setNowTheme] = useState<string>();
 
   useEffect(() => {
-    if (window.localStorage.getItem("theme") === null){
+    if (window.localStorage.getItem("theme") === null) {
       const initialTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
       window.localStorage.setItem("theme", initialTheme);
     }
@@ -17,18 +15,33 @@ export default function ThemeSwitcher() {
 
   const toggleTheme = () => {
     const newTheme = nowTheme == "dark" ? "light" : "dark";
-    console.log(newTheme);
     window.localStorage.setItem("theme", newTheme);
     setNowTheme(newTheme);
     document.querySelector("html")?.setAttribute("data-theme", newTheme);
   };
 
   return (
-    <label className="flex cursor-pointer gap-2">
-        {}
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
-      <input type="checkbox" checked={nowTheme == "dark"} onChange={toggleTheme} className="toggle theme-controller"/>
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-    </label>
+    <div className="flex items-center gap-2">
+      <label htmlFor="theme-switcher">
+        <span className="sr-only">テーマ切り替え</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="5" />
+          <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
+        </svg>
+      </label>
+      <input
+        type="checkbox"
+        id="theme-switcher"
+        checked={nowTheme == "dark"}
+        onChange={toggleTheme}
+        className="toggle theme-controller"
+      />
+      <label htmlFor="theme-switcher">
+        <span className="sr-only">ダークモード</span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+        </svg>
+      </label>
+    </div>
   );
 }

app/routes/_layout.tsx

@@ -56,7 +56,7 @@ export default function Component() {
       to={item.to}
       className={({ isActive }) =>
         `flex flex-col items-center justify-center text-base-content ${
-          isActive ? "text-blue-500 font-bold" : ""
+          isActive ? "text-info font-bold" : ""
         }`
       }
     >

package.json

@@ -13,7 +13,6 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@axe-core/playwright": "^4.8.5",
     "@estruyf/github-actions-reporter": "^1.6.0",
     "@marsidev/react-turnstile": "^0.5.3",
     "@prisma/client": "^5.12.0",
@@ -23,6 +22,7 @@
     "@supabase/supabase-js": "^2.40.0",
     "@uiw/react-md-editor": "^4.0.4",
     "@vercel/speed-insights": "^1.0.10",
+    "chalk": "^5.3.0",
     "clsx": "^2.1.0",
     "crypto-js": "^4.2.0",
     "csv-parse": "^5.5.5",
@@ -38,6 +38,7 @@
     "remix-utils": "^7.5.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.9.0",
     "@playwright/test": "^1.42.1",
     "@remix-run/dev": "^2.8.1",
     "@types/marked": "^6.0.0",

playwright.config.ts

@@ -1,23 +1,22 @@
 import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
-  testDir: './tests',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: [
-    ['list'],
-    ['@estruyf/github-actions-reporter']
-  ],
-  use: {
-    trace: 'on-first-retry',
-  },
+ testDir: './tests',
+ fullyParallel: true,
+ forbidOnly: !!process.env.CI,
+ retries: process.env.CI ? 2 : 0,
+ workers: process.env.CI ? 1 : undefined,
+ reporter: process.env.CI
+   ? [['list'], ['@estruyf/github-actions-reporter']]
+   : [['html']],
+ use: {
+   trace: 'on-first-retry',
+ },
 
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-  ],
-});
+ projects: [
+   {
+     name: 'chromium',
+     use: { ...devices['Desktop Chrome'] },
+   },
+ ],
+});