[Layout foundations] Add tests for Stack (#7106)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Resolves #7093 <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

Adds test for the `AlphaStack` component

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: chazdean

polaris-react/src/components/AlphaStack/AlphaStack.tsx

@@ -30,7 +30,7 @@ export const AlphaStack = ({
   const className = classNames(styles.Stack);
 
   const style = {
-    '--pc-stack-align': align,
+    '--pc-stack-align': align ? `${align}` : '',
     ...(spacing ? {'--pc-stack-spacing': `var(--p-space-${spacing})`} : {}),
   } as React.CSSProperties;
 

polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx

@@ -3,12 +3,39 @@ import {mountWithApp} from 'tests/utilities';
 
 import {AlphaStack} from '../AlphaStack';
 
+const text = 'This is a stack';
+const children = <p>{text}</p>;
+
 describe('<AlphaStack />', () => {
-  const renderChildren = () => [0, 1].map((i) => <div key={i}>Child {i}</div>);
+  it('renders children', () => {
+    const stack = mountWithApp(<AlphaStack>{children}</AlphaStack>);
+
+    expect(stack).toContainReactComponent('p', {children: text});
+  });
+
+  it('renders custom properties by default', () => {
+    const stack = mountWithApp(<AlphaStack>{children}</AlphaStack>);
+
+    expect(stack).toContainReactComponent('div', {
+      style: {
+        '--pc-stack-align': 'start',
+        '--pc-stack-spacing': 'var(--p-space-4)',
+      } as React.CSSProperties,
+    });
+  });
 
-  it('renders its children', () => {
-    const stack = mountWithApp(<AlphaStack>{renderChildren()}</AlphaStack>);
+  it('overrides custom properties if they are passed in', () => {
+    const stack = mountWithApp(
+      <AlphaStack align="center" spacing="10">
+        {children}
+      </AlphaStack>,
+    );
 
-    expect(stack).toContainReactComponentTimes('div', 3);
+    expect(stack).toContainReactComponent('div', {
+      style: {
+        '--pc-stack-align': 'center',
+        '--pc-stack-spacing': 'var(--p-space-10)',
+      } as React.CSSProperties,
+    });
   });
 });