mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-17 09:57:23 +03:00
add switch presenter mode test
This commit is contained in:
parent
8c2a412e6b
commit
733bb25d68
@ -9,6 +9,7 @@ import { presenterModes } from '../constants'
|
||||
|
||||
const NormalIcon = () => (
|
||||
<svg
|
||||
data-testid="normalIcon"
|
||||
width="24"
|
||||
height="16"
|
||||
viewBox="0 0 24 16"
|
||||
@ -40,6 +41,7 @@ const NormalIcon = () => (
|
||||
|
||||
const TallIcon = () => (
|
||||
<svg
|
||||
data-testid="tallIcon"
|
||||
width="24"
|
||||
height="16"
|
||||
viewBox="0 0 24 16"
|
||||
@ -73,6 +75,7 @@ const TallIcon = () => (
|
||||
|
||||
const NotesIcon = () => (
|
||||
<svg
|
||||
data-testid="notesIcon"
|
||||
width="24"
|
||||
height="16"
|
||||
viewBox="0 0 24 16"
|
||||
@ -89,6 +92,7 @@ const NotesIcon = () => (
|
||||
|
||||
const WideIcon = () => (
|
||||
<svg
|
||||
data-testid="wideIcon"
|
||||
width="24"
|
||||
height="16"
|
||||
viewBox="0 0 24 16"
|
||||
@ -128,7 +132,7 @@ const icons = {
|
||||
const arrayPresenterModes = Object.values(presenterModes)
|
||||
const lengthPresenterModes = arrayPresenterModes.length
|
||||
|
||||
const getNextItem = presenterMode => {
|
||||
export const getNextPresenterMode = presenterMode => {
|
||||
const index = arrayPresenterModes.findIndex(el => el === presenterMode)
|
||||
const nextIndex = (index + 1) % lengthPresenterModes
|
||||
return arrayPresenterModes[nextIndex]
|
||||
@ -140,7 +144,7 @@ export default props => {
|
||||
|
||||
const onSwitchPresenterMode = () =>
|
||||
setState({
|
||||
presenterMode: getNextItem(presenterMode),
|
||||
presenterMode: getNextPresenterMode(presenterMode),
|
||||
})
|
||||
|
||||
const IconComponent = icons[presenterMode]
|
||||
|
54
packages/gatsby-theme/test/presenter-footer.js
Normal file
54
packages/gatsby-theme/test/presenter-footer.js
Normal file
@ -0,0 +1,54 @@
|
||||
import React from 'react'
|
||||
import { render, fireEvent, cleanup } from '@testing-library/react'
|
||||
import PresenterFooter, {
|
||||
getNextPresenterMode,
|
||||
} from '../src/components/presenter-footer'
|
||||
import { presenterModes } from '../src/constants'
|
||||
import DeckContext from '../src/context'
|
||||
|
||||
describe('present-footer', () => {
|
||||
afterEach(cleanup)
|
||||
|
||||
describe('getNextPresenterMode', () => {
|
||||
it.each`
|
||||
currentPresenterMode | expectedPresenterMode
|
||||
${presenterModes.normal} | ${presenterModes.tall}
|
||||
${presenterModes.tall} | ${presenterModes.wide}
|
||||
${presenterModes.wide} | ${presenterModes.notes}
|
||||
${presenterModes.notes} | ${presenterModes.normal}
|
||||
`(
|
||||
'should return $expectedPresenterMode when presenter mode is $currentPresenterMode',
|
||||
({ currentPresenterMode, expectedPresenterMode }) => {
|
||||
const nextPresenterMode = getNextPresenterMode(currentPresenterMode)
|
||||
expect(nextPresenterMode).toBe(expectedPresenterMode)
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
describe('<PresenterFooter />', () => {
|
||||
const PresenterFooterWithContext = ({ context }) => (
|
||||
<DeckContext.Provider value={context}>
|
||||
<PresenterFooter />
|
||||
</DeckContext.Provider>
|
||||
)
|
||||
|
||||
it('should update the presenter mode when user click on persenter mode icon', () => {
|
||||
const context = {
|
||||
index: 0,
|
||||
length: 2,
|
||||
presenterMode: presenterModes.normal,
|
||||
setState: jest.fn(),
|
||||
}
|
||||
const { getByTestId } = render(
|
||||
<PresenterFooterWithContext context={context} />
|
||||
)
|
||||
|
||||
fireEvent.click(getByTestId('normalIcon'))
|
||||
|
||||
expect(context.setState).toBeCalledTimes(1)
|
||||
expect(context.setState).toBeCalledWith({
|
||||
presenterMode: presenterModes.tall,
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
Loading…
Reference in New Issue
Block a user