Feat/add test footer (Klimatbyran#289)

* cleanup sharebutton

* add tests for footer components

Author: elvbom

__tests__/components/Button.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react'
+import Footer from '../../../components/Footer/Footer'
+
+describe('Footer component', () => {
+  it('should render without crashing', () => {
+    render(
+      <Footer />,
+    )
+    expect(screen.getByText('Samarbetspartners')).toBeInTheDocument()
+  })
+
+  it('should display the newsletter subscription', () => {
+    render(
+      <Footer />,
+    )
+    // Assuming you add data-testid="newsletter-subscribe" to your NewsletterSubscribe component
+    const newsletterElement = screen.getByText('Vill du få nyheter om Klimatkollen?')
+    expect(newsletterElement).toBeInTheDocument()
+  })
+
+  it('should display partners', () => {
+    render(
+      <Footer />,
+    )
+    expect(screen.getByAltText('Postkodstiftelsen logo')).toBeInTheDocument()
+  })
+
+  it('should display tagline', () => {
+    render(
+      <Footer />,
+    )
+    expect(screen.getByText('Klimatkollen är en medborgarplattform som tillgängliggör klimatdata')).toBeInTheDocument()
+  })
+
+  it('should display the copyright text', () => {
+    render(
+      <Footer />,
+    )
+    expect(screen.getByText(/CC BY-SA/)).toBeInTheDocument()
+  })
+
+  it('should display logo', () => {
+    render(
+      <Footer />,
+    )
+    expect(screen.getByAltText('Klimatkollen logo')).toBeInTheDocument()
+  })
+
+  it('should display SoMe links', () => {
+    render(
+      <Footer />,
+    )
+    expect(screen.getByText('Maila oss')).toBeInTheDocument()
+    expect(screen.getByAltText('Linkedin logo')).toBeInTheDocument()
+  })
+})

__tests__/components/Footer/Footer.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import NewsletterForm from '../../../components/Footer/FooterNewsletterForm'
+
+describe('NewsletterForm component', () => {
+  const mockOnValidated = vi.fn()
+
+  beforeEach(() => {
+    render(
+      <NewsletterForm status={null} onValidated={mockOnValidated} />,
+    )
+  })
+
+  it('should render without crashing', () => {
+    const header = screen.getByText('Vill du få nyheter om Klimatkollen?')
+    expect(header).toBeInTheDocument()
+  })
+
+  it('should display a placeholder text in email input', () => {
+    const emailInput = screen.getByPlaceholderText('Ange mailadress')
+    expect(emailInput).toBeInTheDocument()
+  })
+
+  it('should update email value on input change', () => {
+    const emailInput = screen.getByPlaceholderText('Ange mailadress') as HTMLInputElement
+    fireEvent.change(emailInput, { target: { value: '[email protected]' } })
+    expect(emailInput.value).toBe('[email protected]')
+  })
+
+  it('should call onValidated when form is submitted', () => {
+    const emailInput = screen.getByPlaceholderText('Ange mailadress') as HTMLInputElement
+    const form = screen.getByPlaceholderText('Ange mailadress')
+
+    fireEvent.change(emailInput, { target: { value: '[email protected]' } })
+    fireEvent.submit(form)
+
+    expect(mockOnValidated).toHaveBeenCalledWith({ EMAIL: '[email protected]' })
+  })
+})

__tests__/components/Footer/FooterNewsletterForm.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import NewsletterSubscribe from '../../../components/Footer/FooterNewsletterSubscribe'
+
+// Mock NewsletterForm
+vi.mock('../FooterNewsletterForm', () => ({ default: () => <div placeholder="mockNewsletterForm" /> }))
+
+describe('NewsletterSubscribe component', () => {
+  // FIXME this test needs to be updated, not working atm
+  // it('should throw an error if the Mailchimp URL is undefined', () => {
+  //   // Setup environment variable to undefined
+  //   process.env.NEXT_PUBLIC_MAILCHIMP_URL = undefined
+  //   expect(() => render(<NewsletterSubscribe />)).toThrow('Must have a mailchimp URL')
+  // })
+
+  it('should render without error if Mailchimp URL is set', () => {
+    render(<NewsletterSubscribe />)
+
+    const newsletterForm = screen.getByText('Vill du få nyheter om Klimatkollen?')
+    expect(newsletterForm).toBeInTheDocument()
+  })
+})

__tests__/components/Footer/FooterNewsletterSubscribe.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import Partners from '../../../components/Footer/FooterPartners'
+
+describe('Partners component', () => {
+  beforeEach(() => {
+    render(<Partners />)
+  })
+
+  it('should render all partner links', () => {
+    const links = screen.getAllByRole('link')
+    expect(links.length).toBe(5)
+
+    // Checking partner URL
+    expect(links[0]).toHaveAttribute('href', 'https://postkodstiftelsen.se/')
+    expect(links[1]).toHaveAttribute('href', 'https://www.climateview.global/')
+    expect(links[2]).toHaveAttribute('href', 'https://www.wwf.se/')
+    expect(links[3]).toHaveAttribute('href', 'https://researchersdesk.se/')
+    expect(links[4]).toHaveAttribute('href', 'https://www.klimatklubben.se/')
+  })
+
+  it('should render all partner images with correct alt text', () => {
+    const images = screen.getAllByRole('img')
+    expect(images.length).toBe(5)
+
+    // Checking image alt text
+    expect(images[0]).toHaveAttribute('alt', 'Postkodstiftelsen logo')
+    expect(images[1]).toHaveAttribute('alt', 'ClimateView logo')
+    expect(images[2]).toHaveAttribute('alt', 'WWF logo')
+    expect(images[3]).toHaveAttribute('alt', 'Researchers desk logo')
+    expect(images[4]).toHaveAttribute('alt', 'Klimatklubben logo')
+  })
+})

__tests__/components/Footer/FooterPartners.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import SocialList from '../../../components/Footer/FooterSocialLinks'
+
+describe('SocialList component', () => {
+  beforeEach(() => {
+    render(<SocialList />)
+  })
+
+  it('should render the email social list item', () => {
+    const emailIcon = screen.getByAltText('Email icon')
+    const emailLink = screen.getByText('Maila oss')
+    expect(emailIcon).toBeInTheDocument()
+    expect(emailLink).toHaveAttribute('href', 'mailto:[email protected]')
+  })
+
+  it('should render the Twitter social list item', () => {
+    const twitterIcon = screen.getByAltText('X (Twitter) logo')
+    const twitterLink = screen.getByText('X (Twitter)')
+    expect(twitterIcon).toBeInTheDocument()
+    expect(twitterLink).toHaveAttribute('href', 'https://twitter.com/klimatkollen')
+  })
+
+  it('should render the LinkedIn social list item', () => {
+    const linkedInIcon = screen.getByAltText('Linkedin logo')
+    const linkedInLink = screen.getByText('LinkedIn')
+    expect(linkedInIcon).toBeInTheDocument()
+    expect(linkedInLink).toHaveAttribute('href', 'https://www.linkedin.com/company/klimatkollen/')
+  })
+
+  it('should render the GitHub social list item', () => {
+    const gitHubIcon = screen.getByAltText('GitHub logo')
+    const gitHubLink = screen.getByText('GitHub')
+    expect(gitHubIcon).toBeInTheDocument()
+    expect(gitHubLink).toHaveAttribute('href', 'https://github.com/Klimatbyran/klimatkollen')
+  })
+})

__tests__/components/Footer/FooterSocialLinks.test.tsx

@@ -3,7 +3,7 @@ import NewsletterForm from './FooterNewsletterForm'
 
 function NewsletterSubscribe() {
   const MAILCHIMP_URL = process.env.NEXT_PUBLIC_MAILCHIMP_URL
-  if (typeof MAILCHIMP_URL === 'undefined') throw new Error('Must have a mailchimp URL')
+  if (MAILCHIMP_URL === undefined) throw new Error('Must have a mailchimp URL')
 
   return (
     <MailchimpSubscribe

components/Button.tsx

@@ -11,17 +11,17 @@ const Wrapper = styled.div`
 `
 
 const Button = styled.button`
-height: 56px;
-background: ${({ theme }) => theme.midGreen};
-border: 0;
-border-radius: 4px;
-font-weight: bold;
-font-size: 16px;
-cursor: pointer;
-width: 100%;
-&:hover {
-  background: ${({ theme }) => theme.lightGreen};
-}
+  height: 56px;
+  background: ${({ theme }) => theme.midGreen};
+  border: 0;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 16px;
+  cursor: pointer;
+  width: 100%;
+  &:hover {
+    background: ${({ theme }) => theme.lightGreen};
+  }
 `
 
 function FourOhFour() {

components/Footer/FooterNewsletterSubscribe.tsx

@@ -4,3 +4,5 @@
 // Used for __tests__/testing-library.js
 // Learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom'
+
+process.env.NEXT_PUBLIC_MAILCHIMP_URL = 'test-mailchimp-url'