m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-06-17 18:03:22 +02:00
Code Releases Activity

theme switch tests

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-04-27 23:53:26 +02:00
parent 781dc9950d
commit 2e6dfdd46b
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package.json
View File

@ -25,25 +25,25 @@
"dependencies": {
"classnames": "^2.2.6",
"file-saver": "^2.0.1",
"gatsby": "^2.3.22",
"gatsby-image": "^2.0.38",
"gatsby": "^2.3.31",
"gatsby-image": "^2.0.40",
"gatsby-plugin-favicon": "^3.1.6",
"gatsby-plugin-matomo": "^0.7.0",
"gatsby-plugin-offline": "^2.0.25",
"gatsby-plugin-react-helmet": "^3.0.12",
"gatsby-plugin-sass": "^2.0.11",
"gatsby-plugin-sharp": "^2.0.34",
"gatsby-plugin-sharp": "^2.0.35",
"gatsby-plugin-sitemap": "^2.0.12",
"gatsby-plugin-svgr": "^2.0.2",
"gatsby-source-filesystem": "^2.0.29",
"gatsby-source-filesystem": "^2.0.32",
"gatsby-transformer-json": "^2.1.11",
"gatsby-transformer-sharp": "^2.1.18",
"gatsby-transformer-yaml": "^2.1.11",
"gatsby-transformer-yaml": "^2.1.12",
"giphy-js-sdk-core": "^1.0.6",
"graphql": "^14.2.1",
"intersection-observer": "^0.6.0",
"js-yaml": "^3.13.1",
"node-sass": "^4.11.0",
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.0",
@ -56,22 +56,22 @@
"vcf": "^2.0.4"
},
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/core": "^7.4.4",
"@babel/node": "^7.2.2",
"@babel/preset-env": "^7.4.3",
"@babel/preset-env": "^7.4.4",
"@svgr/webpack": "^4.2.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.7.1",
"babel-preset-gatsby": "^0.1.11",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.1.0",
"eslint-config-prettier": "^4.2.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-graphql": "^3.0.3",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.7.1",
"jest-canvas-mock": "^2.0.0-beta.1",
"jest-canvas-mock": "^2.0.0",
"jest-dom": "^3.1.3",
"ora": "^3.4.0",
"prepend": "^1.0.2",
@ -79,7 +79,7 @@
"prettier-stylelint": "^0.4.2",
"react-testing-library": "^7.0.0",
"slugify": "^1.3.4",
"stylelint": "^10.0.0",
"stylelint": "^10.0.1",
"stylelint-config-css-modules": "^1.3.0",
"stylelint-config-standard": "^18.3.0",
"why-did-you-update": "^1.0.6"

5
src/components/molecules/ThemeSwitch.jsx
View File

@ -48,10 +48,7 @@ export default class ThemeSwitch extends PureComponent {
<Helmet>
<body className={dark ? 'dark' : null} />
</Helmet>
<Animation
className={styles.themeSwitch}
data-testid={'theme-switch'}
>
<Animation className={styles.themeSwitch}>
<label className={styles.checkbox}>
<span className={styles.label}>Toggle Night Mode</span>
<ThemeToggleInput dark={dark} toggleDark={toggleDark} />

42
src/components/molecules/ThemeSwitch.test.jsx
View File

@ -1,17 +1,45 @@
import React from 'react'
import { render } from 'react-testing-library'
import AppProvider from '../../store/Provider'
import { render, fireEvent, cleanup } from 'react-testing-library'
import { Provider } from '../../store/createContext'
import ThemeSwitch from './ThemeSwitch'
describe('ThemeSwitch', () => {
afterEach(cleanup)
const toggleDark = jest.fn()
it('renders correctly', () => {
const { getByTestId } = render(
<AppProvider>
const { container } = render(
<Provider value={{ dark: false, toggleDark: () => toggleDark }}>
<ThemeSwitch />
</AppProvider>
</Provider>
)
expect(getByTestId('theme-switch')).toBeInTheDocument()
expect(getByTestId('theme-switch').nodeName).toBe('ASIDE')
const switchContainer = container.querySelector('aside')
expect(switchContainer).toBeInTheDocument()
})
it('switches when it is dark', () => {
const { container } = render(
<Provider value={{ dark: true, toggleDark: () => toggleDark }}>
<ThemeSwitch />
</Provider>
)
const toggle = container.querySelector('input')
expect(toggle).toHaveAttribute('checked')
})
it('checkbox can be changed', () => {
const { container } = render(
<Provider value={{ dark: false, toggleDark: () => toggleDark }}>
<ThemeSwitch />
</Provider>
)
const toggle = container.querySelector('input')
expect(toggle.checked).toBeFalsy()
fireEvent.change(toggle, { target: { checked: true } })
expect(toggle.checked).toBeTruthy()
})
})