Skip to content

Commit 98ae546

Browse files
rishichawdarishichawda
committed
refactor tests
Signed-off-by: rishichawda <[email protected]>
1 parent 767af5c commit 98ae546

File tree

18 files changed

+454
-71
lines changed

18 files changed

+454
-71
lines changed

‎__tests__/README.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Tests
2+
3+
## Test Structure
4+
5+
### Test Files
6+
7+
- **`index.ts`**: Fixture-based tests for plugin transformation
8+
- Tests each note type (note, tip, important, quote, bonus)
9+
- Compares actual output against known-good expected output
10+
- Uses `rehype-parse` to parse HTML into HAST for structural comparison
11+
- Strips position data for stable comparisons
12+
13+
- **`styles.ts`**: Tests for automatic style injection
14+
- Verifies styles are automatically injected
15+
- Ensures styles are injected only once per document
16+
- Validates CSS content is not empty
17+
18+
- **`generate-fixtures.ts`**: Utility script to regenerate expected outputs
19+
- Run when you make intentional changes to plugin output. MUST be done with caution.
20+
- Updates all fixture outputs to match current implementation
21+
22+
### Fixtures Directory (`__fixtures__/`)
23+
24+
Each note type has its own directory containing:
25+
26+
- `input.md`: Sample markdown input for that note type
27+
- `output.html`: Expected HTML output (auto-generated)
28+
29+
Structure:
30+
31+
```
32+
__fixtures__/
33+
├── note/
34+
│ ├── input.md
35+
│ └── output.html
36+
├── tip/
37+
│ ├── input.md
38+
│ └── output.html
39+
├── important/
40+
│ ├── input.md
41+
│ └── output.html
42+
├── quote/
43+
│ ├── input.md
44+
│ └── output.html
45+
└── bonus/
46+
├── input.md
47+
└── output.html
48+
```
49+
50+
## Running Tests
51+
52+
```bash
53+
# Run all tests
54+
yarn test
55+
56+
# Run fixture tests only
57+
yarn test:fixtures
58+
59+
# Run style injection tests only
60+
yarn test:styles
61+
62+
# Regenerate expected outputs after changes
63+
yarn generate:fixtures
64+
```
65+
66+
## Testing Approach
67+
68+
1. **Fixture-based testing**: Instead of inline test data, we use separate files for inputs and expected outputs
69+
2. **Structural comparison**: Uses `rehype-parse` to parse HTML into HAST (Hypertext Abstract Syntax Tree) for comparison
70+
3. **Position-agnostic**: Strips position data from HAST to avoid tests that break on whitespace changes
71+
4. **Separation of concerns**: Plugin transformation tests are separate from style injection tests
72+
73+
## Adding New Test Cases
74+
75+
To add a new test case:
76+
77+
1. Create a new directory in `__fixtures__/` (e.g., `__fixtures__/new-type/`)
78+
2. Add `input.md` with your test markdown
79+
3. Run `yarn generate:fixtures` to auto-generate the expected `output.html`
80+
4. Add the new type to the `FIXTURE_TYPES` array in `index.ts`

‎__tests__/__fixtures__/bonus/input.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> [!bonus]
2+
> This is a bonus block.
3+
> Extra info for advanced users.

‎__tests__/__fixtures__/bonus/output.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="remark-note bonus"><div class="remark-note-header"><span class="remark-note-icon"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<g stroke-linecap="round" stroke-linejoin="round"></g>
3+
<g>
4+
<path
5+
d="M9.23163 8.61762C7.26389 9.06284 6.28001 9.28545 6.04594 10.0382C5.81186 10.7909 6.4826 11.5753 7.82408 13.1439L8.17113 13.5498C8.55234 13.9955 8.74294 14.2184 8.82869 14.4942C8.91444 14.7699 8.88562 15.0673 8.82799 15.662L8.77552 16.2035C8.5727 18.2965 8.4713 19.343 9.08412 19.8082C9.69694 20.2734 10.6181 19.8492 12.4605 19.0009L12.9372 18.7815C13.4607 18.5404 13.7225 18.4199 14 18.4199C14.2775 18.4199 14.5393 18.5404 15.0628 18.7815L15.5395 19.0009C17.3819 19.8492 18.3031 20.2734 18.9159 19.8082C19.5287 19.343 19.4273 18.2965 19.2245 16.2035M20.1759 13.1439C21.5174 11.5753 22.1881 10.7909 21.9541 10.0382C21.72 9.28545 20.7361 9.06284 18.7684 8.61762L18.2593 8.50244C17.7001 8.37592 17.4205 8.31266 17.196 8.14225C16.9716 7.97183 16.8276 7.71355 16.5396 7.19699L16.2775 6.7267C15.2641 4.9089 14.7575 4 14 4C13.2425 4 12.7359 4.9089 11.7225 6.7267"
6+
stroke-width="1.5" stroke-linecap="round"></path>
7+
<path d="M2.08887 16C3.20445 15.121 4.68639 14.7971 6.08887 15.1257" stroke-width="1.5"
8+
stroke-linecap="round"></path>
9+
<path d="M2.08887 10.5C3.08887 10 3.37862 10.0605 4.08887 10" stroke-width="1.5"
10+
stroke-linecap="round"></path>
11+
<path d="M2 5.60867L2.20816 5.48676C4.41383 4.19506 6.75032 3.84687 8.95304 4.48161L9.16092 4.54152"
12+
stroke-width="1.5" stroke-linecap="round"></path>
13+
</g>
14+
</svg></span><span class="remark-note-title">bonus</span></div><div class="remark-note-content"><p>This is a bonus block.
15+
Extra info for advanced users.</p></div></div>

