Date: Mon, 25 Apr 2022 16:33:01 +0200
Subject: [PATCH 06/11] fix: decouple elements and toast api to fix SSR usage
---
packages/toast/api.js | 7 +++----
pages/components/toast.html | 13 ++++++++++---
tests/toast/toast-api.test.js | 3 ++-
3 files changed, 15 insertions(+), 8 deletions(-)
diff --git a/packages/toast/api.js b/packages/toast/api.js
index a9d9f2b6..0e7fa7b8 100644
--- a/packages/toast/api.js
+++ b/packages/toast/api.js
@@ -1,4 +1,3 @@
-import { FabricToastContainer } from './toast-container';
import { windowExists } from '../utils';
/**
@@ -19,7 +18,7 @@ import { windowExists } from '../utils';
*/
export function toast(message, options) {
if (!windowExists) return;
- const toast = FabricToastContainer.init();
+ const toast = customElements.get('f-toast-container').init();
const data = {
id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),
@@ -40,7 +39,7 @@ export function toast(message, options) {
*/
export function removeToast(id) {
if (!windowExists) return;
- const toast = FabricToastContainer.init();
+ const toast = customElements.get('f-toast-container').init();
return toast.del(id);
}
@@ -52,7 +51,7 @@ export function removeToast(id) {
*/
export function updateToast(id, options) {
if (!windowExists) return;
- const toast = FabricToastContainer.init();
+ const toast = customElements.get('f-toast-container').init();
toast.set({ ...toast.get(id), ...options });
return toast.get(id);
}
diff --git a/pages/components/toast.html b/pages/components/toast.html
index 3c53e027..70c34b24 100644
--- a/pages/components/toast.html
+++ b/pages/components/toast.html
@@ -33,12 +33,19 @@ Usage
Import functions for working with toasts:
+ Be sure to import the elements package first as the toast APIs depend on this package.
+
+
+ import from '@fabric-ds/elements'
+
+
+ Once you have imported the elements package, import the toast api package.
+
- import { toast, removeToast, updateToast } from
- '@fabric-ds/elements/toast';
+ import { toast, removeToast, updateToast } from '@fabric-ds/elements/toast';
- Create a new toast giving it a message:
+ Then you can create a new toast giving it a message:
toast('This is a toast');
diff --git a/tests/toast/toast-api.test.js b/tests/toast/toast-api.test.js
index 9ec4b161..4f2fb427 100644
--- a/tests/toast/toast-api.test.js
+++ b/tests/toast/toast-api.test.js
@@ -1,6 +1,7 @@
/* eslint-disable no-undef */
import { expect } from '@open-wc/testing';
-import { updateToast, removeToast, toast } from '../../dist/index.js';
+import '../../dist/index.js';
+import { updateToast, removeToast, toast } from '../../dist/api.js';
const test = it;
const wait = (duration = 0) =>
From 820620f895bfaf9a7653a11f5be51a75ca2bca46 Mon Sep 17 00:00:00 2001
From: semantic-release-bot
Date: Mon, 25 Apr 2022 14:51:24 +0000
Subject: [PATCH 07/11] chore(release): 0.1.2-next.1 [skip ci]
## [0.1.2-next.1](https://github.com/fabric-ds/elements/compare/v0.1.1...v0.1.2-next.1) (2022-04-25)
### Bug Fixes
* decouple elements and toast api to fix SSR usage ([57ee9d6](https://github.com/fabric-ds/elements/commit/57ee9d67122eb8ad693d901f10fa5a951f32b5c1))
---
CHANGELOG.md | 6 ++++++
package.json | 2 +-
2 files changed, 7 insertions(+), 1 deletion(-)
create mode 100644 CHANGELOG.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 00000000..f00effc4
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,6 @@
+## [0.1.2-next.1](https://github.com/fabric-ds/elements/compare/v0.1.1...v0.1.2-next.1) (2022-04-25)
+
+
+### Bug Fixes
+
+* decouple elements and toast api to fix SSR usage ([57ee9d6](https://github.com/fabric-ds/elements/commit/57ee9d67122eb8ad693d901f10fa5a951f32b5c1))
diff --git a/package.json b/package.json
index bb255324..022bb287 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "@fabric-ds/elements",
"type": "module",
- "version": "0.1.1",
+ "version": "0.1.2-next.1",
"description": "Custom elements for Fabric",
"exports": {
".": "./dist/index.js",
From 01f2ebd139980cd7f0384200073a3a77adc048a6 Mon Sep 17 00:00:00 2001
From: Renovate Bot
Date: Mon, 25 Apr 2022 19:03:36 +0000
Subject: [PATCH 08/11] chore(deps): update dependency element-collapse to v1
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 022bb287..2a40209a 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
"babel-eslint": "^10.1.0",
"cors": "^2.8.5",
"cz-conventional-changelog": "^3.3.0",
- "element-collapse": "^0.9.1",
+ "element-collapse": "1.0.1",
"esbuild": "^0.14.0",
"eslint": "^7.18.0",
"express": "^4.17.3",
From 386d6bb1ca9f011bfe78e30a3290111631750698 Mon Sep 17 00:00:00 2001
From: semantic-release-bot
Date: Mon, 25 Apr 2022 21:30:15 +0000
Subject: [PATCH 09/11] chore(release): 0.1.2 [skip ci]
## [0.1.2](https://github.com/fabric-ds/elements/compare/v0.1.1...v0.1.2) (2022-04-25)
### Bug Fixes
* decouple elements and toast api to fix SSR usage ([f7e57cb](https://github.com/fabric-ds/elements/commit/f7e57cb4139a2942c6d971ba650b30a2c825d27d))
---
CHANGELOG.md | 7 +++++++
package.json | 2 +-
2 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f00effc4..cd28642f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [0.1.2](https://github.com/fabric-ds/elements/compare/v0.1.1...v0.1.2) (2022-04-25)
+
+
+### Bug Fixes
+
+* decouple elements and toast api to fix SSR usage ([f7e57cb](https://github.com/fabric-ds/elements/commit/f7e57cb4139a2942c6d971ba650b30a2c825d27d))
+
## [0.1.2-next.1](https://github.com/fabric-ds/elements/compare/v0.1.1...v0.1.2-next.1) (2022-04-25)
diff --git a/package.json b/package.json
index 2a40209a..b277f1d0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "@fabric-ds/elements",
"type": "module",
- "version": "0.1.2-next.1",
+ "version": "0.1.2",
"description": "Custom elements for Fabric",
"exports": {
".": "./dist/index.js",
From 549e43e82c8b76cefce5adcac43b0c9bf67d086a Mon Sep 17 00:00:00 2001
From: Richard Walker
Date: Tue, 26 Apr 2022 12:12:53 +0200
Subject: [PATCH 10/11] test: improve playwright/tap breadcrumb tests
---
packages/breadcrumbs/server.js | 60 ----------------------------------
packages/breadcrumbs/test.js | 55 +++++++++++++++++++++----------
2 files changed, 37 insertions(+), 78 deletions(-)
delete mode 100644 packages/breadcrumbs/server.js
diff --git a/packages/breadcrumbs/server.js b/packages/breadcrumbs/server.js
deleted file mode 100644
index 396a96ef..00000000
--- a/packages/breadcrumbs/server.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import fs from 'fs';
-import fastify from 'fastify';
-
-export class Server {
- _component = '';
-
- constructor({ chromium }) {
- this.app = fastify();
- this._chromium = chromium;
-
- this.app.get('/scripts.js', function (request, reply) {
- const stream = fs.createReadStream(new URL('../../dist/index.js', import.meta.url), 'utf8');
- reply.type('application/javascript');
- reply.send(stream);
- });
-
- this.app.get('/', (req, reply) => {
- reply.type('text/html');
- reply.send(`
-
-
-
-
-
-
-
- `);
- });
- }
-
- get url() {
- return this._url;
- }
-
- async fixture(template) {
- this._component = template;
- const page = await this._browser.newPage();
- await page.goto(this.url);
- return page;
- }
-
- async start() {
- this._url = await this.app.listen(0);
- this._browser = await this._chromium.launch();
- }
-
- async stop() {
- await this.app.close();
- await this._browser.close();
- }
-
-}
\ No newline at end of file
diff --git a/packages/breadcrumbs/test.js b/packages/breadcrumbs/test.js
index 9afbd133..6fbe4c37 100644
--- a/packages/breadcrumbs/test.js
+++ b/packages/breadcrumbs/test.js
@@ -1,12 +1,23 @@
/* eslint-disable no-undef */
-import { test, teardown } from 'tap';
-import { Server } from './server.js';
+import tap, { test, beforeEach, teardown } from 'tap';
import { chromium } from 'playwright';
-const server = new Server({ chromium });
-await server.start();
+tap.before(async () => {
+ const browser = await chromium.launch({ headless: true });
+ tap.context.browser = browser;
+});
+
+beforeEach(async (t) => {
+ const { browser } = t.context;
+ const context = await browser.newContext();
+ // context.setDefaultTimeout(2000);
+ t.context.page = await context.newPage();
+});
-teardown(() => server.stop());
+teardown(async () => {
+ const { browser } = tap.context;
+ browser.close();
+});
test('Breadcrumb component renders on the page', async (t) => {
// GIVEN: A component with 1 breadcrumb
@@ -17,10 +28,12 @@ test('Breadcrumb component renders on the page', async (t) => {
`;
// WHEN: the component is added to the page
- const page = await server.fixture(component);
+ const { page } = t.context;
+ await page.setContent(component);
+ await page.addScriptTag({ path: './dist/index.js', type: 'module' });
// THEN: the component is visible in the DOM
- t.equal(await page.innerText('nav a'), 'Eiendom');
+ t.equal(await page.innerText('nav a'), 'Eiendom', 'An Eiendom a tag should be added to the page');
});
test('Breadcrumb component interleaves / characters between breadcrumb items', async (t) => {
@@ -33,10 +46,12 @@ test('Breadcrumb component interleaves / characters between breadcrumb items', a
`;
// WHEN: the component is added to the page AND spans are selected
- const page = await server.fixture(component);
+ const { page } = t.context;
+ await page.setContent(component);
+ await page.addScriptTag({ path: './dist/index.js', type: 'module' });
// THEN: a single divider should have been interleaved with the breadcrumbs
- t.equal(await page.innerText('f-breadcrumbs span'), '/');
+ t.equal(await page.innerText('f-breadcrumbs span'), '/', 'Divider slashes should be added');
});
test('Breadcrumb component with anchor child elements', async (t) => {
@@ -50,14 +65,16 @@ test('Breadcrumb component with anchor child elements', async (t) => {
`;
// WHEN: the component is added to the page AND a elements are selected
- const page = await server.fixture(component);
+ const { page } = t.context;
+ await page.setContent(component);
+ await page.addScriptTag({ path: './dist/index.js', type: 'module' });
// THEN: there should be three breadcrumbs in the DOM
- t.equal(await page.locator('f-breadcrumbs a').count(), 3);
- t.equal(await page.locator('f-breadcrumbs span').count(), 2);
- t.match(await page.innerText(':nth-match(f-breadcrumbs a, 1)'), 'Eiendom');
- t.match(await page.innerText(':nth-match(f-breadcrumbs a, 2)'), 'Torget');
- t.match(await page.innerText(':nth-match(f-breadcrumbs a, 3)'), 'Oslo');
+ t.equal(await page.locator('f-breadcrumbs a').count(), 3, '3 a tags should be present');
+ t.equal(await page.locator('f-breadcrumbs span').count(), 2, '2 span tags should be present');
+ t.match(await page.innerText(':nth-match(f-breadcrumbs a, 1)'), 'Eiendom', 'The first segment should be Eiendom');
+ t.match(await page.innerText(':nth-match(f-breadcrumbs a, 2)'), 'Torget', 'The second segment should be Torget');
+ t.match(await page.innerText(':nth-match(f-breadcrumbs a, 3)'), 'Oslo', 'The third segment should be Oslo');
});
test('Breadcrumb component with last element as a span', async (t) => {
@@ -71,9 +88,11 @@ test('Breadcrumb component with last element as a span', async (t) => {
`;
// WHEN: the component is added to the page AND a elements are selected
- const page = await server.fixture(component);
+ const { page } = t.context;
+ await page.setContent(component);
+ await page.addScriptTag({ path: './dist/index.js', type: 'module' });
// THEN: there should be three breadcrumbs in the DOM
- t.equal(await page.locator('f-breadcrumbs a').count(), 2);
- t.equal(await page.locator('f-breadcrumbs span').count(), 3);
+ t.equal(await page.locator('f-breadcrumbs a').count(), 2, '2 child a tags should be present');
+ t.equal(await page.locator('f-breadcrumbs span').count(), 3, '3 child span tags should be present');
});
From d7d7e405a2641e37e7a3f91567d6f9d45bbf34ab Mon Sep 17 00:00:00 2001
From: Richard Walker
Date: Tue, 26 Apr 2022 12:14:49 +0200
Subject: [PATCH 11/11] chore: formatting
---
packages/breadcrumbs/test.js | 26 +++++++++++++++++++++-----
1 file changed, 21 insertions(+), 5 deletions(-)
diff --git a/packages/breadcrumbs/test.js b/packages/breadcrumbs/test.js
index 6fbe4c37..31db562f 100644
--- a/packages/breadcrumbs/test.js
+++ b/packages/breadcrumbs/test.js
@@ -49,7 +49,7 @@ test('Breadcrumb component interleaves / characters between breadcrumb items', a
const { page } = t.context;
await page.setContent(component);
await page.addScriptTag({ path: './dist/index.js', type: 'module' });
-
+
// THEN: a single divider should have been interleaved with the breadcrumbs
t.equal(await page.innerText('f-breadcrumbs span'), '/', 'Divider slashes should be added');
});
@@ -72,9 +72,21 @@ test('Breadcrumb component with anchor child elements', async (t) => {
// THEN: there should be three breadcrumbs in the DOM
t.equal(await page.locator('f-breadcrumbs a').count(), 3, '3 a tags should be present');
t.equal(await page.locator('f-breadcrumbs span').count(), 2, '2 span tags should be present');
- t.match(await page.innerText(':nth-match(f-breadcrumbs a, 1)'), 'Eiendom', 'The first segment should be Eiendom');
- t.match(await page.innerText(':nth-match(f-breadcrumbs a, 2)'), 'Torget', 'The second segment should be Torget');
- t.match(await page.innerText(':nth-match(f-breadcrumbs a, 3)'), 'Oslo', 'The third segment should be Oslo');
+ t.match(
+ await page.innerText(':nth-match(f-breadcrumbs a, 1)'),
+ 'Eiendom',
+ 'The first segment should be Eiendom',
+ );
+ t.match(
+ await page.innerText(':nth-match(f-breadcrumbs a, 2)'),
+ 'Torget',
+ 'The second segment should be Torget',
+ );
+ t.match(
+ await page.innerText(':nth-match(f-breadcrumbs a, 3)'),
+ 'Oslo',
+ 'The third segment should be Oslo',
+ );
});
test('Breadcrumb component with last element as a span', async (t) => {
@@ -94,5 +106,9 @@ test('Breadcrumb component with last element as a span', async (t) => {
// THEN: there should be three breadcrumbs in the DOM
t.equal(await page.locator('f-breadcrumbs a').count(), 2, '2 child a tags should be present');
- t.equal(await page.locator('f-breadcrumbs span').count(), 3, '3 child span tags should be present');
+ t.equal(
+ await page.locator('f-breadcrumbs span').count(),
+ 3,
+ '3 child span tags should be present',
+ );
});