Skip to content

Commit 6ee266e

Browse files
committed
Popup Styling Spec Compeleted; README.MD Update (Styling Guide)
1 parent e529915 commit 6ee266e

File tree

2 files changed

+27
-15
lines changed

2 files changed

+27
-15
lines changed

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ className | data-class | String | | extra custom class, can use !importan
7070
delayUpdate | data-delay-update | Number | | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target
7171
insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default)
7272
border | data-border | Bool | true, false | Add one pixel white border
73-
textColor | data-text-color | String | e.g. red | Popup text color
74-
backgroundColor | data-background-color | String | e.g. yellow | Popup background color
73+
textColor | data-text-color | String | e.g. red | Popup text color - required with the `backgroundColor` value
74+
backgroundColor | data-background-color | String | e.g. yellow | Popup background color - required with the `textColor` value
7575
arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value
7676
getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically
7777
afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show

test/index.spec.js

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ const forEach = require('mocha-each')
44
const jsdom = require('mocha-jsdom')
55
import ReactTooltip from '../src/index.js'
66
import { render, cleanup } from '@testing-library/react'
7-
import jss from 'jss'
87
import * as Aphrodite from 'aphrodite-jss'
98
import sinon from 'sinon'
109

@@ -19,25 +18,38 @@ describe('Tooltip', () => {
1918
jsdom({url: 'http://localhost/'})
2019

2120
forEach([
22-
[{'textColor': 'green', 'backgroundColor': 'red', 'arrowColor': 'blue'}, {popupType: 'type-custom'}],
23-
[{'textColor': 'green', 'backgroundColor': 'red'}, {popupType: 'type-custom'}],
24-
[{'textColor': 'green', 'arrowColor': 'red'}, {popupType: 'type-dark'}], // all props must be set for custom theme
25-
[{'backgroundColor': 'green', 'arrowColor': 'red'}, {popupType: 'type-dark'}],
26-
[{'textColor': 'red'}, {popupType: 'type-dark'}],
27-
[{'backgroundColor': 'red'}, {popupType: 'type-dark'}],
28-
[{'arrowColor': 'red'}, {popupType: 'type-dark'}],
21+
[{'textColor': 'green', 'backgroundColor': 'red', 'arrowColor': 'blue'},
22+
{popupType: 'type-custom', textColor: 'green', backgroundColor: 'red', arrowColor: 'blue'}],
23+
[{'textColor': 'teal', 'backgroundColor': 'orange'},
24+
{popupType: 'type-custom', textColor: 'teal', backgroundColor: 'orange'}],
25+
[{'textColor': 'green', 'arrowColor': 'red'},
26+
{popupType: 'type-dark', textColor: '#fff', backgroundColor: '#222'},], // all props must be set for custom theme
27+
[{'backgroundColor': 'green', 'arrowColor': 'red'},
28+
{popupType: 'type-dark', textColor: '#fff', backgroundColor: '#222'}],
29+
[{'textColor': 'red'},
30+
{popupType: 'type-dark', textColor: '#fff', backgroundColor: '#222'}],
31+
[{'backgroundColor': 'red'},
32+
{popupType: 'type-dark', textColor: '#fff', backgroundColor: '#222'}],
33+
[{'arrowColor': 'red'},
34+
{popupType: 'type-dark', textColor: '#fff', backgroundColor: '#222'}],
2935
]).it('Popup color generation', (props, res) => {
30-
3136
render(<ReactTooltip id='colorSpec' {...props}/>)
37+
3238
const tooltip = document.getElementById('colorSpec')
3339
const tooltipGeneratedClass = spy.returnValues[0]['__react_component_tooltip'].className
3440
const tooltipGeneratedStyle = spy.returnValues[0]['__react_component_tooltip'].style
3541

36-
// TODO: text colour assert
37-
// TODO: background colour assert
38-
// TODO: arrow colour assert
3942

4043
expect(tooltip.className).to.
4144
equal(tooltipGeneratedClass + ' __react_component_tooltip place-top ' + res.popupType)
42-
})
45+
46+
expect(tooltipGeneratedStyle.color, 'Text color').to.equal(res.textColor)
47+
expect(tooltipGeneratedStyle.backgroundColor, 'Background color').to.equal(res.backgroundColor)
48+
49+
const arrowPositions = ['top', 'bottom', 'left', 'right']
50+
arrowPositions.forEach((pos) => {
51+
expect(tooltipGeneratedStyle['&.place-' + pos + ':after']['border-' + pos + '-color'], pos + ' arrow color').to.
52+
equal(res.arrowColor ? res.arrowColor : res.backgroundColor)
53+
})
54+
})
4355
})

0 commit comments

Comments
 (0)