From 77f10deccd2f261219a77887f6fa006925cd9fe2 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 12 Apr 2024 16:12:10 -0400
Subject: [PATCH] add test case for import attributes

---
 .nvmrc                                        |  2 +-
 package.json                                  |  4 +-
 .../import-attributes.spec.js                 | 54 +++++++++++++++++++
 .../src/components/header/data.json           |  3 ++
 .../src/components/header/header.js           | 17 ++++++
 .../import-attributes/src/pages/index.js      | 10 ++++
 6 files changed, 87 insertions(+), 3 deletions(-)
 create mode 100644 test/cases/import-attributes/import-attributes.spec.js
 create mode 100644 test/cases/import-attributes/src/components/header/data.json
 create mode 100644 test/cases/import-attributes/src/components/header/header.js
 create mode 100644 test/cases/import-attributes/src/pages/index.js

diff --git a/.nvmrc b/.nvmrc
index 72c7744..23cc58a 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18.12.1
\ No newline at end of file
+18.20.0
\ No newline at end of file
diff --git a/package.json b/package.json
index 84474a2..f49fe13 100644
--- a/package.json
+++ b/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",
diff --git a/test/cases/import-attributes/import-attributes.spec.js b/test/cases/import-attributes/import-attributes.spec.js
new file mode 100644
index 0000000..129727f
--- /dev/null
+++ b/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);
+      });
+    });
+  });
+});
\ No newline at end of file
diff --git a/test/cases/import-attributes/src/components/header/data.json b/test/cases/import-attributes/src/components/header/data.json
new file mode 100644
index 0000000..fd807f3
--- /dev/null
+++ b/test/cases/import-attributes/src/components/header/data.json
@@ -0,0 +1,3 @@
+{
+  "links": ["Home", "About"]
+}
\ No newline at end of file
diff --git a/test/cases/import-attributes/src/components/header/header.js b/test/cases/import-attributes/src/components/header/header.js
new file mode 100644
index 0000000..5c143bf
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/test/cases/import-attributes/src/pages/index.js b/test/cases/import-attributes/src/pages/index.js
new file mode 100644
index 0000000..e0f385d
--- /dev/null
+++ b/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>
+    `;
+  }
+}
\ No newline at end of file