Add test

Author: Michael Vurchio

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 # 1.0.0 
 - Ability to use the same class multiple time
-- use with svelte loader Ok
+- Use with svelte loader Ok
 
 # 0.1.1
 - Fix modules exports

example/webpack/Time.svelte

@@ -2,6 +2,7 @@
   import { onDestroy } from 'svelte';
 
   let date = new Date();
+  const active = true;
   $: time = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
   
   const interval = setInterval(() => date = new Date(), 1000);

package-lock.json

@@ -14,6 +14,9 @@
   "author": {
     "name": "micantoine"
   },
+  "scripts": {
+    "test": "jest"
+  },
   "license": "MIT",
   "main": "index.js",
   "directories": {
@@ -26,6 +29,10 @@
   "dependencies": {
     "loader-utils": "^2.0.0"
   },
+  "devDependencies": {
+    "jest": "^26.0.1",
+    "svelte": "^3.22.3"
+  },
   "peerDependencies": {
     "svelte": ">1.44.0"
   },

package.json

@@ -0,0 +1,16 @@
+const svelte = require('svelte/compiler');
+const cssModules = require('../index.js');
+
+module.exports = async ({ source, localIdentName }) => {
+ const { code } = await svelte.preprocess(
+    source,
+    [
+      cssModules({
+        localIdentName,
+      })
+    ],
+    { filename : 'App.svelte' }
+  );
+
+  return code;
+};

test/compiler.js

@@ -0,0 +1,12 @@
+const compiler = require('./compiler.js');
+
+const source = '<style>.red { color: red; }</style>\n<span class="$style.blue">Blue</span>';
+
+test('Remove unused CSS Modules from HTML attribute', async () => {
+  const output = await compiler({
+    source,
+    localIdentName: '[local]-123456',
+  });
+
+  expect(output).toBe('<style>.red { color: red; }</style>\n<span class="">Blue</span>');
+});

test/remove.test.js

@@ -0,0 +1,28 @@
+const compiler = require('./compiler.js');
+
+const source = '<style>.red { color: red; }</style>\n<span class="$style.red">Red</span>';
+
+test('Generate CSS Modules from HTML attributes, Replace CSS className', async () => {
+  const output = await compiler({
+    source,
+    localIdentName: '[local]-123456',
+  });
+
+  expect(output).toBe('<style>:global(.red-123456) { color: red; }</style>\n<span class="red-123456">Red</span>');
+});
+
+test('Avoid generated class to start with a non character', async () => {
+  const output = await compiler({
+    source,
+    localIdentName: '1[local]',
+  });
+  expect(output).toBe('<style>:global(._1red) { color: red; }</style>\n<span class="_1red">Red</span>');
+});
+
+test('Avoid generated class to end with a hyphen', async () => {
+  const output = await compiler({
+    source,
+    localIdentName: '[local]-',
+  });
+  expect(output).toBe('<style>:global(.red) { color: red; }</style>\n<span class="red">Red</span>');
+});

test/replace.test.js

@@ -0,0 +1,28 @@
+const compiler = require('./compiler.js');
+
+const source =
+`<style>
+  .red { color: red; }
+  .red-crimson { color: crimson; }
+  .redMajenta { color: magenta; }
+</style>
+<span class="$style.red">Red</span>
+<span class="$style.red-crimson">Crimson</span>
+<span class="$style.redMajenta">Majenta</span>`;
+
+test('Target proper className from lookalike classNames', async () => {
+  const output = await compiler({
+    source,
+    localIdentName: '[local]-123',
+  });
+
+  expect(output).toBe(
+`<style>
+  :global(.red-123) { color: red; }
+  :global(.red-crimson-123) { color: crimson; }
+  :global(.redMajenta-123) { color: magenta; }
+</style>
+<span class="red-123">Red</span>
+<span class="red-crimson-123">Crimson</span>
+<span class="redMajenta-123">Majenta</span>`);
+});

test/target.test.js

@@ -0,0 +1,23 @@
+const compiler = require('./compiler.js');
+
+const source =
+`<style>.red { color: red; }</style>
+<span
+  class:$style.red={true}
+  class="{true ? '$style.red' : ''}">Red</span>
+`;
+
+test('Generate CSS Modules className on class binding', async () => {
+  const output = await compiler({
+    source,
+    localIdentName: '[local]-123456',
+  });
+
+  expect(output).toBe(
+`<style>:global(.red-123456) { color: red; }</style>
+<span
+  class:red-123456={true}
+  class="{true ? 'red-123456' : ''}">Red</span>
+`);
+});
+