test: add tailwind escape test (withastro#2816)

hlynursmari1 · Mar 17, 2022 · 915ab92 · 915ab92
1 parent 4cfbd40
commit 915ab92
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/packages/astro/test/fixtures/tailwindcss/src/components/Complex.astro b/packages/astro/test/fixtures/tailwindcss/src/components/Complex.astro
@@ -0,0 +1 @@
+<div id="complex" class="w-10/12 2xl:w-[80%]"></div>
diff --git a/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro b/packages/astro/test/fixtures/tailwindcss/src/pages/index.astro
@@ -1,6 +1,8 @@
 ---
 // Component Imports
 import Button from '../components/Button.astro';
+import Complex from '../components/Complex.astro';
+
 import "../styles/global.css";
 
 // Full Astro Component Syntax:
@@ -16,5 +18,6 @@ import "../styles/global.css";
 
 	<body>
 		<Button>I’m a Tailwind Button!</Button>
+		<Complex />
 	</body>
 </html>
diff --git a/packages/astro/test/tailwindcss.test.js b/packages/astro/test/tailwindcss.test.js
@@ -54,6 +54,13 @@ describe('Tailwind', () => {
 			expect(button.hasClass('lg:py-3'), 'responsive class').to.be.true;
 			expect(button.hasClass('font-[900]', 'arbitrary value')).to.be.true;
 		});
+
+		it('handles complex classes in HTML', async () => {
+			const button = $('#complex');
+
+			expect(button.hasClass('w-10/12'), 'solidus').to.be.true;
+			expect(button.hasClass('2xl:w-[80%]'), 'complex class').to.be.true;
+		});
 	});
 
 	// with "build" handling CSS checking, the dev tests are mostly testing the paths resolve in dev
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<div id="complex" class="w-10/12 2xl:w-[80%]"></div>