Merge pull request #97 from incubateur-ademe/add-particuliers-mention…

…-on-homepage

.github/workflows/ci.yml

@@ -0,0 +1,17 @@
+name: Que Faire de Mes Déchets | CI
+
+on: [push]
+
+jobs:
+  test-and-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+      - run: yarn test
+      - run: yarn build

jest.config.js

@@ -0,0 +1,7 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} **/
+module.exports = {
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+.tsx?$": ["ts-jest", {}],
+  },
+};

package.json

@@ -40,24 +40,34 @@
     "use-query-params": "^1.2.3"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.24.7",
+    "@testing-library/dom": "^10.3.1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "gatsby-cli": "^5.13.3",
     "gatsby-plugin-root-import": "^2.0.9",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.3.2",
+    "ts-jest": "^29.2.2",
     "typescript": "^5.5.3",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4"
   },
   "scripts": {
-    "build": "rm -rf ../cache && yarn cache clean && rm -rf node_modules && yarn install --frozen-lockfile && gatsby clean && yarn iframe && gatsby build",
+    "build": "yarn clean && yarn iframe && gatsby build",
+    "clean": "rm -rf ../cache && gatsby clean",
     "iframe": "webpack",
     "develop": "gatsby develop",
     "format": "prettier --write src/**/*.{js,jsx}",
     "start": "npm run develop -- --port 3000",
     "serve": "gatsby serve",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
+    "test": "jest ."
   }
 }

src/components/base/Accordion.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+type AccordionItem = {
+  title: string
+  content: string
+}
+
+const TitleWrapper = styled.h3`
+  margin: 0;
+  padding: 0;
+`
+const Title = styled.button<{ $expanded?: boolean }>`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  jutify-content: space-between;
+  padding: 1rem;
+  cursor: pointer;
+  transition: .25s; 
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-appearance: button;
+  background: none;
+  border: none;
+
+  &:hover {
+    background: #fafafa;
+  }
+
+  ${({ $expanded }) => $expanded && `background: #E3E3FD;`}
+`
+
+const Chevron = styled.svg<{ $expanded: boolean }>`
+  ---rotation: rotate(180deg);
+
+  width: 10px;
+  height: 10px;
+  margin-left: auto;
+  transition: .25s;
+  will-change: transform;
+  transform: var(---rotation);
+  ${({ $expanded }) => $expanded && `---rotation: rotate(0deg);`}
+`
+
+const AccordionItemWrapper = styled.div`
+  border-top: 1px solid rgba(0, 0, 0, .1);
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+`
+
+
+const Content = styled.p<{ $expanded?: boolean; }> `
+  display: none;
+  padding: 1rem;
+  ${({ $expanded }) => $expanded && `display: block;`}
+`
+
+export default function Accordion({ items }: { items: AccordionItem[] }) {
+  const [expandedItem, setExpandedItem] = useState<number | null>(null)
+
+  return (
+    <div>
+      {items.map(({ title, content }, index) => {
+        const expanded = expandedItem === index
+        const id = `accordion-item-${index}`
+        return (
+          <AccordionItemWrapper key={id}>
+            <TitleWrapper
+            >
+              <Title
+                $expanded={expanded}
+                onClick={() => setExpandedItem(expanded ? null : index)}
+                aria-expanded={expanded}
+                aria-controls={id}
+                id={`${id}-button`}
+                data-testid={`accordion-button`}
+                type="button"
+              >
+                {title}
+
+                <Chevron $expanded={expanded}
+                  width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path fillRule="evenodd" clipRule="evenodd" d="M4.99999 2.21883L1.69999 5.51883L0.757324 4.57616L4.99999 0.333496L9.24266 4.57616L8.29999 5.51883L4.99999 2.21883Z" fill="#000091" />
+                </Chevron>
+              </Title>
+            </TitleWrapper>
+            <Content
+              aria-labelledby={`${id}-button`}
+              aria-hidden={!expanded}
+              id={id}
+              $expanded={expanded}
+              data-testid={`accordion-content`}
+            >{content}</Content>
+          </AccordionItemWrapper>
+        )
+      })}
+    </div>
+  );
+}

src/views/Home.js

@@ -4,7 +4,8 @@ import styled from "styled-components";
 import { useWaste } from "utils/api";
 import GifTitle from "components/misc/GifTitle";
 import SearchBar from "components/misc/SearchBar";
-import SuggestionsWrapper from "./home/SuggestionsWrapper";
+import SuggestionsWrapper from "views/home/SuggestionsWrapper";
+import ProDisclaimer from "views/home/ProDisclaimer";
 
 const Wrapper = styled.div`
   position: relative;
@@ -22,6 +23,7 @@ export default function Home() {
         <SearchBar isFetched={isFetched} />
       </Wrapper>
       <SuggestionsWrapper />
+      <ProDisclaimer />
     </div>
   );
 }

src/views/home/ProDisclaimer.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import Accordion from "components/base/Accordion";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  margin-top: 1rem;
+`
+
+export default function ProDisclaimer() {
+  return (
+    <Wrapper>
+      <Accordion items={[{ title: "Je suis un professionnel", content: "Actuellement, l’ensemble des recommandations ne concerne que les particuliers. " }]} />
+    </Wrapper>
+  );
+}

tests/Accordion.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import Accordion from '../src/components/base/Accordion'
+
+test('Accordion : un clic sur le titre affiche le contenu', async () => {
+  render(
+    <Accordion items={[{ title: "Je suis un professionnel", content: "Actuellement, l’ensemble des recommandations ne concerne que les particuliers. " }]} />
+  )
+
+  expect(screen.getByTestId('accordion-content')).not.toBeVisible()
+  await userEvent.click(screen.getByTestId('accordion-button'))
+  expect(screen.getByTestId('accordion-content')).toBeVisible()
+})

tests/_jest-setup.js

@@ -0,0 +1,2 @@
+// In your own jest-setup.js (or any other name)
+import "@testing-library/jest-dom";

tsconfig.json

@@ -45,6 +45,11 @@
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    "types": [
+      "node",
+      "jest",
+      "@testing-library/jest-dom"
+    ],
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "resolveJsonModule": true,                        /* Enable importing .json files */
     // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
@@ -110,6 +115,7 @@
     "./src/**/*",
     "./gatsby-node.ts",
     "./gatsby-config.ts",
-    "./plugins/**/*"
+    "./plugins/**/*",
+    ".tests/_jest-setup.ts"
   ]
 }