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

Prettify project

Browse Source
This commit is contained in:
SrdjanCosicPrica
2020-03-30 18:59:32 +02:00
parent 5a4228a28a
commit 124cdede70
11 changed files with 239 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/react-app-env.d.ts
Vendored
-2
View File
@@ -13,5 +13,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
packages/core/.storybook/main.js
+2 -2
View File
@@ -11,8 +11,8 @@ module.exports = {
{
loader: require.resolve('ts-loader'),
options: {
transpileOnly: true
}
transpileOnly: true,
},
},
],
});
packages/core/src/api/apis/ApiTestRegistry.test.ts
+43 -10
View File
@@ -59,13 +59,24 @@ describe('ApiTestRegistry', () => {
it('should register factories with dependencies', () => {
// 100% coverage + happy typescript = hasOwnProperty + this atrocity
const cDeps = Object.create({ c: cRef }, { a: { enumerable: true, value: aRef } });
const cDeps = Object.create(
{ c: cRef },
{ a: { enumerable: true, value: aRef } },
);
cDeps.b = bRef;
const registry = new ApiTestRegistry();
registry.register({ implements: aRef, deps: {}, factory: () => 3 });
registry.register({ implements: bRef, deps: { dep: aRef }, factory: ({ dep }) => `hello ${dep}` });
registry.register({ implements: cRef, deps: cDeps, factory: ({ a, b }) => b.repeat(a) });
registry.register({
implements: bRef,
deps: { dep: aRef },
factory: ({ dep }) => `hello ${dep}`,
});
registry.register({
implements: cRef,
deps: cDeps,
factory: ({ a, b }) => b.repeat(a),
});
expect(registry.get(aRef)).toBe(3);
expect(registry.get(bRef)).toBe('hello 3');
expect(registry.get(cRef)).toBe('hello 3hello 3hello 3');
@@ -73,17 +84,39 @@ describe('ApiTestRegistry', () => {
it('should not allow cyclic dependencies', () => {
const registry = new ApiTestRegistry();
registry.register({ implements: aRef, deps: { b: bRef }, factory: () => 1 });
registry.register({ implements: bRef, deps: { c: cRef }, factory: () => 'b' });
registry.register({ implements: cRef, deps: { a: aRef }, factory: () => 'c' });
expect(() => registry.get(aRef)).toThrow('Circular dependency of api factory for apiRef{a}');
expect(() => registry.get(bRef)).toThrow('Circular dependency of api factory for apiRef{b}');
expect(() => registry.get(cRef)).toThrow('Circular dependency of api factory for apiRef{c}');
registry.register({
implements: aRef,
deps: { b: bRef },
factory: () => 1,
});
registry.register({
implements: bRef,
deps: { c: cRef },
factory: () => 'b',
});
registry.register({
implements: cRef,
deps: { a: aRef },
factory: () => 'c',
});
expect(() => registry.get(aRef)).toThrow(
'Circular dependency of api factory for apiRef{a}',
);
expect(() => registry.get(bRef)).toThrow(
'Circular dependency of api factory for apiRef{b}',
);
expect(() => registry.get(cRef)).toThrow(
'Circular dependency of api factory for apiRef{c}',
);
});
it('should throw error if dependency is not available', () => {
const registry = new ApiTestRegistry();
registry.register({ implements: aRef, deps: { b: bRef }, factory: () => 1 });
registry.register({
implements: aRef,
deps: { b: bRef },
factory: () => 1,
});
expect(() => registry.get(aRef)).toThrow(
'No API factory available for dependency apiRef{b} of dependent apiRef{a}',
);
packages/core/src/api/apis/ApiTestRegistry.ts
+27 -7
View File
@@ -19,8 +19,14 @@ import { TypesToApiRefs, AnyApiRef, ApiHolder, ApiFactory } from './types';
export default class ApiTestRegistry implements ApiHolder {
private readonly apis = new Map<AnyApiRef, unknown>();
private factories = new Map<AnyApiRef, ApiFactory<unknown, unknown, unknown>>();
private savedFactories = new Map<AnyApiRef, ApiFactory<unknown, unknown, unknown>>();
private factories = new Map<
AnyApiRef,
ApiFactory<unknown, unknown, unknown>
>();
private savedFactories = new Map<
AnyApiRef,
ApiFactory<unknown, unknown, unknown>
>();
get<T>(ref: ApiRef<T>): T | undefined {
return this.load(ref);
@@ -28,7 +34,10 @@ export default class ApiTestRegistry implements ApiHolder {
register<T>(ref: ApiRef<T>, factoryFunc: () => T): ApiTestRegistry;
register<A, I, D>(factory: ApiFactory<A, I, D>): ApiTestRegistry;
register<A, I, D, T>(factory: ApiRef<T> | ApiFactory<A, I, D>, factoryFunc?: () => T): ApiTestRegistry {
register<A, I, D, T>(
factory: ApiRef<T> | ApiFactory<A, I, D>,
factoryFunc?: () => T,
): ApiTestRegistry {
if (factory instanceof ApiRef) {
this.factories.set(factory, {
implements: factory,
@@ -63,16 +72,25 @@ export default class ApiTestRegistry implements ApiHolder {
}
if (loading.includes(factory.implements)) {
throw new Error(`Circular dependency of api factory for ${factory.implements}`);
throw new Error(
`Circular dependency of api factory for ${factory.implements}`,
);
}
const deps = this.loadDeps(ref, factory.deps, [...loading, factory.implements]);
const deps = this.loadDeps(ref, factory.deps, [
...loading,
factory.implements,
]);
const api = factory.factory(deps);
this.apis.set(ref, api);
return api as T;
}
private loadDeps<T>(dependent: ApiRef<unknown>, apis: TypesToApiRefs<T>, loading: AnyApiRef[]): T {
private loadDeps<T>(
dependent: ApiRef<unknown>,
apis: TypesToApiRefs<T>,
loading: AnyApiRef[],
): T {
const impls = {} as T;
for (const key in apis) {
@@ -81,7 +99,9 @@ export default class ApiTestRegistry implements ApiHolder {
const api = this.load(ref, loading);
if (!api) {
throw new Error(`No API factory available for dependency ${ref} of dependent ${dependent}`);
throw new Error(
`No API factory available for dependency ${ref} of dependent ${dependent}`,
);
}
impls[key] = api;
}
packages/core/src/components/Status/index.ts
+9 -1
View File
@@ -14,4 +14,12 @@
* limitations under the License.
*/
export { StatusError, StatusFailed, StatusNA, StatusOK, StatusPending, StatusRunning, StatusWarning } from './Status';
export {
StatusError,
StatusFailed,
StatusNA,
StatusOK,
StatusPending,
StatusRunning,
StatusWarning,
} from './Status';
packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.js
+23 -3
View File
@@ -15,10 +15,24 @@
*/
import React, { Fragment } from 'react';
import { IconButton, List, ListItem, ListItemIcon, ListItemText, Popover } from '@material-ui/core';
import {
IconButton,
List,
ListItem,
ListItemIcon,
ListItemText,
Popover,
} from '@material-ui/core';
import { default as KebabMenuIcon } from './MenuVertical';
const ActionItem = ({ label, secondaryLabel, icon, disabled = false, onClick, WrapperComponent = React.Fragment }) => {
const ActionItem = ({
label,
secondaryLabel,
icon,
disabled = false,
onClick,
WrapperComponent = React.Fragment,
}) => {
return (
<WrapperComponent>
<ListItem
@@ -48,7 +62,13 @@ const HeaderActionMenu = ({ actionItems }) => {
onClick={() => setOpen(true)}
data-testid="header-action-menu"
ref={anchorElRef}
style={{ color: 'white', height: 56, width: 56, marginRight: -4, padding: 0 }}
style={{
color: 'white',
height: 56,
width: 56,
marginRight: -4,
padding: 0,
}}
>
<KebabMenuIcon titleAccess="menu" style={{ fontSize: 40 }} />
</IconButton>
packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.js
+26 -6
View File
@@ -27,13 +27,20 @@ describe('<ComponentContextMenu />', () => {
it('can open the menu and click menu items', () => {
const onClickFunction = jest.fn();
const rendered = render(
wrapInThemedTestApp(<HeaderActionMenu actionItems={[{ label: 'Some label', onClick: onClickFunction }]} />),
wrapInThemedTestApp(
<HeaderActionMenu
actionItems={[{ label: 'Some label', onClick: onClickFunction }]}
/>,
),
);
expect(rendered.queryByText('Some label')).not.toBeInTheDocument();
expect(onClickFunction).not.toHaveBeenCalled();
fireEvent.click(rendered.getByTestId('header-action-menu'));
expect(onClickFunction).not.toHaveBeenCalled();
expect(rendered.getByTestId('header-action-item')).not.toHaveAttribute('aria-disabled', 'true');
expect(rendered.getByTestId('header-action-item')).not.toHaveAttribute(
'aria-disabled',
'true',
);
fireEvent.click(rendered.queryByText('Some label'));
expect(onClickFunction).toHaveBeenCalled();
// We do not expect the dropdown to disappear after click
@@ -42,11 +49,18 @@ describe('<ComponentContextMenu />', () => {
it('Disabled', async () => {
const rendered = render(
wrapInThemedTestApp(<HeaderActionMenu actionItems={[{ label: 'Some label', disabled: true }]} />),
wrapInThemedTestApp(
<HeaderActionMenu
actionItems={[{ label: 'Some label', disabled: true }]}
/>,
),
);
fireEvent.click(rendered.getByTestId('header-action-menu'));
expect(rendered.getByTestId('header-action-item')).toHaveAttribute('aria-disabled', 'true');
expect(rendered.getByTestId('header-action-item')).toHaveAttribute(
'aria-disabled',
'true',
);
});
it('Test wrapper, and secondary label', () => {
@@ -58,7 +72,9 @@ describe('<ComponentContextMenu />', () => {
{
label: 'Some label',
secondaryLabel: 'Secondary label',
WrapperComponent: ({ children }) => <button onClick={onClickFunction}>{children}</button>,
WrapperComponent: ({ children }) => (
<button onClick={onClickFunction}>{children}</button>
),
},
]}
/>,
@@ -75,7 +91,11 @@ describe('<ComponentContextMenu />', () => {
});
it('should close when hitting escape', async () => {
const rendered = render(wrapInThemedTestApp(<HeaderActionMenu actionItems={[{ label: 'Some label' }]} />));
const rendered = render(
wrapInThemedTestApp(
<HeaderActionMenu actionItems={[{ label: 'Some label' }]} />,
),
);
expect(rendered.container.getAttribute('aria-hidden')).toBeNull();
fireEvent.click(rendered.getByTestId('header-action-menu'));
packages/core/src/layout/HeaderLabel/HeaderLabel.test.js
+8 -2
View File
@@ -31,12 +31,18 @@ describe('<HeaderLabel />', () => {
});
it('should have value', () => {
const rendered = render(wrapInThemedTestApp(<HeaderLabel label="Label" value="Value" />));
const rendered = render(
wrapInThemedTestApp(<HeaderLabel label="Label" value="Value" />),
);
expect(rendered.getByText('Value')).toBeInTheDocument();
});
it('should have a link', () => {
const rendered = render(wrapInThemedTestApp(<HeaderLabel label="Label" value="Value" url="/test" />));
const rendered = render(
wrapInThemedTestApp(
<HeaderLabel label="Label" value="Value" url="/test" />,
),
);
const anchor = rendered.container.querySelector('a');
expect(rendered.getByText('Value')).toBeInTheDocument();
expect(anchor.href).toBe('http://localhost/test');
packages/core/src/layout/HeaderLabel/OwnerHeaderLabel.js
+81
View File
@@ -0,0 +1,81 @@
/*
* 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, { Component } from 'react';
import PropTypes from 'prop-types';
import { Tooltip, Link, withStyles } from '@material-ui/core';
import { StatusError } from '../../components/Status';
import HeaderLabel from './HeaderLabel';
const style = theme => ({
notVerified: {
color: theme.palette.status.error,
borderRadius: 4,
padding: '3px 6px',
fontSize: '8pt',
opacity: 0.8,
fontWeight: 'bold',
position: 'relative',
top: -4,
backgroundColor: 'pink',
float: 'right',
marginLeft: 14,
},
label: { float: 'left' },
});
class OwnerHeaderLabel extends Component {
static propTypes = {
owner: PropTypes.object.isRequired,
};
render() {
const { owner, classes } = this.props;
const isBadSquad = owner.type !== 'squad';
const notVerified = isBadSquad && (
<Link href="https://spotify.stackenterprise.co/a/4412/23">
<span className={classes.notVerified}>
<StatusError style={{ position: 'relative', top: 2 }} /> Squad not
verified!
</span>
</Link>
);
const label = (
<Tooltip
title="This component is not owned by an existing squad. Click the badge to learn how to fix this."
placement="bottom"
>
<span>
<span className={classes.label}>{owner.name}</span>
</span>
</Tooltip>
);
return (
<>
<HeaderLabel
label="Owner"
value={isBadSquad ? label : owner.name}
url={owner.name ? `/org/${owner.name}` : ''}
/>
{notVerified}
</>
);
}
}
export default withStyles(style)(OwnerHeaderLabel);
packages/core/src/testUtils/Keyboard.test.js
+17 -5
View File
@@ -33,8 +33,11 @@ describe('testUtils.Keyboard', () => {
const rendered = render(
<form onSubmit={handleSubmit}>
<input onChange={({ target: { value } }) => typed1.push(value)} />
{/* eslint-disable-next-line jsx-a11y/no-autofocus */}
<input onChange={({ target: { value } }) => typed2.push(value)} autoFocus />
<input
onChange={({ target: { value } }) => typed2.push(value)}
/* eslint-disable-next-line jsx-a11y/no-autofocus */
autoFocus
/>
<input onChange={({ target: { value } }) => typed3.push(value)} />
</form>,
);
@@ -64,9 +67,18 @@ describe('testUtils.Keyboard', () => {
const rendered = render(
<form onSubmit={handleSubmit}>
<input defaultValue="1" onChange={({ target: { value } }) => typed1.push(value)} />
<input defaultValue="2" onChange={({ target: { value } }) => typed2.push(value)} />
<input defaultValue="3" onChange={({ target: { value } }) => typed3.push(value)} />
<input
defaultValue="1"
onChange={({ target: { value } }) => typed1.push(value)}
/>
<input
defaultValue="2"
onChange={({ target: { value } }) => typed2.push(value)}
/>
<input
defaultValue="3"
onChange={({ target: { value } }) => typed3.push(value)}
/>
</form>,
);
packages/core/src/testUtils/mockBreakpoint.ts
+3 -1
View File
@@ -29,7 +29,9 @@ const queryToBreakpoint = {
function toBreakpoint(query: string) {
const breakpoint = queryToBreakpoint[query];
if (!breakpoint) {
throw new Error(`received unknown media query in breakpoint mock: '${query}'`);
throw new Error(
`received unknown media query in breakpoint mock: '${query}'`,
);
}
return breakpoint;
}