test: update example and tests

Integrate markdown-it-attrs plugin into the Eleventy configuration to allow setting attributes in Markdown. Updated test files to mock and verify expected rendering with the new plugin, ensuring functionality adheres to the added attribute features.

README.md

@@ -21,7 +21,7 @@ The clipboard button is provided by [Iconify](https://iconify.design/) [content-
 `eleventy shortcode function`
 
 This shortcode initializes clipboard.js on window.onload event.
-If clipboard copy succeeded, it shows a tooltips with message(default to `Copied!`).
+If clipboard copy succeeded, it shows tooltips with message(default to `Copied!`).
 Tooltips use [Primer Tooltips](https://primer.style/css/components/tooltips) CSS framework.
 
 ## Usage

example/.eleventy.js

@@ -1,6 +1,7 @@
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const codeClipboard = require('eleventy-plugin-code-clipboard');
 const markdownIt = require('markdown-it');
+const markdownItAttrs = require('markdown-it-attrs');
 
 module.exports = function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight);
@@ -12,7 +13,8 @@ module.exports = function (eleventyConfig) {
   const markdownLibrary = markdownIt({
     html: true,
     breaks: true,
-  }).use(codeClipboard.markdownItCopyButton);
+  }).use(markdownItAttrs)
+    .use(codeClipboard.markdownItCopyButton);
 
   eleventyConfig.setLibrary('md', markdownLibrary);
 

example/package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.3",
-    "eleventy-plugin-code-clipboard": "file:../"
+    "eleventy-plugin-code-clipboard": "file:../",
+    "markdown-it-attrs": "^4.2.0"
   }
 }

example/src/index.md

@@ -8,12 +8,12 @@ layout: base.njk
 echo "show clipboard button on code block"
 ```
 
-```typescript
+```typescript {.copy data-container=true}
 console.log("show clipboard button");
 ```
 
 ## code block without language
 
 ```
 Clipboard button is not displayed
-```
+```

test/__snapshots__/test.js.snap

@@ -12,7 +12,7 @@ exports[`clipboard.js initialization default plugin config 1`] = `
 
 exports[`custom renderer custom renderer config 1`] = `
 "
-<div style=\\"position: relative\\">
+<div style=\\"position: relative\\" id=\\"code-container-0\\" class=\\"test\\">
   <pre class=\\"language-yaml\\"><code id=\\"code-0\\">test: unit-test<br />type: 11ty</code></pre>
   <button class=\\"test-button another-button-class\\"
     data-clipboard-target=\\"#code-0\\"
@@ -25,7 +25,7 @@ exports[`custom renderer custom renderer config 1`] = `
 
 exports[`custom renderer default renderer config 1`] = `
 "
-<div style=\\"position: relative\\">
+<div style=\\"position: relative\\" id=\\"code-container-0\\" class=\\"test\\">
   <pre class=\\"language-yaml\\"><code id=\\"code-0\\">test: unit-test<br />type: 11ty</code></pre>
   <button class=\\"code-copy \\"
     data-clipboard-target=\\"#code-0\\"

test/test.js

@@ -30,6 +30,7 @@ describe('clipboard.js initialization', () => {
 
 describe('custom renderer', () => {
   let md;
+  const mockRenderAttrs = jest.fn().mockReturnValue('class="test"');
 
   beforeEach(() => {
     md = {
@@ -41,11 +42,21 @@ describe('custom renderer', () => {
     };
   });
 
+  afterEach(() => {
+    mockRenderAttrs.mockClear();
+  });
+
   test('default renderer config', () => {
     plugin.configFunction(eleventyConfig);
     plugin.markdownItCopyButton(md);
     const token = { tag: 'code', info: 'yaml', content: 'test: unit-test\ntype: 11ty' };
-    const html = md.renderer.rules.fence([token], 0);
+    const html = md.renderer.rules.fence(
+      [token],
+      0,
+      undefined,
+      undefined,
+      { renderAttrs: mockRenderAttrs },
+    );
     expect(html).toMatchSnapshot();
   });
 
@@ -65,7 +76,13 @@ describe('custom renderer', () => {
     };
     plugin.markdownItCopyButton(md, customRendererConfig);
     const token = { tag: 'code', info: 'yaml', content: 'test: unit-test\ntype: 11ty' };
-    const html = md.renderer.rules.fence([token], 0);
+    const html = md.renderer.rules.fence(
+      [token],
+      0,
+      undefined,
+      undefined,
+      { renderAttrs: mockRenderAttrs },
+    );
     expect(html).toMatchSnapshot();
   });