@hero-design/rn 7.9.0 → 7.10.2-rc.0

package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx

@@ -1,23 +1,159 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { Container, Label, StyledTextInput } from '../StyledTextInput';
+import { StyledHeaderText } from '../../FAB/ActionGroup/StyledActionGroup';
+import {
+  StyledLabel,
+  StyledTextInput,
+  StyledMaxLengthMessage,
+  StyledError,
+  StyledErrorContainer,
+  StyledAsteriskLabel,
+  StyledLabelContainer,
+  StyledLabelInsideTextInput,
+  StyledBorderBackDrop,
+} from '../StyledTextInput';
 
-describe('Container', () => {
-  it('renders correctly', () => {
-    const { toJSON } = renderWithTheme(<Container />);
+describe('Label', () => {
+  it.each`
+    themeVariant
+    ${'default'}
+    ${'filled'}
+    ${'focused'}
+    ${'error'}
+    ${'disabled'}
+    ${'readonly'}
+  `('renders correctly with themeVariant $themeVariant', ({ themeVariant }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledLabel themeVariant={themeVariant}>Label</StyledLabel>
+    );
 
     expect(toJSON()).toMatchSnapshot();
   });
 });
+describe('LabelInsideTextInput', () => {
+  it.each`
+    themeVariant
+    ${'default'}
+    ${'filled'}
+    ${'focused'}
+    ${'error'}
+    ${'disabled'}
+    ${'readonly'}
+  `(
+    'renders correctly with themeVariant $themeVariant',
+    ({ themeVariant }): void => {
+      const { toJSON } = renderWithTheme(
+        <StyledLabelInsideTextInput themeVariant={themeVariant}>
+          Label
+        </StyledLabelInsideTextInput>
+      );
 
-describe('Label', () => {
-  it('renders correctly', () => {
-    const { toJSON } = renderWithTheme(<Label>Label</Label>);
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});
+
+describe('LabelContainer', () => {
+  it('renders correctly', (): void => {
+    const { toJSON } = renderWithTheme(<StyledLabelContainer />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledAsteriskLabel', () => {
+  it.each`
+    themeVariant
+    ${'default'}
+    ${'filled'}
+    ${'focused'}
+    ${'error'}
+    ${'disabled'}
+    ${'readonly'}
+  `(
+    'renders correctly with themeVariant $themeVariant',
+    ({ themeVariant }): void => {
+      const { toJSON } = renderWithTheme(
+        <StyledAsteriskLabel themeVariant={themeVariant}>*</StyledAsteriskLabel>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});
+
+describe('StyledErrorMessageContainer', () => {
+  it('renders correctly', (): void => {
+    const { toJSON } = renderWithTheme(<StyledErrorContainer />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledErrorMessage', () => {
+  it('renders correctly', (): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledError>must not exceed character limit</StyledError>
+    );
 
     expect(toJSON()).toMatchSnapshot();
   });
 });
 
+describe('StyledMaxLengthMessage', () => {
+  it.each`
+    themeVariant
+    ${'default'}
+    ${'filled'}
+    ${'focused'}
+    ${'error'}
+    ${'disabled'}
+    ${'readonly'}
+  `(
+    'renders correctly with themeVariant $themeVariant',
+    ({ themeVariant }): void => {
+      const { toJSON } = renderWithTheme(
+        <StyledMaxLengthMessage themeVariant={themeVariant}>
+          100/255
+        </StyledMaxLengthMessage>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});
+
+describe('StyledHelperText', () => {
+  it('renders correctly', (): void => {
+    const { toJSON } = renderWithTheme(
+      <StyledHeaderText>helper text</StyledHeaderText>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledBorderBackDrop', () => {
+  it.each`
+    themeVariant
+    ${'default'}
+    ${'filled'}
+    ${'focused'}
+    ${'error'}
+    ${'disabled'}
+    ${'readonly'}
+  `(
+    'renders correctly with themeVariant $themeVariant',
+    ({ themeVariant }): void => {
+      const { toJSON } = renderWithTheme(
+        <StyledBorderBackDrop themeVariant={themeVariant} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});
+
 describe('StyledTextInput', () => {
   it('renders correctly', () => {
     const { toJSON } = renderWithTheme(<StyledTextInput />);