@atlaskit/ds-explorations 2.3.2 → 2.4.0

package/src/components/__tests__/unit/box.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { token } from '@atlaskit/tokens';
+
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '../../../index';
+
+describe('Box component', () => {
+  const testId = 'test';
+
+  it('should render box', () => {
+    const { getByText } = render(
+      <Box>
+        <Text>Box</Text>
+      </Box>,
+    );
+    expect(getByText('Box')).toBeInTheDocument();
+  });
+
+  describe('with SurfaceContext', () => {
+    it('should respect text color when text sets its own color and bg is non-bold', () => {
+      const { getByText } = render(
+        <Box backgroundColor="information">
+          <Text color="color.text">Text</Text>
+        </Box>,
+      );
+      const element = getByText('Text');
+      expect(element).toHaveStyleDeclaration('color', token('color.text'));
+    });
+
+    it("should override text color when background won't meet contrast", () => {
+      const { getByText } = render(
+        <Box backgroundColor="brand.bold">
+          <Text color="disabled">Text</Text>
+        </Box>,
+      );
+      const element = getByText('Text');
+      expect(element).toHaveStyleDeclaration(
+        'color',
+        token('color.text.inverse', '#FFFFFF'),
+      );
+    });
+  });
+
+  it('should render with a given test id', () => {
+    const { getByTestId } = render(
+      <Box testId={testId}>
+        <Text>Box with testid</Text>
+      </Box>,
+    );
+    const element = getByTestId(testId);
+    expect(element).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/unit/inline.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { UNSAFE_Inline as Inline, UNSAFE_Text as Text } from '../../../index';
+
+describe('Inline component', () => {
+  const testId = 'test';
+
+  it('should render inline', () => {
+    const { getByText } = render(
+      <Inline gap="space.050">
+        <Text>1</Text>
+        <Text>2</Text>
+      </Inline>,
+    );
+    expect(getByText('1')).toBeInTheDocument();
+    expect(getByText('2')).toBeInTheDocument();
+  });
+
+  it('should render inline with dividers', () => {
+    const { getByText } = render(
+      <Inline gap="space.050" divider="/">
+        <Text>1</Text>
+        <Text>2</Text>
+      </Inline>,
+    );
+    expect(getByText('1')).toBeInTheDocument();
+    expect(getByText('2')).toBeInTheDocument();
+    expect(getByText('/')).toBeInTheDocument();
+  });
+
+  it('should render with a given test id', () => {
+    const { getByTestId } = render(
+      <Inline gap="space.050" testId={testId}>
+        <Text>1</Text>
+        <Text>2</Text>
+      </Inline>,
+    );
+    const element = getByTestId(testId);
+    expect(element).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/unit/interaction-suface.test.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { act, fireEvent, render } from '@testing-library/react';
 
-import { Box } from '@atlaskit/primitives';
 import { token } from '@atlaskit/tokens';
 
 import {
+  UNSAFE_Box as Box,
   UNSAFE_InteractionSurface as InteractionSurface,
   UNSAFE_Text as Text,
 } from '../../../index';
@@ -57,7 +57,7 @@ describe('InteractionSurface component', () => {
 
   it('should render an inherited hover state if a Box context is present', () => {
     const { getByTestId } = render(
-      <Box backgroundColor="color.background.brand.bold">
+      <Box backgroundColor="brand.bold">
         <InteractionSurface testId="surface">
           <Text>hello</Text>
         </InteractionSurface>

package/src/components/__tests__/unit/stack.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { UNSAFE_Stack as Stack, UNSAFE_Text as Text } from '../../../index';
+
+describe('Stack component', () => {
+  const testId = 'test';
+
+  it('should render stack', () => {
+    const { getByText } = render(
+      <Stack gap="space.050">
+        <Text>1</Text>
+        <Text>2</Text>
+      </Stack>,
+    );
+    expect(getByText('1')).toBeInTheDocument();
+    expect(getByText('2')).toBeInTheDocument();
+  });
+
+  it('should render with a given test id', () => {
+    const { getByTestId } = render(
+      <Stack gap="space.050" testId={testId}>
+        <Text>1</Text>
+        <Text>2</Text>
+      </Stack>,
+    );
+    const element = getByTestId(testId);
+    expect(element).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-alignment-example-should-match-snapshot-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:98a9a1b3f8173c6ed0520cc3da4493d6963527bb8699be3b26729392e25e0539
+size 24062

package/src/components/__tests__/visual-regression/__image_snapshots__/inline-snapshot-test-tsx-inline-spacing-example-should-match-snapshot-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3ec919ee45580a3e93dca991e3c80a0523a142c3096ad364e622ad4b1fdfad76
+size 37966

package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-alignment-example-should-match-snapshot-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3d5a9d4369d39aea2c98b9b329881f1769e29e2931321b85a000d81c88c1f0ab
+size 26736

package/src/components/__tests__/visual-regression/__image_snapshots__/stack-snapshot-test-tsx-stack-spacing-example-should-match-snapshot-1-snap.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7fc46772ba9b71f230f1bfe126adb00e478061bcc01315aeecb1d0634f0c7d85
+size 13156

package/src/components/__tests__/visual-regression/inline-snapshot-test.tsx

@@ -0,0 +1,28 @@
+import {
+  getExampleUrl,
+  loadPage,
+  takeElementScreenShot,
+} from '@atlaskit/visual-regression/helper';
+
+describe('Inline', () => {
+  it.each(['spacing', 'alignment'])(
+    `%s example should match snapshot`,
+    async (selector) => {
+      const url = getExampleUrl(
+        'design-system',
+        'ds-explorations',
+        'inline',
+        global.__BASEURL__,
+      );
+      const { page } = global;
+
+      await loadPage(page, url);
+
+      const image = await takeElementScreenShot(
+        page,
+        `[data-testid="inline-${selector}"]`,
+      );
+      expect(image).toMatchProdImageSnapshot();
+    },
+  );
+});

package/src/components/__tests__/visual-regression/stack-snapshot-test.tsx

@@ -0,0 +1,28 @@
+import {
+  getExampleUrl,
+  loadPage,
+  takeElementScreenShot,
+} from '@atlaskit/visual-regression/helper';
+
+describe('Stack', () => {
+  it.each(['spacing', 'alignment'])(
+    `%s example should match snapshot`,
+    async (selector) => {
+      const url = getExampleUrl(
+        'design-system',
+        'ds-explorations',
+        'stack',
+        global.__BASEURL__,
+      );
+      const { page } = global;
+
+      await loadPage(page, url);
+
+      const image = await takeElementScreenShot(
+        page,
+        `[data-testid="stack-${selector}"]`,
+      );
+      expect(image).toMatchProdImageSnapshot();
+    },
+  );
+});

package/src/components/__tests__/vr-tests/box-snapshot-test.vr.tsx

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { snapshot } from '@af/visual-regression';
+
+import Box from '../../../../examples/01-box';
+
+snapshot(Box);