From f24198d846319e337370b90b538703475833aa98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Doreau?=
<32459935+ayshiff@users.noreply.github.com>
Date: Sat, 23 May 2020 23:33:06 +0200
Subject: [PATCH] [core]: Refactor and test Lifecycle component (#952)
* refactor(core): Lifecycle component
* tests(core): Lifecycle component
* fix(core): Lifecycle contional className
* fix(core): remove "is" prefix from Lifecycle props
---
...lpha.stories.tsx => Lifecycle.stories.tsx} | 24 +++++++---
.../components/Lifecycle/Lifecycle.test.jsx | 44 +++++++++++++++++++
.../src/components/Lifecycle/Lifecycle.tsx | 30 +++++--------
.../Lifecycle/LifecycleBeta.stories.tsx | 33 --------------
.../core/src/components/Lifecycle/index.ts | 2 +-
packages/core/src/index.ts | 2 +-
.../src/components/ScaffolderPage/index.tsx | 4 +-
7 files changed, 77 insertions(+), 62 deletions(-)
rename packages/core/src/components/Lifecycle/{LifecycleAlpha.stories.tsx => Lifecycle.stories.tsx} (60%)
create mode 100644 packages/core/src/components/Lifecycle/Lifecycle.test.jsx
delete mode 100644 packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx
diff --git a/packages/core/src/components/Lifecycle/LifecycleAlpha.stories.tsx b/packages/core/src/components/Lifecycle/Lifecycle.stories.tsx
similarity index 60%
rename from packages/core/src/components/Lifecycle/LifecycleAlpha.stories.tsx
rename to packages/core/src/components/Lifecycle/Lifecycle.stories.tsx
index 072fb90a55..c29eb8a02f 100644
--- a/packages/core/src/components/Lifecycle/LifecycleAlpha.stories.tsx
+++ b/packages/core/src/components/Lifecycle/Lifecycle.stories.tsx
@@ -14,20 +14,30 @@
* limitations under the License.
*/
import React from 'react';
-import { AlphaLabel } from './Lifecycle';
+import { Lifecycle } from './Lifecycle';
export default {
- title: 'Lifecycle - Alpha',
- component: AlphaLabel,
+ title: 'Lifecycle',
+ component: Lifecycle,
};
-export const Default = () => (
+export const AlphaDefault = () => (
<>
- This feature is in
+ This feature is in
);
-export const Shorthand = () => (
+export const AlphaShorthand = () => (
<>
- This feature is in
+ This feature is in
+
+);
+export const BetaDefault = () => (
+ <>
+ This feature is in
+
+);
+export const BetaShorthand = () => (
+ <>
+ This feature is in
);
diff --git a/packages/core/src/components/Lifecycle/Lifecycle.test.jsx b/packages/core/src/components/Lifecycle/Lifecycle.test.jsx
new file mode 100644
index 0000000000..db0d2736ed
--- /dev/null
+++ b/packages/core/src/components/Lifecycle/Lifecycle.test.jsx
@@ -0,0 +1,44 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import { wrapInThemedTestApp } from '@backstage/test-utils';
+import { Lifecycle } from './Lifecycle';
+
+describe('', () => {
+ it('renders Alpha with shorthand', async () => {
+ const { getByText } = render(
+ wrapInThemedTestApp(),
+ );
+ expect(getByText('α')).toBeInTheDocument();
+ });
+
+ it('renders Alpha without shorthand', async () => {
+ const { getByText } = render(wrapInThemedTestApp());
+ expect(getByText('Alpha')).toBeInTheDocument();
+ });
+
+ it('renders Beta with shorthand', async () => {
+ const { getByText } = render(wrapInThemedTestApp());
+ expect(getByText('β')).toBeInTheDocument();
+ });
+
+ it('renders Beta without shorthand', async () => {
+ const { getByText } = render(wrapInThemedTestApp());
+ expect(getByText('Beta')).toBeInTheDocument();
+ });
+});
diff --git a/packages/core/src/components/Lifecycle/Lifecycle.tsx b/packages/core/src/components/Lifecycle/Lifecycle.tsx
index e70d298d20..416df27a30 100644
--- a/packages/core/src/components/Lifecycle/Lifecycle.tsx
+++ b/packages/core/src/components/Lifecycle/Lifecycle.tsx
@@ -19,7 +19,8 @@ import CSS from 'csstype';
import { makeStyles } from '@material-ui/core';
type Props = CSS.Properties & {
- isShorthand?: boolean;
+ shorthand?: boolean;
+ alpha?: boolean;
};
const useStyles = makeStyles({
@@ -37,26 +38,19 @@ const useStyles = makeStyles({
},
});
-export const AlphaLabel: FC = props => {
+export const Lifecycle: FC = props => {
const classes = useStyles(props);
- const { isShorthand } = props;
- return isShorthand ? (
-
- α
+ const { shorthand, alpha } = props;
+ return shorthand ? (
+
+ {alpha ? <>α : <>β}
) : (
- Alpha
- );
-};
-
-export const BetaLabel: FC = props => {
- const classes = useStyles(props);
- const { isShorthand } = props;
- return isShorthand ? (
-
- β
+
+ {alpha ? 'Alpha' : 'Beta'}
- ) : (
- Beta
);
};
diff --git a/packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx b/packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx
deleted file mode 100644
index f8cce2a562..0000000000
--- a/packages/core/src/components/Lifecycle/LifecycleBeta.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * 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 { BetaLabel } from './Lifecycle';
-
-export default {
- title: 'Lifecycle - Beta',
- component: BetaLabel,
-};
-
-export const Default = () => (
- <>
- This feature is in
-
-);
-export const Shorthand = () => (
- <>
- This feature is in
-
-);
diff --git a/packages/core/src/components/Lifecycle/index.ts b/packages/core/src/components/Lifecycle/index.ts
index eeb0971555..8854c04396 100644
--- a/packages/core/src/components/Lifecycle/index.ts
+++ b/packages/core/src/components/Lifecycle/index.ts
@@ -14,4 +14,4 @@
* limitations under the License.
*/
-export { AlphaLabel, BetaLabel } from './Lifecycle';
+export { Lifecycle } from './Lifecycle';
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 1bd35f67c3..bb5eb25303 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -34,7 +34,7 @@ export { default as CopyTextButton } from './components/CopyTextButton';
export { default as Progress } from './components/Progress';
export * from './components/SimpleStepper';
export { OAuthRequestDialog } from './components/OAuthRequestDialog';
-export { AlphaLabel, BetaLabel } from './components/Lifecycle';
+export { Lifecycle } from './components/Lifecycle';
export { default as SupportButton } from './components/SupportButton';
export { default as Table, SubvalueCell } from './components/Table';
export type { TableColumn } from './components/Table/Table';
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx
index 9c3801702a..922416972a 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/index.tsx
+++ b/plugins/scaffolder/src/components/ScaffolderPage/index.tsx
@@ -16,7 +16,7 @@
import React from 'react';
import {
- AlphaLabel,
+ Lifecycle,
Content,
ContentHeader,
InfoCard,
@@ -42,7 +42,7 @@ const ScaffolderPage: React.FC<{}> = () => {
- Create a new component {' '}
+ Create a new component {' '}
}
subtitle="Create new software components using standard templates"