‎__tests__/__fixtures__/important/input.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> [!important]
2+
> This is an important block.
3+
> Pay attention to this!

‎__tests__/__fixtures__/important/output.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="remark-note important"><div class="remark-note-header"><span class="remark-note-icon"><svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
2+
<g stroke-width="0"></g>
3+
<g stroke-linecap="round" stroke-linejoin="round"></g>
4+
<g>
5+
<path fill="currentColor" d="M9,14a1.5,1.5,0,1,1,1.5068-1.5A1.5035,1.5035,0,0,1,9,14Z"></path>
6+
<path fill="currentColor" d="M9,2A7,7,0,1,1,2,9,7.0079,7.0079,0,0,1,9,2M9,0a9,9,0,1,0,9,9A9,9,0,0,0,9,0Z"></path>
7+
<path fill="currentColor" d="M10,4H8a1,1,0,0,0-.97,1.2425l1,4a1,1,0,0,0,1.94,0l1-4A1,1,0,0,0,10,4Zm0,2h0Z"></path>
8+
</g>
9+
</svg></span><span class="remark-note-title">important</span></div><div class="remark-note-content"><p>This is an important block.
10+
Pay attention to this!</p></div></div>

‎__tests__/__fixtures__/note/input.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> [!note]
2+
> This is a note block.
3+
> It supports **bold** and *italic* text.

‎__tests__/__fixtures__/note/output.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="remark-note note"><div class="remark-note-header"><span class="remark-note-icon"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<g stroke-linecap="round" stroke-linejoin="round" stroke-width="0.048">
3+
</g>
4+
<g>
5+
<path d="M8 2V5" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
6+
</path>
7+
<path d="M16 2V5" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
8+
</path>
9+
<path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z"
10+
stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
11+
</path>
12+
<path d="M8 11H16" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
13+
</path>
14+
<path d="M8 16H12" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
15+
</path>
16+
</g>
17+
</svg></span><span class="remark-note-title">note</span></div><div class="remark-note-content"><p>This is a note block.
18+
It supports <strong>bold</strong> and <em>italic</em> text.</p></div></div>

‎__tests__/__fixtures__/quote/input.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> [!quote]
2+
> This is a quote block.
3+
> "To be or not to be."

‎__tests__/__fixtures__/quote/output.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="remark-note quote"><div class="remark-note-header"><span class="remark-note-icon"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<g stroke-linecap="round" stroke-linejoin="round"></g>
3+
<g>
4+
<path
5+
d="M14 15V14C14 13.0681 14 12.6022 14.1522 12.2346C14.3552 11.7446 14.7446 11.3552 15.2346 11.1522C15.6022 11 16.0681 11 17 11H17.5C18.9045 11 19.6067 11 20.1111 11.3371C20.3295 11.483 20.517 11.6705 20.6629 11.8889C21 12.3933 21 13.0955 21 14.5V15.3431C21 16.1606 21 16.5694 20.8478 16.9369C20.6955 17.3045 20.4065 17.5935 19.8284 18.1716L19.2396 18.7604C18.7822 19.2178 18 18.8938 18 18.2469V17.8787C18 17.3934 17.6066 17 17.1213 17H16C14.8954 17 14 16.1046 14 15Z"
6+
stroke-width="1.5" stroke-linejoin="round"></path>
7+
<path
8+
d="M3 9V8C3 7.06812 3 6.60218 3.15224 6.23463C3.35523 5.74458 3.74458 5.35523 4.23463 5.15224C4.60218 5 5.06812 5 6 5H6.5C7.90446 5 8.60669 5 9.11114 5.33706C9.32952 5.48298 9.51702 5.67048 9.66294 5.88886C10 6.39331 10 7.09554 10 8.5V9.34315C10 10.1606 10 10.5694 9.84776 10.9369C9.69552 11.3045 9.40649 11.5935 8.82843 12.1716L8.23965 12.7604C7.78219 13.2178 7 12.8938 7 12.2469V11.8787C7 11.3934 6.6066 11 6.12132 11H5C3.89543 11 3 10.1046 3 9Z"
9+
stroke-width="1.5" stroke-linejoin="round"></path>
10+
</g>
11+
</svg></span><span class="remark-note-title">quote</span></div><div class="remark-note-content"><p>This is a quote block.
12+
"To be or not to be."</p></div></div>

‎__tests__/__fixtures__/tip/input.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> [!tip]
2+
> This is a tip block.
3+
> Use it for helpful advice.

0 commit comments

Comments
 (0)