From 7c1d677281ba5402d9bb9908e8557c3457f35159 Mon Sep 17 00:00:00 2001
From: Lior Keren <lkeren@redhat.com>
Date: Tue, 22 Nov 2022 15:47:30 +0200
Subject: [PATCH] Exporting fixutes of const data used in the tests of
 GuitarGallery

Exporting fixutes of const guitars data used in the tests of the GuitarGallery to an external fixtures file
---
 .../components/GuitarGallery.test.js          | 54 -------------------
 .../components/tests/GuitarGallery.test.js    | 46 ++++++++++++++++
 app/javascript/components/tests/fixtures.js   | 16 ++++++
 3 files changed, 62 insertions(+), 54 deletions(-)
 delete mode 100644 app/javascript/components/GuitarGallery.test.js
 create mode 100644 app/javascript/components/tests/GuitarGallery.test.js
 create mode 100644 app/javascript/components/tests/fixtures.js

diff --git a/app/javascript/components/GuitarGallery.test.js b/app/javascript/components/GuitarGallery.test.js
deleted file mode 100644
index d3cd751..0000000
--- a/app/javascript/components/GuitarGallery.test.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { render, screen /*, waitForElement*/ } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import axios from 'axios';
-import GuitarGallery from './GuitarGallery';
-import { guitarsUrl } from './constants';
-
-test("show loader when it's fetching data, then render Guitars", async () => {
-  axios.get.mockResolvedValueOnce({
-    data: [
-      {
-        name: 'guitar1_test',
-        url: 'https://rukminim1.flixcart.com/image/416/416/acoustic-guitar/x/8/w/topaz-blue-signature-original-imaefec7uhypjdr9.jpeg?q=70',
-        price: '100',
-        description: 'some description in guitar1_test'
-      },
-      {
-        name: 'guitar2_test',
-        url: 'https://shop.brianmayguitars.co.uk/user/special/content/Antique%20Cherry%20a.jpg',
-        price: '200',
-        description: 'some description in guitar2_test'
-      }
-    ]
-  });
-
-  //show loader
-  const { unmount, /*getAllByTestId,*/ getByText } = render(<GuitarGallery />);
-  // expect(getByText(/loading.../i)).toBeInTheDocument();
-
-  // check the correct url is called:
-  expect(axios.get).toHaveBeenCalledWith(guitarsUrl);
-  expect(axios.get).toHaveBeenCalledTimes(1);
-
-  //   //check what's rendered in the row
-  //  const rowValues = await waitForElement(() => getAllByTestId('row').map((row) => row.textContent));
-  //  expect(rowValues).toEqual(['ali', 'abu']);
-
-  const guitarDescriptions = await screen.findAllByText(/Description/i);
-  // const guitarDescriptions = screen.findAllBy('Description');
-  const expectedDescription = [
-    'some description in guitar1_test',
-    'some description in guitar2_test'
-  ];
-  // option 1:
-  expect(guitarDescriptions).toEqual(expectedDescription);
-  // option 2:
-  // console.log(guitarDescriptions);
-  // guitarDescriptions.forEach((description, index) => {
-  //   expect(description).toBe(expectedDescription.at(index));
-  // });
-
-  // unmnount the component from the DOM
-  unmount();
-});
diff --git a/app/javascript/components/tests/GuitarGallery.test.js b/app/javascript/components/tests/GuitarGallery.test.js
new file mode 100644
index 0000000..5bc33ec
--- /dev/null
+++ b/app/javascript/components/tests/GuitarGallery.test.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen /*, waitForElement*/ } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import axios from 'axios';
+import GuitarGallery from '../GuitarGallery.js';
+import { guitarsUrl } from '../constants';
+import { guitarData } from './fixtures';
+
+test("show loader when it's fetching data, then render Guitars", async () => {
+  axios.get.mockResolvedValueOnce(guitarData);
+  //show loader
+  const { unmount /*, getAllByTestId, getByText*/ } = render(<GuitarGallery />);
+  // expect(getByText(/loading.../i)).toBeInTheDocument();
+
+  // check the correct url is called:
+  expect(axios.get).toHaveBeenCalledWith(guitarsUrl);
+  expect(axios.get).toHaveBeenCalledTimes(1);
+
+  //   //check what's rendered in the row
+  //  const rowValues = await waitForElement(() => getAllByTestId('row').map((row) => row.textContent));
+  //  expect(rowValues).toEqual(['ali', 'abu']);
+
+  // const guitarDescriptions = await screen.findAllByText(/Description/i);
+  // // const guitarDescriptions = screen.findAllBy('Description');
+  // const expectedDescription = [
+  //   'some description in guitar1_test',
+  //   'some description in guitar2_test'
+  // ];
+  // // option 1:
+  // expect(guitarDescriptions).toEqual(expectedDescription);
+  // option 2:
+  // console.log(guitarDescriptions);
+  // guitarDescriptions.forEach((description, index) => {
+  //   expect(description).toBe(expectedDescription.at(index));
+  // });
+
+  // ensure the title of the page is presented in the page:
+  expect(screen.getByText('Guitars For Sale:')).toBeInTheDocument();
+
+  // ensure some content of the page is presented in the page:
+  expect(screen.getByText('some description in guitar1_test')).toBeInTheDocument();
+  expect(screen.getByText('some description in guitar2_test')).toBeInTheDocument();
+
+  // unmnount the component from the DOM
+  unmount();
+});
diff --git a/app/javascript/components/tests/fixtures.js b/app/javascript/components/tests/fixtures.js
new file mode 100644
index 0000000..ab8ab8d
--- /dev/null
+++ b/app/javascript/components/tests/fixtures.js
@@ -0,0 +1,16 @@
+export const guitarData = {
+  data: [
+    {
+      name: 'guitar1_test',
+      url: 'https://rukminim1.flixcart.com/image/416/416/acoustic-guitar/x/8/w/topaz-blue-signature-original-imaefec7uhypjdr9.jpeg?q=70',
+      price: '100',
+      description: 'some description in guitar1_test'
+    },
+    {
+      name: 'guitar2_test',
+      url: 'https://shop.brianmayguitars.co.uk/user/special/content/Antique%20Cherry%20a.jpg',
+      price: '200',
+      description: 'some description in guitar2_test'
+    }
+  ]
+};