test: update tests

Jackardios · Jan 31, 2023 · 2993468 · 2993468
1 parent 51bf52f
commit 2993468
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 16 deletions.
diff --git a/test/TailwindConverter.spec.ts b/test/TailwindConverter.spec.ts
@@ -1,12 +1,28 @@
-import { TailwindConverter } from '../src/TailwindConverter';
+import {
+  TailwindConverter,
+  TailwindConverterConfig,
+} from '../src/TailwindConverter';
 import fs from 'fs';
 import path from 'path';
 
-const inputCSS: string = fs
+const complexCSS: string = fs
   .readFileSync(path.resolve(__dirname, './fixtures/input.css'))
   .toString();
 
-function createTailwindConverter() {
+const simpleCSS = `
+.foo {
+  text-align: center;
+  font-size: 12px;
+  &:hover {
+    font-size: 16px;
+  }
+  @media screen and (min-width: 768px) {
+    font-weight: 600;
+  }
+}
+`;
+
+function createTailwindConverter(config?: Partial<TailwindConverterConfig>) {
   return new TailwindConverter({
     remInPx: 16,
     postCSSPlugins: [require('postcss-nested')],
@@ -34,13 +50,32 @@ function createTailwindConverter() {
         },
       },
     },
+    ...(config || {}),
   });
 }
 
 describe('TailwindConverter', () => {
-  test('converting css string returns tailwind nodes', async () => {
+  it('should convert the simple CSS', async () => {
+    const converter = createTailwindConverter();
+    const converted = await converter.convertCSS(simpleCSS);
+
+    expect(converted.convertedRoot.toString()).toMatchSnapshot();
+    expect(converted.nodes).toEqual([
+      {
+        rule: expect.objectContaining({ selector: '.foo' }),
+        tailwindClasses: [
+          'text-center',
+          'text-xs',
+          'hover:text-base',
+          'md:font-semibold',
+        ],
+      },
+    ]);
+  });
+
+  it('should convert the complex CSS', async () => {
     const converter = createTailwindConverter();
-    const converted = await converter.convertCSS(inputCSS);
+    const converted = await converter.convertCSS(complexCSS);
 
     expect(converted.convertedRoot.toString()).toMatchSnapshot();
     expect(converted.nodes).toEqual([
@@ -354,15 +389,15 @@ describe('TailwindConverter', () => {
     ]);
   });
 
-  test('converting empty string', async () => {
+  it('should return an empty result when converting an empty string', async () => {
     const converter = createTailwindConverter();
     const converted = await converter.convertCSS('');
 
     expect(converted.convertedRoot.toString()).toEqual('');
     expect(converted.nodes).toEqual([]);
   });
 
-  test('converting css part string', async () => {
+  it('should convert the css part string', async () => {
     const converter = createTailwindConverter();
     const converted = await converter.convertCSS(
       '{ text-align: center; font-size: 12px; &:hover { font-size: 16px; } @media screen and (min-width: 768px) { font-weight: 600; } }'
@@ -381,7 +416,7 @@ describe('TailwindConverter', () => {
     ]);
   });
 
-  test('converting invalid css string throws error', async () => {
+  it('should throw an error when converting invalid css string', async () => {
     const converter = createTailwindConverter();
     await expect(
       converter.convertCSS(

diff --git a/test/__snapshots__/TailwindConverter.spec.ts.snap b/test/__snapshots__/TailwindConverter.spec.ts.snap
@@ -1,15 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TailwindConverter converting css part string 1`] = `
-"{
-    @apply text-center text-xs hover:text-base md:font-semibold;
-}"
-`;
-
-exports[`TailwindConverter converting css string returns tailwind nodes 1`] = `
+exports[`TailwindConverter should convert the complex CSS 1`] = `
 "@charset \\"UTF-8\\";
 .foo {
-  @apply accent-custom-color-gold content-center items-start animate-spin appearance-none aspect-video content-center content-end after:content-['*'] after:select-text after:align-text-top after:origin-top hidden:delay-150 hidden:duration-200 hidden:transition hidden:ease-in;
+  @apply accent-custom-color-gold content-center items-start animate-spin appearance-none aspect-video content-center content-end portrait:text-[black] after:content-['*'] after:select-text after:align-text-top after:origin-top hidden:delay-150 hidden:duration-200 hidden:transition hidden:ease-in;
   --some-size: 12px;
   --some-color: #333333;
 
@@ -134,3 +128,16 @@ div > [data-zoo] {
 }
 "
 `;
+
+exports[`TailwindConverter should convert the css part string 1`] = `
+"{
+    @apply text-center text-xs hover:text-base md:font-semibold;
+}"
+`;
+
+exports[`TailwindConverter should convert the simple CSS 1`] = `
+".foo {
+    @apply text-center text-xs hover:text-base md:font-semibold;
+}
+"
+`;