From 047d281f8ce8f6584291dae4790fe5c6b5b86f06 Mon Sep 17 00:00:00 2001 From: Mroczko Date: Fri, 2 Jul 2021 09:15:30 +0200 Subject: [PATCH 1/5] DS-537: Standarize schema and twig for bolt-banner --- .../__tests__/__snapshots__/banner.js.snap | 71 +++++++++----- .../bolt-banner/__tests__/banner.js | 93 ++++++++++++++----- .../components/bolt-banner/banner.schema.js | 4 +- .../components/bolt-banner/src/banner.twig | 23 +++-- 4 files changed, 130 insertions(+), 61 deletions(-) diff --git a/packages/components/bolt-banner/__tests__/__snapshots__/banner.js.snap b/packages/components/bolt-banner/__tests__/__snapshots__/banner.js.snap index 5641666f1e..baf9d3262e 100644 --- a/packages/components/bolt-banner/__tests__/__snapshots__/banner.js.snap +++ b/packages/components/bolt-banner/__tests__/__snapshots__/banner.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` Component Basic usage 1`] = ` - +exports[`Bolt banner Props status items: center 1`] = ` +
This is a banner @@ -10,71 +10,94 @@ exports[` Component Basic usage 1`] = ` `; -exports[` Component Status of the banner message: error 1`] = ` +exports[`Bolt banner Props status items: end 1`] = ` + +
+ + This is a banner + +
+ +`; + +exports[`Bolt banner Props status items: error 1`] = `
- This banner is trying to convey error + This is a banner
`; -exports[` Component Status of the banner message: information 1`] = ` +exports[`Bolt banner Props status items: information 1`] = `
- This banner is trying to convey information + This is a banner + +
+ +`; + +exports[`Bolt banner Props status items: start 1`] = ` + +
+ + This is a banner
`; -exports[` Component Status of the banner message: success 1`] = ` +exports[`Bolt banner Props status items: success 1`] = `
- This banner is trying to convey success + This is a banner
`; -exports[` Component Status of the banner message: warning 1`] = ` +exports[`Bolt banner Props status items: warning 1`] = `
- This banner is trying to convey warning + This is a banner
`; -exports[` Component Text alignment: center 1`] = ` - +exports[`Bolt banner default 1`] = ` +
- The text is aligned to the center + This is a banner
`; -exports[` Component Text alignment: end 1`] = ` - -
- - The text is aligned to the end - -
+exports[`Bolt banner default 2`] = ` +
+ + +
+`; + +exports[`Bolt banner default 3`] = ` + + This is a banner `; -exports[` Component Text alignment: start 1`] = ` - -
+exports[`Bolt banner default 4`] = ` + +
- The text is aligned to the start + This is a banner
diff --git a/packages/components/bolt-banner/__tests__/banner.js b/packages/components/bolt-banner/__tests__/banner.js index c376e723bc..56175ee750 100644 --- a/packages/components/bolt-banner/__tests__/banner.js +++ b/packages/components/bolt-banner/__tests__/banner.js @@ -1,41 +1,88 @@ -import { render, stopServer } from '../../../testing/testing-helpers'; +import { render, stopServer, renderWC } from '../../../testing/testing-helpers'; import schema from '../banner.schema'; +const componentSelector = 'bolt-banner'; const { status, align } = schema.properties; +let page, fixtures; -describe(' Component', () => { - afterAll(async () => { - await stopServer(); - }, 100); +afterAll(async () => { + await stopServer(); + await page.close(); +}, 100); - // Basic Usage - test('Basic usage', async () => { +beforeEach(async () => { + await page.evaluate(() => { + document.body.innerHTML = ''; + }); +}); + +beforeAll(async () => { + page = await global.__BROWSER__.newPage(); + await page.goto('http://127.0.0.1:4444/', { + timeout: 0, + }); + + const defaultData = { + content: 'This is a banner', + }; + + fixtures = { + defaultData, + }; +}); + +describe('Bolt banner', () => { + // With a Web Component + test(`default`, async () => { + const results = await render('@bolt-components-banner/banner.twig', { + ...fixtures.defaultData, + }); + + const { innerHTML, outerHTML } = await renderWC( + componentSelector, + results.html, + page, + ); + + await expect(results.ok).toBe(true); + await expect(results.html).toMatchSnapshot(); + await expect(innerHTML).toMatchSnapshot(); + await expect(outerHTML).toMatchSnapshot(); + }); + + // Without a Web Component + test(`default`, async () => { const results = await render('@bolt-components-banner/banner.twig', { - content: 'This is a banner', + ...fixtures.defaultData, }); - expect(results.ok).toBe(true); - expect(results.html).toMatchSnapshot(); + + await expect(results.ok).toBe(true); + await expect(results.html).toMatchSnapshot(); }); +}); - // Props - status.enum.forEach(async statusChoice => { - test(`Status of the banner message: ${statusChoice}`, async () => { +describe('Bolt banner Props', () => { + // Target each of the schema keys with the following pattern + status.enum.forEach(async option => { + test(`status items: ${option}`, async () => { const results = await render('@bolt-components-banner/banner.twig', { - content: `This banner is trying to convey ${statusChoice}`, - status: statusChoice, + ...fixtures.defaultData, + status: option, }); - expect(results.ok).toBe(true); - expect(results.html).toMatchSnapshot(); + + await expect(results.ok).toBe(true); + await expect(results.html).toMatchSnapshot(); }); }); - align.enum.forEach(async alignChoice => { - test(`Text alignment: ${alignChoice}`, async () => { + align.enum.forEach(async option => { + test(`status items: ${option}`, async () => { const results = await render('@bolt-components-banner/banner.twig', { - content: `The text is aligned to the ${alignChoice}`, - align: alignChoice, + ...fixtures.defaultData, + align: option, }); - expect(results.ok).toBe(true); - expect(results.html).toMatchSnapshot(); + + await expect(results.ok).toBe(true); + await expect(results.html).toMatchSnapshot(); }); }); }); diff --git a/packages/components/bolt-banner/banner.schema.js b/packages/components/bolt-banner/banner.schema.js index 65b2ecea47..3b61bae5b5 100644 --- a/packages/components/bolt-banner/banner.schema.js +++ b/packages/components/bolt-banner/banner.schema.js @@ -19,14 +19,14 @@ module.exports = { status: { type: 'string', description: 'Sets the status that the banner is trying to convey.', - enum: ['error', 'warning', 'success', 'information'], default: 'information', + enum: ['error', 'warning', 'success', 'information'], }, align: { type: 'string', description: 'Sets the text alignment of the content.', - enum: ['start', 'center', 'end'], default: 'center', + enum: ['start', 'center', 'end'], }, }, }; diff --git a/packages/components/bolt-banner/src/banner.twig b/packages/components/bolt-banner/src/banner.twig index c158903948..3823f0015e 100644 --- a/packages/components/bolt-banner/src/banner.twig +++ b/packages/components/bolt-banner/src/banner.twig @@ -1,43 +1,42 @@ -{% set schema = bolt.data.components["@bolt-components-banner"].schema %} +{% set schema = bolt.data.components['@bolt-components-banner'].schema %} {% if enable_json_schema_validation %} {{ validate_data_schema(schema, _self) | raw }} {% endif %} {# Variables #} -{% set base_class = "c-bolt-banner" %} {% set this = init(schema) %} {% set inner_attributes = create_attribute({}) %} {# Array of classes based on the defined + default props #} {% set classes = [ - base_class, - this.data.status ? base_class ~ "--status-" ~ this.data.status.value, - this.data.align ? base_class ~ "--align-" ~ this.data.align.value, + 'c-bolt-banner', + this.data.status ? 'c-bolt-banner--status-' ~ this.data.status.value, + this.data.align ? 'c-bolt-banner--align-' ~ this.data.align.value, ] %} {# Sort classes passed in via attributes into two groups: - 1. Those that should be applied to the inner tag (namely, "is-" and "has-" classes) + 1. Those that should be applied to the inner tag (namely, 'is-' and 'has-' classes) 2. Those that should be applied to the outer custom element (everything else EXCEPT c-bolt-* classes, which should never be passed in via attributes) #} {% set outer_classes = [] %} {% set inner_classes = classes %} {% for class in this.props.class %} - {% if class starts with "is-" or class starts with "has-" %} + {% if class starts with 'is-' or class starts with 'has-' %} {% set inner_classes = inner_classes|merge([class]) %} - {% elseif class starts with "c-bolt-" == false %} + {% elseif class starts with 'c-bolt-' == false %} {% set outer_classes = outer_classes|merge([class]) %} {% endif %} {% endfor %} -
- +
+ {{ content }}
From 85c10d82403c4bee4c1c02843b8b63ca2a63a0ea Mon Sep 17 00:00:00 2001 From: Mroczko Date: Fri, 2 Jul 2021 11:24:59 +0200 Subject: [PATCH 2/5] DS-537: update test file --- .../__tests__/__snapshots__/banner.js.snap | 14 +++++++------- .../components/bolt-banner/__tests__/banner.js | 2 ++ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/components/bolt-banner/__tests__/__snapshots__/banner.js.snap b/packages/components/bolt-banner/__tests__/__snapshots__/banner.js.snap index baf9d3262e..1061eb37b2 100644 --- a/packages/components/bolt-banner/__tests__/__snapshots__/banner.js.snap +++ b/packages/components/bolt-banner/__tests__/__snapshots__/banner.js.snap @@ -4,7 +4,7 @@ exports[`Bolt banner Props status items: center 1`] = `
- This is a banner + The text is aligned to the center
@@ -14,7 +14,7 @@ exports[`Bolt banner Props status items: end 1`] = `
- This is a banner + The text is aligned to the end
@@ -24,7 +24,7 @@ exports[`Bolt banner Props status items: error 1`] = `
- This is a banner + This banner is trying to convey error
@@ -34,7 +34,7 @@ exports[`Bolt banner Props status items: information 1`] = `
- This is a banner + This banner is trying to convey information
@@ -44,7 +44,7 @@ exports[`Bolt banner Props status items: start 1`] = `
- This is a banner + The text is aligned to the start
@@ -54,7 +54,7 @@ exports[`Bolt banner Props status items: success 1`] = `
- This is a banner + This banner is trying to convey success
@@ -64,7 +64,7 @@ exports[`Bolt banner Props status items: warning 1`] = `
- This is a banner + This banner is trying to convey warning
diff --git a/packages/components/bolt-banner/__tests__/banner.js b/packages/components/bolt-banner/__tests__/banner.js index 56175ee750..f9a9cd038c 100644 --- a/packages/components/bolt-banner/__tests__/banner.js +++ b/packages/components/bolt-banner/__tests__/banner.js @@ -66,6 +66,7 @@ describe('Bolt banner Props', () => { test(`status items: ${option}`, async () => { const results = await render('@bolt-components-banner/banner.twig', { ...fixtures.defaultData, + content: `This banner is trying to convey ${option}`, status: option, }); @@ -78,6 +79,7 @@ describe('Bolt banner Props', () => { test(`status items: ${option}`, async () => { const results = await render('@bolt-components-banner/banner.twig', { ...fixtures.defaultData, + content: `The text is aligned to the ${option}`, align: option, }); From 5a4e571873817584bfdb3db3482b34c5a972ef4f Mon Sep 17 00:00:00 2001 From: Mroczko Date: Fri, 9 Jul 2021 14:17:08 +0200 Subject: [PATCH 3/5] DS-537: Bring back old test schema --- .../__tests__/__snapshots__/banner.js.snap | 65 ++++--------- .../bolt-banner/__tests__/banner.js | 95 +++++-------------- 2 files changed, 44 insertions(+), 116 deletions(-) diff --git a/packages/components/bolt-banner/__tests__/__snapshots__/banner.js.snap b/packages/components/bolt-banner/__tests__/__snapshots__/banner.js.snap index 1061eb37b2..5641666f1e 100644 --- a/packages/components/bolt-banner/__tests__/__snapshots__/banner.js.snap +++ b/packages/components/bolt-banner/__tests__/__snapshots__/banner.js.snap @@ -1,26 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Bolt banner Props status items: center 1`] = ` - +exports[` Component Basic usage 1`] = ` +
- The text is aligned to the center - -
- -`; - -exports[`Bolt banner Props status items: end 1`] = ` - -
- - The text is aligned to the end + This is a banner
`; -exports[`Bolt banner Props status items: error 1`] = ` +exports[` Component Status of the banner message: error 1`] = `
@@ -30,7 +20,7 @@ exports[`Bolt banner Props status items: error 1`] = ` `; -exports[`Bolt banner Props status items: information 1`] = ` +exports[` Component Status of the banner message: information 1`] = `
@@ -40,17 +30,7 @@ exports[`Bolt banner Props status items: information 1`] = ` `; -exports[`Bolt banner Props status items: start 1`] = ` - -
- - The text is aligned to the start - -
- -`; - -exports[`Bolt banner Props status items: success 1`] = ` +exports[` Component Status of the banner message: success 1`] = `
@@ -60,7 +40,7 @@ exports[`Bolt banner Props status items: success 1`] = ` `; -exports[`Bolt banner Props status items: warning 1`] = ` +exports[` Component Status of the banner message: warning 1`] = `
@@ -70,34 +50,31 @@ exports[`Bolt banner Props status items: warning 1`] = ` `; -exports[`Bolt banner default 1`] = ` - +exports[` Component Text alignment: center 1`] = ` +
- This is a banner + The text is aligned to the center
`; -exports[`Bolt banner default 2`] = ` -
- - -
-`; - -exports[`Bolt banner default 3`] = ` - - This is a banner +exports[` Component Text alignment: end 1`] = ` + +
+ + The text is aligned to the end + +
`; -exports[`Bolt banner default 4`] = ` - -
+exports[` Component Text alignment: start 1`] = ` + +
- This is a banner + The text is aligned to the start
diff --git a/packages/components/bolt-banner/__tests__/banner.js b/packages/components/bolt-banner/__tests__/banner.js index f9a9cd038c..c376e723bc 100644 --- a/packages/components/bolt-banner/__tests__/banner.js +++ b/packages/components/bolt-banner/__tests__/banner.js @@ -1,90 +1,41 @@ -import { render, stopServer, renderWC } from '../../../testing/testing-helpers'; +import { render, stopServer } from '../../../testing/testing-helpers'; import schema from '../banner.schema'; -const componentSelector = 'bolt-banner'; const { status, align } = schema.properties; -let page, fixtures; -afterAll(async () => { - await stopServer(); - await page.close(); -}, 100); +describe(' Component', () => { + afterAll(async () => { + await stopServer(); + }, 100); -beforeEach(async () => { - await page.evaluate(() => { - document.body.innerHTML = ''; - }); -}); - -beforeAll(async () => { - page = await global.__BROWSER__.newPage(); - await page.goto('http://127.0.0.1:4444/', { - timeout: 0, - }); - - const defaultData = { - content: 'This is a banner', - }; - - fixtures = { - defaultData, - }; -}); - -describe('Bolt banner', () => { - // With a Web Component - test(`default`, async () => { - const results = await render('@bolt-components-banner/banner.twig', { - ...fixtures.defaultData, - }); - - const { innerHTML, outerHTML } = await renderWC( - componentSelector, - results.html, - page, - ); - - await expect(results.ok).toBe(true); - await expect(results.html).toMatchSnapshot(); - await expect(innerHTML).toMatchSnapshot(); - await expect(outerHTML).toMatchSnapshot(); - }); - - // Without a Web Component - test(`default`, async () => { + // Basic Usage + test('Basic usage', async () => { const results = await render('@bolt-components-banner/banner.twig', { - ...fixtures.defaultData, + content: 'This is a banner', }); - - await expect(results.ok).toBe(true); - await expect(results.html).toMatchSnapshot(); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); }); -}); -describe('Bolt banner Props', () => { - // Target each of the schema keys with the following pattern - status.enum.forEach(async option => { - test(`status items: ${option}`, async () => { + // Props + status.enum.forEach(async statusChoice => { + test(`Status of the banner message: ${statusChoice}`, async () => { const results = await render('@bolt-components-banner/banner.twig', { - ...fixtures.defaultData, - content: `This banner is trying to convey ${option}`, - status: option, + content: `This banner is trying to convey ${statusChoice}`, + status: statusChoice, }); - - await expect(results.ok).toBe(true); - await expect(results.html).toMatchSnapshot(); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); }); }); - align.enum.forEach(async option => { - test(`status items: ${option}`, async () => { + align.enum.forEach(async alignChoice => { + test(`Text alignment: ${alignChoice}`, async () => { const results = await render('@bolt-components-banner/banner.twig', { - ...fixtures.defaultData, - content: `The text is aligned to the ${option}`, - align: option, + content: `The text is aligned to the ${alignChoice}`, + align: alignChoice, }); - - await expect(results.ok).toBe(true); - await expect(results.html).toMatchSnapshot(); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); }); }); }); From 11d2c62934f9201c2568e3d5f648e928364a375f Mon Sep 17 00:00:00 2001 From: Mroczko Date: Thu, 15 Jul 2021 09:44:08 +0200 Subject: [PATCH 4/5] DS-537: Change single quote to double quote in HTML --- packages/components/bolt-banner/src/banner.twig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/bolt-banner/src/banner.twig b/packages/components/bolt-banner/src/banner.twig index 3823f0015e..fe6ba048f1 100644 --- a/packages/components/bolt-banner/src/banner.twig +++ b/packages/components/bolt-banner/src/banner.twig @@ -32,10 +32,10 @@ {% endfor %} -
+
{{ content }} From f19b5480c3e134d082e42706ac527b91c74bebef Mon Sep 17 00:00:00 2001 From: CJ White Date: Thu, 15 Jul 2021 10:51:38 -0400 Subject: [PATCH 5/5] DS-537: ssr-keep HTML double quotes --- packages/components/bolt-banner/src/banner.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/bolt-banner/src/banner.twig b/packages/components/bolt-banner/src/banner.twig index fe6ba048f1..b66496e0ff 100644 --- a/packages/components/bolt-banner/src/banner.twig +++ b/packages/components/bolt-banner/src/banner.twig @@ -36,7 +36,7 @@ {{ this.props|without('content')|without('class') }} >
- + {{ content }}