feat: update tests and add readme

wopehq · Mar 16, 2024 · 4f11e5b · 4f11e5b
1 parent afcb76b
commit 4f11e5b
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,66 @@
 
 Muninn Detect is an assistant designed to test whether an HTML element adheres to specified rules. This allows you to define detect rules to identify HTML elements in bulk.
 
+### Usage
+
+Sample HTML:
+
+```html
+<body>
+  <div class="blocks">
+    <div class="block">
+      <div class="title">Title</div>
+      <div class="description">Description</div>
+    </div>
+    <div class="block-video">
+      <div class="title">Title</div>
+      <div class="video-wrapper">...</div>
+    </div>
+    <div class="block-gallery">
+      <div class="title">Title</div>
+      <div class="image-gallery">...</div>
+    </div>
+    <div class="block hidden">
+      <div class="title">Title</div>
+      <div class="description">Description</div>
+    </div>
+  </div>
+</body>
+```
+
+Example:
+
+```js
+import { load } from 'cheerio';
+import { detect } from 'muninn-detect';
+
+const $ = load(/* html content */);
+
+// Get blocks
+const blockElements = $('.blocks > div').toArray();
+
+// Define detect rules
+const basicBlockDetect = {
+  hasClassName: 'block',
+  withInnerSelector: '.description'
+};
+
+const videoBlockDetect = {
+  exactMatchClassName: 'block-video',
+  withInnerSelector: '.video-wrapper'
+};
+
+const imageBlockDetect = {
+  exactMatchClassName: 'block-gallery',
+  withInnerSelector: '.image-gallery'
+};
+
+// Find a specific block among the stack of blocks
+const imageBlock = blockElements.find((el, index) =>
+  detect(el, imageBlockDetect)
+);
+```
+
 ## License
 
 Distributed under the MIT License. See LICENSE for more information.
diff --git a/src/detect.spec.ts b/src/detect.spec.ts
@@ -4,27 +4,33 @@ import { DetectConfig, detect } from './detect';
 
 describe('detect', () => {
   const SAMPLE_HTML = `
-        <body>
-            <div class="blocks">
-                <div class="unblock">Unblock</div>
-                <div class="parent">
-                    <div class="first-child">First Child</div>
-                    <div class="second-child">Second Child</div>
-                </div>
-            </div>
-        </body>
-    `;
+    <body>
+      <div class="blocks">
+        <div class="block">
+          <div class="title">Title</div>
+          <div class="description">Description</div>
+        </div>
+        <div class="block">
+          <div class="title">Title</div>
+          <div class="video-wrapper">...</div>
+        </div>
+        <div class="block block-gallery">
+          <div class="title">Title</div>
+          <div class="image-gallery">...</div>
+        </div>
+        <div class="block">
+          <div class="title">Title</div>
+          <div class="description">Description</div>
+        </div>
+      </div>
+    </body>`;
 
   const $ = load(SAMPLE_HTML);
 
   it('should return true if the element matches any of the configs in oneOf', () => {
-    const el = $('.parent');
+    const el = $('.block');
     const config: DetectConfig = {
-      oneOf: [
-        { hasClassName: 'parent' },
-        { withInnerSelector: '.first-child' },
-        { exactMatchClassName: 'non-existent-class' }
-      ]
+      oneOf: [{ hasClassName: 'block' }, { withInnerSelector: '.title' }]
     };
 
     const result = detect(el, config);
@@ -33,7 +39,7 @@ describe('detect', () => {
   });
 
   it('should return false if the element does not match any of the configs in oneOf', () => {
-    const el = $('.parent');
+    const el = $('.block');
     const config: DetectConfig = {
       oneOf: [
         { hasClassName: 'non-existent-class' },
@@ -48,9 +54,9 @@ describe('detect', () => {
   });
 
   it('should return true if the element matches the config with inner selector', () => {
-    const el = $('.parent');
+    const el = $('.block');
     const config: DetectConfig = {
-      withInnerSelector: '.first-child'
+      withInnerSelector: '.title'
     };
 
     const result = detect(el, config);
@@ -59,7 +65,7 @@ describe('detect', () => {
   });
 
   it('should return false if the element does not match the config with inner selector', () => {
-    const el = $('.parent');
+    const el = $('.block');
     const config: DetectConfig = {
       withInnerSelector: '.non-existent-child'
     };
@@ -70,9 +76,9 @@ describe('detect', () => {
   });
 
   it('should return true if the element matches the config with exact match class name', () => {
-    const el = $('.parent');
+    const el = $('.block');
     const config: DetectConfig = {
-      exactMatchClassName: 'parent'
+      exactMatchClassName: 'block'
     };
 
     const result = detect(el, config);
@@ -81,7 +87,7 @@ describe('detect', () => {
   });
 
   it('should return false if the element does not match the config with exact match class name', () => {
-    const el = $('.parent');
+    const el = $('.block');
     const config: DetectConfig = {
       exactMatchClassName: 'non-existent-class'
     };
@@ -92,9 +98,9 @@ describe('detect', () => {
   });
 
   it('should return true if the element matches the config with custom function', () => {
-    const el = $('.parent');
+    const el = $('.block');
     const config: DetectConfig = {
-      custom: (el) => el.find('.first-child').length > 0
+      custom: (el) => el.find('.title').length > 0
     };
 
     const result = detect(el, config);
@@ -103,7 +109,7 @@ describe('detect', () => {
   });
 
   it('should return false if the element does not match the config with custom function', () => {
-    const el = $('.parent');
+    const el = $('.block');
     const config: DetectConfig = {
       custom: (el) => el.find('.non-existent-child').length > 0
     };
@@ -114,9 +120,9 @@ describe('detect', () => {
   });
 
   it('should return true if the element has the specified class name', () => {
-    const el = $('.parent');
+    const el = $('.block');
     const config: DetectConfig = {
-      hasClassName: 'parent'
+      hasClassName: 'block'
     };
 
     const result = detect(el, config);
@@ -125,7 +131,7 @@ describe('detect', () => {
   });
 
   it('should return false if the element does not have the specified class name', () => {
-    const el = $('.parent');
+    const el = $('.block');
     const config: DetectConfig = {
       hasClassName: 'non-existent-class'
     };
@@ -136,9 +142,9 @@ describe('detect', () => {
   });
 
   it('should return false if the element does not have all the specified class names', () => {
-    const el = $('.parent');
+    const el = $('.block');
     const config: DetectConfig = {
-      hasClassNames: ['parent', 'non-existent-class']
+      hasClassNames: ['block', 'non-existent-class']
     };
 
     const result = detect(el, config);