-
Notifications
You must be signed in to change notification settings - Fork 73
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(simulateurs): Nouveau simulateur réduction générale
- Loading branch information
Showing
21 changed files
with
818 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
site/cypress/integration/mon-entreprise/reduction-generale.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import { checkA11Y, fr } from '../../support/utils' | ||
|
|
||
| describe('Réduction générale', { testIsolation: false }, function () { | ||
| if (!fr) { | ||
| return | ||
| } | ||
|
|
||
| const inputSelector = 'div[id="simulator-legend"] input[inputmode="numeric"]' | ||
|
|
||
| before(function () { | ||
| return cy.visit('/simulateurs/réduction-générale') | ||
| }) | ||
|
|
||
| it('should not crash', function () { | ||
| cy.contains('Salaire brut') | ||
| }) | ||
|
|
||
| it('should allow to select a company size', function () { | ||
| cy.get('button').contains('SMIC').click() | ||
|
|
||
| cy.contains('Plus de 50 salariés').click() | ||
| cy.contains('Modifier mes réponses').click() | ||
| cy.get('div[data-cy="modal"]') | ||
| .eq(0) | ||
| .contains('Effectif') | ||
| .next() | ||
| .contains('100') | ||
| cy.get('div[data-cy="modal"]').eq(0).contains('Fermer').click() | ||
|
|
||
| cy.contains('Moins de 50 salariés').click() | ||
| cy.contains('Modifier mes réponses').click() | ||
| cy.get('div[data-cy="modal"]') | ||
| .eq(0) | ||
| .contains('Effectif') | ||
| .next() | ||
| .contains('10') | ||
| cy.get('div[data-cy="modal"]').eq(0).contains('Fermer').click() | ||
| }) | ||
|
|
||
| it('should allow to change time period', function () { | ||
| cy.contains('Montant mensuel').click() | ||
| cy.get(inputSelector).first().type('{selectall}2000') | ||
|
|
||
| cy.contains('Montant annuel').click() | ||
| cy.get(inputSelector).first().should('have.value', '24 000 €') | ||
| }) | ||
|
|
||
| it('should have median salary and SMIC buttons', function () { | ||
| cy.contains('Montant mensuel').click() | ||
| cy.get('button').contains('SMIC') | ||
| cy.get('button').contains('salaire médian').click() | ||
| cy.get(inputSelector).first().should('have.value', '2 600 €') | ||
| }) | ||
|
|
||
| it('should display values for the réduction générale', function () { | ||
| cy.contains('Montant mensuel').click() | ||
| cy.get(inputSelector).first().type('{selectall}1900') | ||
|
|
||
| cy.get( | ||
| 'p[id="salarié___cotisations___exonérations___réduction_générale-value"]' | ||
| ).should('include.text', '494 €') | ||
| cy.get( | ||
| 'p[id="salarié___cotisations___exonérations___réduction_générale___part_retraite-value"]' | ||
| ).should('include.text', '93 €') | ||
| cy.get( | ||
| 'p[id="salarié___cotisations___exonérations___réduction_générale___part_Urssaf-value"]' | ||
| ).should('include.text', '401 €') | ||
| cy.get( | ||
| 'p[id="salarié___cotisations___exonérations___réduction_générale___part_Urssaf___part_chômage-value"]' | ||
| ).should('include.text', '63 €') | ||
|
|
||
| cy.contains('Plus de 50 salariés').click() | ||
| cy.get( | ||
| 'p[id="salarié___cotisations___exonérations___réduction_générale-value"]' | ||
| ).should('include.text', '500 €') | ||
| cy.get( | ||
| 'p[id="salarié___cotisations___exonérations___réduction_générale___part_retraite-value"]' | ||
| ).should('include.text', '93 €') | ||
| cy.get( | ||
| 'p[id="salarié___cotisations___exonérations___réduction_générale___part_Urssaf-value"]' | ||
| ).should('include.text', '407 €') | ||
| cy.get( | ||
| 'p[id="salarié___cotisations___exonérations___réduction_générale___part_Urssaf___part_chômage-value"]' | ||
| ).should('include.text', '63 €') | ||
| }) | ||
|
|
||
| it('should display a warning for a salary too high', function () { | ||
| cy.contains('Montant mensuel').click() | ||
| cy.get(inputSelector).first().type('{selectall}3000') | ||
|
|
||
| cy.get('div[id="simulator-legend"]').should( | ||
| 'include.text', | ||
| 'La RGCP concerne uniquement les salaires inférieurs à 1,6 SMIC.' | ||
| ) | ||
|
|
||
| cy.get( | ||
| 'p[id="salarié___cotisations___exonérations___réduction_générale___part_retraite-value"]' | ||
| ).should('include.text', '0 €') | ||
| cy.get( | ||
| 'p[id="salarié___cotisations___exonérations___réduction_générale___part_Urssaf-value"]' | ||
| ).should('include.text', '0 €') | ||
| cy.get( | ||
| 'p[id="salarié___cotisations___exonérations___réduction_générale___part_Urssaf___part_chômage-value"]' | ||
| ).should('include.text', '0 €') | ||
| }) | ||
|
|
||
| it('should be RGAA compliant', function () { | ||
| checkA11Y() | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| import { DottedName } from 'modele-social' | ||
| import { formatValue } from 'publicodes' | ||
| import React from 'react' | ||
| import { useSelector } from 'react-redux' | ||
| import { styled } from 'styled-components' | ||
|
|
||
| import { Grid } from '@/design-system/layout' | ||
| import { Body } from '@/design-system/typography/paragraphs' | ||
| import { targetUnitSelector } from '@/store/selectors/simulationSelectors' | ||
|
|
||
| import { Appear } from '../ui/animate' | ||
| import AnimatedTargetValue from '../ui/AnimatedTargetValue' | ||
| import { useEngine } from '../utils/EngineContext' | ||
| import { useInitialRender } from '../utils/useInitialRender' | ||
|
|
||
| type SimulationValueProps = { | ||
| dottedName: DottedName | ||
| label?: React.ReactNode | ||
| appear?: boolean | ||
| isTypeBoolean?: boolean | ||
| displayedUnit?: string | ||
| round?: boolean | ||
| } | ||
|
|
||
| export function SimulationValue({ | ||
| dottedName, | ||
| label, | ||
| displayedUnit = '€', | ||
| round = true, | ||
| appear = true, | ||
| isTypeBoolean = false, // TODO : remove when type inference works in publicodes | ||
| }: SimulationValueProps) { | ||
| const engine = useEngine() | ||
| const currentUnit = useSelector(targetUnitSelector) | ||
| const evaluation = engine.evaluate({ | ||
| valeur: dottedName, | ||
| arrondi: round ? 'oui' : 'non', | ||
| ...(!isTypeBoolean ? { unité: currentUnit } : {}), | ||
| }) | ||
| const rule = engine.getRule(dottedName) | ||
| const initialRender = useInitialRender() | ||
| if (evaluation.nodeValue === null) { | ||
| return null | ||
| } | ||
| if (evaluation.nodeValue === undefined) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <Appear unless={!appear || initialRender}> | ||
| <StyledValue> | ||
| <Grid | ||
| container | ||
| style={{ | ||
| alignItems: 'baseline', | ||
| justifyContent: 'space-between', | ||
| }} | ||
| spacing={2} | ||
| > | ||
| <Grid item md="auto" sm={9} xs={8}> | ||
| <StyledValueHeader> | ||
| <Grid | ||
| container | ||
| style={{ | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <Grid item> | ||
| <StyledBody id={`${dottedName.replace(/\s|\./g, '_')}-label`}> | ||
| {label || rule.title} | ||
| </StyledBody> | ||
| </Grid> | ||
| </Grid> | ||
| </StyledValueHeader> | ||
| </Grid> | ||
|
|
||
| <StyledGuideLectureContainer item md> | ||
| <StyledGuideLecture /> | ||
| </StyledGuideLectureContainer> | ||
|
|
||
| <Grid item> | ||
| <AnimatedTargetValue value={evaluation.nodeValue as number} /> | ||
| <StyledBody id={`${dottedName.replace(/\s|\./g, '_')}-value`}> | ||
| {formatValue(evaluation, { | ||
| displayedUnit, | ||
| precision: round ? 0 : 2, | ||
| })} | ||
| </StyledBody> | ||
| </Grid> | ||
| </Grid> | ||
| </StyledValue> | ||
| </Appear> | ||
| ) | ||
| } | ||
|
|
||
| const StyledGuideLectureContainer = styled(Grid)` | ||
| display: none; | ||
| @media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) { | ||
| display: block; | ||
| } | ||
| ` | ||
|
|
||
| const StyledGuideLecture = styled.div.attrs({ 'aria-hidden': true })` | ||
| border-bottom: 1px dashed | ||
| ${({ theme }) => | ||
| theme.darkMode | ||
| ? theme.colors.extended.grey[100] | ||
| : theme.colors.extended.grey[700]}; | ||
| align-self: baseline; | ||
| opacity: 50%; | ||
| flex: 1; | ||
| ` | ||
| const StyledValueHeader = styled.div`` | ||
|
|
||
| const StyledValue = styled.div` | ||
| position: relative; | ||
| z-index: 1; | ||
| padding: ${({ theme }) => theme.spacings.xxs} 0; | ||
| @media print { | ||
| padding: 0; | ||
| } | ||
| ` | ||
|
|
||
| const StyledBody = styled(Body)` | ||
| color: ${({ theme }) => theme.colors.extended.grey[100]}; | ||
| margin: 0; | ||
| padding: ${({ theme }) => `${theme.spacings.xs} ${theme.spacings.sm} 0 0`}; | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.