test: add theme

packages/pixel-profile/src/theme.ts

@@ -7,9 +7,13 @@ type Theme = Record<
 >
 
 export const THEME: Theme = {
-  monica: {
+  summer: {
     color: 'white',
-    background: 'linear-gradient(to bottom right, #0c7bb3, #f2bae8)'
+    background: 'linear-gradient(to bottom right, #74dcc4, #4597e9)'
+  },
+  blue_chill: {
+    color: 'white',
+    background: 'linear-gradient(to bottom right, #5580eb, #2aeeff)'
   },
   rainbow: {
     color: 'white',
@@ -19,13 +23,9 @@ export const THEME: Theme = {
       '#79c300 57.12%, #1961ae 57.12%, #1961ae 71.4%, #31137c 71.4%, ' +
       '#31137c 85.24%, #61007d 85.24%, #61007d 100%)'
   },
-  summer: {
-    color: 'white',
-    background: 'linear-gradient(to bottom right, #74dcc4, #4597e9)'
-  },
-  blue_chill: {
+  monica: {
     color: 'white',
-    background: 'linear-gradient(to bottom right, #5580eb, #2aeeff)'
+    background: 'linear-gradient(to bottom right, #0c7bb3, #f2bae8)'
   }
 }
 

packages/pixel-profile/test/theme.test.ts

@@ -0,0 +1,68 @@
+import { renderStats } from '../src'
+// @ts-expect-error ...
+import { toMatchImageSnapshot } from 'jest-image-snapshot'
+import { describe, expect, it } from 'vitest'
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace jest {
+    interface Matchers<R> {
+      toMatchImageSnapshot(): R
+    }
+  }
+}
+
+expect.extend({ toMatchImageSnapshot })
+
+const stats = {
+  name: 'User Name',
+  username: 'username',
+  totalStars: 999,
+  totalCommits: 99999,
+  totalIssues: 99,
+  totalPRs: 9,
+  contributedTo: 9999,
+  avatarUrl: '',
+  rank: {
+    level: 'S',
+    percentile: 0,
+    score: 0
+  }
+}
+
+describe('Theme', () => {
+  it('Render card with summer theme and custom color', async () => {
+    const png = await renderStats(stats, { theme: 'summer', color: 'yellow' })
+    expect(png).toMatchImageSnapshot()
+  })
+
+  it('Render card with summer theme and custom background', async () => {
+    const png = await renderStats(stats, { theme: 'summer', background: 'black' })
+    expect(png).toMatchImageSnapshot()
+  })
+
+  it('Render card with summer theme and screen effect', async () => {
+    const png = await renderStats(stats, { theme: 'summer', screenEffect: true })
+    expect(png).toMatchImageSnapshot()
+  })
+
+  it('Render card with summer theme', async () => {
+    const png = await renderStats(stats, { theme: 'summer' })
+    expect(png).toMatchImageSnapshot()
+  })
+
+  it('Render card with blue_chill theme', async () => {
+    const png = await renderStats(stats, { theme: 'blue_chill' })
+    expect(png).toMatchImageSnapshot()
+  })
+
+  it('Render card with rainbow theme', async () => {
+    const png = await renderStats(stats, { theme: 'rainbow' })
+    expect(png).toMatchImageSnapshot()
+  })
+
+  it('Render card with monica theme', async () => {
+    const png = await renderStats(stats, { theme: 'monica' })
+    expect(png).toMatchImageSnapshot()
+  })
+})