Merge pull request #34 from brunomachadors/33-update-test-ids-and-tests

feat: update Playwright workflow and refactor locators
brunomachadors · Jan 18, 2025 · b1685e8 · b1685e8
2 parents 83b9dd9 + e1762b6
commit b1685e8
Show file tree

Hide file tree

Showing 25 changed files with 376 additions and 184 deletions.
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -12,6 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
@@ -22,12 +23,28 @@ jobs:
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
 
+      - name: Build application
+        run: npm run build
+
+      - name: Start application
+        run: npm start &
+
+      - name: Wait for localhost to be ready
+        run: npx wait-on http://localhost:3000
+
       - name: Run Playwright tests
         run: npx playwright test
 
-      - uses: actions/upload-artifact@v4
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30
+      - name: Generate Allure Report
+        run: npm run test:allure:generate
+
+      - name: Deploy Allure Report to GitHub Pages
+        if: ${{ success() }}
+        run: |
+          git config --global user.name "GitHub Actions"
+          git config --global user.email "[email protected]"
+          git remote set-url origin https://x-access-token:${GITHUB_TOKEN}@github.com/${{ github.repository }}.git
+          git checkout --orphan gh-pages
+          git --work-tree=allure-report add --all
+          git --work-tree=allure-report commit -m "Deploy Allure Report"
+          git push -f origin gh-pages
diff --git a/.gitignore b/.gitignore
@@ -44,3 +44,5 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/allure-report/
+/allure-results/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,13 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "playwright test && npm run test:allure:open",
+    "test:headed": "playwright test --headed",
+    "test:debug": "playwright test --debug",
+    "test:report": "playwright show-report",
+    "test:allure:generate": "allure generate allure-results --clean -o allure-report",
+    "test:allure:open": "npm run test:allure:generate && allure open allure-report"
   },
   "dependencies": {
     "dotenv": "^16.4.7",
@@ -21,6 +27,8 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "allure-commandline": "^2.32.0",
+    "allure-playwright": "^3.0.9",
     "autoprefixer": "^10.4.20",
     "eslint": "^9",
     "eslint-config-next": "15.1.3",

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -10,17 +10,13 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
 
-  reporter: [
-    ['line'],
-    ['github'],
-    ['html', { outputFolder: 'playwright-report', open: 'always' }],
-  ],
+  reporter: [['line'], ['github'], ['list'], ['allure-playwright']],
   expect: {
     timeout: 10_000,
   },
 
   use: {
-    baseURL: process.env.BASE_URL || 'https://bruno-portfolio-eight.vercel.app',
+    baseURL: 'http://localhost:3000/',
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
     video: 'retain-on-failure',

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -27,16 +27,16 @@ export default function About() {
   return (
     <main
       className="flex flex-col items-center justify-center min-h-[85vh] p-8"
-      data-test-id="about-page"
+      data-testid="about-page"
       aria-labelledby="about-page-title"
     >
       <div
         className="flex flex-col sm:flex-row items-stretch border border-yellow-500 rounded-xl shadow-lg overflow-hidden w-full max-w-7xl"
-        data-test-id="about-container"
+        data-testid="about-container"
       >
         <div
           className="flex items-center justify-center bg-transparent w-full sm:w-1/2 p-4"
-          data-test-id="about-photo"
+          data-testid="about-photo"
         >
           <Image
             src="https://res.cloudinary.com/dtglidvcw/image/upload/v1735730755/Portifolio/capalinguacinza.png"
@@ -51,17 +51,17 @@ export default function About() {
 
         <div
           className="flex flex-col flex-1 p-8 rounded-lg"
-          data-test-id="about-content"
+          data-testid="about-content"
         >
           <AboutSections />
         </div>
       </div>
 
-      <div className="mt-8" data-test-id="resume-button-container">
+      <div className="mt-8" data-testid="resume-button-container">
         <LinkButton
           text="Go to Resume"
           href="/resume"
-          data-test-id="resume-button"
+          data-testid="resume-button"
           aria-label="Navigate to Resume page"
         />
       </div>

diff --git a/src/app/components/AboutSections/AboutSections.tsx b/src/app/components/AboutSections/AboutSections.tsx
@@ -12,18 +12,18 @@ export default function AboutSections() {
   return (
     <div
       className="flex flex-col items-start gap-6"
-      data-test-id="about-sections"
+      data-testid="about-sections"
     >
       <h1
         className="text-4xl sm:text-5xl font-bold text-yellow-500 text-center sm:text-left mb-4"
-        data-test-id="about-title"
+        data-testid="about-title"
       >
         About Me
       </h1>
 
       <p
         className="text-lg sm:text-xl text-gray-300 mb-4"
-        data-test-id="about-description"
+        data-testid="about-description"
       >
         I&apos;m Bruno Machado, a QA Engineer passionate about software
         development.
@@ -33,7 +33,7 @@ export default function AboutSections() {
         <section
           key={index}
           className="w-full pb-4 border-b border-yellow-500 cursor-pointer last:border-none px-0 mx-0"
-          data-test-id={`section-${index}`}
+          data-testid={`section-${index}`}
           onClick={() => toggleSection(index)}
         >
           <header
@@ -42,11 +42,11 @@ export default function AboutSections() {
             tabIndex={0}
             aria-expanded={openSection === index}
             aria-controls={`section-content-${index}`}
-            data-test-id={`section-toggle-${index}`}
+            data-testid={`section-toggle-${index}`}
           >
             <h2
               className="text-lg sm:text-xl font-bold text-yellow-500"
-              data-test-id={`section-title-${index}`}
+              data-testid={`section-title-${index}`}
               id={`section-title-${index}`}
             >
               {section.title}
@@ -55,27 +55,27 @@ export default function AboutSections() {
               className={`transform transition-transform duration-300 ${
                 openSection === index ? 'rotate-180' : ''
               }`}
-              data-test-id={`toggle-icon-${index}`}
+              data-testid={`toggle-icon-${index}`}
             >
               ▼
             </span>
           </header>
           {openSection === index && (
             <div
               className="mt-2 text-gray-300 text-base sm:text-lg"
-              data-test-id={`section-content-${index}`}
+              data-testid={`section-content-${index}`}
               id={`section-content-${index}`}
             >
               {typeof section.content === 'string' ? (
-                <p data-test-id={`section-text-${index}`}>{section.content}</p>
+                <p data-testid={`section-text-${index}`}>{section.content}</p>
               ) : (
-                <div data-test-id={`section-content-wrapper-${index}`}>
+                <div data-testid={`section-content-wrapper-${index}`}>
                   {React.Children.map(
                     section.content.props.children,
                     (child, childIndex) => (
                       <div
                         key={childIndex}
-                        data-test-id={`section-content-${index}-line-${childIndex}`}
+                        data-testid={`section-content-${index}-line-${childIndex}`}
                       >
                         {child}
                       </div>

diff --git a/src/app/components/Button/SkillButton.tsx b/src/app/components/Button/SkillButton.tsx
@@ -14,7 +14,6 @@ export default function SkillButton({
   description = 'This is a placeholder description for the skill.',
   isActive,
   onClick,
-  testId,
 }: SkillButtonProps) {
   const colorClasses = skillColors[text] || defaultSkillColor;
 
@@ -29,7 +28,6 @@ export default function SkillButton({
         alignItems: 'center',
         justifyContent: 'center',
       }}
-      data-test-id={testId}
     >
       <button
         className={`border ${
@@ -40,15 +38,15 @@ export default function SkillButton({
           textAlign: 'center',
           whiteSpace: 'normal',
         }}
-        data-test-id={`${testId}-button`}
+        data-testid={`skill-${text.toLowerCase().replace(/\s+/g, '-')}`}
       >
         <span
           className={`font-bold transition-all duration-300 flex items-center gap-2 ${
             isActive
               ? 'text-2xl sm:text-2xl px-4 sm:px-12 justify-center'
               : 'text-lg'
           }`}
-          data-test-id={`${testId}-text`}
+          data-testid={`${text.toLowerCase().replace(/\\s+/g, '-')}-text`}
         >
           {isActive ? (
             <FiChevronDown className="inline" />
@@ -60,7 +58,9 @@ export default function SkillButton({
         {isActive && (
           <p
             className={`mt-4 text-m sm:text-xl ${colorClasses} px-4 sm:px-12`}
-            data-test-id={`${testId}-description`}
+            data-testid={`${text
+              .toLowerCase()
+              .replace(/\s+/g, '-')}-description`}
           >
             {description}
           </p>