Testing

.eslintrc.json

@@ -20,7 +20,7 @@
   },
   "plugins": ["react", "prettier"],
   "rules": {
-    "prettier/prettier": "error",
+    "prettier/prettier": ["error", { "endOfLine": "auto" }],
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "react/prop-types": 0
   }

src/hackathons-collector/logic-components/listing-item.js

@@ -17,7 +17,7 @@ const ListingItem = ({
   return (
     <Entry>
       <article style={customStyles}>
-        <div className="tags">
+        <div className="tags" data-testid="tags-element">
           <span className="city">@{location}</span>
           {tags.map((tag) => (
             <span key={tag}>#{tag}</span>
@@ -42,7 +42,12 @@ const ListingItem = ({
         {disabled ? (
           ''
         ) : (
-          <a target="_blank" rel="noopener noreferrer" href={url}>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={url}
+            data-testid="url-element"
+          >
             website
           </a>
         )}

src/hackathons-collector/logic-components/listing-item.test.js

@@ -1 +1,34 @@
-test.todo('test');
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+// import userEvent from '@testing-library/user-event';
+import moment from 'moment';
+import 'moment/locale/en-gb';
+import ListingItem from './listing-item';
+
+const event = {
+  date: '25.03.2021',
+  title: 'hackathon',
+  tags: ['hello', 'js'],
+  location: 'Poznan',
+  description: 'pierwszy w 2021',
+  url: 'https://reactywny.pl',
+};
+
+test('check ListingItem component render', () => {
+  render(<ListingItem event={event} />);
+
+  expect(screen.getByText(`@${event.location}`)).toBeInTheDocument();
+  expect(screen.getByText(event.title)).toBeInTheDocument();
+  expect(screen.getByText(event.description)).toBeInTheDocument();
+  expect(
+    screen.getByText(moment(event.date).format('dddd'))
+  ).toBeInTheDocument();
+});
+
+test('check tag array render', () => {
+  render(<ListingItem event={event} />);
+
+  event.tags.forEach((tag) => {
+    expect(screen.getByText(`#${tag}`)).toBeInTheDocument();
+  });
+});