fix: update the ItemCard component and it's story (#3007)

* fix ItemCard stories on responsive

* update the value of key prop in ItemCard tags

* add test case for ItemCard component

* add changeset

.changeset/polite-moose-cough.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core': patch
+---
+
+update ItemCard component and it's story

packages/core/src/layout/ItemCard/ItemCard.stories.tsx

@@ -24,7 +24,7 @@ export default {
 
 export const Default = () => (
   <Grid container spacing={4}>
-    <Grid item xs={3}>
+    <Grid item xs={12} md={3}>
       <ItemCard
         title="Item Card"
         description="This is the description of an Item Card"
@@ -33,7 +33,7 @@ export const Default = () => (
         onClick={() => {}}
       />
     </Grid>
-    <Grid item xs={3}>
+    <Grid item xs={12} md={3}>
       <ItemCard
         title="Item Card"
         description="This is the description of an Item Card"
@@ -47,18 +47,18 @@ export const Default = () => (
 
 export const Tags = () => (
   <Grid container spacing={4}>
-    <Grid item xs={3}>
+    <Grid item xs={12} md={3}>
       <ItemCard
         title="Item Card"
-        description="This is a Item Card"
-        tags={['one tag', 'two tag']}
+        description="This is the description of an Item Card with Tags"
+        tags={['one tag', 'one tag']}
         label="Button"
       />
     </Grid>
-    <Grid item xs={3}>
+    <Grid item xs={12} md={3}>
       <ItemCard
         title="Item Card"
-        description="This is a Item Card"
+        description="This is the description of an Item Card with Tags"
         tags={['one tag', 'two tag']}
         label="Button"
       />

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('<InfoCard />', () => {
+  it('renders default without exploding', async () => {
+    const { description, label, title, type } = minProps;
+    const { getByText } = await renderInTestApp(<ItemCard {...minProps} />);
+    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(
+      <ItemCard {...minProps} tags={tags} />,
+    );
+    expect(getByText(description)).toBeInTheDocument();
+    expect(getByText(title)).toBeInTheDocument();
+    expect(getByText(label)).toBeInTheDocument();
+    tags.forEach(tag => {
+      expect(getByText(tag)).toBeInTheDocument();
+    });
+  });
+});

packages/core/src/layout/ItemCard/ItemCard.tsx

@@ -61,8 +61,8 @@ export const ItemCard: FC<ItemCardProps> = ({
         <Typography variant="h6">{title}</Typography>
       </div>
       <div className={classes.content}>
-        {tags?.map(tag => (
-          <Chip label={tag} key={tag} />
+        {tags?.map((tag, i) => (
+          <Chip label={tag} key={`tag-${i}`} />
         ))}
         <Typography variant="body2" paragraph className={classes.description}>
           {description}