Inline test resources

tailwindlabs · Feb 25, 2022 · d9bc25d · d9bc25d
1 parent d3e754a
commit d9bc25d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 105 deletions.
diff --git a/tests/important-modifier.test.css b/tests/important-modifier.test.css
diff --git a/tests/important-modifier.test.html b/tests/important-modifier.test.html
diff --git a/tests/important-modifier.test.js b/tests/important-modifier.test.js
@@ -1,26 +1,75 @@
-import fs from 'fs'
-import path from 'path'
-
-import { run, css } from './util/run'
+import { run, css, html } from './util/run'
 
 test('important modifier', () => {
   let config = {
     important: false,
     darkMode: 'class',
-    content: [path.resolve(__dirname, './important-modifier.test.html')],
+    content: [
+      {
+        raw: html`
+          <div class="!container"></div>
+          <div class="!font-bold"></div>
+          <div class="hover:!text-center"></div>
+          <div class="lg:!opacity-50"></div>
+          <div class="xl:focus:disabled:!float-right"></div>
+          <div class="!custom-parent-5"></div>
+        `,
+      },
+    ],
     corePlugins: { preflight: false },
   }
 
   let input = css`
-    @tailwind base;
     @tailwind components;
     @tailwind utilities;
   `
 
   return run(input, config).then((result) => {
-    let expectedPath = path.resolve(__dirname, './important-modifier.test.css')
-    let expected = fs.readFileSync(expectedPath, 'utf8')
-
-    expect(result.css).toMatchFormattedCss(expected)
+    expect(result.css).toMatchFormattedCss(css`
+      .\!container {
+        width: 100% !important;
+      }
+      @media (min-width: 640px) {
+        .\!container {
+          max-width: 640px !important;
+        }
+      }
+      @media (min-width: 768px) {
+        .\!container {
+          max-width: 768px !important;
+        }
+      }
+      @media (min-width: 1024px) {
+        .\!container {
+          max-width: 1024px !important;
+        }
+      }
+      @media (min-width: 1280px) {
+        .\!container {
+          max-width: 1280px !important;
+        }
+      }
+      @media (min-width: 1536px) {
+        .\!container {
+          max-width: 1536px !important;
+        }
+      }
+      .\!font-bold {
+        font-weight: 700 !important;
+      }
+      .hover\:\!text-center:hover {
+        text-align: center !important;
+      }
+      @media (min-width: 1024px) {
+        .lg\:\!opacity-50 {
+          opacity: 0.5 !important;
+        }
+      }
+      @media (min-width: 1280px) {
+        .xl\:focus\:disabled\:\!float-right:disabled:focus {
+          float: right !important;
+        }
+      }
+    `)
   })
 })