mapbox / spritezero-cli

A command-line interface to spritezero.
Other
166 stars 64 forks source link

Regenerate PNGs fixtures since spritezero now uses shelf-pack instead of bin-pack. Use json-stable-stringify for deterministic json fixtures. #8

Closed vdumont closed 8 years ago

vdumont commented 8 years ago

On OSX, a clean npm install && npm test of the master branch was causing me 3/8 unit tests failures.

JSON.stringify() does not guarantee any order so on some systems this may result in a different order than the fixtures it's tested against.

This uses json-stable-stringify to remedy.

One thing I am puzzled about is why the PNGs are changed though? This is strictly spritezero...

tmcw commented 8 years ago

I'm not seeing how this could cause unit test problems; tests use t.deepEqual https://github.com/mapbox/spritezero-cli/blob/master/test/test.js#L31 which does not rely on ordering. Can you provide a specific test failure?

vdumont commented 8 years ago

Good point, then I guess the PNG getting modified are probably triggering the unit test failures. Could be spritezero picking up a new version (spritezero switched to shelf-pack instead of bin-pack) since the fixture PNGs were generated.

The stable stringify() is still helpful since the JSONs are written to files so you get local diffs when running the unit tests, depending on your environment.

For the failures, this is from origin/master with no diff, on OSX (truncated a bit due to GitHub's char limit):

$ npm test

> spritezero-cli@1.0.2 test /Users/vdumont/Projects/vdumont/spritezero-cli
> semistandard bin/spritezero && tap --coverage test/test.js

test/test.js .......................................... 5/8 5s
  generate 1x sprites
  not ok layout
    +++ found                                                          
    --- wanted                                                         
       "aerialway-12": {                                               
         "height": 12                                                  
         "pixelRatio": 1                                               
         "width": 12                                                   
    -    "x": 318                                                      
    -    "y": 306                                                      
    +    "x": 90                                                       
    +    "y": 282                                                      
       }                                                               
       "aerialway-18": {                                               
         "height": 18                                                  
         "pixelRatio": 1                                               
         "width": 18                                                   
    -    "x": 108                                                      
    -    "y": 318                                                      
    +    "x": 216                                                      
    +    "y": 168                                                      
       }                                                               
       "aerialway-24": {                                               
         "height": 24                                                  
         "pixelRatio": 1                                               
         "width": 24                                                   
    -    "x": 24                                                       
    -    "y": 24                                                       
    +    "x": 0                                                        
    +    "y": 0                                                        
       }                                                               
       "airfield-12": {                                                
         "height": 12                                                  
         "pixelRatio": 1                                               
         "width": 12                                                   
    -    "x": 348                                                      
    -    "y": 252                                                      
    +    "x": 102                                                      
    +    "y": 282                                                      
       }                                                               
       "airfield-18": {                                                
         "height": 18                                                  
         "pixelRatio": 1                                               
         "width": 18                                                   
    -    "x": 318                                                      
    -    "y": 288                                                      
    +    "x": 234                                                      
    +    "y": 168                                                      
       }                                                               
       "airfield-24": {                                                
         "height": 24                                                  
         "pixelRatio": 1                                               
         "width": 24                                                   
    -    "x": 0                                                        
    -    "y": 48                                                       
    +    "x": 24                                                       
    +    "y": 0                                                        
       }                                                               
       "airport-12": {                                                 
         "height": 12                                                  
         "pixelRatio": 1                                               
         "width": 12                                                   
    -    "x": 348                                                      
    -    "y": 132                                                      
    +    "x": 114                                                      
    +    "y": 282                                                      
       }                                                               
       "airport-18": {                                                 
         "height": 18                                                  
         "pixelRatio": 1                                               
         "width": 18                                                   
    -    "x": 318                                                      
    -    "y": 198                                                      
    +    "x": 252                                                      
    +    "y": 168                                                      
       }                                                               
       "airport-24": {                                                 
         "height": 24                                                  
         "pixelRatio": 1                                               
         "width": 24                                                   
    -    "x": 24                                                       
    -    "y": 72                                                       
    +    "x": 0                                                        
    +    "y": 24                                                       
       }                                                               
       "alcohol-shop-12": {                                            
         "height": 12                                                  
         "pixelRatio": 1                                               
         "width": 12                                                   
    -    "x": 348                                                      
    -    "y": 192                                                      
    +    "x": 126                                                      
    +    "y": 282                                                      
       }                                                               
       "alcohol-shop-18": {                                            
         "height": 18                                                  
         "pixelRatio": 1                                               
         "width": 18                                                   
    -    "x": 318                                                      
    -    "y": 180                                                      
    +    "x": 270                                                      
    +    "y": 168                                                      
       }                                                               
       "alcohol-shop-24": {                                            
         "height": 24                                                  
         "pixelRatio": 1                                               
         "width": 24                                                   
    -    "x": 96                                                       
    +    "x": 24                                                       
         "y": 24                                                       
       }                                                               
       "america-football-12": {                                        
         "height": 12                                                  
         "pixelRatio": 1                                               
         "width": 12                                                   
    -    "x": 348                                                      
    -    "y": 60                                                       
    +    "x": 138                                                      
    +    "y": 282                                                      
       }                                                               
       "america-football-18": {                                        
         "height": 18                                                  
         "pixelRatio": 1                                               
         "width": 18                                                   
    -    "x": 318                                                      
    -    "y": 144                                                      
    +    "x": 288                                                      
    +    "y": 168                                                      
       }                                                               
       "america-football-24": {                                        
         "height": 24                                                  
         "pixelRatio": 1                                               
         "width": 24                                                   
    -    "x": 72                                                       
    -    "y": 72                                                       
    +    "x": 48                                                       
    +    "y": 0                                                        
       }                                                               
       "art-gallery-12": {                                             
         "height": 12                                                  
         "pixelRatio": 1                                               
         "width": 12                                                   
    -    "x": 348                                                      
    -    "y": 36                                                       
    +    "x": 150                                                      
    +    "y": 282                                                      
       }                                                               
       "art-gallery-18": {                                             
         "height": 18                                                  
         "pixelRatio": 1                                               
         "width": 18                                                   
    -    "x": 318                                                      
    -    "y": 126                                                      
    +    "x": 306                                                      
    +    "y": 168                                                      
       }                                                               
       "art-gallery-24": {                                             
         "height": 24                                                  
         "pixelRatio": 1                                               
         "width": 24                                                   
    -    "x": 96                                                       
    -    "y": 96                                                       
    +    "x": 72                                                       
    +    "y": 0                                                        
       }                                                               
       "bakery-12": {                                                  
         "height": 12                                                  
         "pixelRatio": 1                                               
         "width": 12                                                   
    -    "x": 312                                                      
    -    "y": 336                                                      
    +    "x": 162                                                      
    +    "y": 282                                                      
       }                                                               
       "bakery-18": {                                                  
         "height": 18                                                  
         "pixelRatio": 1                                               
         "width": 18                                                   
    -    "x": 318                                                      
    -    "y": 72                                                       
    +    "x": 324                                                      
    +    "y": 168                                                      
       }                                                               
       "bakery-24": {                                                  
         "height": 24                                                  
         "pixelRatio": 1                                               
         "width": 24                                                   
    -    "x": 24                                                       
    -    "y": 96                                                       
    +    "x": 48                                                       
    +    "y": 24                                                       
       }                                                               
       "bank-12": {                                                    
         "height": 12                                                  
         "pixelRatio": 1                                               
         "width": 12                                                   
    -    "x": 192                                                      
    -    "y": 336                                                      
    +    "x": 174                                                      
    +    "y": 282                                                      
       }                                                               
       "bank-18": {                                                    
         "height": 18                                                  
         "pixelRatio": 1                                               
         "width": 18                                                   
    -    "x": 270                                                      
    -    "y": 300                                                      
    +    "x": 342                                                      
    +    "y": 168                                                      
       }                                                               
       "bank-24": {                                                    
         "height": 24                                                  
         "pixelRatio": 1                                               
         "width": 24                                                   
    -    "x": 24                                                       
    -    "y": 120                                                      
    +    "x": 72                                                       
    +    "y": 24                                                       
       }                                                               
       "bar-12": {                                                     
         "height": 12                                                  
         "pixelRatio": 1                                               
         "width": 12                                                   
    -    "x": 84                                                       
    -    "y": 336                                                      
    +    "x": 186                                                      
    +    "y": 282                                                      
       }                                                               
       "bar-18": {                                                     
         "height": 18                                                  
         "pixelRatio": 1                                               
         "width": 18                                                   
    -    "x": 198                                                      
    -    "y": 300                                                      
    +    "x": 360                                                      
    +    "y": 168                                                      
       }                                                               
       "bar-24": {                                                     
         "height": 24                                                  
         "pixelRatio": 1                                               
         "width": 24                                                   
    -    "x": 96                                                       
    -    "y": 120                                                      
    +    "x": 0                                                        
    +    "y": 48                                                       
       }                                                                                                                    
       "garden-12": {                                                  
         "height": 24                                                  
         "pixelRatio": 2                                               
         "width": 24                                                   
    -    "x": 696                                                      
    -    "y": 192                                                      
    +    "x": 456                                                      
    +    "y": 600                                                      
       }                                                               
       "garden-18": {                                                  
         "height": 36                                                  
         "pixelRatio": 2                                               
         "width": 36                                                   
    -    "x": 528                                                      
    -    "y": 432                                                      
    +    "x": 468                                                      
    +    "y": 420                                                      
       }                                                               
       "garden-24": {                                                  
         "height": 48                                                  
         "pixelRatio": 2                                               
         "width": 48                                                   
    -    "x": 480                                                      
    -    "y": 432                                                      
    +    "x": 144                                                      
    +    "y": 240                                                      
       }                                                               
       "gift-12": {                                                    
         "height": 24                                                  
         "pixelRatio": 2                                               
         "width": 24                                                   
    -    "x": 144                                                      
    -    "y": 696                                                      
    +    "x": 480                                                      
    +    "y": 600                                                      
       }                                                               
       "gift-18": {                                                    
         "height": 36                                                  
         "pixelRatio": 2                                               
         "width": 36                                                   
    -    "x": 0                                                        
    -    "y": 528                                                      
    +    "x": 504                                                      
    +    "y": 420                                                      
       }                                                               
       "gift-24": {                                                    
         "height": 48                                                  
         "pixelRatio": 2                                               
         "width": 48                                                   
    -    "x": 480                                                      
    -    "y": 384                                                      
    +    "x": 192                                                      
    +    "y": 240                                                      
       }                                                               
       "golf-12": {                                                    
         "height": 24                                                  
         "pixelRatio": 2                                               
         "width": 24                                                   
    -    "x": 372                                                      
    -    "y": 636                                                      
    +    "x": 504                                                      
    +    "y": 600                                                      
       }                                                               
       "golf-18": {                                                    
         "height": 36                                                  
         "pixelRatio": 2                                               
         "width": 36                                                   
    -    "x": 108                                                      
    -    "y": 528                                                      
    +    "x": 540                                                      
    +    "y": 420                                                      
       }                                                               
       "golf-24": {                                                    
         "height": 48                                                  
         "pixelRatio": 2                                               
         "width": 48                                                   
    -    "x": 480                                                      
    -    "y": 48                                                       
    +    "x": 240                                                      
    +    "y": 240                                                      
       }                                                               
       "grocery-12": {                                                 
         "height": 24                                                  
         "pixelRatio": 2                                               
         "width": 24                                                   
    -    "x": 672                                                      
    -    "y": 144                                                      
    +    "x": 528                                                      
    +    "y": 600                                                      
       }                                                               
       "grocery-18": {                                                 
         "height": 36                                                  
         "pixelRatio": 2                                               
         "width": 36                                                   
    -    "x": 144                                                      
    -    "y": 528                                                      
    +    "x": 576                                                      
    +    "y": 420                                                      
       }                                                                                                                 
       "lighthouse-24": {                                              
         "height": 48                                                  
         "pixelRatio": 2                                               
         "width": 48                                                   
    -    "x": 432                                                      
    -    "y": 192                                                      
    +    "x": 48                                                       
    +    "y": 336                                                      
       }                                                               
       "lodging-12": {                                                 
         "height": 24                                                  
         "pixelRatio": 2                                               
         "width": 24                                                   
    -    "x": 672                                                      
    -    "y": 288                                                      
    +    "x": 48                                                       
    +    "y": 624                                                      
       }                                                                                                    
       "zoo-24": {                                                     
         "height": 48                                                  
         "pixelRatio": 2                                               
         "width": 48                                                   
    -    "x": 48                                                       
    -    "y": 0                                                        
    +    "x": 384                                                      
    +    "y": 336                                                      
       }                                                               
     }                                                                 
    at:
      file: test/test.js
      line: 63
      column: 7
      type: ChildProcess
    source: |
      t.deepEqual(
    stack: |
      ChildProcess.<anonymous> (test/test.js:63:7)
      maybeClose (child_process.js:756:16)
      Socket.<anonymous> (child_process.js:969:11)
      Pipe.close (net.js:465:12)

total ................................................. 5/8

  5 passing (9s)
  3 failing

npm ERR! Test failed.  See above for more details.
vdumont commented 8 years ago

Okay yeah that's definitely spritezero now using shelf-pack instead of bin-pack. The fixture PNGs were generated @ 1c24429f00a2527249399c3df79fdb3f924701e3 A clean npm install picks up spritezero 3.5.0 which uses shelf-pack instead of bin-pack, and produces different PNGs. Think it still worth it to write the JSON with stable stringify, since it prevents local diffs.

vdumont commented 8 years ago

Closing since I had to to make another change to spritezero-cli and unit tests. It's all in https://github.com/mapbox/spritezero-cli/pull/10