add test

libs/features/spectrum-web-components/README.md

@@ -7,6 +7,18 @@ Please know that SWC is heavy, impacts page performance and is not suitable for
 
 To load SWC components, do as follows:
 
+1. copy the spectrum WC in /libs/features/spectrum-web-components/src
+create a file, e.g. 'tabs.js'
+navigate to spectrum docu, e.g. https://opensource.adobe.com/spectrum-web-components/components/tabs/
+copy imports
+add a new dependency in the package.json 
+
+2. run 'npm install' in /libs/features/spectrum-web-components
+
+3. run 'npm run build' in /libs/features/spectrum-web-components
+
+4. Consume in your code
+
 ```
 const { base } = getConfig();
 await Promise.all([

test/blocks/merch-twp/merch-twp.test.js

@@ -0,0 +1,22 @@
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import { setConfig } from '../../../libs/utils/utils.js';
+
+const { default: init } = await import('../../../libs/blocks/merch-twp/merch-twp.js');
+
+describe('Merch TWP', () => {
+  before(() => {
+    setConfig({ base: window.location.origin, codeRoot: '/libs' });
+  });
+
+  it('should initialize merch-twp', async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/twp.html' });
+
+    const twp = await init(document.querySelector('.merch-twp'));
+    const layout = twp?.querySelector('merch-subscription-layout');
+    const cards = layout.querySelectorAll('merch-card');
+    expect(layout).to.exist;
+    expect(layout.querySelector('merch-subscription-panel')).to.exist;
+    expect(cards.length).to.be.equal(4);
+  });
+});

test/blocks/merch-twp/mocks/twp.html

@@ -0,0 +1,12 @@
+<div class="merch-twp">
+  <div>
+    <div>
+      <h1 id="try-the-full-version-of-adobe-apps-with-a-7-day-free-trial">Try the full version of Adobe apps with a 7-day free trial.</h1>
+      <p>Choose a plan:</p>
+      <merch-card class="merch-card twp " variant="plans"></merch-card>
+      <merch-card class="merch-card twp " variant="plans"></merch-card>
+      <merch-card class="merch-card twp " variant="plans"></merch-card>
+      <merch-card class="merch-card twp " variant="plans"></merch-card>
+    </div>
+  </div>
+</div>