removed footer scss file

package.json

@@ -11,7 +11,15 @@
     "lint": "eslint --fix . && echo 'Lint complete.'",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "test": "react-scripts test"
+    "test": "react-scripts test",
+    "test:coverage": "npm test -- --coverage"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/components/**/*.{js}",
+      "!<rootDir>/node_modules/",
+      "!<rootDir>/path/to/dir/"
+    ]
   },
   "author": "Andres Alcocer",
   "license": "ISC",
@@ -78,6 +86,8 @@
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "image-webpack-loader": "^8.1.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "mini-css-extract-plugin": "^1.3.6",
     "node-sass": "^8.0.0",
     "prettier": "^2.8.0",
@@ -87,6 +97,7 @@
     "svg-react-loader": "^0.4.6",
     "tap-nirvana": "^1.1.0",
     "terser-webpack-plugin": "^5.3.6",
+    "ts-node": "^10.9.1",
     "watch": "^1.0.2",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0",

src/AppRouter.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { BrowserRouter, Route, Routes, Outlet } from 'react-router-dom'
 
-import Footer from './components/Footer'
+import Footer from './components/Footer/Footer'
 import Navbar from './components/Navbar'
 import Home from './pages/Home'
 import NotFound from './pages/NotFound'

src/components/Footer/Footer.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import './footer.scss'
+
+const footer = () => (
+  <footer className='footer'>
+    <div className='footer__copyright'>
+      &copy; {new Date().getFullYear()} Made with ❤️ by{' '}
+      <a
+        className='footer__copyright--link'
+        href='https://github.com/devandres-tech'
+      >
+        Dev Andres
+      </a>
+    </div>
+  </footer>
+)
+
+export default footer

src/components/Footer/__tests__/Footer.stories.tsx

@@ -0,0 +1,28 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import Footer from '../Footer'
+
+export default {
+  title: 'Footer',
+  component: Footer,
+  parameters: {
+    parameters: {
+      backgrounds: {
+        default: '#141414',
+        values: [
+          { name: 'dark', value: '#141414' },
+          { name: 'light', value: '#fff' },
+        ],
+      },
+    },
+    docs: {
+      description: {
+        component: 'Footer component default styles',
+      },
+    },
+  },
+} as ComponentMeta<typeof Footer>
+
+const Template: ComponentStory<typeof Footer> = () => <Footer />
+
+export const FooterDefault = Template.bind({})

src/components/Footer/__tests__/Footer.test.tsx

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react'
+import { FooterDefault } from './Footer.stories'
+
+describe('Footer constructor', () => {
+  test('should render default footer', () => {})
+  const { container } = render(<FooterDefault />)
+  expect(container).toMatchSnapshot()
+})

src/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` 1`] = `
+<div>
+  <footer
+    class="footer"
+  >
+    <div
+      class="footer__copyright"
+    >
+      © 
+      2022
+       Made with ❤️ by
+       
+      <a
+        class="footer__copyright--link"
+        href="https://github.com/devandres-tech"
+      >
+        Dev Andres
+      </a>
+    </div>
+  </footer>
+</div>
+`;

src/components/Footer/footer.scss

@@ -0,0 +1,28 @@
+@import '../../static/sass/style';
+
+.footer {
+  background-color: $color-background;
+  padding-top: 15rem;
+  padding-bottom: 4rem;
+  grid-column: 1 / 13;
+  text-align: center;
+
+  @include responsive(phone) {
+    padding-top: 10rem;
+  }
+
+  &__copyright {
+    color: #fff;
+    font-size: 1.8rem;
+
+    &--link {
+      text-decoration: none;
+      color: $color-red-2;
+      transition: all 0.3s;
+    }
+
+    &--link:hover {
+      color: orange;
+    }
+  }
+}

src/components/Navbar.tsx

@@ -5,7 +5,6 @@ import { useNavigate } from 'react-router-dom'
 import { useScroll } from '../hooks/useScroll'
 import Search from '../static/images/search-icon.svg'
 import NetflixLogo from '../static/images/Netflix_Logo_RGB.png'
-import AddLogo from '../static/images/add.svg'
 import BellLogo from '../static/images/bell-logo.svg'
 import DropdownArrow from '../static/images/drop-down-arrow.svg'
 import DropdownContent from './DropdownContent'

src/static/sass/layout/_footer.scss

@@ -1,28 +0,0 @@
-.footer {
-   background-color: $color-background;
-   padding-top: 15rem;
-   padding-bottom: 4rem;
-   grid-column: 1 / 13;
-   text-align: center;
-
-   @include responsive(phone) {
-      padding-top: 10rem;
-   }
-
-   &__copyright {
-      color: #fff;
-      font-size: 1.8rem;
-      
-      &--link {
-         text-decoration: none; 
-         color: $color-red-2;
-         transition: all .3s;
-
-      }
-
-      &--link:hover {
-         color: orange;
-      }
-   }  
- 
-}

src/static/sass/style.scss

@@ -10,6 +10,5 @@
 @import 'components/movieShowcase';
 @import 'components/notfound';
 
-@import 'layout/footer';
 @import 'layout/header';
 @import 'layout/navigation';

src/utils/icons.data.ts

@@ -0,0 +1,5 @@
+import Add from '../static/images/add-round.svg'
+
+export const ICONS = {
+  Add,
+}

src/utils/index.ts

@@ -0,0 +1 @@
+export * from './icons.data'

webpack.config.js

@@ -107,9 +107,7 @@ module.exports = () => {
           test: /\.(sass|less|css|scss)$/,
           use: [
             // fallback to style-loader in development
-            process.env.NODE_ENV !== 'production'
-              ? 'style-loader'
-              : MiniCssExtractPlugin.loader,
+            !prod ? 'style-loader' : MiniCssExtractPlugin.loader,
             'css-loader',
             'resolve-url-loader',
             'sass-loader',