Skip to content

Commit

Permalink
feat: more tests for data page and setup for other pages
Browse files Browse the repository at this point in the history
  • Loading branch information
Flaminia Cavallo authored and Flaminia Cavallo committed Jul 25, 2024
1 parent ad71e7a commit 01b06b2
Show file tree
Hide file tree
Showing 12 changed files with 457 additions and 265 deletions.
2 changes: 1 addition & 1 deletion src/components/common/warning/warning.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import styles from './warning.module.css'

const Warning = ({ error, warning, title, children }) => {
return (
<div className={styles.warningBoxWrapper}>
<div className={styles.warningBoxWrapper} data-test="warning">
<NoticeBox error={error} warning={warning} title={title}>
{children}
</NoticeBox>
Expand Down
30 changes: 24 additions & 6 deletions src/components/edit/exchange-update/exchange-form-contents.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,10 @@ export const ExchangeFormContents = React.memo(
return (
<>
<Subsection text={i18n.t('Basic setup')}>
<div className={styles.subsectionField1000}>
<div
className={styles.subsectionField1000}
data-test="exchange-name-input"
>
<Field
name="name"
label={i18n.t('Exchange name')}
Expand All @@ -110,7 +113,10 @@ export const ExchangeFormContents = React.memo(
validate={hasValue}
/>
</div>
<div className={styles.subsectionField}>
<div
className={styles.subsectionField}
data-test="exchange-type-input"
>
<FieldContainer label={i18n.t('Exchange target type')}>
<div className={styles.radiosContainer}>
<RadioDecorator
Expand Down Expand Up @@ -159,7 +165,10 @@ export const ExchangeFormContents = React.memo(
}
targetSetup={true}
/>
<div className={styles.subsectionField600}>
<div
className={styles.subsectionField600}
data-test="exchange-url"
>
<Field
name="url"
label={i18n.t('Target URL')}
Expand All @@ -176,7 +185,10 @@ export const ExchangeFormContents = React.memo(
<FieldContainer
label={i18n.t('Authentication method')}
>
<div className={styles.radiosContainer}>
<div
className={styles.radiosContainer}
data-test="exchange-auth-method"
>
<Field
name="authentication"
type="radio"
Expand All @@ -199,7 +211,10 @@ export const ExchangeFormContents = React.memo(
</div>

{authenticationValue === AUTHENTICATION_TYPES.pat && (
<div className={styles.subsectionField600}>
<div
className={styles.subsectionField600}
data-test="exchange-auth-pat"
>
<Field
name="accessToken"
type="password"
Expand All @@ -219,7 +234,10 @@ export const ExchangeFormContents = React.memo(
</div>
)}
{authenticationValue === AUTHENTICATION_TYPES.basic && (
<div className={styles.subsectionField600}>
<div
className={styles.subsectionField600}
data-test="exchange-auth-basic"
>
<Field
name="username"
className={styles.fieldItem}
Expand Down
10 changes: 8 additions & 2 deletions src/components/edit/exchange-update/exchange-form.js
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,10 @@ export const ExchangeForm = ({ exchangeInfo, addMode }) => {
})}
>
<div className={styles.editArea}>
<div className={styles.editContainer}>
<div
className={styles.editContainer}
data-test="add-exchange-title"
>
<EditTitle
title={
addMode
Expand Down Expand Up @@ -111,7 +114,10 @@ export const ExchangeForm = ({ exchangeInfo, addMode }) => {
</Box>
</div>
</div>
<footer className={styles.bottomBar}>
<footer
className={styles.bottomBar}
data-test="edit-item-footer"
>
<EditItemFooter
handleSubmit={handleSubmit}
requestsTouched={requestsTouched}
Expand Down
24 changes: 14 additions & 10 deletions src/components/edit/exchange-update/requests-overview.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,16 +53,20 @@ const getOuText = ({ ouInfo }) => {
}

const EmptyTableInfo = () => (
<DataTableCell colspan="6">
<div className={styles.emptyTableWrapper}>
<p className={styles.emptyTableHeader}>{i18n.t('No requests')}</p>
<p className={styles.emptyTableText}>
{i18n.t(
"Click the 'Add request' button to add a request to this exchange"
)}
</p>
</div>
</DataTableCell>
<TableRow>
<DataTableCell colSpan="6">
<div className={styles.emptyTableWrapper}>
<p className={styles.emptyTableHeader}>
{i18n.t('No requests')}
</p>
<p className={styles.emptyTableText}>
{i18n.t(
"Click the 'Add request' button to add a request to this exchange"
)}
</p>
</div>
</DataTableCell>
</TableRow>
)

const RequestRow = ({
Expand Down
5 changes: 4 additions & 1 deletion src/components/edit/shared/access-warning.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ export const AccessWarning = ({ editMode }) => (
</span>
</Warning>

<div className={styles.accessWarningButton}>
<div
className={styles.accessWarningButton}
data-test="link-to-configuration-page"
>
<Link to="/edit/">
<Button>{i18n.t('Back to configurations page')}</Button>
</Link>
Expand Down
15 changes: 12 additions & 3 deletions src/components/view/submit-modal/submit-modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ const ConfirmModalContent = ({ exchange, requests, onClose, onSubmit }) => {
<ModalContentWrapper>
<div className={styles.submitModalSummaryWrapper}>
{reportTranslationsString}
<ul >
<ul>
{requests.map((request, i) => {
return (
<li key={`${request.name}-${i}`}>
Expand All @@ -218,8 +218,17 @@ const ConfirmModalContent = ({ exchange, requests, onClose, onSubmit }) => {

<ModalActions>
<ButtonStrip end>
<Button onClick={onClose} data-test='cancel-submission-button'>{i18n.t('No, cancel')}</Button>
<Button primary onClick={onSubmit} data-test='confirm-submission-button'>
<Button
onClick={onClose}
data-test="cancel-submission-button"
>
{i18n.t('No, cancel')}
</Button>
<Button
primary
onClick={onSubmit}
data-test="confirm-submission-button"
>
{i18n.t('Yes, submit')}
</Button>
</ButtonStrip>
Expand Down
34 changes: 20 additions & 14 deletions src/components/view/submit-modal/submit-modal.test.js
Original file line number Diff line number Diff line change
@@ -1,62 +1,68 @@
import { faker } from '@faker-js/faker'
import {getReportText} from "./submit-modal";
import { getReportText } from './submit-modal'

describe('getReportText', () => {
it('returns the report name', () => {
const name = faker.word.noun()
const orgUnits = []
const periods = []
const result = getReportText({name, orgUnits, periods})
const result = getReportText({ name, orgUnits, periods })
expect(result).toContain(name)
})

it('returns the org unit count when there is one', () => {
const name = faker.word.noun()
const orgUnits = ["anOrgUnit"]
const orgUnits = ['anOrgUnit']
const periods = []
const result = getReportText({name, orgUnits, periods})
expect(result).toContain("1 organisation unit")
const result = getReportText({ name, orgUnits, periods })
expect(result).toContain('1 organisation unit')
})

it('returns the org unit count when there is more than one', () => {
const name = faker.word.noun()
const orgUnitCounts = faker.number.int({min: 2, max: 5})
const orgUnitCounts = faker.number.int({ min: 2, max: 5 })
const orgUnits = Array(orgUnitCounts).fill('anOrgUnit')
const periods = []
const result = getReportText({name, orgUnits, periods})
const result = getReportText({ name, orgUnits, periods })
expect(result).toContain(`${orgUnitCounts} organisation units`)
})

it('returns the period when there is only one', () => {
const name = faker.word.noun()
const orgUnits = []
const periods = ['a period']
const result = getReportText({name, orgUnits, periods})
const result = getReportText({ name, orgUnits, periods })
expect(result).toContain(`1 period: a period`)
})

it('returns the periods when there is two', () => {
const name = faker.word.noun()
const orgUnits = []
const periods = ['a period', 'another period']
const result = getReportText({name, orgUnits, periods})
const result = getReportText({ name, orgUnits, periods })
expect(result).toContain(`2 periods: a period, another period`)
})

it('returns the periods when there is three', () => {
const name = faker.word.noun()
const orgUnits = []
const periods = ['a period', 'another period', 'one more period']
const result = getReportText({name, orgUnits, periods})
expect(result).toContain(`3 periods: a period, another period, one more period`)
const result = getReportText({ name, orgUnits, periods })
expect(result).toContain(
`3 periods: a period, another period, one more period`
)
})

it('returns the periods count when there is more than three', () => {
const name = faker.word.noun()
const orgUnits = []
const periodsCounts = faker.number.int({min: 4, max: 10})
const periodsCounts = faker.number.int({ min: 4, max: 10 })
const periods = Array(periodsCounts).fill('a period')
const result = getReportText({name, orgUnits, periods})
expect(result).toContain(`3+ periods: a period, a period, a period, and ${periodsCounts -3} more`)
const result = getReportText({ name, orgUnits, periods })
expect(result).toContain(
`3+ periods: a period, a period, a period, and ${
periodsCounts - 3
} more`
)
})
})
9 changes: 6 additions & 3 deletions src/components/view/submit-modal/success-content.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const SummaryBox = ({ importType, importCount }) => {
const boxStyle = styles[styleName]

return (
<div className={styles.summaryBox}>
<div className={styles.summaryBox} data-test="summary-box">
<div className={boxStyle}>
<div className={styles.count}>{importCount}</div>
<div className={styles.label}>
Expand Down Expand Up @@ -236,7 +236,10 @@ const SummaryTable = ({
))}
</DataTableBody>
</DataTable>
<div className={styles.copyButton}>
<div
className={styles.copyButton}
data-test="copy-to-clipboard-button"
>
<Button
small
icon={<IconCopy16 />}
Expand Down Expand Up @@ -322,7 +325,7 @@ const SuccessContent = ({ data, dataSubmitted }) => {

SuccessContent.propTypes = {
data: PropTypes.object,
dataSubmitted: PropTypes.submitted,
dataSubmitted: PropTypes.string,
}

export { SuccessContent }
2 changes: 1 addition & 1 deletion src/pages/addItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const defaultExchange = {
export const AddItem = () => {
const { canAddExchange } = useUserContext()
if (!canAddExchange) {
;<AccessWarning />
return <AccessWarning />
}
return <ExchangeForm exchangeInfo={defaultExchange} addMode={true} />
}
Loading

0 comments on commit 01b06b2

Please sign in to comment.