diff --git a/packages/components/bolt-share/TESTING.md b/packages/components/bolt-share/TESTING.md new file mode 100644 index 0000000000..6a8b89bf9f --- /dev/null +++ b/packages/components/bolt-share/TESTING.md @@ -0,0 +1,26 @@ +# Share component functional testing steps + +Functional testing should be performed manually by the QA team across the standard compliment of browsers. In each scenario, browser-type is specified when necessary. If browser type is not specified, the test applies to both "desktop" and "mobile" browsers. + +## Feature: share + + In order to present social icon links in a share tool + As a UX designer, developer or content administrator + I need to ensure the "bolt-share" component renders and functions as expected + +## Scenario: size variations + +1. Given I am viewing the [size variations page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-share-10-share-size-variations/02-components-share-10-share-size-variations.html). +2. The share tool should be presented in 2 sizes: small and medium. + +## Scenario: opacity variations + +1. Given I am viewing the [opacity variations page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-share-15-share-opacity-variations/02-components-share-15-share-opacity-variations.html). +2. The share tool should be presented in 5 opacity values: 20, 40, 60, 80, and 100. + +## Scenario: align variations + +1. Given I am viewing the [align variations page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-share-20-share-align-variations/02-components-share-20-share-align-variations.html). +2. Start align should show share items aligned to the left (start of the share). +3. Center align should show share items aligned to the center. +4. End align should show share items aligned to the right (end of the share). diff --git a/packages/components/bolt-share/__tests__/__snapshots__/share.js.snap b/packages/components/bolt-share/__tests__/__snapshots__/share.js.snap new file mode 100644 index 0000000000..78db07f7bd --- /dev/null +++ b/packages/components/bolt-share/__tests__/__snapshots__/share.js.snap @@ -0,0 +1,1199 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` Component basic usage 1`] = ` + + +
+ + + + + +
+ + +`; + +exports[` Component share align: center 1`] = ` + + +
+ + + + + +
+ + +`; + +exports[` Component share align: end 1`] = ` + + +
+ + + + + +
+ + +`; + +exports[` Component share align: start 1`] = ` + + +
+ + + + + +
+ + +`; + +exports[` Component share opacity: 20 1`] = ` + + +
+ + + + + +
+ + +`; + +exports[` Component share opacity: 40 1`] = ` + + +
+ + + + + +
+ + +`; + +exports[` Component share opacity: 60 1`] = ` + + +
+ + + + + +
+ + +`; + +exports[` Component share opacity: 80 1`] = ` + + +
+ + + + + +
+ + +`; + +exports[` Component share opacity: 100 1`] = ` + + +
+ + + + + +
+ + +`; + +exports[` Component share size: medium 1`] = ` + + +
+ + + + + +
+ + +`; + +exports[` Component share size: small 1`] = ` + + +
+ + + + + +
+ + +`; diff --git a/packages/components/bolt-share/__tests__/share.js b/packages/components/bolt-share/__tests__/share.js new file mode 100644 index 0000000000..d3bd705c26 --- /dev/null +++ b/packages/components/bolt-share/__tests__/share.js @@ -0,0 +1,153 @@ +import { + render, + renderString, + stop as stopTwigRenderer, +} from '@bolt/twig-renderer'; +const { readYamlFileSync } = require('@bolt/build-tools/utils/yaml'); +const { join } = require('path'); +const schema = readYamlFileSync(join(__dirname, '../share.schema.yml')); +const { size, opacity, align } = schema.properties; + +async function renderTwig(template, data) { + return await render(template, data, true); +} + +async function renderTwigString(template, data) { + return await renderString(template, data, true); +} + +const timeout = 60000; + +describe(' Component', async () => { + afterAll(async () => { + await stopTwigRenderer(); + }, timeout); + + test('basic usage', async () => { + const results = await renderTwig('@bolt-components-share/share.twig', { + sources: [ + { + name: 'facebook', + url: + 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse', + }, + { + name: 'twitter', + url: + 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!', + }, + { + name: 'linkedin', + url: + 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com', + }, + { + name: 'email', + url: + 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com', + }, + ], + copy_to_clipboard: { + text_to_copy: 'https://boltdesignsystem.com', + }, + }); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + }); + + size.enum.forEach(async sizeChoice => { + test(`share size: ${sizeChoice}`, async () => { + const results = await renderTwig('@bolt-components-share/share.twig', { + size: sizeChoice, + sources: [ + { + name: 'facebook', + url: + 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse', + }, + { + name: 'twitter', + url: + 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!', + }, + { + name: 'linkedin', + url: + 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com', + }, + { + name: 'email', + url: + 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com', + }, + ], + }); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + }); + }); + + opacity.enum.forEach(async opacityChoice => { + test(`share opacity: ${opacityChoice}`, async () => { + const results = await renderTwig('@bolt-components-share/share.twig', { + opacity: opacityChoice, + sources: [ + { + name: 'facebook', + url: + 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse', + }, + { + name: 'twitter', + url: + 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!', + }, + { + name: 'linkedin', + url: + 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com', + }, + { + name: 'email', + url: + 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com', + }, + ], + }); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + }); + }); + + align.enum.forEach(async alignChoice => { + test(`share align: ${alignChoice}`, async () => { + const results = await renderTwig('@bolt-components-share/share.twig', { + align: alignChoice, + sources: [ + { + name: 'facebook', + url: + 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse', + }, + { + name: 'twitter', + url: + 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!', + }, + { + name: 'linkedin', + url: + 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com', + }, + { + name: 'email', + url: + 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com', + }, + ], + }); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + }); + }); +});