paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 30 Packages Projects Releases Wiki Activity

Merge pull request #3297 from ayshiff/feature/add-missing-component-tests

Browse Source 
[CORE] Add missing component tests
This commit is contained in:
Patrik Oldsberg
2020-11-20 12:01:19 +01:00
committed by GitHub
parent a63a03c52a ba985b1357
commit 6e0dd11669
9 changed files with 318 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/package.json
+2 -1
View File
@@ -60,7 +60,8 @@
"react-sparklines": "^1.7.0",
"react-syntax-highlighter": "^13.5.1",
"react-use": "^15.3.3",
"remark-gfm": "^1.0.0"
"remark-gfm": "^1.0.0",
"zen-observable": "^0.8.15"
},
"devDependencies": {
"@backstage/cli": "^0.3.0",
packages/core/src/components/AlertDisplay/AlertDisplay.test.tsx
+65
View File
@@ -0,0 +1,65 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { AlertDisplay } from './AlertDisplay';
import {
ApiProvider,
ApiRegistry,
alertApiRef,
AlertApiForwarder,
} from '@backstage/core-api';
import Observable from 'zen-observable';
import { renderInTestApp } from '@backstage/test-utils';
const TEST_MESSAGE = 'TEST_MESSAGE';
describe('<AlertDisplay />', () => {
it('renders without exploding', async () => {
const apiRegistry = ApiRegistry.from([
[alertApiRef, new AlertApiForwarder()],
]);
const { queryByText } = await renderInTestApp(
<ApiProvider apis={apiRegistry}>
<AlertDisplay />
</ApiProvider>,
);
expect(queryByText(TEST_MESSAGE)).not.toBeInTheDocument();
});
it('renders with message', async () => {
const apiRegistry = ApiRegistry.from([
[
alertApiRef,
{
post() {},
alert$() {
return Observable.of({ message: TEST_MESSAGE });
},
},
],
]);
const { queryByText } = await renderInTestApp(
<ApiProvider apis={apiRegistry}>
<AlertDisplay />
</ApiProvider>,
);
expect(queryByText(TEST_MESSAGE)).toBeInTheDocument();
});
});
packages/core/src/components/EmptyState/EmptyState.test.tsx
+1 -1
View File
@@ -34,6 +34,6 @@ describe('<EmptyState />', () => {
rendered.getByText('Your plugin is missing an annotation'),
).toBeInTheDocument();
expect(rendered.getByLabelText('button')).toBeInTheDocument();
expect(rendered.getByTestId('missingAnnotation')).toBeInTheDocument();
expect(rendered.getByAltText('annotation is missing')).toBeInTheDocument();
});
});
packages/core/src/components/EmptyState/EmptyStateImage.test.tsx
+49
View File
@@ -0,0 +1,49 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
import { EmptyStateImage } from './EmptyStateImage';
describe('<EmptyStateImage />', () => {
it('render EmptyStateImage component with missing field', async () => {
const { getByAltText } = await renderWithEffects(
wrapInTestApp(<EmptyStateImage missing="field" />),
);
expect(getByAltText('annotation is missing')).toBeInTheDocument();
});
it('render EmptyStateImage component with missing info', async () => {
const { getByAltText } = await renderWithEffects(
wrapInTestApp(<EmptyStateImage missing="info" />),
);
expect(getByAltText('no Information')).toBeInTheDocument();
});
it('render EmptyStateImage component with missing content', async () => {
const { getByAltText } = await renderWithEffects(
wrapInTestApp(<EmptyStateImage missing="content" />),
);
expect(getByAltText('create Component')).toBeInTheDocument();
});
it('render EmptyStateImage component with missing data', async () => {
const { getByAltText } = await renderWithEffects(
wrapInTestApp(<EmptyStateImage missing="data" />),
);
expect(getByAltText('no Build')).toBeInTheDocument();
});
});
packages/core/src/components/EmptyState/EmptyStateImage.tsx
-1
View File
@@ -45,7 +45,6 @@ export const EmptyStateImage = ({ missing }: Props) => {
src={missingAnnotation}
className={classes.generalImg}
alt="annotation is missing"
data-testid="missingAnnotation"
/>
);
case 'info':
packages/core/src/components/FeatureDiscovery/FeatureCalloutCircular.test.tsx
+154
View File
@@ -0,0 +1,154 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { act, fireEvent } from '@testing-library/react';
import { renderInTestApp } from '@backstage/test-utils';
import { FeatureCalloutCircular } from './FeatureCalloutCircular';
const INITIAL_BOUNDING_RECT: DOMRect = {
width: 100,
height: 100,
x: 0,
y: 0,
bottom: 0,
left: 0,
right: 0,
top: 0,
toJSON: () => {},
};
const UPDATED_BOUNDING_RECT: DOMRect = {
width: 200,
height: 200,
x: 50,
y: 50,
bottom: 0,
left: 0,
right: 0,
top: 0,
toJSON: () => {},
};
beforeEach(() => {
Element.prototype.getBoundingClientRect = jest.fn(
() => INITIAL_BOUNDING_RECT,
);
});
describe('<FeatureCalloutCircular />', () => {
it('renders without exploding', async () => {
const rendered = await renderInTestApp(
<FeatureCalloutCircular
featureId="feature-id"
title="title"
description="description"
/>,
);
rendered.getByText('description');
rendered.getByText('title');
});
it('renders with correct style', async () => {
const { getByTestId } = await renderInTestApp(
<FeatureCalloutCircular
featureId="feature-id"
title="title"
description="description"
/>,
);
const dot = await getByTestId('dot');
const text = await getByTestId('text');
expect(dot).toBeInTheDocument();
expect(text).toBeInTheDocument();
// Dot style
expect(dot.style.left).toBe('-800px');
expect(dot.style.top).toBe('-800px');
expect(dot.style.width).toBe('1700px');
expect(dot.style.height).toBe('1700px');
// Text style
expect(text.style.left).toBe('-400px');
expect(text.style.top).toBe('120px');
expect(text.style.width).toBe('450px');
});
it('update when the user scrolls', async () => {
const { getByTestId } = await renderInTestApp(
<FeatureCalloutCircular
featureId="feature-id"
title="title"
description="description"
/>,
);
const dot = await getByTestId('dot');
const text = await getByTestId('text');
act(() => {
Element.prototype.getBoundingClientRect = jest.fn(
() => UPDATED_BOUNDING_RECT,
);
// Trigger the window resize event.
fireEvent(window, new Event('resize'));
});
// Dot style
expect(dot.style.left).toBe('-750px');
expect(dot.style.top).toBe('-750px');
expect(dot.style.width).toBe('1800px');
expect(dot.style.height).toBe('1800px');
// Text style
expect(text.style.left).toBe('-300px');
expect(text.style.top).toBe('270px');
expect(text.style.width).toBe('450px');
});
it('update when the user resizes the window', async () => {
const { getByTestId } = await renderInTestApp(
<FeatureCalloutCircular
featureId="feature-id"
title="title"
description="description"
/>,
);
const dot = await getByTestId('dot');
const text = await getByTestId('text');
act(() => {
Element.prototype.getBoundingClientRect = jest.fn(
() => UPDATED_BOUNDING_RECT,
);
// Trigger the window scroll event.
fireEvent(window, new Event('scroll'));
});
// Dot style
expect(dot.style.left).toBe('-750px');
expect(dot.style.top).toBe('-750px');
expect(dot.style.width).toBe('1800px');
expect(dot.style.height).toBe('1800px');
// Text style
expect(text.style.left).toBe('-300px');
expect(text.style.top).toBe('270px');
expect(text.style.width).toBe('450px');
});
});
packages/core/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx
+2
View File
@@ -160,6 +160,7 @@ export const FeatureCalloutCircular: FC<Props> = ({
<>
<div
className={classes.dot}
data-testid="dot"
style={{
left: placement?.dotLeft,
top: placement?.dotTop,
@@ -176,6 +177,7 @@ export const FeatureCalloutCircular: FC<Props> = ({
</div>
<div
className={classes.text}
data-testid="text"
style={{
left: placement?.textLeft,
top: placement?.textTop,
packages/core/src/components/ProgressBars/LinearGauge.test.tsx
+37
View File
@@ -0,0 +1,37 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { renderInTestApp } from '@backstage/test-utils';
import { LinearGauge } from './LinearGauge';
describe('<LinearGauge />', () => {
it('renders without exploding', async () => {
const { getByTitle } = await renderInTestApp(<LinearGauge value={0.5} />);
expect(getByTitle('50%')).toBeInTheDocument();
});
it('renders progress and title', async () => {
const { container } = await renderInTestApp(<LinearGauge value={0 / 0} />);
expect(container).toBeEmptyDOMElement();
});
it('renders with 100 as max value', async () => {
const { getByTitle } = await renderInTestApp(<LinearGauge value={1.5} />);
expect(getByTitle('100%')).toBeInTheDocument();
});
});
packages/core/src/components/ProgressBars/LinearGauge.tsx
+8 -6
View File
@@ -40,12 +40,14 @@ export const LinearGauge: FC<Props> = ({ value }) => {
const strokeColor = getProgressColor(theme.palette, percent, false, 100);
return (
<Tooltip title={`${percent}%`}>
<Line
percent={percent}
strokeWidth={4}
trailWidth={4}
strokeColor={strokeColor}
/>
<span>
<Line
percent={percent}
strokeWidth={4}
trailWidth={4}
strokeColor={strokeColor}
/>
</span>
</Tooltip>
);
};