Add more e2e tests

CONTRIBUTING.md

@@ -53,14 +53,13 @@ All examples are located in the `examples` directory of this repo.
 
 For e2e testing we use [Playwright](https://playwright.dev/).
 
-Run the following commands in the `e2e` directory to run the tests.
-
-1. Run `npm install` to install the playwright dependencies and browsers
-2. Run `npm run e2e` to run the playwright tests
-
-Consult their documentation for more help on setting up your environment.
-
-> If you use WSL, you might find [this comment](https://github.com/microsoft/playwright/issues/13533#issuecomment-1098391029) to be helpful
+1. Run `npm install` to install dependencies
+2. Run `npm run build` to build the plugin
+3. Change directories to the `e2e` directory
+4. Run `npm install` to install the playwright dependencies and browsers
+   - This step should handle setting up playwright but if this isn't working, their [documentation](https://playwright.dev/python/docs/intro) for more help on setting up your environment
+   - If you use WSL, you might find [this comment](https://github.com/microsoft/playwright/issues/13533#issuecomment-1098391029) to be helpful
+5. Run `npm run e2e` to run the playwright tests
 
 ## Commit message conventions
 

e2e/test_repos/test.ts

@@ -4,13 +4,32 @@ import { openWithConfig } from './repos/create-react-app'
 
 export interface TestRepo {
   openWithConfig(config: MultiThemePluginOptions): Promise<void>
-  setClassOnRoot(theme: string): Promise<void>
+  setClassOnRoot(className: string): Promise<void>
+  removeClassOnRoot(className: string): Promise<void>
   setAttributeOnRoot(key: string, value: string): Promise<void>
 }
 
 export const test = base.extend<{ testRepo: TestRepo }>({
   testRepo: async ({ page }, use, testInfo) => {
     let stop: (() => void) | undefined
+    const attributesInputLocator = page.getByRole('textbox', {
+      name: /attributes/i
+    })
+    const attributes = {
+      async get(): Promise<Record<string, string>> {
+        return JSON.parse(await attributesInputLocator.inputValue())
+      },
+      async patch(updates: Record<string, string>): Promise<void> {
+        const attributes = await this.get()
+        await attributesInputLocator.fill(
+          JSON.stringify({
+            ...attributes,
+            ...updates
+          })
+        )
+      }
+    }
+
     const testRepo: TestRepo = {
       async openWithConfig(config) {
         if (stop) {
@@ -23,20 +42,33 @@ export const test = base.extend<{ testRepo: TestRepo }>({
         stop = _stop
         await page.goto(url)
       },
-      async setClassOnRoot(theme) {
-        await this.setAttributeOnRoot('className', theme)
+      async setClassOnRoot(newClass) {
+        const { className } = await attributes.get()
+        const classes = (className ?? '').split(' ')
+        if (!classes.includes(newClass)) {
+          await this.setAttributeOnRoot(
+            'className',
+            [...classes, newClass].join(' ').trim()
+          )
+        }
+      },
+      async removeClassOnRoot(classToRemove) {
+        const { className } = await attributes.get()
+        const classes = (className ?? '').split(' ')
+        if (classes.includes(classToRemove)) {
+          await this.setAttributeOnRoot(
+            'className',
+            classes
+              .filter(x => x !== classToRemove)
+              .join(' ')
+              .trim()
+          )
+        }
       },
       async setAttributeOnRoot(key, value) {
-        const attributesInputLocator = page.getByRole('textbox', {
-          name: /attributes/i
+        await attributes.patch({
+          [key]: value
         })
-        const attributes = JSON.parse(await attributesInputLocator.inputValue())
-        await attributesInputLocator.fill(
-          JSON.stringify({
-            ...attributes,
-            [key]: value
-          })
-        )
       }
     }
     await use(testRepo)

e2e/tests/default.spec.ts → e2e/tests/defaultTheme.spec.ts

@@ -1,7 +1,10 @@
 import { expect } from '@playwright/test'
 import { test } from '../test_repos/test'
 
-test('displays the default theme by default', async ({ page, testRepo }) => {
+test('displays the default theme when no theme enabled', async ({
+  page,
+  testRepo
+}) => {
   await testRepo.openWithConfig({
     defaultTheme: {
       extend: {

e2e/tests/mediaQuery.spec.ts

@@ -0,0 +1,60 @@
+import { expect } from '@playwright/test'
+import { test } from '../test_repos/test'
+
+test('can enable a theme using a media query', async ({ page, testRepo }) => {
+  await testRepo.openWithConfig({
+    defaultTheme: {
+      extend: {
+        colors: {
+          primary: 'blue'
+        }
+      }
+    },
+    themes: [
+      {
+        name: 'darkTheme',
+        mediaQuery: '@media (prefers-color-scheme: dark)',
+        extend: {
+          colors: {
+            primary: 'red'
+          }
+        }
+      }
+    ]
+  })
+
+  await page.emulateMedia({ colorScheme: 'dark' })
+
+  await expect(page).toHaveScreenshot()
+})
+
+// TODO fix this test's snapshots
+test('cant enable a theme using the theme name as a class if a media query provided', async ({
+  page,
+  testRepo
+}) => {
+  await testRepo.openWithConfig({
+    defaultTheme: {
+      extend: {
+        colors: {
+          primary: 'blue'
+        }
+      }
+    },
+    themes: [
+      {
+        name: 'darkTheme',
+        mediaQuery: '@media (prefers-color-scheme: dark)',
+        extend: {
+          colors: {
+            primary: 'red'
+          }
+        }
+      }
+    ]
+  })
+
+  await testRepo.setClassOnRoot('darkTheme')
+
+  await expect(page).toHaveScreenshot()
+})

e2e/tests/selectors.spec.ts

@@ -27,7 +27,37 @@ test('can enable a theme using the theme name as a class if no selectors explici
 
   await testRepo.setClassOnRoot('darkTheme')
 
-  await expect(page).toHaveScreenshot({})
+  await expect(page).toHaveScreenshot()
+})
+
+test('cant enable a theme using the theme name as a class if any selectors provided', async ({
+  page,
+  testRepo
+}) => {
+  await testRepo.openWithConfig({
+    defaultTheme: {
+      extend: {
+        colors: {
+          primary: 'blue'
+        }
+      }
+    },
+    themes: [
+      {
+        name: 'darkTheme',
+        selectors: ['.dark-mode'],
+        extend: {
+          colors: {
+            primary: 'red'
+          }
+        }
+      }
+    ]
+  })
+
+  await testRepo.setClassOnRoot('darkTheme')
+
+  await expect(page).toHaveScreenshot()
 })
 
 test('can enable the theme with a custom selector', async ({
@@ -89,6 +119,10 @@ test('can enable the theme with multiple selectors', async ({
 
   await expect(page).toHaveScreenshot()
 
+  await testRepo.removeClassOnRoot('dark-mode')
+
+  await expect(page).toHaveScreenshot()
+
   await testRepo.setAttributeOnRoot('data-theme', 'dark')
 
   await expect(page).toHaveScreenshot()