apps/budgeting/proposal-list: adding conditions to show tile with acc…

…ording features - removing django list and keep react list only - adding tests
liqd · Nov 25, 2021 · 622145c · 622145c
1 parent 19cddfa
commit 622145c
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 54 deletions.
diff --git a/meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx b/meinberlin/apps/budgeting/assets/BudgetingProposalList.jsx
@@ -31,21 +31,24 @@ export const BudgetingProposalList = (props) => {
   useEffect(fetchProposals, [])
 
   return (
-    <div className="l-wrapper">
-      <div className="l-center-8">
-        <ul className="u-list-reset">
-          {data.map((proposal, idx) =>
-            <BudgetingProposalListItem
-              key={`budgeting-proposal-${idx}`}
-              proposal={proposal}
-            />)}
-        </ul>
-        {meta?.is_paginated &&
-          <Pagination
-            currPageIndex={meta.current_page}
-            pageCount={meta.page_count}
-            onPaginate={newUrl => onPaginate(newUrl)}
-          />}
+    <div className="module-content--light">
+      <div className="l-wrapper">
+        <div className="l-center-8">
+          <ul className="u-list-reset">
+            {data.map((proposal, idx) =>
+              <BudgetingProposalListItem
+                key={`budgeting-proposal-${idx}`}
+                proposal={proposal}
+                isVotingPhase={props.is_voting_phase}
+              />)}
+          </ul>
+          {meta?.is_paginated &&
+            <Pagination
+              currPageIndex={meta.current_page}
+              pageCount={meta.page_count}
+              onPaginate={newUrl => onPaginate(newUrl)}
+            />}
+        </div>
       </div>
     </div>
   )

diff --git a/meinberlin/apps/budgeting/assets/BudgetingProposalListItem.jsx b/meinberlin/apps/budgeting/assets/BudgetingProposalListItem.jsx
@@ -6,14 +6,15 @@ import { ListItemBadges } from './ListItemBadges'
 import { ListItemStats } from './ListItemStats'
 
 export const BudgetingProposalListItem = (props) => {
-  const { proposal } = props
+  const { proposal, isVotingPhase } = props
   return (
     <li className="list-item no-hover">
-      <ListItemStats
-        positiveCount={proposal.positive_rating_count}
-        negativeCount={proposal.negative_rating_count}
-        commentCount={proposal.comment_count}
-      />
+      {!isVotingPhase &&
+        <ListItemStats
+          positiveCount={proposal.positive_rating_count}
+          negativeCount={proposal.negative_rating_count}
+          commentCount={proposal.comment_count}
+        />}
       <h3 className="list-item__title">
         <a href={proposal.url}>
           {proposal.name}
@@ -33,13 +34,14 @@ export const BudgetingProposalListItem = (props) => {
           </span>
           {toDate(proposal.created)}
         </div>
-        <CheckboxButton
-          onText={django.gettext('Voted')}
-          offText={django.gettext('Give my vote')}
-          onClass="btn"
-          offClass="btn btn--light"
-          uniqueID={proposal.pk}
-        />
+        {isVotingPhase &&
+          <CheckboxButton
+            onText={django.gettext('Voted')}
+            offText={django.gettext('Give my vote')}
+            onClass="btn"
+            offClass="btn btn--light"
+            uniqueID={proposal.pk}
+          />}
       </div>
     </li>
   )

diff --git a/meinberlin/apps/budgeting/assets/__tests__/BudgetingProposalListItem.jest.jsx b/meinberlin/apps/budgeting/assets/__tests__/BudgetingProposalListItem.jest.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { BudgetingProposalListItem } from '../BudgetingProposalListItem'
+
+test('render list item with vote button', () => {
+  const proposal = {
+    name: 'myProposal',
+    url: 'www',
+    creator: 'creator',
+    created: '2021-11-11T15:37:19.490201+01:00'
+  }
+  render(<BudgetingProposalListItem proposal={proposal} isVotingPhase />)
+  expect(screen.getByText('myProposal')).toBeTruthy()
+  expect(screen.getByText('creator')).toBeTruthy()
+  expect(screen.getByText('11. mock text 2021')).toBeTruthy()
+})
+
+test('render list item with stats', () => {
+  const proposal = {
+    name: 'myProposal',
+    url: 'www',
+    creator: 'creator',
+    created: '2021-11-11T15:37:19.490201+01:00'
+  }
+  render(<BudgetingProposalListItem proposal={proposal} isVotingPhase={false} />)
+  expect(screen.getByText('myProposal')).toBeTruthy()
+  expect(screen.getByText('creator')).toBeTruthy()
+  expect(screen.getByText('11. mock text 2021')).toBeTruthy()
+})
diff --git a/.../budgeting/assets/ListItemBadges.jest.jsx → .../assets/__tests__/ListItemBadges.jest.jsx b/.../budgeting/assets/ListItemBadges.jest.jsx → .../assets/__tests__/ListItemBadges.jest.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
-import { ListItemBadges } from './ListItemBadges'
+import { ListItemBadges } from '../ListItemBadges'
 
 test('displaying category badge', () => {
   render(<ListItemBadges category={{ name: 'Renovation' }} />)

diff --git a/...s/budgeting/assets/ListItemStats.jest.jsx → ...g/assets/__tests__/ListItemStats.jest.jsx b/...s/budgeting/assets/ListItemStats.jest.jsx → ...g/assets/__tests__/ListItemStats.jest.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
-import { ListItemStats } from './ListItemStats'
+import { ListItemStats } from '../ListItemStats'
 
 test('displaying all 3 stats', () => {
   render(

diff --git a/meinberlin/apps/budgeting/assets/__tests__/SpacedSpan.jest.jsx b/meinberlin/apps/budgeting/assets/__tests__/SpacedSpan.jest.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { SpacedSpan } from '../SpacedSpan'
+
+test('displaying spaced span', () => {
+  const tree = render(<SpacedSpan>word</SpacedSpan>)
+  // screen.debug()
+  const firstSpaceSpan = tree.container.querySelector('span')
+  expect(firstSpaceSpan.innerHTML).toBe(' ')
+})
diff --git a/meinberlin/apps/budgeting/assets/helpers.js b/meinberlin/apps/budgeting/assets/helpers.js
@@ -17,7 +17,7 @@ const months = [
 
 // toDate returns a formatted date string
 // input: 2021-11-11T15:37:19.490201+01:00
-// output: 15. November 2021
+// output: 11. November 2021
 export const toDate = (isodate) => {
   const d = new Date(isodate)
   return `${d.getDate()}. ${months[d.getMonth()]} ${d.getFullYear()}`

diff --git a/meinberlin/apps/budgeting/templates/meinberlin_budgeting/proposal_list.html b/meinberlin/apps/budgeting/templates/meinberlin_budgeting/proposal_list.html
@@ -39,23 +39,6 @@
             {% map_display_points object_list module.settings_instance.polygon %}
         </div>
     {% else %}
-        <div class="module-content--light">
-            {% react_proposals view.module %}
-            <div class="l-wrapper">
-                <div class="l-center-8">
-                    {% if object_list.count > 0 %}
-                        <ul class="u-list-reset">
-                            {% for object in object_list %}
-                                {% include "meinberlin_contrib/includes/proposal_list_item.html" with object=object %}
-                            {% endfor %}
-                        </ul>
-                    {% else %}
-                        {% trans "Nothing to show" %}
-                    {% endif %}
-
-                    {% include "meinberlin_contrib/includes/pagination.html" %}
-                </div>
-            </div>
-        </div>
+        {% react_proposals view.module %}
     {% endif %}
 {% endblock %}
diff --git a/meinberlin/apps/budgeting/templatetags/react_proposals.py b/meinberlin/apps/budgeting/templatetags/react_proposals.py
@@ -4,17 +4,14 @@
 from django.urls import reverse
 from django.utils.html import format_html
 
-# from django.urls import reverse
-# from django.utils.translation import gettext_lazy as _
-# from adhocracy4.rules.discovery import NormalUser
-
 register = template.Library()
 
 
 @register.simple_tag(takes_context=True)
 def react_proposals(context, obj):
     proposals_api_url = reverse('proposals-list', kwargs={'module_pk': obj.pk})
-    attributes = {'proposals_api_url': proposals_api_url}
+    attributes = {'proposals_api_url': proposals_api_url,
+                  'is_voting_phase': 'voting' in obj.active_phase.type}
 
     return format_html(
         '<div data-mb-widget="proposals" '