diff --git a/packages/components/bolt-device-viewer/TESTING.md b/packages/components/bolt-device-viewer/TESTING.md new file mode 100644 index 0000000000..453cc31521 --- /dev/null +++ b/packages/components/bolt-device-viewer/TESTING.md @@ -0,0 +1,52 @@ +# Device Viewer component testing steps + +## Device Viewer component render as expected (functionally and visually) + +The server-side pre-rendered `bolt-device-viewer` component should look almost identical to the client-side rendered version. To verify: + +1. Disable javascript and view the [Device Viewer Demo page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-device-viewer-05-device-viewer/02-components-device-viewer-05-device-viewer.html). +2. Then, enable javascript and watch as the Device Viewer re-renders on the client-side. +3. The layout should not shift, e.g. the appearance of each device image should be identical before and after the web component re-renders. + +# Device Viewer 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: device viewer + + In order to present application layouts as seen by mulitple device viewports + As a UX designer, developer or content administrator + I need to ensure the "bolt-device-viewer" component renders and functions as expected + +## Scenario: Ipad display variations + +1. Given I am viewing the [Ipad display variations page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-device-viewer-10-device-viewer-ipad-variation/02-components-device-viewer-10-device-viewer-ipad-variation.html). +2. First display varient should show a black Ipad in a portrait orientation. +3. Second display varient should be a black Ipad in a landscape orientation. +4. Third display varient should be a silver Ipad in a portrait orientation. +5. Fourth display varient should be a silver Ipad in a landsacpe orientation. +6. Fifth display varient should be a silver Ipad in a portrait orientation with a magnifying glass icon in viewport center. +7. When hovered over with the cursor a movable magnification view becomes visible. +8. Sixth display varient should be a black Ipad in a landscape orientation with a magnifying glass icon in viewport center. +9. When hovered over with the cursor a movable magnification view becomes visible. + +## Scenario: Iphone8 display variations + +1. Given I am viewing the [Iphone8 variations page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-device-viewer-15-device-viewer-iphone8-variation/02-components-device-viewer-15-device-viewer-iphone8-variation.html). +2. First display varient should show a black Iphone8 in a portrait orientation. +3. Second display varient should be a black Iphone8 in a landscape orientation. +4. Third display varient should be a silver Iphone8 in a portrait orientation. +5. Fourth display varient should be a silver Iphone8 in a landsacpe orientation. +6. Third display varient should be a gold Iphone8 in a portrait orientation. +7. Fourth display varient should be a gold Iphone8 in a landsacpe orientation. +8. Fifth display varient should be a silver Iphone8 in a portrait orientation with a magnifying glass icon in viewport center. +9. When hovered over with the cursor a movable magnification view becomes visible. +10. Sixth display varient should be a black Iphone8 in a landscape orientation with a magnifying glass icon in viewport center. +11. When hovered over with the cursor a movable magnification view becomes visible. + +## Scenario: Macbook variations + +1. Given I am viewing the [Macbook variations page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-device-viewer-20-device-viewer-macbook-variation/02-components-device-viewer-20-device-viewer-macbook-variation.html). +2. First display varient should display the default macbook view. +3. Second display should display a macbook with a magnifying glass icon in the viewport center. +4. When hovered over with the cursor a movable magnification view becomes visible. diff --git a/packages/components/bolt-device-viewer/__tests__/__snapshots__/device-viewer.js.snap b/packages/components/bolt-device-viewer/__tests__/__snapshots__/device-viewer.js.snap new file mode 100644 index 0000000000..56b90d14be --- /dev/null +++ b/packages/components/bolt-device-viewer/__tests__/__snapshots__/device-viewer.js.snap @@ -0,0 +1,339 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` Component basic usage 1`] = ` + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + +
+
+ +`; + +exports[` Component decvice-viewer display: ipad 1`] = ` + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[` Component decvice-viewer display: iphone8 1`] = ` + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[` Component decvice-viewer display: macbook 1`] = ` + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[` Component device-viewer display: black 1`] = ` + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[` Component device-viewer display: gold 1`] = ` + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[` Component device-viewer display: landscape 1`] = ` + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[` Component device-viewer display: portrait 1`] = ` + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[` Component device-viewer display: silver 1`] = ` + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[` Component usage with magnification 1`] = ` + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+
+ +`; diff --git a/packages/components/bolt-device-viewer/__tests__/device-viewer.js b/packages/components/bolt-device-viewer/__tests__/device-viewer.js new file mode 100644 index 0000000000..730bd11056 --- /dev/null +++ b/packages/components/bolt-device-viewer/__tests__/device-viewer.js @@ -0,0 +1,81 @@ +import { render } from '../../../testing/testing-helpers'; +const { readYamlFileSync } = require('@bolt/build-tools/utils/yaml'); +const { join } = require('path'); +const schema = readYamlFileSync(join(__dirname, '../device-viewer.schema.yml')); +const { deviceName, color, orientation } = schema.properties; + +describe(' Component', () => { + test('basic usage', async () => { + const results = await render( + '@bolt-components-device-viewer/device-viewer.twig', + { + device: 'iphone8', + orientation: 'portrait', + color: 'white', + image: { + src: '/fixtures/device-screenshot--phone.jpg', + }, + }, + ); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + }); + + deviceName.enum.forEach(async deviceChoice => { + test(`decvice-viewer display: ${deviceChoice}`, async () => { + const results = await render( + '@bolt-components-device-viewer/device-viewer.twig', + { + device: deviceChoice, + }, + ); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + }); + }); + + color.enum.forEach(async colorChoice => { + test(`device-viewer display: ${colorChoice}`, async () => { + const results = await render( + '@bolt-components-device-viewer/device-viewer.twig', + { + device: 'iphone8', + color: colorChoice, + }, + ); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + }); + }); + + orientation.enum.forEach(async orientationChoice => { + test(`device-viewer display: ${orientationChoice}`, async () => { + const results = await render( + '@bolt-components-device-viewer/device-viewer.twig', + { + device: 'iphone8', + orientation: orientationChoice, + }, + ); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + }); + }); + + test('usage with magnification', async () => { + const results = await render( + '@bolt-components-device-viewer/device-viewer.twig', + { + device: 'ipad', + orientation: 'portrait', + color: 'white', + image: { + src: '/fixtures/device-screenshot--tablet-portrait.jpg', + }, + magnify: true, + }, + ); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + }); +}); diff --git a/packages/components/bolt-device-viewer/__tests__/fixtures/device-screenshot--desktop.jpg b/packages/components/bolt-device-viewer/__tests__/fixtures/device-screenshot--desktop.jpg new file mode 100644 index 0000000000..070fe86c27 Binary files /dev/null and b/packages/components/bolt-device-viewer/__tests__/fixtures/device-screenshot--desktop.jpg differ diff --git a/packages/components/bolt-device-viewer/__tests__/fixtures/device-screenshot--phone.jpg b/packages/components/bolt-device-viewer/__tests__/fixtures/device-screenshot--phone.jpg new file mode 100644 index 0000000000..40b02846da Binary files /dev/null and b/packages/components/bolt-device-viewer/__tests__/fixtures/device-screenshot--phone.jpg differ diff --git a/packages/components/bolt-device-viewer/__tests__/fixtures/device-screenshot--tablet-portrait.jpg b/packages/components/bolt-device-viewer/__tests__/fixtures/device-screenshot--tablet-portrait.jpg new file mode 100644 index 0000000000..6dacf1d9a3 Binary files /dev/null and b/packages/components/bolt-device-viewer/__tests__/fixtures/device-screenshot--tablet-portrait.jpg differ diff --git a/packages/components/bolt-device-viewer/__tests__/fixtures/device-screenshot--tablet.jpg b/packages/components/bolt-device-viewer/__tests__/fixtures/device-screenshot--tablet.jpg new file mode 100644 index 0000000000..6e8b604f3b Binary files /dev/null and b/packages/components/bolt-device-viewer/__tests__/fixtures/device-screenshot--tablet.jpg differ