Merge pull request #291 from Klimatbyran/staging

New tests and bug fixes

__tests__/components/BackArrow.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import BackArrow from '../../components/BackArrow'
+
+vi.mock('../../public/icons/arrow-left.svg', () => ({ default: 'svg' }))
+
+describe('BackArrow', () => {
+  it('should render the BackArrow with the correct route', () => {
+    const route = '/some-route'
+    render(<BackArrow route={route} />)
+
+    const linkElement = screen.getByRole('link')
+
+    expect(linkElement).toBeInTheDocument()
+    expect(linkElement).toHaveAttribute('href', route)
+  })
+})

__tests__/components/Footer/Footer.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/FooterNewsletterForm.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/FooterNewsletterSubscribe.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/FooterPartners.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/FooterSocialLinks.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/ToggleButton.test.tsx

@@ -0,0 +1,29 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import ToggleButton from '../../components/ToggleButton'
+
+describe('ToggleButton', () => {
+  it('should render the ToggleButton component', () => {
+    const { container } = render(<ToggleButton text="Test" icon={<span>Icon</span>} />)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('should render the text provided', () => {
+    render(<ToggleButton text="Test" icon={<span>Icon</span>} />)
+    const textElement = screen.getByText('Test')
+    expect(textElement).toBeInTheDocument()
+  })
+
+  it('should render the icon provided', () => {
+    render(<ToggleButton text="Test" icon={<span>Icon</span>} />)
+    const iconElement = screen.getByText('Icon')
+    expect(iconElement).toBeInTheDocument()
+  })
+
+  it('should call handleClick when clicked', () => {
+    const handleClick = vi.fn()
+    render(<ToggleButton text="Test" icon={<span>Icon</span>} handleClick={handleClick} />)
+    const buttonElement = screen.getByRole('button')
+    fireEvent.click(buttonElement)
+    expect(handleClick).toHaveBeenCalled()
+  })
+})

components/Footer/FooterNewsletterSubscribe.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

pages/404.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() {

pages/om-oss/index.tsx

@@ -36,12 +36,23 @@ const Grid = styled.div`
 
 const GridItem = styled.div`
   min-height: 200px;
+  display: flex;
+  flex-direction: column;
+
+  & > img {
+    flex-shrink: 0; // make sure image doesn't shrink
+  }
+
+  & > b {
+    clear: both; // make sure text appears below the image
+  }
 `
 
 const GridImage = styled.img`
   border-radius: 50%;
   width: 200px;
   height: 200px;
+  margin-bottom: 16px;
 `
 
 function OmOss() {
@@ -246,14 +257,14 @@ function OmOss() {
                       <GridImage src={Ola} alt="Ola Spännar" />
                       <b>Ola Spännar</b>
                       {' '}
-                      – Opinionsbildare, medgrundare av Klimatkollen,
+                      Opinionsbildare, medgrundare av Klimatkollen,
                       tidigare kommunikationschef på Centerpartiet och kundansvarig på Forsman & Bodenfors.
                     </GridItem>
                     <GridItem>
                       <GridImage src={Frida} alt="Frida Berry Eklund" />
                       <b>Frida Berry Eklund</b>
                       {' '}
-                      – Specialist på klimatkommunikation, föreläsare och medgrundare till Klimatkollen.
+                      Specialist på klimatkommunikation, föreläsare och medgrundare till Klimatkollen.
                       Utsedd till en av Sveriges 101 hållbarhetsmäktigaste 2021. Initiativtagare till den
                       internationella plattformen Our Kids’ Climate och författare till boken “Prata med barn om klimatet” (Natur & Kultur, 2020).
                     </GridItem>
@@ -268,21 +279,21 @@ function OmOss() {
                       <GridImage src={Anna} alt="Anna Loverus" />
                       <b>Anna Loverus</b>
                       {' '}
-                      – Digital strateg och tidigare chef för sociala medier på Spotify och H&M.
+                      Digital strateg och tidigare chef för sociala medier på Spotify och H&M.
                       VD och grundare av Better Odds.
                     </GridItem>
                     <GridItem>
                       <GridImage src={Maria} alt="Maria Soxbo" />
                       <b>Maria Soxbo</b>
                       {' '}
-                      – Journalist, författare, föreläsare och grundare av Klimatklubben.
+                      Journalist, författare, föreläsare och grundare av Klimatklubben.
                       Utsedd till en av Sveriges 101 hållbarhetsmäktigaste 2021.
                     </GridItem>
                     <GridItem>
                       <GridImage src={CJ} alt="Carl-Johan Schultz" />
                       <b>Carl-Johan Schultz</b>
                       {' '}
-                      – Hållbarhetsstrateg på Doings, tidigare planner på Forsman & Bodenfors,
+                      Hållbarhetsstrateg på Doings, tidigare planner på Forsman & Bodenfors,
                       författare till boken ”Hållbariseringen”, Årets marknadsföringsbok 2022.
                     </GridItem>
                   </Grid>