fix(tests): grid

cypress/integration/flow/advanced.spec.js

@@ -11,8 +11,8 @@ describe('Advanced Flow Rendering', () => {
   it('renders a grid', () => {
     cy.get('.react-flow__grid');
 
-    const gridStroke = Cypress.$('.react-flow__grid path').attr('stroke');
+    const gridStroke = Cypress.$('.react-flow__grid path').attr('fill');
-    expect(gridStroke).to.equal('#aaa');
+    expect(gridStroke).to.equal('#888');
   });
 
   it('connects nodes', () => {

cypress/integration/flow/basic.spec.js

@@ -8,8 +8,11 @@ describe('Basic Flow Rendering', () => {
     cy.get('.react-flow__node').children('div').children('.react-flow__handle');
   });
 
-  it('does not render a grid', () => {
+  it('renders a grid', () => {
-    cy.get('.react-flow__grid').should('not.exist');
+    cy.get('.react-flow__grid');
+
+    const gridStroke = Cypress.$('.react-flow__grid path').attr('stroke');
+    expect(gridStroke).to.equal('#eee');
   });
 
   it('selects a node', () => {

src/container/BackgroundRenderer/Grid.js

@@ -22,7 +22,7 @@ const createGridLines = (width, height, xOffset, yOffset, gap) => {
 const createGridDots = (width, height, xOffset, yOffset, gap, size) => {
   const lineCountX = Math.ceil(width / gap) + 1;
   const lineCountY = Math.ceil(height / gap) + 1;
-  
+
   const values = Array.from({length: lineCountX}, (_, col) => {
     const x = col * gap + xOffset;
     return Array.from({length: lineCountY},(_,row)=>{
@@ -34,7 +34,7 @@ const createGridDots = (width, height, xOffset, yOffset, gap, size) => {
   return values.join(' ');
 };
 
-const Grid = memo(({gap, color, size, style, className, gridStyle}) => {
+const Grid = memo(({gap, color, size, style, className, backgroundType}) => {
   const {
     width,
     height,
@@ -46,7 +46,7 @@ const Grid = memo(({gap, color, size, style, className, gridStyle}) => {
 
   const xOffset = x % scaledGap;
   const yOffset = y % scaledGap;
-  const isLines = gridStyle === 'lines';
+  const isLines = backgroundType === 'lines';
   const path = isLines
     ? createGridLines(width, height, xOffset, yOffset, scaledGap)
     : createGridDots(width, height, xOffset, yOffset, scaledGap, size);
@@ -69,16 +69,16 @@ Grid.propTypes = {
   size: PropTypes.number,
   style: PropTypes.object,
   className: PropTypes.string,
-  gridStyle: PropTypes.oneOf(['lines', 'dots']),
+  backgroundType: PropTypes.oneOf(['lines', 'dots']),
 };
 
 Grid.defaultProps = {
   gap: 24,
-  color: '#999',
+  color: '#aaa',
   size: .5,
   style: {},
   className: null,
-  gridStyle: 'dots',
+  backgroundType: 'dots',
 };
 
 export default Grid;

src/container/BackgroundRenderer/index.js

@@ -12,7 +12,13 @@ const BackgroundRenderer = memo(({
   backgroundType, ...rest
 }) => {
   const BackgroundComponent = bgComponents[backgroundType];
-  return <BackgroundComponent {...rest} />
+
+  return (
+    <BackgroundComponent
+      backgroundType={backgroundType}
+      {...rest}
+    />
+  );
 });
 
 BackgroundRenderer.displayName = 'BackgroundRenderer';

src/container/ReactFlow/index.js

@@ -100,7 +100,7 @@ ReactFlow.defaultProps = {
   connectionLineStyle: {},
   deleteKeyCode: 8,
   selectionKeyCode: 16,
-  backgroundColor: '#999',
+  backgroundColor: '#eee',
   backgroundGap: 24,
   showBackground: true,
   backgroundType: 'dots'