Skip to content

Commit af9f4fa

Browse files
emmadesilvaemmadesilva
committed
Update tests for semantic Markdown permalink headers
1 parent 5f90cbc commit af9f4fa

File tree

4 files changed

+20
-20
lines changed

4 files changed

+20
-20
lines changed

‎packages/framework/tests/Feature/MarkdownHeadingRendererTest.php‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ public function testPermalinksInDocumentationPages()
5959
// $this->assertStringContainsString('aria-label="Permalink to this heading"', $html);
6060

6161
$this->assertSame(<<<'HTML'
62-
<h2 id="documentation-heading">Documentation Heading<a href="#documentation-heading" class="heading-permalink" title="Permalink"></a></h2>
62+
<h2 id="documentation-heading" class="group w-fit">Documentation Heading<a href="#documentation-heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>
6363

6464
HTML, $html);
6565
}
@@ -117,12 +117,12 @@ public function testHeadingsWithCustomAttributesAndPermalinks()
117117

118118
$html = (new MarkdownService($markdown, DocumentationPage::class))->parse();
119119

120-
$this->assertStringContainsString('class="custom-class"', $html);
120+
$this->assertStringContainsString('class="custom-class group w-fit"', $html);
121121
$this->assertStringContainsString('data-test="value"', $html);
122122

123123
$this->assertSame(<<<'HTML'
124-
<h2 class="custom-class" id="heading">Heading<a href="#heading" class="heading-permalink" title="Permalink"></a></h2>
125-
<h3 data-test="value" id="another-heading">Another Heading<a href="#another-heading" class="heading-permalink" title="Permalink"></a></h3>
124+
<h2 class="custom-class group w-fit" id="heading">Heading<a href="#heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>
125+
<h3 data-test="value" id="another-heading" class="group w-fit">Another Heading<a href="#another-heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h3>
126126

127127
HTML, $html);
128128
}
@@ -144,17 +144,17 @@ public function testPermalinkConfigurationLevels()
144144
$html = (new MarkdownService($markdown, DocumentationPage::class))->parse();
145145

146146
$this->assertStringNotContainsString('<h1>H1 No Permalink</h1><a', $html);
147-
$this->assertStringContainsString('<h2 id="h2-has-permalink">H2 Has Permalink<a', $html);
148-
$this->assertStringContainsString('<h3 id="h3-has-permalink">H3 Has Permalink<a', $html);
149-
$this->assertStringContainsString('<h4 id="h4-has-permalink">H4 Has Permalink<a', $html);
147+
$this->assertStringContainsString('<h2 id="h2-has-permalink" class="group w-fit">H2 Has Permalink<a', $html);
148+
$this->assertStringContainsString('<h3 id="h3-has-permalink" class="group w-fit">H3 Has Permalink<a', $html);
149+
$this->assertStringContainsString('<h4 id="h4-has-permalink" class="group w-fit">H4 Has Permalink<a', $html);
150150
$this->assertStringNotContainsString('<h5>H5 No Permalink</h1><a', $html);
151151
$this->assertStringNotContainsString('<h6>H6 No Permalink</h1><a', $html);
152152

153153
$this->assertSame(<<<'HTML'
154154
<h1>H1 No Permalink</h1>
155-
<h2 id="h2-has-permalink">H2 Has Permalink<a href="#h2-has-permalink" class="heading-permalink" title="Permalink"></a></h2>
156-
<h3 id="h3-has-permalink">H3 Has Permalink<a href="#h3-has-permalink" class="heading-permalink" title="Permalink"></a></h3>
157-
<h4 id="h4-has-permalink">H4 Has Permalink<a href="#h4-has-permalink" class="heading-permalink" title="Permalink"></a></h4>
155+
<h2 id="h2-has-permalink" class="group w-fit">H2 Has Permalink<a href="#h2-has-permalink" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>
156+
<h3 id="h3-has-permalink" class="group w-fit">H3 Has Permalink<a href="#h3-has-permalink" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h3>
157+
<h4 id="h4-has-permalink" class="group w-fit">H4 Has Permalink<a href="#h4-has-permalink" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h4>
158158
<h5>H5 No Permalink</h5>
159159
<h6>H6 No Permalink</h6>
160160

@@ -185,8 +185,8 @@ public function testHeadingsWithSpecialCharacters()
185185

186186
// Todo: Try to normalize to heading-with-special-characters?
187187
$this->assertSame(<<<'HTML'
188-
<h2 id="heading-with-amp-special-lt-gt-quotcharactersquot">Heading with &amp; special &lt; &gt; &quot;characters&quot;<a href="#heading-with-amp-special-lt-gt-quotcharactersquot" class="heading-permalink" title="Permalink"></a></h2>
189-
<h3 id="heading-with-emojis">Heading with émojis 🎉<a href="#heading-with-emojis" class="heading-permalink" title="Permalink"></a></h3>
188+
<h2 id="heading-with-amp-special-lt-gt-quotcharactersquot" class="group w-fit">Heading with &amp; special &lt; &gt; &quot;characters&quot;<a href="#heading-with-amp-special-lt-gt-quotcharactersquot" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>
189+
<h3 id="heading-with-emojis" class="group w-fit">Heading with émojis 🎉<a href="#heading-with-emojis" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h3>
190190

191191
HTML, $html);
192192
}

