chore: add playwright

.github/workflows/production-deployment.yml

@@ -45,6 +45,15 @@ jobs:
       - name: Run tests
         run: pnpm test
 
+      - name: Install playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run build
+        run: pnpm build
+
+      - name: Run tests
+        run: pnpm test:e2e
+
       # - name: SimpleLocalize Download
       #   uses: simplelocalize/download@latest
       #   with:

.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+test-results
 
 # next.js
 /.next/
@@ -43,3 +44,5 @@ public/sitemap-0.xml
 
 # Simple Localize
 simplelocalize.yml
+
+

e2e/about.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test'
+
+test('should navigate to the about page', async ({ page }) => {
+  // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
+  await page.goto('/')
+
+  // Find an element with the text 'About Page' and click on it
+  await page.click('text=About')
+  // The new url should be "/about" (baseURL is used there)
+
+  await expect(page).toHaveURL('/about')
+
+  // The new page should contain an h1 with "About Page"
+  await expect(page.locator('h1')).toContainText('About me')
+})

jest.config.js

@@ -9,4 +9,13 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
+  testRegex: '(/__tests__/.*|\\.(test))\\.(ts|tsx)$',
+  collectCoverage: false,
+  coverageReporters: ['lcov', 'text', 'html'],
+  collectCoverageFrom: ['./src/**'],
+  coverageThreshold: {
+    global: {
+      lines: 80,
+    },
+  },
 }

package.json

@@ -16,7 +16,9 @@
     "prepare": "husky install",
     "publish": "node scripts/publish-blog.js",
     "start": "next start",
-    "test": "jest"
+    "test": "jest",
+    "test:coverate": "pnpm test -- --coverage",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@giscus/react": "^2.2.8",
@@ -51,6 +53,7 @@
     "@nick22985/wakatime-api": "^1.0.2",
     "@octokit/graphql": "^5.0.6",
     "@octokit/graphql-schema": "^14.9.1",
+    "@playwright/test": "^1.35.0",
     "@sentry/nextjs": "7.54.0",
     "@sentry/node": "7.54.0",
     "@svgr/webpack": "6.5.1",

playwright.config.ts

@@ -0,0 +1,79 @@
+import { devices, PlaywrightTestConfig } from '@playwright/test'
+import path from 'path'
+
+// Use process.env.PORT by default and fallback to port 3000
+const PORT = process.env.PORT || 3000
+
+// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
+const baseURL = `http://localhost:${PORT}`
+
+// Reference: https://playwright.dev/docs/test-configuration
+const config: PlaywrightTestConfig = {
+  // Timeout per test
+  timeout: 30 * 1000,
+  // Test directory
+  testDir: path.join(__dirname, 'e2e'),
+  // If a test fails, retry it additional 2 times
+  retries: 2,
+  // Artifacts folder where screenshots, videos, and traces are stored.
+  outputDir: 'test-results/',
+
+  // Run your local dev server before starting the tests:
+  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
+  webServer: {
+    command: 'pnpm dev',
+    url: baseURL,
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+  },
+
+  use: {
+    // Use baseURL so to make navigations relative.
+    // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
+    baseURL,
+
+    // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
+    // More information: https://playwright.dev/docs/trace-viewer
+    trace: 'retry-with-trace',
+
+    // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
+    // contextOptions: {
+    //   ignoreHTTPSErrors: true,
+    // },
+  },
+
+  projects: [
+    {
+      name: 'Desktop Chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+    // {
+    //   name: 'Desktop Firefox',
+    //   use: {
+    //     ...devices['Desktop Firefox'],
+    //   },
+    // },
+    {
+      name: 'Desktop Safari',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+    // Test against mobile viewports.
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 13'],
+    //   },
+    // },
+  ],
+}
+export default config

public/rss/feed.xml

@@ -4,7 +4,7 @@
         <title>The David Dias | Front-End Developer, podcaster &amp; content creator</title>
         <link>https://thedaviddias.dev</link>
         <description>Hey, I'm David Dias! Front-End Developer based in Toronto/Canada. I love talking about code, technology, expatriation and life.</description>
-        <lastBuildDate>Tue, 13 Jun 2023 02:14:45 GMT</lastBuildDate>
+        <lastBuildDate>Tue, 13 Jun 2023 03:32:40 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en-US</language>
@@ -173,7 +173,7 @@ c59.905-109.171,178.724-165.463,295.204-151.033v145.035L512,253z"></path></svg><
             <author>thedaviddias@gmail.com (David Dias)</author>
         </item>
         <item>
-            <title><![CDATA[Raycast Applications That Make Me a Super Developer!]]></title>
+            <title><![CDATA[Raycast Applications That Will Make You a Super Developer!]]></title>
             <link>https://thedaviddias.dev/articles/raycast-applications-super-developer</link>
             <guid>https://thedaviddias.dev/articles/raycast-applications-super-developer</guid>
             <pubDate>Mon, 12 Jun 2023 23:59:58 GMT</pubDate>

public/rss/fr/feed.xml

@@ -4,7 +4,7 @@
         <title>The David Dias | Développeur Front-End, podcasteur &amp; créateur de contenu</title>
         <link>https://thedaviddias.dev</link>
         <description>Salut toi! Je m'appele David Dias. Je suis développeur Front-End, podcasteur, créateur de contenu numérique passioné pour résoudre les problèmes digitaux et humains! J'aime rencontrer de nouvelles personnes, bâtir des communautées et parler de tech, d'expatriation et de web.</description>
-        <lastBuildDate>Tue, 13 Jun 2023 02:14:45 GMT</lastBuildDate>
+        <lastBuildDate>Tue, 13 Jun 2023 03:32:40 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>fr</language>

src/utils/get-article-posts/__tests__/datteSortDesc.test.ts

@@ -0,0 +1,23 @@
+import { dateSortDesc } from '../dateSortDesc'
+
+describe('dateSortDesc', () => {
+  it('should return -1 when the first date is greater than the second date', () => {
+    expect(dateSortDesc(3, 2)).toBe(-1)
+    expect(dateSortDesc(100, 50)).toBe(-1)
+    expect(dateSortDesc(new Date('2022-01-01').getTime(), new Date('2021-01-01').getTime())).toBe(
+      -1
+    )
+  })
+
+  it('should return 1 when the first date is less than the second date', () => {
+    expect(dateSortDesc(2, 3)).toBe(1)
+    expect(dateSortDesc(50, 100)).toBe(1)
+    expect(dateSortDesc(new Date('2021-01-01').getTime(), new Date('2022-01-01').getTime())).toBe(1)
+  })
+
+  it('should return 0 when both dates are equal', () => {
+    expect(dateSortDesc(3, 3)).toBe(0)
+    expect(dateSortDesc(100, 100)).toBe(0)
+    expect(dateSortDesc(new Date('2021-01-01').getTime(), new Date('2021-01-01').getTime())).toBe(0)
+  })
+})

wallaby.js

@@ -7,7 +7,6 @@ module.exports = (wallaby) => ({
   env: {
     type: 'node',
   },
-  files: ['src/**/*.ts?(x)'],
   compilers: {
     '**/*.ts?(x)': wallaby.compilers.typeScript(compilerOptions),
   },