add test case for import attributes

.nvmrc

@@ -1 +1 @@
-18.12.1
+18.20.0

package.json

@@ -32,10 +32,10 @@
     "docs:dev": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html,jsx ./build.js\" \"http-server ./dist --open\"",
     "docs:build": "node ./build.js",
     "docs:serve": "npm run clean && npm run docs:build && http-server ./dist --open",
-    "sandbox": "npm run clean && concurrently \"nodemon --experimental-loader ./test-exp-loader.js --watch src --watch sandbox -e js,md,css,html,jsx ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
+    "sandbox": "npm run clean && concurrently \"nodemon --loader ./test-exp-loader.js --watch src --watch sandbox -e js,md,css,html,jsx ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
     "start": "npm run docs:serve",
     "test": "mocha --exclude \"./test/cases/jsx*/**\" --exclude \"./test/cases/custom-extension/**\" \"./test/**/**/*.spec.js\"",
-    "test:exp": "c8 node --experimental-loader ./test-exp-loader.js ./node_modules/mocha/bin/mocha \"./test/**/**/*.spec.js\"",
+    "test:exp": "c8 node --loader ./test-exp-loader.js ./node_modules/mocha/bin/mocha \"./test/**/**/*.spec.js\"",
     "test:tdd": "npm run test -- --watch",
     "test:tdd:exp": "npm run test:exp -- --watch",
     "dist": "rollup -c rollup.config.js",

test/cases/import-attributes/import-attributes.spec.js

@@ -0,0 +1,54 @@
+/*
+ * Use Case
+ * Run wcc against a custom element using import attributes.
+ *
+ * User Result
+ * Should return the expected HTML and no error parsing an import attribute.
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     header.js
+ *   pages/
+ *     index.js
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import { renderToString } from '../../../src/wcc.js';
+
+const expect = chai.expect;
+
+describe.only('Run WCC For ', function() {
+  const LABEL = 'Import Attributes usage';
+  let dom;
+
+  before(async function() {
+    const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url));
+
+    dom = new JSDOM(html);
+  });
+
+  describe(LABEL, function() {
+    it('should not have any <template> tags within the document', function() {
+      expect(dom.window.document.querySelectorAll('template').length).to.equal(0);
+    });
+
+    describe('static page content', function() {
+      it('should have the expected static content for the page', function() {
+        expect(dom.window.document.querySelector('h1').textContent).to.equal('Home Page');
+      });
+    });
+
+    describe('custom header element navigation content sourced from a JSON file', function() {
+      it('should have a <header> tag within the document', function() {
+        expect(dom.window.document.querySelectorAll('header').length).to.equal(1);
+      });
+
+      it('should have three links within the <nav> element', function() {
+        const links = dom.window.document.querySelectorAll('header nav ul li');
+
+        expect(links.length).to.equal(2);
+      });
+    });
+  });
+});

test/cases/import-attributes/src/components/header/data.json

@@ -0,0 +1,3 @@
+{
+  "links": ["Home", "About"]
+}

test/cases/import-attributes/src/components/header/header.js

@@ -0,0 +1,17 @@
+import data from './data.json' with { type: 'json' };
+
+export default class Header extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <header>
+        <nav>
+          <ul>
+            ${data.links.map((item) => `<li>${item}</li>`).join('\n')}
+          </ul>
+        </nav>
+      </header>
+    `
+  }
+}
+
+customElements.define('wcc-header', Header);

test/cases/import-attributes/src/pages/index.js

@@ -0,0 +1,10 @@
+import '../components/header/header.js';
+
+export default class HomePage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <wcc-header></wcc-header>
+      <h1>Home Page</h1>
+    `;
+  }
+}