@tactics/toddle-styleguide 5.3.1 → 5.3.3

package/src/components/molecules/send-bubble/send-text-bubble.test.js

@@ -1,156 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {SendTextBubble} from './send-text-bubble.component';
-import {fireEvent, render} from '@testing-library/react-native';
-import {VisualState} from '../../../types/visual-state.enum';
-
-describe('Failed text bubble test', () => {
-  it('shows a DEFAULT text bubble that is swipeable with edit and trash icon, which if we press them we can edit or delete the message', () => {
-    const tree = renderer
-      .create(
-        <SendTextBubble
-          id={'1'}
-          text={'This is a test'}
-          visualState="DEFAULT"
-          onPressEdit={() => alert('edit the message')}
-          onPressDelete={() => alert('delete the message')}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('shows a DEFAULT text bubble that is swipeable with edit and trash icon, which if we press them we can edit or delete the message', () => {
-    const tree = renderer
-      .create(
-        <SendTextBubble
-          id={'2'}
-          text={'This is a test'}
-          visualState="DEFAULT"
-          onPressEdit={() => alert('edit the message')}
-          onPressDelete={() => alert('delete the message')}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('shows a WARNING text bubble that is swipeable with edit and trash icon, which if we press them we can edit or delete the message', () => {
-    const tree = renderer
-      .create(
-        <SendTextBubble
-          id={'3'}
-          text={'This is a test'}
-          visualState="WARNING"
-          onPressEdit={() => alert('edit the message')}
-          onPressDelete={() => alert('delete the message')}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('shows a WARNING text bubble that is swipeable with edit and trash icon, which if we press them we can edit or delete the message', () => {
-    const tree = renderer
-      .create(
-        <SendTextBubble
-          id={'4'}
-          text={'This is a test'}
-          visualState="WARNING"
-          onPressEdit={() => alert('edit the message')}
-          onPressDelete={() => alert('delete the message')}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('shows an ERROR text bubble that is swipeable with edit and trash icon, which if we press them we can edit or delete the message', () => {
-    const tree = renderer
-      .create(
-        <SendTextBubble
-          id={'4'}
-          text={'This is a test'}
-          visualState="ERROR"
-          onPressEdit={() => alert('edit the message')}
-          onPressDelete={() => alert('delete the message')}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('shows an ERROR text bubble that is swipeable with edit and trash icon, which if we press them we can edit or delete the message', () => {
-    const tree = renderer
-      .create(
-        <SendTextBubble
-          id={'5'}
-          text={'This is a test'}
-          visualState="ERROR"
-          onPressEdit={() => alert('edit the message')}
-          onPressDelete={() => alert('delete the message')}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});
-
-describe('SendTextBubble', () => {
-  const mockId = '123';
-  const mockText = 'Hello, world!';
-  const mockVisualState = VisualState.DEFAULT;
-  const mockOnPressEdit = jest.fn();
-  const mockOnPressDelete = jest.fn();
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should render the component correctly', () => {
-    const {getByText} = render(
-      <SendTextBubble
-        id={mockId}
-        text={mockText}
-        visualState={mockVisualState}
-        onPressEdit={mockOnPressEdit}
-        onPressDelete={mockOnPressDelete}
-      />
-    );
-
-    expect(getByText(mockText)).toBeDefined();
-  });
-
-  it('should call onPressEdit when the edit button is pressed', () => {
-    const {getByTestId} = render(
-      <SendTextBubble
-        id={mockId}
-        text={mockText}
-        visualState={mockVisualState}
-        onPressEdit={mockOnPressEdit}
-        onPressDelete={mockOnPressDelete}
-      />
-    );
-
-    fireEvent.press(getByTestId('edit-button'));
-
-    expect(mockOnPressEdit).toHaveBeenCalledWith(mockId);
-  });
-
-  it('should call onPressDelete when the delete button is pressed', () => {
-    const {getByTestId} = render(
-      <SendTextBubble
-        id={mockId}
-        text={mockText}
-        visualState={mockVisualState}
-        onPressEdit={mockOnPressEdit}
-        onPressDelete={mockOnPressDelete}
-      />
-    );
-
-    fireEvent.press(getByTestId('delete-button'));
-
-    expect(mockOnPressDelete).toHaveBeenCalledWith(mockId);
-  });
-});

package/src/components/molecules/snackbar/__snapshots__/snackbar.test.js.snap

@@ -1,557 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test snackbar  given the visual state is DEFAULT return a light blue background and black text  1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 16,
-        "elevation": 4,
-        "flexDirection": "row",
-        "overflow": "hidden",
-        "paddingBottom": 8,
-        "paddingLeft": 32,
-        "paddingRight": 32,
-        "paddingTop": 8,
-        "shadowOffset": {
-          "height": 2,
-          "width": 0,
-        },
-        "shadowOpacity": 0.23,
-        "shadowRadius": 2.62,
-      },
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "height": 32,
-        "justifyContent": "center",
-        "marginRight": 8,
-        "width": 32,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
-      fill="none"
-      focusable={false}
-      height={24}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={21}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-  <View
-    style={
-      {
-        "alignContent": "center",
-        "flex": 1,
-        "justifyContent": "center",
-        "paddingLeft": 32,
-        "paddingRight": 32,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 14,
-              "lineHeight": 22.4,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      test
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`test snackbar  given the visual state is ERROR return a red background and white text  1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 16,
-        "elevation": 4,
-        "flexDirection": "row",
-        "overflow": "hidden",
-        "paddingBottom": 8,
-        "paddingLeft": 32,
-        "paddingRight": 32,
-        "paddingTop": 8,
-        "shadowOffset": {
-          "height": 2,
-          "width": 0,
-        },
-        "shadowOpacity": 0.23,
-        "shadowRadius": 2.62,
-      },
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "height": 32,
-        "justifyContent": "center",
-        "marginRight": 8,
-        "width": 32,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
-      fill="none"
-      focusable={false}
-      height={24}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={21}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-  <View
-    style={
-      {
-        "alignContent": "center",
-        "flex": 1,
-        "justifyContent": "center",
-        "paddingLeft": 32,
-        "paddingRight": 32,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 14,
-              "lineHeight": 22.4,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      test
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`test snackbar  given the visual state is SUCCESS return a light green background and black text  1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 16,
-        "elevation": 4,
-        "flexDirection": "row",
-        "overflow": "hidden",
-        "paddingBottom": 8,
-        "paddingLeft": 32,
-        "paddingRight": 32,
-        "paddingTop": 8,
-        "shadowOffset": {
-          "height": 2,
-          "width": 0,
-        },
-        "shadowOpacity": 0.23,
-        "shadowRadius": 2.62,
-      },
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "height": 32,
-        "justifyContent": "center",
-        "marginRight": 8,
-        "width": 32,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
-      fill="none"
-      focusable={false}
-      height={24}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={21}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-  <View
-    style={
-      {
-        "alignContent": "center",
-        "flex": 1,
-        "justifyContent": "center",
-        "paddingLeft": 32,
-        "paddingRight": 32,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 14,
-              "lineHeight": 22.4,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      test
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`test snackbar  given the visual state is WARNING return a light orange background and black text  1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 16,
-        "elevation": 4,
-        "flexDirection": "row",
-        "overflow": "hidden",
-        "paddingBottom": 8,
-        "paddingLeft": 32,
-        "paddingRight": 32,
-        "paddingTop": 8,
-        "shadowOffset": {
-          "height": 2,
-          "width": 0,
-        },
-        "shadowOpacity": 0.23,
-        "shadowRadius": 2.62,
-      },
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "height": 32,
-        "justifyContent": "center",
-        "marginRight": 8,
-        "width": 32,
-      }
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
-      fill="none"
-      focusable={false}
-      height={24}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={21}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M11.5 8.125V10.375M11.5 14.875H11.5113M3.70581 19.375H19.2943C21.0263 19.375 22.1088 17.5 21.2428 16L13.4486 2.5C12.5826 1 10.4175 1 9.55148 2.5L1.75725 16C0.891228 17.5 1.97376 19.375 3.70581 19.375Z"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4280232243,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-  <View
-    style={
-      {
-        "alignContent": "center",
-        "flex": 1,
-        "justifyContent": "center",
-        "paddingLeft": 32,
-        "paddingRight": 32,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 14,
-              "lineHeight": 22.4,
-            },
-          ],
-          {
-            "color": "#1F2933",
-            "textAlign": undefined,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
-    >
-      test
-    </Text>
-  </View>
-</View>
-`;