[] = [
{
title: 'Name',
field: 'name',
@@ -841,7 +838,7 @@ export const CrudWithHidden = () => {
]
const rowViews = {
- confirmDelete: ({ data }: { data: Data }) => {
+ confirmDelete: ({ data }: { data: DataCrudWithHidden }) => {
return (
{
)
}
-const dataInput = [
- {
- branch: 'Keepfy Joinville',
- local: 'Joiville',
- status: 'Ativo',
- companyCode: '',
- branchCode: ''
- },
- {
- branch: 'Keepfy São Paulo',
- local: 'São Paulo',
- status: 'Ativo',
- companyCode: '',
- branchCode: ''
- },
- {
- branch: 'Keepfy Rio Grande do Sul',
- local: 'Rio Grande do Sul',
- status: 'Ativo',
- companyCode: '',
- branchCode: ''
- },
- {
- branch: 'Keepfy Rio de Janeiro',
- local: 'Rio de Janeiro',
- status: 'Ativo',
- companyCode: '',
- branchCode: ''
- },
- {
- branch: 'Keepfy Curitiba',
- local: 'Curitiba',
- status: 'Ativo',
- companyCode: '',
- branchCode: ''
- },
- {
- branch: 'Keepfy Teresópolis',
- local: 'Teresópolis',
- status: 'Ativo',
- companyCode: '',
- branchCode: ''
- }
-]
-
-const tableHead = [
- {
- title: 'Nome da Filial',
- field: 'branch',
- type: 'text',
- editable: false
- },
- {
- title: 'Localidade',
- field: 'local',
- type: 'text',
- editable: false
- },
- {
- title: 'Status',
- field: 'status',
- type: 'text',
- editable: false
- },
- {
- title: 'Código da Empresa',
- field: 'companyCode',
- type: 'number',
- editable: true
- },
- {
- title: 'Código da Filial',
- field: 'branchCode',
- type: 'text',
- editable: true
- }
-]
-
export const WithField = () => {
+ const dataInput = [
+ {
+ branch: 'Keepfy Joinville',
+ local: 'Joiville',
+ status: 'Ativo',
+ companyCode: '',
+ branchCode: ''
+ },
+ {
+ branch: 'Keepfy São Paulo',
+ local: 'São Paulo',
+ status: 'Ativo',
+ companyCode: '',
+ branchCode: ''
+ },
+ {
+ branch: 'Keepfy Rio Grande do Sul',
+ local: 'Rio Grande do Sul',
+ status: 'Ativo',
+ companyCode: '',
+ branchCode: ''
+ },
+ {
+ branch: 'Keepfy Rio de Janeiro',
+ local: 'Rio de Janeiro',
+ status: 'Ativo',
+ companyCode: '',
+ branchCode: ''
+ },
+ {
+ branch: 'Keepfy Curitiba',
+ local: 'Curitiba',
+ status: 'Ativo',
+ companyCode: '',
+ branchCode: ''
+ },
+ {
+ branch: 'Keepfy Teresópolis',
+ local: 'Teresópolis',
+ status: 'Ativo',
+ companyCode: '',
+ branchCode: ''
+ }
+ ]
+
+ const tableHead = [
+ {
+ title: 'Nome da Filial',
+ field: 'branch',
+ type: 'text',
+ editable: false
+ },
+ {
+ title: 'Localidade',
+ field: 'local',
+ type: 'text',
+ editable: false
+ },
+ {
+ title: 'Status',
+ field: 'status',
+ type: 'text',
+ editable: false
+ },
+ {
+ title: 'Código da Empresa',
+ field: 'companyCode',
+ type: 'number',
+ editable: true
+ },
+ {
+ title: 'Código da Filial',
+ field: 'branchCode',
+ type: 'text',
+ editable: true
+ }
+ ]
+
const [data, setData] = useState []>(() => dataInput)
const [selectedAll, setSelectedAll] = useState(false)
const [selected, setSelected] = useState(
diff --git a/src/core/data-display/data-table/data-table.tsx b/src/core/data-display/data-table/data-table.tsx
index 7e76460b..378fbe96 100644
--- a/src/core/data-display/data-table/data-table.tsx
+++ b/src/core/data-display/data-table/data-table.tsx
@@ -37,71 +37,21 @@ export type DataTableProps<
D extends Data,
V extends StackView = Record
> = {
- /**
- * The data to be shown in the table
- */
data: D[]
- /**
- * Errors as an object where the key is the ID of the row and the value is
- * a Set with the fields of error
- */
errors?: Errors
- /**
- * The columns specification
- */
columns: ColumnSpec[]
- /**
- * Hide the table header
- */
noHeader?: boolean
- /**
- * Component to show when there are no data
- */
componentForEmpty?: ReactNode
- /**
- * Custom style to be applied to the table body
- */
bodyStyle?: CSSProperties
- /**
- * Custom style to be applied to the table head
- */
headStyle?: CSSProperties
- /**
- * Custom style to be applied to all rows of the table body
- */
bodyRowStyle?: CSSProperties
- /**
- * Custom style to be applied to all rows of the table head
- */
headRowStyle?: CSSProperties
- /**
- * Height of a hidden row, when you need to have some blank space in case
- * you fill in the pagination.rowsPerPage
- */
hiddenRowHeight?: number
- /**
- * The pagination configuration
- */
pagination?: Partial
- /**
- * A React MutableRefObject for the row controller
- */
controllerRef?: MutableRefObject | undefined>
- /**
- * Initialize with hidden values
- */
hidden?: boolean
- /**
- * Custom rowViews used as a Stac
- */
rowViews?: Record>
- /**
- * Hide or show the checkbox
- */
checkbox?: boolean
- /**
- * Handle the selected states and values
- */
checkboxProps?: {
checkRow?: boolean[]
checkAllRows?: boolean
diff --git a/src/core/data-display/data-table/rows.tsx b/src/core/data-display/data-table/rows.tsx
index 12f25906..4a78fe75 100644
--- a/src/core/data-display/data-table/rows.tsx
+++ b/src/core/data-display/data-table/rows.tsx
@@ -13,6 +13,13 @@ type RowStateUpdater = (
value: D[keyof D]
) => void
+type NewRowProps = {
+ data: PartialData
+ errors?: Errors
+ columns: ColumnSpec[]
+ onUpdate?(partial: Partial): void
+}
+
const isEditable = (column: ColumnSpec) =>
column.type === 'actions' || column.editable
@@ -210,13 +217,6 @@ export const StatefulRow = ({
)
}
-type NewRowProps = {
- data: PartialData
- errors?: Errors
- columns: ColumnSpec[]
- onUpdate?(partial: Partial): void
-}
-
export const NewRow = ({
data,
columns,
diff --git a/src/core/data-display/data-table/types.ts b/src/core/data-display/data-table/types.ts
index 4b509fb4..3a0bcf59 100644
--- a/src/core/data-display/data-table/types.ts
+++ b/src/core/data-display/data-table/types.ts
@@ -103,29 +103,11 @@ export type RowViewComponent = FunctionComponent<{
}>
export type DataTableController = {
- /**
- * Actives the edit mode for a row
- */
editRow(id: Identifier): void
- /**
- * Actives the view mode for a row
- */
viewRow(id: Identifier): void
- /**
- * Hides the view mode for a row
- */
hideRow(id: Identifier): void
- /**
- * Adds a new row on the DataTable
- */
addRow(data: PartialData): void
- /**
- * Returns only the edited properties of a row in edit mode
- */
getEditedRowData(id: Identifier): PartialData
- /**
- * Returns the edited properties and the old data of a row in edit mode
- */
getRowData(id: Identifier): { edited: PartialData; current?: D }
pushRowView(id: Identifier, view: keyof V): void
popRowView(id: Identifier): void
diff --git a/src/core/data-display/data-table/use-paginated.ts b/src/core/data-display/data-table/use-paginated.ts
index df8a2ee2..181000f2 100644
--- a/src/core/data-display/data-table/use-paginated.ts
+++ b/src/core/data-display/data-table/use-paginated.ts
@@ -35,15 +35,11 @@ export const generateRandomDate = (size: number): Data[] => {
return content
}
-const MOCK_DELAY_VALUE = 1000
-const DEFAULT_PAGE_SIZE = 5
-const DEFAULT_MOCK_LENGTH = 35
-
-const mockData = generateRandomDate(DEFAULT_MOCK_LENGTH)
+const mockData = generateRandomDate(35)
const INITIAL_STATE: IPaginated = {
items: [],
- size: DEFAULT_PAGE_SIZE,
+ size: 5,
actualPage: 0,
totalItens: 0
}
@@ -61,7 +57,7 @@ export const usePaginated = () => {
setState(prev => ({ ...prev, totalItens: mockData.length }))
setTimeout(() => {
setLoading(false)
- }, MOCK_DELAY_VALUE)
+ }, 1000)
}, [])
useEffect(() => {
@@ -85,18 +81,22 @@ export const usePaginated = () => {
const handleChangePage = (newPage: number) => {
setLoading(true)
+
setState(prev => ({ ...prev, actualPage: newPage }))
+
setTimeout(() => {
setLoading(false)
- }, MOCK_DELAY_VALUE)
+ }, 1000)
}
const handleChangePerPage = (value: number) => {
setLoading(true)
+
setState(prev => ({ ...prev, size: value }))
+
setTimeout(() => {
setLoading(false)
- }, MOCK_DELAY_VALUE)
+ }, 1000)
}
const setData: Dispatch> = (data: Data[]) => {
diff --git a/src/core/data-display/divider/divider.spec.tsx b/src/core/data-display/divider/divider.spec.tsx
index f709a622..d1e96073 100644
--- a/src/core/data-display/divider/divider.spec.tsx
+++ b/src/core/data-display/divider/divider.spec.tsx
@@ -1,10 +1,11 @@
-import * as React from 'react'
+import React from 'react'
import { render, screen } from '@testing-library/react'
import { Divider } from '.'
describe('Divider', () => {
it('should render', () => {
render()
+
const divider = screen.getByTestId('divider')
expect(divider).toBeDefined()
@@ -19,6 +20,7 @@ describe('Divider', () => {
style={{ backgroundColor: 'blue' }}
/>
)
+
const divider = screen.getByTestId('divider')
expect(divider).toHaveProperty('style.margin', '10px')
diff --git a/src/core/data-display/editable-table/editable-table-with-date.spec.tsx b/src/core/data-display/editable-table/editable-table-with-date.spec.tsx
index 063b45e2..b5f951ab 100644
--- a/src/core/data-display/editable-table/editable-table-with-date.spec.tsx
+++ b/src/core/data-display/editable-table/editable-table-with-date.spec.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
import { act } from 'react-dom/test-utils'
import { render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event/'
@@ -92,6 +92,7 @@ describe('EditableTable - With Date', () => {
const dateInput = screen.getByRole('date-picker') as HTMLInputElement
expect(dateInput.value).toBe('01/07/2019 17:21')
+
jest.clearAllMocks()
})
})
diff --git a/src/core/data-display/editable-table/editable-table.spec.tsx b/src/core/data-display/editable-table/editable-table.spec.tsx
index 1653c318..4e8d47b9 100644
--- a/src/core/data-display/editable-table/editable-table.spec.tsx
+++ b/src/core/data-display/editable-table/editable-table.spec.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
import { act } from 'react-dom/test-utils'
import { fireEvent, render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event/'
@@ -128,26 +128,6 @@ describe('EditableTable', () => {
expect(label).toBeDefined()
})
- it('should render with no data', () => {
- render(
-
- )
-
- const label = screen.getByText(
- 'Não há dados para serem exibidos no momento'
- )
-
- expect(label).toBeDefined()
- })
-
it('should render with no data or columns', () => {
render(
{
const label = screen.getByText('Adicionar item')
await userEvent.click(label)
+
const nameInput = screen.getByRole('name-input').firstElementChild
?.firstElementChild as HTMLInputElement
const valueInput = screen.getByRole('name-input').firstElementChild
@@ -322,27 +303,6 @@ describe('EditableTable', () => {
expect(label).toBeDefined()
})
- it('should render with no pagination info', () => {
- render(
-
- )
-
- const label = screen.getByText('Fulano')
-
- expect(label).toBeDefined()
- })
-
it('should call update row with correct values', async () => {
const onUpdateSpy = jest
.fn()
@@ -539,10 +499,9 @@ describe('EditableTable', () => {
await act(async () => await userEvent.click(editFirstRow))
const dateInput = screen.getByRole('date-picker') as HTMLInputElement
-
- expect(dateInput.value).toBe('01/07/2019 17:21')
const textInput = screen.getAllByTestId('text-field')[0]
+ expect(dateInput.value).toBe('01/07/2019 17:21')
expect(dateInput.parentElement?.classList).toContain('Mui-error')
expect(textInput.classList).toContain('Mui-error')
})
diff --git a/src/core/data-display/editable-table/editable-table.stories.tsx b/src/core/data-display/editable-table/editable-table.stories.tsx
index d1feeb75..3092a02a 100644
--- a/src/core/data-display/editable-table/editable-table.stories.tsx
+++ b/src/core/data-display/editable-table/editable-table.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryFn } from '@storybook/react'
import EditableTable from '.'
export default {
- title: 'DataDisplay/EditTable',
+ title: 'DataDisplay/EditableTable',
component: EditableTable,
args: {
title: 'adicionar',
diff --git a/src/core/data-display/fab/fab.spec.tsx b/src/core/data-display/fab/fab.spec.tsx
index 7fbbab67..e6cae539 100644
--- a/src/core/data-display/fab/fab.spec.tsx
+++ b/src/core/data-display/fab/fab.spec.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
import { render, screen } from '@testing-library/react'
import Fab from '.'
diff --git a/src/core/data-display/line/index.tsx b/src/core/data-display/line/index.tsx
index 65975076..3598431c 100644
--- a/src/core/data-display/line/index.tsx
+++ b/src/core/data-display/line/index.tsx
@@ -5,9 +5,6 @@ import { theme } from '@/theme'
const { grays, secondary } = theme.colors
export interface LineProps extends DefaultProps {
- /**
- * If true, the line will use the primary color.
- */
primary?: boolean
'data-testid'?: string
}
diff --git a/src/core/data-display/line/line.spec.tsx b/src/core/data-display/line/line.spec.tsx
index 0532940c..d8e739c2 100644
--- a/src/core/data-display/line/line.spec.tsx
+++ b/src/core/data-display/line/line.spec.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
import { render, screen } from '@testing-library/react'
import { Line } from '.'
import { theme } from '@/theme'
@@ -12,7 +12,6 @@ describe('Line', () => {
const element = screen.getByTestId('line-component')
expect(element).toBeDefined()
- expect(element).toHaveProperty('style.flex', '1')
})
it('should render with custom styles', () => {
@@ -27,6 +26,7 @@ describe('Line', () => {
const element = screen.getByTestId('line-component')
+ expect(element).toHaveProperty('style.flex', '1')
expect(element).toHaveProperty('style.color', 'red')
expect(element).toHaveProperty('style.margin', '10px')
expect(element).toHaveProperty('style.padding', '5px')
diff --git a/src/core/data-display/list-item/__snapshots__/list-item.spec.tsx.snap b/src/core/data-display/list-item/__snapshots__/list-item.spec.tsx.snap
new file mode 100644
index 00000000..0a0af15f
--- /dev/null
+++ b/src/core/data-display/list-item/__snapshots__/list-item.spec.tsx.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListItem should match snapshot 1`] = `
+
+`;
diff --git a/src/core/data-display/list-item/index.tsx b/src/core/data-display/list-item/index.tsx
index 5f6bc8d0..5931e3e9 100644
--- a/src/core/data-display/list-item/index.tsx
+++ b/src/core/data-display/list-item/index.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React from 'react'
import type { MouseEvent } from 'react'
import {
ListItem as MuiListItem,
@@ -49,7 +49,7 @@ const ListItem = (props: ListItemProps) => {
const typographyProps = { className }
return (
-
+ <>
{props.avatar && (
{props.avatar}
)}
@@ -73,7 +73,7 @@ const ListItem = (props: ListItemProps) => {
{props.action}
)}
-
+
)
}
diff --git a/src/core/data-display/list-item/list-item.spec.tsx b/src/core/data-display/list-item/list-item.spec.tsx
index f542349a..881fc880 100644
--- a/src/core/data-display/list-item/list-item.spec.tsx
+++ b/src/core/data-display/list-item/list-item.spec.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
import { render, screen } from '@testing-library/react'
import ListItem from '.'
@@ -14,20 +14,28 @@ describe('ListItem', () => {
it('should render with avatar', () => {
render(AvatarAction }
+ />
+ )
+
+ expect(container).toMatchSnapshot()
+ })
})
diff --git a/src/core/data-display/list/__snapshots__/list.spec.tsx.snap b/src/core/data-display/list/__snapshots__/list.spec.tsx.snap
new file mode 100644
index 00000000..ce19961d
--- /dev/null
+++ b/src/core/data-display/list/__snapshots__/list.spec.tsx.snap
@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List should match snapshot 1`] = `
+
+`;
diff --git a/src/core/data-display/list/index.tsx b/src/core/data-display/list/index.tsx
index 46fb861c..62ef5789 100644
--- a/src/core/data-display/list/index.tsx
+++ b/src/core/data-display/list/index.tsx
@@ -8,14 +8,8 @@ import type { DefaultProps } from '../../types'
import type { Theme } from '@material-ui/core/styles'
export interface ListProps extends DefaultProps {
- /**
- * The title of the list
- */
title?: string
dense?: boolean
- /**
- * The color of the list
- */
color?: 'primary' | 'secondary' | 'default' | 'inherit'
}
diff --git a/src/core/data-display/list/list.spec.tsx b/src/core/data-display/list/list.spec.tsx
index aad6ea5a..79f92f6e 100644
--- a/src/core/data-display/list/list.spec.tsx
+++ b/src/core/data-display/list/list.spec.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
import { render, screen } from '@testing-library/react'
import ListItem from '@/core/data-display/list-item'
import List from '.'
@@ -27,10 +27,8 @@ describe('List', () => {
)
- const list = screen.queryAllByRole('menuitem')
const title = screen.queryByText('My beautiful list')
- expect(list).toHaveLength(3)
expect(title).toBeDefined()
})
@@ -47,4 +45,16 @@ describe('List', () => {
expect(listContainer.classList).toContain('my-custom-class')
})
+
+ it('should match snapshot', () => {
+ const { container } = render(
+
+ Item 1
+ Item 2
+ Item 3
+
+ )
+
+ expect(container).toMatchSnapshot()
+ })
})
diff --git a/src/core/data-display/menu-item/__snapshots__/menu-item.spec.tsx.snap b/src/core/data-display/menu-item/__snapshots__/menu-item.spec.tsx.snap
new file mode 100644
index 00000000..444e452d
--- /dev/null
+++ b/src/core/data-display/menu-item/__snapshots__/menu-item.spec.tsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuItem should match snapshot 1`] = `
+
+
+
+`;
diff --git a/src/core/data-display/menu-item/menu-item.spec.tsx b/src/core/data-display/menu-item/menu-item.spec.tsx
index c142f095..cd6984e5 100644
--- a/src/core/data-display/menu-item/menu-item.spec.tsx
+++ b/src/core/data-display/menu-item/menu-item.spec.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
import { render, screen } from '@testing-library/react'
import MenuItem from '.'
@@ -10,4 +10,10 @@ describe('MenuItem', () => {
expect(menuItem).toBeDefined()
})
+
+ it('should match snapshot', () => {
+ const { container } = render()
+
+ expect(container).toMatchSnapshot()
+ })
})
diff --git a/src/core/data-display/node/__snapshots__/node.spec.tsx.snap b/src/core/data-display/node/__snapshots__/node.spec.tsx.snap
new file mode 100644
index 00000000..5b109467
--- /dev/null
+++ b/src/core/data-display/node/__snapshots__/node.spec.tsx.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Node should match snapshot 1`] = `
+
+`;
diff --git a/src/core/data-display/node/node.spec.tsx b/src/core/data-display/node/node.spec.tsx
index 5a9fdcb5..b8a004e2 100644
--- a/src/core/data-display/node/node.spec.tsx
+++ b/src/core/data-display/node/node.spec.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
import { act } from 'react-dom/test-utils'
import { render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
@@ -38,4 +38,15 @@ describe('Node', () => {
expect(node1).toBeDefined()
expect(node2).toBeDefined()
})
+
+ it('should match snapshot', () => {
+ const { container } = render(
+
+
+
+
+ )
+
+ expect(container).toMatchSnapshot()
+ })
})
diff --git a/src/core/data-display/table/table.spec.tsx b/src/core/data-display/table/table.spec.tsx
index 634d968d..3c073a8b 100644
--- a/src/core/data-display/table/table.spec.tsx
+++ b/src/core/data-display/table/table.spec.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
import { act } from 'react-dom/test-utils'
import { render } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
@@ -57,6 +57,7 @@ describe('Table', () => {
it('should render with sort', async () => {
const onSortSpy = jest.fn()
+
const { getByText } = render()
const tableHeadName = getByText('Table-Head-Name')
diff --git a/src/core/data-display/tree/__snapshots__/tree.spec.tsx.snap b/src/core/data-display/tree/__snapshots__/tree.spec.tsx.snap
new file mode 100644
index 00000000..b09ce6c4
--- /dev/null
+++ b/src/core/data-display/tree/__snapshots__/tree.spec.tsx.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tree should match snapshot 1`] = `
+
+`;
diff --git a/src/core/data-display/tree/tree.spec.tsx b/src/core/data-display/tree/tree.spec.tsx
index 75187639..f880b109 100644
--- a/src/core/data-display/tree/tree.spec.tsx
+++ b/src/core/data-display/tree/tree.spec.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
import { act } from 'react-dom/test-utils'
import { render, screen } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
@@ -75,4 +75,10 @@ describe('Tree', () => {
expect(leaf.length).toEqual(3)
})
+
+ it('should match snapshot', () => {
+ const { container } = render()
+
+ expect(container).toMatchSnapshot()
+ })
})
diff --git a/src/core/data-display/typography/__snapshots__/typography.spec.tsx.snap b/src/core/data-display/typography/__snapshots__/typography.spec.tsx.snap
new file mode 100644
index 00000000..688252ca
--- /dev/null
+++ b/src/core/data-display/typography/__snapshots__/typography.spec.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Typography should match snapshot 1`] = `
+
+`;
diff --git a/src/core/data-display/typography/typography.spec.tsx b/src/core/data-display/typography/typography.spec.tsx
index 81a55607..d9c95201 100644
--- a/src/core/data-display/typography/typography.spec.tsx
+++ b/src/core/data-display/typography/typography.spec.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react'
+import React from 'react'
import { render, screen } from '@testing-library/react'
import Typography from '.'
describe('Typography', () => {
- it('should render with no variant', () => {
+ it('should render', () => {
render(Some text)
const typography = screen.getByText('Some text')
@@ -12,12 +12,19 @@ describe('Typography', () => {
expect(typography.classList).toContain('MuiTypography-body2')
})
+ it('should render without variant', () => {
+ render(Some text)
+
+ const typography = screen.getByText('Some text')
+
+ expect(typography.classList).toContain('MuiTypography-body2')
+ })
+
it('should render with variant', () => {
render(Title)
const typography = screen.getByText('Title')
- expect(typography).toBeDefined()
expect(typography.classList).toContain('MuiTypography-h1')
})
@@ -34,4 +41,14 @@ describe('Typography', () => {
expect(typography.style.margin).toBe('10px')
expect(typography.style.padding).toBe('5px')
})
+
+ it('should match snapshot', () => {
+ const { container } = render(
+
+ Some text
+
+ )
+
+ expect(container).toMatchSnapshot()
+ })
})
diff --git a/src/core/feedback/collapse/__snapshots__/collapse.spec.tsx.snap b/src/core/feedback/collapse/__snapshots__/collapse.spec.tsx.snap
new file mode 100644
index 00000000..758781ea
--- /dev/null
+++ b/src/core/feedback/collapse/__snapshots__/collapse.spec.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collapse should match snapshot 1`] = `
+
+
+
+
+ I am open for discussions
+
+
+
+ |