@magento/venia-ui 9.1.0-alpha.1 → 9.2.0-alpha.2

package/lib/components/ContactPage/__tests__/__snapshots__/contactPage.spec.js.snap

@@ -0,0 +1,312 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it displays cms blocks 1`] = `
+Array [
+  "Setting Store Title",
+  "Setting Meta",
+  "Setting Meta",
+  <article
+    className="root"
+  >
+    <div
+      className="banner"
+    >
+      <mock-CmsBlock
+        content="Banner Content"
+      />
+    </div>
+    <div
+      className="content"
+    >
+      <div
+        className="formContainer"
+      >
+        <h1
+          className="title"
+        >
+          Contact Us
+        </h1>
+        <p
+          className="subtitle"
+        >
+          Drop us a line and we'll get back to you as soon as possible.
+        </p>
+        <FormError
+          allowErrorMessages={true}
+          errors={Array []}
+        />
+        <mock-Form>
+          <Field
+            id="contact-name"
+            label="Name"
+          >
+            <TextInput
+              autoComplete="name"
+              field="name"
+              id="contact-name"
+              validate={[Function]}
+            />
+          </Field>
+          <Field
+            id="contact-email"
+            label="Email"
+          >
+            <TextInput
+              autoComplete="email"
+              field="email"
+              id="contact-email"
+              placeholder="abc@xyz.com"
+              validate={[Function]}
+            />
+          </Field>
+          <Field
+            id="contact-telephone"
+            label="Phone Number"
+            optional={true}
+          >
+            <TextInput
+              autoComplete="tel"
+              field="telephone"
+              id="contact-telephone"
+              placeholder="(222)-222-2222"
+            />
+          </Field>
+          <Field
+            id="contact-comment"
+            label="Message"
+          >
+            <TextArea
+              autoComplete="comment"
+              field="comment"
+              id="contact-comment"
+              placeholder="Tell us what's on your mind"
+              validate={[Function]}
+            />
+          </Field>
+          <div
+            className="buttonsContainer"
+          >
+            <Button
+              disabled={false}
+              priority="high"
+              type="submit"
+            >
+              Send
+            </Button>
+          </div>
+        </mock-Form>
+      </div>
+      <div
+        className="sideContent"
+      >
+        <mock-CmsBlock
+          content="Sidebar Content"
+        />
+      </div>
+    </div>
+  </article>,
+]
+`;
+
+exports[`it displays errors 1`] = `
+Array [
+  "Setting Store Title",
+  "Setting Meta",
+  "Setting Meta",
+  <article
+    className="root"
+  >
+    <div
+      className="content"
+    >
+      <div
+        className="formContainer"
+      >
+        <h1
+          className="title"
+        >
+          Contact Us
+        </h1>
+        <p
+          className="subtitle"
+        >
+          Drop us a line and we'll get back to you as soon as possible.
+        </p>
+        <FormError
+          allowErrorMessages={true}
+          errors={
+            Array [
+              "message here",
+            ]
+          }
+        />
+        <mock-Form>
+          <Field
+            id="contact-name"
+            label="Name"
+          >
+            <TextInput
+              autoComplete="name"
+              field="name"
+              id="contact-name"
+              validate={[Function]}
+            />
+          </Field>
+          <Field
+            id="contact-email"
+            label="Email"
+          >
+            <TextInput
+              autoComplete="email"
+              field="email"
+              id="contact-email"
+              placeholder="abc@xyz.com"
+              validate={[Function]}
+            />
+          </Field>
+          <Field
+            id="contact-telephone"
+            label="Phone Number"
+            optional={true}
+          >
+            <TextInput
+              autoComplete="tel"
+              field="telephone"
+              id="contact-telephone"
+              placeholder="(222)-222-2222"
+            />
+          </Field>
+          <Field
+            id="contact-comment"
+            label="Message"
+          >
+            <TextArea
+              autoComplete="comment"
+              field="comment"
+              id="contact-comment"
+              placeholder="Tell us what's on your mind"
+              validate={[Function]}
+            />
+          </Field>
+          <div
+            className="buttonsContainer"
+          >
+            <Button
+              disabled={false}
+              priority="high"
+              type="submit"
+            >
+              Send
+            </Button>
+          </div>
+        </mock-Form>
+      </div>
+    </div>
+  </article>,
+]
+`;
+
+exports[`it renders form 1`] = `
+Array [
+  "Setting Store Title",
+  "Setting Meta",
+  "Setting Meta",
+  <article
+    className="root"
+  >
+    <div
+      className="content"
+    >
+      <div
+        className="formContainer"
+      >
+        <h1
+          className="title"
+        >
+          Contact Us
+        </h1>
+        <p
+          className="subtitle"
+        >
+          Drop us a line and we'll get back to you as soon as possible.
+        </p>
+        <FormError
+          allowErrorMessages={true}
+          errors={Array []}
+        />
+        <mock-Form>
+          <Field
+            id="contact-name"
+            label="Name"
+          >
+            <TextInput
+              autoComplete="name"
+              field="name"
+              id="contact-name"
+              validate={[Function]}
+            />
+          </Field>
+          <Field
+            id="contact-email"
+            label="Email"
+          >
+            <TextInput
+              autoComplete="email"
+              field="email"
+              id="contact-email"
+              placeholder="abc@xyz.com"
+              validate={[Function]}
+            />
+          </Field>
+          <Field
+            id="contact-telephone"
+            label="Phone Number"
+            optional={true}
+          >
+            <TextInput
+              autoComplete="tel"
+              field="telephone"
+              id="contact-telephone"
+              placeholder="(222)-222-2222"
+            />
+          </Field>
+          <Field
+            id="contact-comment"
+            label="Message"
+          >
+            <TextArea
+              autoComplete="comment"
+              field="comment"
+              id="contact-comment"
+              placeholder="Tell us what's on your mind"
+              validate={[Function]}
+            />
+          </Field>
+          <div
+            className="buttonsContainer"
+          >
+            <Button
+              disabled={false}
+              priority="high"
+              type="submit"
+            >
+              Send
+            </Button>
+          </div>
+        </mock-Form>
+      </div>
+    </div>
+  </article>,
+]
+`;
+
+exports[`it shows 404 if disabled 1`] = `
+Array [
+  "Setting Store Title",
+  <ErrorView
+    message="Looks like the page you were hoping to find doesn't exist. Sorry about that."
+  />,
+]
+`;
+
+exports[`it shows shimmer while loading 1`] = `<ContactPageShimmer />`;

package/lib/components/ContactPage/__tests__/contactLink.spec.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { useContactLink } from '@magento/peregrine/lib/talons/ContactPage';
+import ContactLink from '../contactLink';
+
+jest.mock('@magento/peregrine/lib/talons/ContactPage');
+jest.mock('../../Shimmer', () => 'Shimmer');
+
+test('it renders children', () => {
+    useContactLink.mockImplementation(() => ({
+        isEnabled: true,
+        isLoading: false
+    }));
+
+    const text = 'Contact Link';
+
+    const instance = createTestInstance(
+        <ContactLink>
+            <div>{text}</div>
+        </ContactLink>
+    );
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('it shows shimmer while loading', () => {
+    useContactLink.mockImplementation(() => ({
+        isEnabled: false,
+        isLoading: true
+    }));
+
+    const text = "Shouldn't appear";
+
+    const instance = createTestInstance(
+        <ContactLink>
+            <div>{text}</div>
+        </ContactLink>
+    );
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('it does not render children when inactive', () => {
+    useContactLink.mockImplementation(() => ({
+        isEnabled: false,
+        isLoading: false
+    }));
+
+    const text = "Shouldn't appear";
+
+    const instance = createTestInstance(
+        <ContactLink>
+            <div>{text}</div>
+        </ContactLink>
+    );
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});

package/lib/components/ContactPage/__tests__/contactPage.shimmer.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import ContactPageShimmer from '../contactPage.shimmer';
+
+jest.mock('../../Shimmer', () => 'Shimmer');
+jest.mock('../../../classify', () => ({
+    useStyle: (...classes) => Object.assign({}, ...classes)
+}));
+
+const classes = {
+    shimmer: 'shimmer-class'
+};
+
+test('it renders', () => {
+    const instance = createTestInstance(
+        <ContactPageShimmer classes={classes} />
+    );
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});

package/lib/components/ContactPage/__tests__/contactPage.spec.js

@@ -0,0 +1,159 @@
+import React from 'react';
+import { createTestInstance, useToasts } from '@magento/peregrine';
+import { useContactPage } from '@magento/peregrine/lib/talons/ContactPage';
+import LoadingIndicator from '../../LoadingIndicator';
+import ContactPage from '../contactPage';
+
+jest.mock('react-intl', () => ({
+    FormattedMessage: ({ defaultMessage }) => defaultMessage,
+    useIntl: () => ({
+        formatMessage: ({ defaultMessage }) => defaultMessage
+    })
+}));
+
+jest.mock('informed', () => ({
+    Form: ({ children }) => <mock-Form>{children}</mock-Form>
+}));
+
+jest.mock('@magento/peregrine', () => {
+    const peregrine = jest.requireActual('@magento/peregrine');
+
+    return {
+        ...peregrine,
+        useToasts: jest.fn()
+    };
+});
+
+jest.mock('@magento/peregrine/lib/talons/ContactPage');
+
+jest.mock('../../../classify');
+
+jest.mock('../../Head', () => ({
+    Meta: () => 'Setting Meta',
+    StoreTitle: () => 'Setting Store Title'
+}));
+
+jest.mock('../../Button', () => 'Button');
+jest.mock('../../CmsBlock/block', () => props => <mock-CmsBlock {...props} />);
+jest.mock('../../FormError', () => 'FormError');
+jest.mock('../../Field', () => 'Field');
+jest.mock('../../TextInput', () => 'TextInput');
+jest.mock('../../TextArea', () => 'TextArea');
+jest.mock('../../LoadingIndicator', () => 'LoadingIndicator');
+jest.mock('../../ErrorView', () => 'ErrorView');
+
+jest.mock('../contactPage.shimmer', () => 'ContactPageShimmer');
+
+const defaultTalonProps = {
+    isEnabled: true,
+    cmsBlocks: [],
+    errors: new Map(),
+    handleSubmit: jest.fn(),
+    isBusy: false,
+    isLoading: false,
+    setFormApi: jest.fn(),
+    response: null
+};
+
+beforeEach(() => {
+    useContactPage.mockImplementation(() => defaultTalonProps);
+
+    useToasts.mockImplementation(() => [
+        null,
+        {
+            addToast: jest.fn()
+        }
+    ]);
+});
+
+test('it renders form', () => {
+    const instance = createTestInstance(<ContactPage />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('it shows shimmer while loading', () => {
+    useContactPage.mockImplementation(() => ({
+        ...defaultTalonProps,
+        isEnabled: false,
+        isLoading: true
+    }));
+
+    const instance = createTestInstance(<ContactPage />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('it shows 404 if disabled', () => {
+    useContactPage.mockImplementation(() => ({
+        ...defaultTalonProps,
+        isEnabled: false
+    }));
+
+    const instance = createTestInstance(<ContactPage />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('it displays loader while sending form', () => {
+    useContactPage.mockImplementation(() => ({
+        ...defaultTalonProps,
+        isBusy: true
+    }));
+
+    const { root } = createTestInstance(<ContactPage />);
+
+    expect(root.findByType(LoadingIndicator)).toBeTruthy();
+});
+
+test('it displays errors', () => {
+    useContactPage.mockImplementation(() => ({
+        ...defaultTalonProps,
+        errors: new Map([['someError', 'message here']])
+    }));
+
+    const instance = createTestInstance(<ContactPage />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('it displays cms blocks', () => {
+    useContactPage.mockImplementation(() => ({
+        ...defaultTalonProps,
+        cmsBlocks: [
+            {
+                identifier: 'contact-us-banner',
+                content: 'Banner Content'
+            },
+            {
+                identifier: 'contact-us-sidebar',
+                content: 'Sidebar Content'
+            }
+        ]
+    }));
+
+    const instance = createTestInstance(<ContactPage />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('it shows success toast', () => {
+    useContactPage.mockImplementation(() => ({
+        ...defaultTalonProps,
+        response: {
+            status: true
+        }
+    }));
+
+    const addToastMock = jest.fn();
+    useToasts.mockImplementation(() => [
+        null,
+        {
+            addToast: addToastMock
+        }
+    ]);
+
+    createTestInstance(<ContactPage />);
+
+    expect(addToastMock).toHaveBeenCalled();
+});

package/lib/components/ContactPage/contactLink.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useContactLink } from '@magento/peregrine/lib/talons/ContactPage';
+import Shimmer from '../Shimmer';
+
+const ContactLink = props => {
+    const { children } = props;
+    const talonProps = useContactLink();
+    const { isEnabled, isLoading } = talonProps;
+
+    if (!isEnabled && !isLoading) {
+        return null;
+    }
+
+    if (isLoading) {
+        return <Shimmer />;
+    }
+
+    return children;
+};
+
+export default ContactLink;