‎packages/framework/tests/Feature/MarkdownServiceTest.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ public function testServiceCanParseMarkdownToHtmlWithPermalinksDependingOnConfig
3535
$this->assertIsString($html);
3636
$this->assertStringContainsString('heading-permalink', $html, 'Permalink should be added to documentation pages by default');
3737
$this->assertSame(
38-
'<h2 id="hello-world">Hello World!<a href="#hello-world" class="heading-permalink" title="Permalink"></a></h2>'."\n", $html
38+
'<h2 id="hello-world" class="group w-fit">Hello World!<a href="#hello-world" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>'."\n", $html
3939
);
4040

4141
$html = (new MarkdownService($markdown))->parse();

‎packages/framework/tests/Feature/StaticSiteBuilderDocumentationModuleTest.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ public function testPageContainsExpectedContent()
4444
{
4545
$this->inspectHtml([
4646
'Adventures in Wonderland',
47-
'<h2 id="chapter-i-down-the-rabbit-hole">CHAPTER I. DOWN THE RABBIT-HOLE.<a href="#chapter-i-down-the-rabbit-hole" class="heading-permalink" title="Permalink"></a></h2>',
47+
'<h2 id="chapter-i-down-the-rabbit-hole" class="group w-fit">CHAPTER I. DOWN THE RABBIT-HOLE.<a href="#chapter-i-down-the-rabbit-hole" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>',
4848
'<p>So she was considering in her own mind, as well as she could',
4949
]);
5050
}
@@ -55,7 +55,7 @@ public function testCanCompilePageToRootOutputDirectory()
5555

5656
$this->inspectHtml([
5757
'Adventures in Wonderland',
58-
'<h2 id="chapter-i-down-the-rabbit-hole">CHAPTER I. DOWN THE RABBIT-HOLE.<a href="#chapter-i-down-the-rabbit-hole" class="heading-permalink" title="Permalink"></a></h2>',
58+
'<h2 id="chapter-i-down-the-rabbit-hole" class="group w-fit">CHAPTER I. DOWN THE RABBIT-HOLE.<a href="#chapter-i-down-the-rabbit-hole" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>',
5959
'<p>So she was considering in her own mind, as well as she could',
6060
], '_site/test-page.html');
6161
}

‎packages/framework/tests/Unit/HeadingRendererUnitTest.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ public function testCanRenderHeading()
6161
$this->assertStringContainsString('<h2', $rendered);
6262
$this->assertStringContainsString('</h2>', $rendered);
6363

64-
$this->assertSame('<h2 id="test-heading">Test Heading<a href="#test-heading" class="heading-permalink" title="Permalink"></a></h2>', $rendered);
64+
$this->assertSame('<h2 id="test-heading" class="group w-fit">Test Heading<a href="#test-heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>', $rendered);
6565
}
6666

6767
public function testAddsPermalinkToValidHeadings()
@@ -124,7 +124,7 @@ public function testForwardsHeadingAttributes()
124124
$heading->data->set('attributes', ['class' => 'custom-class']);
125125
$rendered = $renderer->render($heading, $childRenderer);
126126

127-
$this->assertStringContainsString('class="custom-class"', $rendered);
127+
$this->assertStringContainsString('class="custom-class group w-fit', $rendered);
128128
}
129129

130130
public function testForwardsArbitraryHeadingAttributes()
@@ -148,7 +148,7 @@ public function testMergesAllHeadingAttributes()
148148
$heading->data->set('attributes', ['class' => 'custom-class', 'foo' => 'bar']);
149149
$rendered = $renderer->render($heading, $childRenderer);
150150

151-
$this->assertStringContainsString('class="custom-class"', $rendered);
151+
$this->assertStringContainsString('class="custom-class group w-fit"', $rendered);
152152
$this->assertStringContainsString('foo="bar"', $rendered);
153153
}
154154

@@ -186,12 +186,12 @@ public function testPostProcessMethodNormalizesInputToMatchCommonMark()
186186
$html = <<<'HTML'
187187
<h2 >
188188
Test Heading
189-
<a id="test-heading" href="#test-heading" class="heading-permalink" title="Permalink"></a>
189+
<a id="test-heading" href="#test-heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a>
190190
</h2>
191191
HTML;
192192

193193
// What CommonMark would generate from the same input Markdown
194-
$expected = '<h2>Test Heading<a id="test-heading" href="#test-heading" class="heading-permalink" title="Permalink"></a></h2>';
194+
$expected = '<h2>Test Heading<a id="test-heading" href="#test-heading" class="heading-permalink opacity-0 ml-1 transition-opacity duration-300 ease-linear px-1 group-hover:opacity-100 focus:opacity-100 group-hover:grayscale-0 focus:grayscale-0" title="Permalink">#</a></h2>';
195195

196196
$this->assertSame($expected, (new HeadingRenderer())->postProcess($html));
197197
}

0 commit comments

Comments
 (0)