Skip to content

Commit

Permalink
MWPW-141104: Consume Milo SWC in the unit tests (#157)
Browse files Browse the repository at this point in the history
  • Loading branch information
yesil authored Jan 12, 2024
1 parent d67627e commit 3274008
Show file tree
Hide file tree
Showing 8 changed files with 206 additions and 68 deletions.
1 change: 0 additions & 1 deletion creativecloud/blocks/sidenav/sidenav.js
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,6 @@ function appendResources(rootNav, resourceLink) {
export default async function init(el) {
const libs = getLibs();
await Promise.all([
import(`${libs}/deps/lit-all.min.js`),
import(`${libs}/features/spectrum-web-components/dist/theme.js`),
import(`${libs}/features/spectrum-web-components/dist/sidenav.js`),
import(`${libs}/features/spectrum-web-components/dist/search.js`),
Expand Down
6 changes: 5 additions & 1 deletion creativecloud/scripts/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@
export const [setLibs, getLibs] = (() => {
let libs;
return [
(prodLibs) => {
(prodLibs, force = false) => {
if (force) {
libs = prodLibs;
return libs;
}
const { hostname } = window.location;
if (!hostname.includes('hlx.page')
&& !hostname.includes('hlx.live')
Expand Down
83 changes: 83 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
"version": "1.0.0",
"description": "Website foundation technology.",
"scripts": {
"test": "wtr \"./test/**/*.test.js\" --node-resolve --port=2000 --coverage",
"test": "wtr --config ./web-test-runner.config.mjs \"./test/**/*.test.(js|html)\" --node-resolve --port=2000 --coverage",
"test:watch": "npm test -- --watch",
"wtr": "wtr \"./test/**/*.test.(js|html)\" --node-resolve --port=2000 --coverage --concurrent-browsers 4",
"wtr": "wtr --config ./web-test-runner.config.mjs \"./test/**/*.test.(js|html)\" --node-resolve --port=2000 --coverage --concurrent-browsers 4",
"wtr:watch": "npm run wtr -- --watch",
"lcov": "lcov -a coverage/jest/lcov.info -a coverage/wtr/lcov.info -o coverage/lcov.info",
"lint": "npm run lint:js && npm run lint:css",
Expand Down Expand Up @@ -39,5 +39,8 @@
"stylelint": "14.6.0",
"stylelint-config-prettier": "9.0.3",
"stylelint-config-standard": "25.0.0"
},
"dependencies": {
"@adobecom/milo": "github:adobecom/milo#main"
}
}
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="module" src="./sidenav.test.html.js"></script>
<header></header>
<main>
<div>
Expand Down
66 changes: 66 additions & 0 deletions test/blocks/sidenav/sidenav.test.html.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { runTests } from '@web/test-runner-mocha';
import { readFile } from '@web/test-runner-commands';
import { expect } from '@esm-bundle/chai';
import sinon from 'sinon';
import { setLibs } from '../../../creativecloud/scripts/utils.js';

setLibs('/node_modules/@adobecom/milo/libs', true);

const { default: init } = await import('../../../creativecloud/blocks/sidenav/sidenav.js');

const taxoString = await readFile({ path: './mocks/taxonomy.json' });
const taxonomy = JSON.parse(taxoString);

const mockedTaxonomy = ({
payload = taxonomy,
status = 200, ok = true,
} = {}) => new Promise((resolve) => {
resolve({
status,
ok,
json: () => payload,
text: () => payload,
});
});

runTests(async () => {
describe('Sidenav', () => {
beforeEach(() => {
window.fetch = sinon.stub().callsFake(() => mockedTaxonomy());
});

const testCategorySidenav = async (selector, expectedItemCount, expectedChildItemCount) => {
const sidenavEl = document.querySelector(selector);
const newRoot = await init(sidenavEl);
expect(newRoot.tagName).to.equal('MERCH-SIDENAV');
expect(newRoot.title).to.equal('REFINE YOUR RESULTS');
const items = newRoot.querySelectorAll('sp-sidenav-item');
expect(items.length).to.equal(expectedItemCount);
const search = newRoot.querySelector('sp-search');
expect(search.getAttribute('placeholder')).to.equal('Search all your products');
expect(newRoot.querySelectorAll('sp-checkbox').length).to.equal(3);
const nestedItems = newRoot.querySelectorAll('sp-sidenav-item > sp-sidenav-item');
expect(nestedItems.length).to.equal(expectedChildItemCount);
expect(newRoot.querySelector('sp-checkbox').textContent.trim()).to.equal('Desktop');
};

it('does create nice categories default sidenav', async () => {
await testCategorySidenav('.categories', 24, 18);
});

it('does create nice reordered categories sidenav', async () => {
await testCategorySidenav('.reordered-categories', 17, 11);
});

it('does create nice plans sidenav', async () => {
const sidenavEl = document.querySelector('.plans');
const newRoot = await init(sidenavEl);
expect(newRoot.tagName).to.equal('MERCH-SIDENAV');
expect(newRoot.title).to.equal('REFINE YOUR RESULTS');
const search = newRoot.querySelector('sp-search');
expect(search).to.be.null;
const nestedItems = newRoot.querySelectorAll('sp-sidenav-item > sp-sidenav-item');
expect(nestedItems.length).to.equal(0);
});
});
});
63 changes: 0 additions & 63 deletions test/blocks/sidenav/sidenav.test.js

This file was deleted.

46 changes: 46 additions & 0 deletions web-test-runner.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import { importMapsPlugin } from '@web/dev-server-import-maps';

async function enableCORS(context, next) {
await next();
context.set('Access-Control-Allow-Credentials', true);
context.set('Access-Control-Allow-Origin', context.request.headers.origin);
}

const swcImportMaps = Object.fromEntries([
'theme.js',
'search.js',
'checkbox.js',
'dialog.js',
'base.js',
'reactive-controllers.js',
'shared.js',
'textfield.js',
'button.js',
'icons-workflow.js',
'icons-ui.js',
'checkmark.js',
'dash.js',
'divider.js',
'button-group.js',
'alert-dialog.js',
'underlay.js',
'help-text.js',
'icon.js',
'icons/checkmark.js',
'icons/dash.js',
].map((file) => [`/libs/features/spectrum-web-components/dist/${file}`, `/node_modules/@adobecom/milo/libs/features/spectrum-web-components/dist/${file}`]));

export default {
coverageConfig: {
include: ['src/**'],
exclude: ['test/mocks/**', 'test/**', '**/node_modules/**'],
},
debug: false,
files: ['test/**/*.test.(js|html)'],
nodeResolve: true,
middlewares: [enableCORS],
plugins: [importMapsPlugin({ inject: { importMap: { imports: { ...swcImportMaps } } } })],
port: 2000,
browserLogs: false,
};

0 comments on commit 3274008

Please sign in to comment.