Placeholder | Docs | Testing and Documentation for Placeholder component

packages/components/bolt-placeholder/TESTING.md

@@ -0,0 +1,39 @@
+# Placeholder component testing steps
+
+## Placeholder component render as expected (functionally and visually)
+
+The server-side pre-rendered `bolt-placeholder` component should look almost identical to the client-side rendered version. To verify:
+
+1. Disable javascript and view the [Placeholder Demo page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-placeholder/index.html).
+2. Then, enable javascript and watch as the placeholder re-renders on the client-side.
+3. The layout should not shift, e.g. the spacing in between each placeholder and any animations should be identical before and after the web component re-renders.
+
+# Placeholder 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: placeholder
+
+    In order to create a placheholder that represents the absence, or the potential to add, an element in a specific location
+    As a UX designer, developer or content administrator
+    I need to ensure the "bolt-placeholder" component renders and functions as expected
+
+## Scenario: animated variations
+
+1. Given I am viewing the [animated variation page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-placeholder-placeholder-component--animated/02-components-placeholder-placeholder-component--animated.html).
+2. A gray bar should span the horizontal length of the screen view with an animated, dash-line border moving clockwise around the edge.
+
+## Scenario: size variations
+
+1. Given I am viewing the [size variations page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-placeholder-placeholder-component--sizes/02-components-placeholder-placeholder-component--sizes.html).
+2. Extra small size, gray bar with dash-line border that spans the horizontal length of the screen view.
+3. Small size, gray bar with dash-line border that spans the horizontal length of the screen view.
+4. Medium size, gray bar with dash-line border that spans the horizontal length of the screen view.
+5. Large size, gray bar with dash-line border that spans the horizontal length of the screen view.
+6. Extra large size, gray bar with dash-line border that spans the horizontal length of the screen view. 
+
+## Scenario: stacking variations
+
+1. Given I am viewing the [stacking components page](https://boltdesignsystem.com/pattern-lab/patterns/02-components-placeholder-placeholder-component--stacked/02-components-placeholder-placeholder-component--stacked.html).
+2. Two, vertically arranged, gray bars that span the horizontal length of the screen view.
+3. Both with animated, dash-line borders moving clockwise around their edge.

packages/components/bolt-placeholder/__tests__/__snapshots__/placeholder.js.snap

@@ -0,0 +1,148 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<bolt-placeholder> Component Placeholder size: large 1`] = `
+<bolt-placeholder size="large">
+  <replace-with-children class="c-bolt-placeholder">
+    <replace-with-children class="c-bolt-placeholder__wrapper ">
+      <replace-with-children class="c-bolt-placeholder__wrapper-y">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__wrapper-x">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__content c-bolt-placeholder__content--large">
+        large Bolt Placeholder
+      </replace-with-children>
+    </replace-with-children>
+  </replace-with-children>
+</bolt-placeholder>
+`;
+
+exports[`<bolt-placeholder> Component Placeholder size: medium 1`] = `
+<bolt-placeholder size="medium">
+  <replace-with-children class="c-bolt-placeholder">
+    <replace-with-children class="c-bolt-placeholder__wrapper ">
+      <replace-with-children class="c-bolt-placeholder__wrapper-y">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__wrapper-x">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__content c-bolt-placeholder__content--medium">
+        medium Bolt Placeholder
+      </replace-with-children>
+    </replace-with-children>
+  </replace-with-children>
+</bolt-placeholder>
+`;
+
+exports[`<bolt-placeholder> Component Placeholder size: small 1`] = `
+<bolt-placeholder size="small">
+  <replace-with-children class="c-bolt-placeholder">
+    <replace-with-children class="c-bolt-placeholder__wrapper ">
+      <replace-with-children class="c-bolt-placeholder__wrapper-y">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__wrapper-x">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__content c-bolt-placeholder__content--small">
+        small Bolt Placeholder
+      </replace-with-children>
+    </replace-with-children>
+  </replace-with-children>
+</bolt-placeholder>
+`;
+
+exports[`<bolt-placeholder> Component Placeholder size: xlarge 1`] = `
+<bolt-placeholder size="xlarge">
+  <replace-with-children class="c-bolt-placeholder">
+    <replace-with-children class="c-bolt-placeholder__wrapper ">
+      <replace-with-children class="c-bolt-placeholder__wrapper-y">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__wrapper-x">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__content c-bolt-placeholder__content--xlarge">
+        xlarge Bolt Placeholder
+      </replace-with-children>
+    </replace-with-children>
+  </replace-with-children>
+</bolt-placeholder>
+`;
+
+exports[`<bolt-placeholder> Component Placeholder size: xsmall 1`] = `
+<bolt-placeholder size="xsmall">
+  <replace-with-children class="c-bolt-placeholder">
+    <replace-with-children class="c-bolt-placeholder__wrapper ">
+      <replace-with-children class="c-bolt-placeholder__wrapper-y">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__wrapper-x">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__content c-bolt-placeholder__content--xsmall">
+        xsmall Bolt Placeholder
+      </replace-with-children>
+    </replace-with-children>
+  </replace-with-children>
+</bolt-placeholder>
+`;
+
+exports[`<bolt-placeholder> Component placeholder component 1`] = `
+<bolt-placeholder size="large">
+  <replace-with-children class="c-bolt-placeholder">
+    <replace-with-children class="c-bolt-placeholder__wrapper ">
+      <replace-with-children class="c-bolt-placeholder__wrapper-y">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__wrapper-x">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__content c-bolt-placeholder__content--large">
+        Bolt Placeholder Example
+      </replace-with-children>
+    </replace-with-children>
+  </replace-with-children>
+</bolt-placeholder>
+`;
+
+exports[`<bolt-placeholder> Component placeholder component animated 1`] = `
+<bolt-placeholder size="large"
+                  animated
+>
+  <replace-with-children class="c-bolt-placeholder">
+    <replace-with-children class="c-bolt-placeholder__wrapper c-bolt-placeholder__wrapper--animated">
+      <replace-with-children class="c-bolt-placeholder__wrapper-y">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__wrapper-x">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__content c-bolt-placeholder__content--large">
+        Bolt Placeholder Example
+      </replace-with-children>
+    </replace-with-children>
+  </replace-with-children>
+</bolt-placeholder>
+`;
+
+exports[`<bolt-placeholder> Component stacked <bolt-placeholder> 1`] = `
+<bolt-placeholder size="large"
+                  animated
+>
+  <replace-with-children class="c-bolt-placeholder">
+    <replace-with-children class="c-bolt-placeholder__wrapper c-bolt-placeholder__wrapper--animated">
+      <replace-with-children class="c-bolt-placeholder__wrapper-y">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__wrapper-x">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__content c-bolt-placeholder__content--large">
+        Bolt Placeholder Example
+      </replace-with-children>
+    </replace-with-children>
+  </replace-with-children>
+</bolt-placeholder>
+<bolt-placeholder size="large"
+                  animated
+>
+  <replace-with-children class="c-bolt-placeholder">
+    <replace-with-children class="c-bolt-placeholder__wrapper c-bolt-placeholder__wrapper--animated">
+      <replace-with-children class="c-bolt-placeholder__wrapper-y">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__wrapper-x">
+      </replace-with-children>
+      <replace-with-children class="c-bolt-placeholder__content c-bolt-placeholder__content--large">
+        Bolt Placeholder Example
+      </replace-with-children>
+    </replace-with-children>
+  </replace-with-children>
+</bolt-placeholder>
+`;

packages/components/bolt-placeholder/__tests__/placeholder.js

@@ -0,0 +1,65 @@
+import { render, renderString } from '@bolt/twig-renderer';
+
+const { readYamlFileSync } = require('@bolt/build-tools/utils/yaml');
+const { join } = require('path');
+const schema = readYamlFileSync(join(__dirname, '../placeholder.schema.yml'));
+const { size } = schema.properties;
+
+describe('<bolt-placeholder> Component', () => {
+  test('placeholder component animated', async () => {
+    const results = await render(
+      '@bolt-components-placeholder/placeholder.twig',
+      {
+        text: 'Bolt Placeholder Example',
+        size: 'large',
+        animated: true,
+      },
+    );
+    expect(results.ok).toBe(true);
+    expect(results.html).toMatchSnapshot();
+  });
+
+  test('placeholder component', async () => {
+    const results = await render(
+      '@bolt-components-placeholder/placeholder.twig',
+      {
+        text: 'Bolt Placeholder Example',
+        size: 'large',
+      },
+    );
+    expect(results.ok).toBe(true);
+    expect(results.html).toMatchSnapshot();
+  });
+
+  size.enum.forEach(async sizeChoice => {
+    test(`Placeholder size: ${sizeChoice}`, async () => {
+      const results = await render(
+        '@bolt-components-placeholder/placeholder.twig',
+        {
+          text: `${sizeChoice} Bolt Placeholder`,
+          size: sizeChoice,
+        },
+      );
+      expect(results.ok).toBe(true);
+      expect(results.html).toMatchSnapshot();
+    });
+  });
+
+  test('stacked <bolt-placeholder>', async () => {
+    const results = await renderString(`
+    {% include "@bolt-components-placeholder/placeholder.twig" with {
+      text: "Bolt Placeholder Example",
+      size: "large",
+      animated: true
+    } %}
+
+    {% include "@bolt-components-placeholder/placeholder.twig" with {
+      text: "Bolt Placeholder Example",
+      size: "large",
+      animated: true
+    } %}
+    `);
+    expect(results.ok).toBe(true);
+    expect(results.html).toMatchSnapshot();
+  });
+});