FE-919 - Add supporting tests

packages/matchbox/src/components/ScreenReaderOnly/tests/ScreenReaderOnly.test.js

@@ -1,17 +1,27 @@
 import React from 'react';
+import 'jest-styled-components';
+import { mount } from 'enzyme';
 import ScreenReaderOnly from '../ScreenReaderOnly';
-import { shallow } from 'enzyme';
 
 describe('ScreenReaderOnly', () => {
-  it('Renders according to the snapshot', () => {
-    const wrapper = shallow(<ScreenReaderOnly>I am screen reader only content.</ScreenReaderOnly>);
+  it('renders with passed in children', () => {
+    const wrapper = mount(<ScreenReaderOnly>Children!</ScreenReaderOnly>);
 
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper).toHaveText('Children!');
   });
 
-  it('Renders the component using as a `<span></span>` to ensure it can be used in all situations (i.e., within other inline elements)', () => {
-    const wrapper = shallow(<ScreenReaderOnly>I will surely render as a span!</ScreenReaderOnly>);
+  it('renders with necessary style rules', () => {
+    const wrapper = global.mountStyled(<ScreenReaderOnly>Children!</ScreenReaderOnly>);
 
-    expect(wrapper.find('span')).toHaveLength(1);
+    expect(wrapper).toHaveStyleRule('border', '0 !important');
+    expect(wrapper).toHaveStyleRule('clip', 'rect(1px,1px,1px,1px) !important');
+    expect(wrapper).toHaveStyleRule('clip-path', 'inset(50%) !important');
+    expect(wrapper).toHaveStyleRule('height', '1px !important');
+    expect(wrapper).toHaveStyleRule('margin', '-1px !important');
+    expect(wrapper).toHaveStyleRule('overflow', 'hidden !important');
+    expect(wrapper).toHaveStyleRule('padding', '0 !important');
+    expect(wrapper).toHaveStyleRule('position', 'absolute !important');
+    expect(wrapper).toHaveStyleRule('width', '1px !important');
+    expect(wrapper).toHaveStyleRule('word-wrap', 'normal !important');
   });
 });