diff --git a/.changeset/polite-moose-cough.md b/.changeset/polite-moose-cough.md new file mode 100644 index 0000000000..b66227bb24 --- /dev/null +++ b/.changeset/polite-moose-cough.md @@ -0,0 +1,5 @@ +--- +'@backstage/core': patch +--- + +update ItemCard component and it's story diff --git a/packages/core/src/layout/ItemCard/ItemCard.stories.tsx b/packages/core/src/layout/ItemCard/ItemCard.stories.tsx index 2b48cc4630..75031a0765 100644 --- a/packages/core/src/layout/ItemCard/ItemCard.stories.tsx +++ b/packages/core/src/layout/ItemCard/ItemCard.stories.tsx @@ -24,7 +24,7 @@ export default { export const Default = () => ( - + ( onClick={() => {}} /> - + ( export const Tags = () => ( - + - + diff --git a/packages/core/src/layout/ItemCard/ItemCard.test.tsx b/packages/core/src/layout/ItemCard/ItemCard.test.tsx new file mode 100644 index 0000000000..6afeb16c5b --- /dev/null +++ b/packages/core/src/layout/ItemCard/ItemCard.test.tsx @@ -0,0 +1,51 @@ +/* + * 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 { ItemCard } from './ItemCard'; + +const minProps = { + description: 'This is the description of an Item Card', + label: 'Button', + title: 'Item Card', + type: 'Pretitle', +}; + +describe('', () => { + it('renders default without exploding', async () => { + const { description, label, title, type } = minProps; + const { getByText } = await renderInTestApp(); + expect(getByText(description)).toBeInTheDocument(); + expect(getByText(title)).toBeInTheDocument(); + expect(getByText(label)).toBeInTheDocument(); + expect(getByText(type)).toBeInTheDocument(); + }); + + it('renders with tags without exploding', async () => { + const { description, label, title } = minProps; + const tags = ['tag one', 'tag two']; + const { getByText } = await renderInTestApp( + , + ); + expect(getByText(description)).toBeInTheDocument(); + expect(getByText(title)).toBeInTheDocument(); + expect(getByText(label)).toBeInTheDocument(); + tags.forEach(tag => { + expect(getByText(tag)).toBeInTheDocument(); + }); + }); +}); diff --git a/packages/core/src/layout/ItemCard/ItemCard.tsx b/packages/core/src/layout/ItemCard/ItemCard.tsx index 2d425026a5..a17cbed563 100644 --- a/packages/core/src/layout/ItemCard/ItemCard.tsx +++ b/packages/core/src/layout/ItemCard/ItemCard.tsx @@ -61,8 +61,8 @@ export const ItemCard: FC = ({ {title}
- {tags?.map(tag => ( - + {tags?.map((tag, i) => ( + ))} {description}