bright-components 10.2.6 → 10.2.8

package/src/components/RadioBlock/test.js

@@ -1,17 +1,15 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import Colors from 'constants/colors';
-import { event } from 'react-ga';
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import Colors from "constants/colors";
 
-import RadioBlock from '.';
+import RadioBlock from ".";
 
 const child = <div data-testid="test-child">child</div>;
 
 const onChange = jest.fn();
-jest.mock('react-ga');
 
-describe('Radio Block', () => {
-	it('should render styles when unchecked', () => {
+describe("Radio Block", () => {
+	it("should render styles when unchecked", () => {
 		const { getByTestId } = render(
 			<RadioBlock
 				checked={false}
@@ -24,14 +22,14 @@ describe('Radio Block', () => {
 			</RadioBlock>
 		);
 
-		expect(getByTestId('option')).toHaveStyleRule(
-			'border',
+		expect(getByTestId("option")).toHaveStyleRule(
+			"border",
 			`1px solid ${Colors.borderColor}`
 		);
-		expect(getByTestId('option')).toHaveStyleRule('background', '#fff');
+		expect(getByTestId("option")).toHaveStyleRule("background", "#fff");
 	});
 
-	it('should render styles when checked', () => {
+	it("should render styles when checked", () => {
 		const { getByTestId } = render(
 			<RadioBlock
 				checked
@@ -44,17 +42,17 @@ describe('Radio Block', () => {
 			</RadioBlock>
 		);
 
-		expect(getByTestId('option')).toHaveStyleRule(
-			'border',
+		expect(getByTestId("option")).toHaveStyleRule(
+			"border",
 			`1px solid ${Colors.primaryLight}`
 		);
-		expect(getByTestId('option')).toHaveStyleRule(
-			'background',
+		expect(getByTestId("option")).toHaveStyleRule(
+			"background",
 			Colors.primaryLighter
 		);
 	});
 
-	it('should render the supplied children', () => {
+	it("should render the supplied children", () => {
 		const { getByTestId } = render(
 			<RadioBlock
 				checked={false}
@@ -66,10 +64,10 @@ describe('Radio Block', () => {
 				{child}
 			</RadioBlock>
 		);
-		expect(getByTestId('test-child')).toHaveTextContent('child');
+		expect(getByTestId("test-child")).toHaveTextContent("child");
 	});
 
-	it('should render a radio input', () => {
+	it("should render a radio input", () => {
 		const { getByRole } = render(
 			<RadioBlock
 				checked={false}
@@ -82,12 +80,12 @@ describe('Radio Block', () => {
 			</RadioBlock>
 		);
 
-		expect(getByRole('radio')).toBeInTheDocument();
-		expect(getByRole('radio')).toHaveAttribute('name', 'nameyname');
-		expect(getByRole('radio')).toHaveAttribute('value', 'valerie');
+		expect(getByRole("radio")).toBeInTheDocument();
+		expect(getByRole("radio")).toHaveAttribute("name", "nameyname");
+		expect(getByRole("radio")).toHaveAttribute("value", "valerie");
 	});
 
-	it('should make option opaque if disabled', () => {
+	it("should make option opaque if disabled", () => {
 		const elem = render(
 			<RadioBlock
 				checked={false}
@@ -101,129 +99,11 @@ describe('Radio Block', () => {
 			</RadioBlock>
 		);
 
-		expect(elem.getByTestId('option')).toHaveStyleRule('opacity', '0.3');
+		expect(elem.getByTestId("option")).toHaveStyleRule("opacity", "0.3");
 	});
 
-	describe('GA', () => {
-		it('should call default GA event if component is rendered with checked option', () => {
-			expect(event).not.toHaveBeenCalled();
-			render(
-				<RadioBlock
-					checked
-					onChange={onChange}
-					name="nameyname"
-					value="valerie"
-					className="class"
-					GA={{
-						category: 'ga-category-mock',
-						action: 'ga-action-mock'
-					}}
-				>
-					{child}
-				</RadioBlock>
-			);
-			expect(event).toHaveBeenCalledWith({
-				action: 'Defaulted to ga-action-mock',
-				category: 'ga-category-mock'
-			});
-		});
-
-		it('should not call default GA event if component is not rendered with checked state', () => {
-			expect(event).not.toHaveBeenCalled();
-			render(
-				<RadioBlock
-					checked={false}
-					onChange={onChange}
-					name="nameyname"
-					value="valerie"
-					className="class"
-					GA={{
-						category: 'ga-category-mock',
-						action: 'ga-action-mock'
-					}}
-				>
-					{child}
-				</RadioBlock>
-			);
-			expect(event).not.toHaveBeenCalled();
-		});
-
-		it('should not call default GA event if component does not have A GA prop', () => {
-			expect(event).not.toHaveBeenCalled();
-			render(
-				<RadioBlock
-					checked
-					onChange={onChange}
-					name="nameyname"
-					value="valerie"
-					className="class"
-				>
-					{child}
-				</RadioBlock>
-			);
-			expect(event).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('GA onChange events', () => {
-		it('should trigger GA event when user click on an unchecked radio', () => {
-			expect(event).not.toHaveBeenCalled();
-			const elem = render(
-				<RadioBlock
-					checked={false}
-					onChange={onChange}
-					name="nameyname"
-					value="valerie"
-					className="class"
-					GA={{
-						category: 'ga-category-mock',
-						action: 'ga-action-mock'
-					}}
-				>
-					{child}
-				</RadioBlock>
-			);
-
-			fireEvent.click(elem.getByRole('radio'), {
-				target: { value: 'valerie' }
-			});
-
-			expect(event).toHaveBeenCalledWith({
-				action: 'Switched to ga-action-mock',
-				category: 'ga-category-mock'
-			});
-		});
-
-		it('should NOT trigger GA event when user clicks on a checked radio button', () => {
-			expect(event).not.toHaveBeenCalled();
-			const elem = render(
-				<RadioBlock
-					checked
-					onChange={onChange}
-					name="nameyname"
-					value="valerie"
-					className="class"
-					GA={{
-						category: 'ga-category-mock',
-						action: 'ga-action-mock'
-					}}
-				>
-					{child}
-				</RadioBlock>
-			);
-
-			event.mockClear(); // to clear the event call that happened on mounting component
-
-			fireEvent.click(elem.getByRole('radio'), {
-				target: { value: 'valerie' }
-			});
-
-			expect(event).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('Disabled options', () => {
-		it('should use not-allowed cursor when disabled', () => {
+	describe("Disabled options", () => {
+		it("should use not-allowed cursor when disabled", () => {
 			const elem = render(
 				<RadioBlock
 					checked={false}
@@ -237,17 +117,17 @@ describe('Radio Block', () => {
 				</RadioBlock>
 			);
 
-			expect(elem.getByTestId('option')).toHaveStyleRule(
-				'opacity',
-				'0.3'
+			expect(elem.getByTestId("option")).toHaveStyleRule(
+				"opacity",
+				"0.3"
 			);
-			expect(elem.getByRole('radio')).toHaveStyleRule(
-				'cursor',
-				'not-allowed'
+			expect(elem.getByRole("radio")).toHaveStyleRule(
+				"cursor",
+				"not-allowed"
 			);
 		});
 
-		it('should use a pointer cursor when not disabled', () => {
+		it("should use a pointer cursor when not disabled", () => {
 			const elem = render(
 				<RadioBlock
 					checked={false}
@@ -261,10 +141,10 @@ describe('Radio Block', () => {
 				</RadioBlock>
 			);
 
-			expect(elem.getByTestId('option')).toHaveStyleRule('opacity', '1');
-			expect(elem.getByRole('radio')).toHaveStyleRule(
-				'cursor',
-				'pointer'
+			expect(elem.getByTestId("option")).toHaveStyleRule("opacity", "1");
+			expect(elem.getByRole("radio")).toHaveStyleRule(
+				"cursor",
+				"pointer"
 			);
 		});
 	});

package/src/components/ResponsiveTabs/test.js

@@ -1,13 +1,10 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import TabPanel from 'components/Tabs/TabPanel';
-import { event } from 'react-ga';
-import ResponsiveTabs from '.';
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import TabPanel from "components/Tabs/TabPanel";
+import ResponsiveTabs from ".";
 
-jest.mock('react-ga');
-
-describe('<ResponsiveTabs />', () => {
-	it('should handle when defaultIndex is larger than the amount of tabs', () => {
+describe("<ResponsiveTabs />", () => {
+	it("should handle when defaultIndex is larger than the amount of tabs", () => {
 		const { getByRole, getAllByRole } = render(
 			<ResponsiveTabs defaultIndex={3}>
 				<TabPanel name="One">One</TabPanel>
@@ -15,13 +12,13 @@ describe('<ResponsiveTabs />', () => {
 			</ResponsiveTabs>
 		);
 
-		expect(getByRole('combobox')).toBeInTheDocument();
-		expect(getAllByRole('option')).toHaveLength(2);
+		expect(getByRole("combobox")).toBeInTheDocument();
+		expect(getAllByRole("option")).toHaveLength(2);
 
 		// doesn't throw an error is good
 	});
 
-	it('should render a dropdown for selecting tabs on mobile', () => {
+	it("should render a dropdown for selecting tabs on mobile", () => {
 		const { getByRole, getAllByRole } = render(
 			<ResponsiveTabs>
 				<TabPanel name="One">One</TabPanel>
@@ -29,17 +26,13 @@ describe('<ResponsiveTabs />', () => {
 			</ResponsiveTabs>
 		);
 
-		expect(getByRole('combobox')).toBeInTheDocument();
-		expect(getAllByRole('option')).toHaveLength(2);
+		expect(getByRole("combobox")).toBeInTheDocument();
+		expect(getAllByRole("option")).toHaveLength(2);
 	});
 
-	it('should change tabs when the dropdown is used', () => {
+	it("should change tabs when the dropdown is used", () => {
 		const { getByRole, getByTestId } = render(
-			<ResponsiveTabs
-				onSelected={i => {
-					event({ category: 'tabs', action: 'tab change', label: i });
-				}}
-			>
+			<ResponsiveTabs onSelected={i => {}}>
 				<TabPanel name="One" data-testid="tab1">
 					One
 				</TabPanel>
@@ -49,29 +42,19 @@ describe('<ResponsiveTabs />', () => {
 			</ResponsiveTabs>
 		);
 
-		expect(getByTestId('tab1')).toBeVisible();
-		expect(getByTestId('tab2')).not.toBeVisible();
-
-		const dropdown = getByRole('combobox');
-		fireEvent.change(dropdown, { target: { value: 'Two' } });
+		expect(getByTestId("tab1")).toBeVisible();
+		expect(getByTestId("tab2")).not.toBeVisible();
 
-		expect(getByTestId('tab1')).not.toBeVisible();
-		expect(getByTestId('tab2')).toBeVisible();
+		const dropdown = getByRole("combobox");
+		fireEvent.change(dropdown, { target: { value: "Two" } });
 
-		expect(event).toHaveBeenCalledWith({
-			action: 'tab change',
-			category: 'tabs',
-			label: 1
-		});
+		expect(getByTestId("tab1")).not.toBeVisible();
+		expect(getByTestId("tab2")).toBeVisible();
 	});
 
-	it('should change tabs when the tablist is used', () => {
+	it("should change tabs when the tablist is used", () => {
 		const { getAllByRole, getByTestId } = render(
-			<ResponsiveTabs
-				onSelected={i => {
-					event({ category: 'tabs', action: 'tab change', label: i });
-				}}
-			>
+			<ResponsiveTabs onSelected={i => {}}>
 				<TabPanel name="One" data-testid="tab1">
 					One
 				</TabPanel>
@@ -81,48 +64,28 @@ describe('<ResponsiveTabs />', () => {
 			</ResponsiveTabs>
 		);
 
-		expect(getByTestId('tab1')).toBeVisible();
-		expect(getByTestId('tab2')).not.toBeVisible();
+		expect(getByTestId("tab1")).toBeVisible();
+		expect(getByTestId("tab2")).not.toBeVisible();
 
-		const { 1: secondTab } = getAllByRole('tab');
+		const { 1: secondTab } = getAllByRole("tab");
 		fireEvent.click(secondTab);
 
-		expect(getByTestId('tab1')).not.toBeVisible();
-		expect(getByTestId('tab2')).toBeVisible();
-
-		expect(event).toHaveBeenCalledWith({
-			action: 'tab change',
-			category: 'tabs',
-			label: 1
-		});
-	});
-
-	it('not passing in onSelected', () => {
-		const { getByRole } = render(
-			<ResponsiveTabs>
-				<TabPanel name="One">One</TabPanel>
-			</ResponsiveTabs>
-		);
-
-		fireEvent.change(getByRole('combobox'), { target: { value: 'One' } });
-		expect(event).not.toHaveBeenCalled();
-
-		fireEvent.click(getByRole('tab'));
-		expect(event).not.toHaveBeenCalled();
+		expect(getByTestId("tab1")).not.toBeVisible();
+		expect(getByTestId("tab2")).toBeVisible();
 	});
 
-	it('should support tab auto width', () => {
+	it("should support tab auto width", () => {
 		const { getByRole } = render(
 			<ResponsiveTabs autoTabWidth>
 				<TabPanel name="One">One</TabPanel>
 			</ResponsiveTabs>
 		);
 
-		expect(getByRole('tab')).toHaveStyleRule({ flex: '1 1 auto' });
+		expect(getByRole("tab")).toHaveStyleRule({ flex: "1 1 auto" });
 	});
 
-	describe('when tablist inferred from children', () => {
-		it('should render a tablist inferred from children', () => {
+	describe("when tablist inferred from children", () => {
+		it("should render a tablist inferred from children", () => {
 			const { getByRole, getAllByRole } = render(
 				<ResponsiveTabs>
 					<TabPanel name="One">One</TabPanel>
@@ -131,11 +94,11 @@ describe('<ResponsiveTabs />', () => {
 				</ResponsiveTabs>
 			);
 
-			expect(getByRole('tablist')).toBeInTheDocument();
-			expect(getAllByRole('tab')).toHaveLength(3);
+			expect(getByRole("tablist")).toBeInTheDocument();
+			expect(getAllByRole("tab")).toHaveLength(3);
 		});
 
-		it('should handle null elements', () => {
+		it("should handle null elements", () => {
 			const { getByRole, getAllByRole } = render(
 				<ResponsiveTabs>
 					<TabPanel name="One">One</TabPanel>
@@ -143,11 +106,11 @@ describe('<ResponsiveTabs />', () => {
 				</ResponsiveTabs>
 			);
 
-			expect(getByRole('tablist')).toBeInTheDocument();
-			expect(getAllByRole('tab')).toHaveLength(1);
+			expect(getByRole("tablist")).toBeInTheDocument();
+			expect(getAllByRole("tab")).toHaveLength(1);
 		});
 
-		it('should support counters', () => {
+		it("should support counters", () => {
 			const { getByText } = render(
 				<ResponsiveTabs>
 					<TabPanel name="One" counter={999}>
@@ -160,14 +123,14 @@ describe('<ResponsiveTabs />', () => {
 				</ResponsiveTabs>
 			);
 
-			expect(getByText('999')).toBeInTheDocument();
-			expect(getByText('3333')).toBeInTheDocument();
+			expect(getByText("999")).toBeInTheDocument();
+			expect(getByText("3333")).toBeInTheDocument();
 		});
 	});
 
-	describe('when tab list is passed as a prop', () => {
-		it('should render a tablist', () => {
-			const tabs = [{ name: 'One' }, { name: 'Two' }, { name: 'Three' }];
+	describe("when tab list is passed as a prop", () => {
+		it("should render a tablist", () => {
+			const tabs = [{ name: "One" }, { name: "Two" }, { name: "Three" }];
 			const { getByRole, getAllByRole } = render(
 				<ResponsiveTabs tabs={tabs}>
 					<TabPanel>One</TabPanel>
@@ -176,15 +139,15 @@ describe('<ResponsiveTabs />', () => {
 				</ResponsiveTabs>
 			);
 
-			expect(getByRole('tablist')).toBeInTheDocument();
-			expect(getAllByRole('tab')).toHaveLength(tabs.length);
+			expect(getByRole("tablist")).toBeInTheDocument();
+			expect(getAllByRole("tab")).toHaveLength(tabs.length);
 		});
 
-		it('should support counters', () => {
+		it("should support counters", () => {
 			const tabs = [
-				{ name: 'One', counter: 999 },
-				{ name: 'Two' },
-				{ name: 'Three', counter: 3333 }
+				{ name: "One", counter: 999 },
+				{ name: "Two" },
+				{ name: "Three", counter: 3333 }
 			];
 
 			const { getByText } = render(
@@ -195,8 +158,8 @@ describe('<ResponsiveTabs />', () => {
 				</ResponsiveTabs>
 			);
 
-			expect(getByText('999')).toBeInTheDocument();
-			expect(getByText('3333')).toBeInTheDocument();
+			expect(getByText("999")).toBeInTheDocument();
+			expect(getByText("3333")).toBeInTheDocument();
 		});
 	});
 });

package/src/components/Time/OverlayBase/index.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, forwardRef } from 'react';
-import { arrayOf, func, number, oneOfType, shape, string } from 'prop-types';
+import { arrayOf, func, number, oneOfType, shape } from 'prop-types';
 import styled from 'styled-components';
-import { event } from 'react-ga';
 import Colors from 'constants/colors';
 import Spacing from 'constants/spacing';
 import Zindex from 'constants/z-index';
@@ -74,7 +73,6 @@ const OverlayBase = forwardRef(
 			onHide,
 			hourIncrements,
 			minuteIncrements,
-			GA,
 			onIncrement,
 			onChange,
 			onApply
@@ -130,12 +128,6 @@ const OverlayBase = forwardRef(
 						type="button"
 						onClick={() => {
 							onHide();
-							if (GA) {
-								event({
-									category: GA.category,
-									action: `${GA.action} (Cancel)`
-								});
-							}
 						}}
 					>
 						Cancel
@@ -145,14 +137,6 @@ const OverlayBase = forwardRef(
 						onClick={() => {
 							onApply(value);
 							onHide();
-
-							if (GA) {
-								event({
-									category: GA.category,
-									action: `${GA.action} (Apply)`,
-									label: `${hours} hrs ${minutes} mins`
-								});
-							}
 						}}
 						data-e2e="time-apply"
 					>
@@ -174,14 +158,12 @@ OverlayBase.propTypes = {
 	onHide: func.isRequired,
 	onIncrement: func.isRequired,
 	minuteIncrements: oneOfType([arrayOf(number), number]),
-	hourIncrements: number,
-	GA: shape({ category: string, action: string })
+	hourIncrements: number
 };
 
 OverlayBase.defaultProps = {
 	minuteIncrements: 1,
-	hourIncrements: 1,
-	GA: undefined
+	hourIncrements: 1
 };
 
 export default OverlayBase;

package/src/components/Time/OverlayBase/test.js

@@ -1,17 +1,8 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { event } from 'react-ga';
 import OverlayBase from '.';
 
-jest.mock('react-ga');
-
 describe('<OverlayBase />', () => {
-	const ga = { category: 'Cat', action: 'Act' };
-
-	beforeEach(() => {
-		event.mockClear();
-	});
-
 	it('should render input boxes', () => {
 		const { queryAllByRole } = render(
 			<OverlayBase
@@ -107,26 +98,6 @@ describe('<OverlayBase />', () => {
 		expect(onHide).toHaveBeenCalled();
 	});
 
-	it('should log a tracking event when apply is clicked', () => {
-		const { getByText } = render(
-			<OverlayBase
-				value={{ hours: 12, minutes: 45 }}
-				onChange={() => {}}
-				onApply={() => {}}
-				onHide={() => {}}
-				onIncrement={() => {}}
-				GA={ga}
-			/>
-		);
-
-		fireEvent.click(getByText('Apply'));
-		expect(event).toHaveBeenCalledWith({
-			category: ga.category,
-			action: `${ga.action} (Apply)`,
-			label: '12 hrs 45 mins'
-		});
-	});
-
 	it('should hide when cancelled', () => {
 		const onChange = jest.fn();
 		const onHide = jest.fn();
@@ -145,25 +116,4 @@ describe('<OverlayBase />', () => {
 		expect(onChange).not.toHaveBeenCalled();
 		expect(onHide).toHaveBeenCalled();
 	});
-
-	it('should log a tracking event when cancelled', () => {
-		const onChange = jest.fn();
-		const onHide = jest.fn();
-		const { getByText } = render(
-			<OverlayBase
-				value={{ hours: 12, minutes: 45 }}
-				onChange={onChange}
-				onIncrement={() => {}}
-				onApply={() => {}}
-				onHide={onHide}
-				GA={ga}
-			/>
-		);
-
-		fireEvent.click(getByText('Cancel'));
-		expect(event).toHaveBeenCalledWith({
-			category: ga.category,
-			action: `${ga.action} (Cancel)`
-		});
-	});
 });