Merge pull request #310 from codesnippetspro/fix/toggle-style

fix: toggle style issue

Author: imantsk

src/css/manage.scss

@@ -7,6 +7,7 @@
 @use 'common/theme';
 @use 'common/badges';
 @use 'common/switch';
+@use 'common/direction';
 @use 'common/select';
 @use 'manage/cloud';
 

tests/e2e/code-snippets-list.spec.ts

@@ -28,13 +28,19 @@ test.describe('Code Snippets List Page Actions', () => {
 
 		await expect(toggleSwitch).toHaveAttribute('title', 'Deactivate')
 
+		// Check that the toggle is rendered to the right (active)
+		await expect(snippetRow).toHaveScreenshot('snippet-row-active.png')
+
 		await toggleSwitch.click()
 		await page.waitForLoadState('networkidle')
 
 		const updatedRow = page.locator(`tr:has-text("${TEST_SNIPPET_NAME}")`)
 		const updatedToggle = updatedRow.locator('a.snippet-activation-switch')
 		await expect(updatedToggle).toHaveAttribute('title', 'Activate')
 
+		// Check that the toggle is rendered to the left (inactive)
+		await expect(updatedRow).toHaveScreenshot('snippet-row-inactive.png')
+
 		await updatedToggle.click()
 		await page.waitForLoadState('networkidle')
 

tests/e2e/code-snippets-list.spec.ts-snapshots/snippet-row-active-linux.png

@@ -10,6 +10,7 @@ const WORKERS = 1
  */
 export default defineConfig({
 	testDir: '../e2e',
+	snapshotPathTemplate: '{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}-{platform}{ext}',
 	fullyParallel: true,
 	forbidOnly: !!process.env.CI,
 	retries: process.env.CI ? RETRIES : 0,
@@ -66,6 +67,7 @@ export default defineConfig({
 	timeout: 30000,
 
 	expect: {
-		timeout: 10000
+		timeout: 10000,
+		toHaveScreenshot: { maxDiffPixels: 100 }
 	}
 })