@zohodesk/components 1.1.0 → 1.1.1

package/es/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -0,0 +1,440 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button component Should be render with the basic set customButtonclass with buttonClass  1`] = `
+<DocumentFragment>
+  <button
+    class="customButtonClass bold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set customstatusSize props with buttonClass  1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set customstyle  1`] = `
+<DocumentFragment>
+  <button
+    class="bold buttonBold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set of default props 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set of default props with disabled is true 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium"
+    data-id="buttonComp_disabled"
+    data-selector-id="button"
+    data-test-id="buttonComp_disabled"
+    disabled=""
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set of default props with isBold is false 1`] = `
+<DocumentFragment>
+  <button
+    class="primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set of default props with needAppearance is false 1`] = `
+<DocumentFragment>
+  <button
+    class="bold"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the basic set of default props with rounded is true 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary rounded medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should be render with the customstyle with medium  1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary buttonMedium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render CustomStatusclassname of buttons - loading 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium loader"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    disabled=""
+    type="button"
+  >
+    Button
+    <div
+      class="overlay"
+    >
+      <div
+        class="loading mediumloading"
+      >
+        <div
+          class="customStautusClassName loadingelement primaryelement"
+        />
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render CustomStatusclassname of buttons - success 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium loader"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+    <div
+      class="overlay"
+    >
+      <div
+        class="success"
+      >
+        <div
+          class="customStautusClassName successelement primarysuccess"
+        />
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Sizes of buttons - large 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary large"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Sizes of buttons - medium 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Sizes of buttons - small 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary small"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Sizes of buttons - xlarge 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary xlarge"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Status of buttons - loading 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium loader"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    disabled=""
+    type="button"
+  >
+    Button
+    <div
+      class="overlay"
+    >
+      <div
+        class="loading mediumloading"
+      >
+        <div
+          class="loadingelement primaryelement"
+        />
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Status of buttons - none 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render Status of buttons - success 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium loader"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+    <div
+      class="overlay"
+    >
+      <div
+        class="success"
+      >
+        <div
+          class="successelement primarysuccess"
+        />
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - dangerFilled 1`] = `
+<DocumentFragment>
+  <button
+    class="bold dangerfilled medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - info 1`] = `
+<DocumentFragment>
+  <button
+    class="bold medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - plainPrimary 1`] = `
+<DocumentFragment>
+  <button
+    class="bold plainprimary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - plainSecondary 1`] = `
+<DocumentFragment>
+  <button
+    class="bold plainsecondary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - primary 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - primaryFilled 1`] = `
+<DocumentFragment>
+  <button
+    class="bold primaryfilled medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - secondary 1`] = `
+<DocumentFragment>
+  <button
+    class="bold secondary medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - secondaryFilled 1`] = `
+<DocumentFragment>
+  <button
+    class="bold secondaryfilled medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - successFilled 1`] = `
+<DocumentFragment>
+  <button
+    class="bold successfilled medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button component Should render palette of buttons - tertiaryFilled 1`] = `
+<DocumentFragment>
+  <button
+    class="bold tertiaryfilled medium"
+    data-id="buttonComp"
+    data-selector-id="button"
+    data-test-id="buttonComp"
+    type="button"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;

package/lib/Button/__tests__/Button.spec.js

@@ -0,0 +1,62 @@
+// import React from 'react';
+// import Button from '../Button';
+// import {render} from "@testing-library/react"
+// describe('Button component', () => {
+//     test('Should be render with the basic set of default props', () => {
+//         const { asFragment } = render(<Button />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     const palette = ['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled'];
+//     test.each(palette)('Should render palette of buttons - %s', (palette) => {
+//       const { asFragment } = render(<Button palette={palette} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     const size = ['small', 'medium', 'large', 'xlarge'];
+//     test.each(size)('Should render Sizes of buttons - %s', (size) => {
+//       const { asFragment } = render(<Button size={size} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     const status = ['loading', 'success', 'none'];
+//     test.each(status)('Should render Status of buttons - %s', (status) => {
+//       const { asFragment } = render(<Button status={status} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     const customStatus = ['loading', 'success'];
+//     test.each(customStatus)('Should render CustomStatusclassname of buttons - %s', (customStatus) => {
+//         const { asFragment } = render(<Button status={customStatus} customClass={{customStatus:"customStautusClassName"}} />);
+//       expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set of default props with disabled is true', () => {
+//         const { asFragment } = render(<Button disabled />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set of default props with isBold is false', () => {
+//         const { asFragment } = render(<Button isBold={false} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set of default props with rounded is true', () => {
+//         const { asFragment } = render(<Button rounded />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set of default props with needAppearance is false', () => {
+//         const { asFragment } = render(<Button needAppearance={false} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set customButtonclass with buttonClass ', () => {
+//         const { asFragment } = render(<Button customClass={{customButton:"customButtonClass"}} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set customstatusSize props with buttonClass ', () => {
+//         const { asFragment } = render(<Button customClass={{customStatusSize:"customButtonClass"}} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the basic set customstyle ', () => {
+//         const { asFragment } = render(<Button customStyle={{bold: "buttonBold"}} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+//     test('Should be render with the customstyle with medium ', () => {
+//         const { asFragment } = render(<Button customStyle={{$medium: "buttonMedium"}} />);
+//         expect(asFragment()).toMatchSnapshot();
+//     });
+// });
+"use strict";