Skip to content

Commit

Permalink
Add test for ::placeholder with virtual
Browse files Browse the repository at this point in the history
  • Loading branch information
hugo committed Jan 25, 2021
1 parent 74bd77f commit b532218
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 84 deletions.
3 changes: 3 additions & 0 deletions incompletedTest/index.electron.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/** @jest-environment @jest-runner/electron/environment */

require('./index.test')
15 changes: 14 additions & 1 deletion src/addon/prefixer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,20 @@

import { addPrefix } from '../helper'

const addOn = function(renderer) {
const defaultConfig = {
selectorToPrefix: {
'::placeholder': [
'::-webkit-input-placeholder',
'::-moz-placeholder',
':-ms-input-placeholder'
]
}
}

const addOn = function(renderer, config = defaultConfig) {
const { selectorToPrefix } = config
renderer.selectorToPrefix = selectorToPrefix

if (renderer.keyframes) {
const keyframes = renderer.keyframes
renderer.keyframes = (decls, name) => keyframes(addPrefix(decls), name)
Expand Down
8 changes: 6 additions & 2 deletions src/addon/virtual.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
} from '../helper'
import safeIsObj from 'safe-is-obj'

const addOn = function (renderer) {
const addOn = function(renderer) {
// Setting the cache outside this function may result in more persistant but unexpected behaviors
createCache(renderer, 'cache')

Expand All @@ -36,6 +36,10 @@ const addOn = function (renderer) {
classNames += objectToClassNames(value, '', prop)
continue
}

if (renderer.selectorToPrefix[prop]) {
}

classNames += objectToClassNames(value, prop)
} else {
const prefixedRawDecls = renderer.prefixer
Expand All @@ -52,7 +56,7 @@ const addOn = function (renderer) {
return classNames
}

renderer.atomic = function (rawDecl, selector = '', atRule = '') {
renderer.atomic = function(rawDecl, selector = '', atRule = '') {
const className = assembleClassName(renderer)

const rule = assembleRule(`.${className}${selector}`, rawDecl)
Expand Down
4 changes: 4 additions & 0 deletions tests/prefixer.server.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/** @jest-environment node */
'use strict'

require('./prefixer.test')
109 changes: 28 additions & 81 deletions tests/prefixer.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ function createVirtualNano(config) {
return nano
}

describe('installing prefixer', function () {
it('should installs without crashing', function () {
describe('installing prefixer', function() {
it('should installs without crashing', function() {
const nano = create()
addonPrefixer(nano)
expect(nano).toBeDefined()
})

describe('using virtual() interface', function () {
it('handles "user-select" correctly', function () {
describe('using virtual() interface', function() {
it('should prefix user-select correctly', function() {
const nano = createVirtualNano()

nano.putRaw = jest.fn()
Expand All @@ -41,12 +41,12 @@ describe('installing prefixer', function () {
'user-select'
]

userSelectPrefix.forEach(function (key) {
userSelectPrefix.forEach(function(key) {
expect(result.includes(key)).toBe(true)
})
})

it("doesn't kebab values", function () {
it('should not kebab values', function() {
const nano = createVirtualNano()
const decl = {
backgroundImage:
Expand All @@ -63,7 +63,7 @@ describe('installing prefixer', function () {
expect(result.includes(expected)).toBe(true)
})

it('prefixes transform correctly', function () {
it('should prefixe transform correctly', function() {
const nano = createVirtualNano()
const decl = {
transform: 'translateX(2em) rotate(0.5turn)'
Expand All @@ -73,8 +73,6 @@ describe('installing prefixer', function () {
transform: 'translateX(2em)'
}

// console.log('prefixer result', prefix(mockDecl))

nano.putRaw = jest.fn()

nano.virtual(decl)
Expand All @@ -84,80 +82,29 @@ describe('installing prefixer', function () {
'{-webkit-transform: translateX(2em);-ms-transform: translateX(2em);transform:translateX(2em);}'
expect(result.includes(expected)).toBe(true)
})

it('should prefix ::placeholder', function() {
const nano = createVirtualNano()

nano.virtual({
'::placeholder': {
fontWeight: 300,
userSelect: 'none'
}
})

if (env.isServer) {
// console.log('check result', nano.raw)
const result = nano.raw
expect(result.includes('::-webkit-input-placeholder')).toBe(true)
expect(result.includes('::-moz-placeholder')).toBe(true)
expect(result.includes(':-ms-input-placeholder')).toBe(true)
expect(result.includes('::placeholder')).toBe(true)
}
})
})

describe('using keyframes() interface', function () {
describe('using keyframes() interface', function() {
//Add test here later
})
//
// it('prefixes "placeholder" correctly', function() {
// const nano = createNano()
// nano.putRaw = jest.fn()
//
// nano.put('input::placeholder', {
// fontWeight: 300,
// userSelect: 'none'
// })
//
// const result = nano.putRaw.mock.calls.join(' ').replace(/ +(?= )/g, '')
//
// const prefixList = [
// 'input::-webkit-input-placeholder',
// 'input::-moz-placeholder',
// 'input:-ms-input-placeholder',
// 'input:-moz-placeholder',
// '::placeholder'
// ]
//
// prefixList.forEach(function(key) {
// expect(result.includes(key)).toBe(true)
// })
// })

//
// it('prefixes "placeholder" in nested rules correctly', function() {
// const nano = createNano()
// addonNesting(nano)
// nano.putRaw = jest.fn()
//
// nano.put('input[type=email]', {
// '&::placeholder': {
// color: '#393939',
// fontWeight: 300
// }
// })
//
// const result = nano.putRaw.mock.calls.join(' ').replace(/ +(?= )/g, '')
// ;[
// '::-webkit-input-placeholder',
// '::-moz-placeholder',
// ':-ms-input-placeholder',
// ':-moz-placeholder',
// '::placeholder'
// ].forEach(function(key) {
// expect(result.includes(key)).toBe(true)
// })
// })
//
// it('prefixes "placeholder" in compound rules correctly', function() {
// const nano = createNano()
// nano.putRaw = jest.fn()
//
// nano.put(
// 'input[type=email]::placeholder, input[type=password]::placeholder, input[type=text]::placeholder',
// {
// color: '#393939',
// fontWeight: 300
// }
// )
//
// const calls = nano.putRaw.mock.calls
// expect(calls).toHaveLength(15)
//
// const result = nano.putRaw.mock.calls.join(' ').replace(/ +(?= )/g, '')
// const rawResult =
// 'input[type=email]::-webkit-input-placeholder{color:#393939;font-weight:300;} input[type=email]::-moz-placeholder{color:#393939;font-weight:300;} input[type=email]:-ms-input-placeholder{color:#393939;font-weight:300;} input[type=email]:-moz-placeholder{color:#393939;font-weight:300;} input[type=email]::placeholder{color:#393939;font-weight:300;} input[type=password]::-webkit-input-placeholder{color:#393939;font-weight:300;} input[type=password]::-moz-placeholder{color:#393939;font-weight:300;} input[type=password]:-ms-input-placeholder{color:#393939;font-weight:300;} input[type=password]:-moz-placeholder{color:#393939;font-weight:300;} input[type=password]::placeholder{color:#393939;font-weight:300;} input[type=text]::-webkit-input-placeholder{color:#393939;font-weight:300;} input[type=text]::-moz-placeholder{color:#393939;font-weight:300;} input[type=text]:-ms-input-placeholder{color:#393939;font-weight:300;} input[type=text]:-moz-placeholder{color:#393939;font-weight:300;} input[type=text]::placeholder{color:#393939;font-weight:300;}'
//
// expect(result).toEqual(rawResult)
// })
})

0 comments on commit b532218

Please sign in to comment.