Merge pull request #41 from marcomontalbano/i34-fix-unit-test

Fix unit tests for svgr outputter
marcomontalbano · Mar 3, 2020 · a9a98ea · a9a98ea
2 parents fb2b34d + c10e8c2
commit a9a98ea
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git a/packages/core/src/lib/_config.test.ts b/packages/core/src/lib/_config.test.ts
@@ -40,7 +40,7 @@ const component2: FigmaExport.ComponentNode = {
     id: '8:1',
     name: 'Search',
     type: 'COMPONENT',
-    svg: '<svg id="c2"></svg>',
+    svg: svg.content,
     figmaExport: {
         dirname: '.',
         basename: 'Figma-Search',
@@ -52,7 +52,7 @@ const component3: FigmaExport.ComponentNode = {
     id: '9:1',
     name: 'Login',
     type: 'COMPONENT',
-    svg: '<svg id="c3"></svg>',
+    svg: svg.content,
     figmaExport: {
         dirname: '.',
         basename: 'Login',

diff --git a/packages/output-components-as-svgr/src/index.test.ts b/packages/output-components-as-svgr/src/index.test.ts
@@ -1,19 +1,28 @@
 import sinon from 'sinon';
 import { expect } from 'chai';
+import svgr from '@svgr/core';
 
 import * as figmaDocument from '../../core/src/lib/_config.test';
 import * as figma from '../../core/src/lib/figma';
 
 import fs = require('fs');
+import makeDir = require('make-dir');
 import outputter = require('./index');
 
 describe('outputter as svgr', () => {
+    let writeFileSync;
+    let svgrAsync;
+    beforeEach(() => {
+        sinon.stub(makeDir, 'sync').returnsArg(0);
+        writeFileSync = sinon.stub(fs, 'writeFileSync');
+        svgrAsync = sinon.stub(svgr, 'sync').returns('# code for react component #');
+    });
+
     afterEach(() => {
         sinon.restore();
     });
 
     it('should export all components into jsx files plus one index.js for each folder', async () => {
-        const writeFileSync = sinon.stub(fs, 'writeFileSync');
         const fakePage = figmaDocument.createPage([figmaDocument.component1, figmaDocument.component2]);
         const pages = figma.getPages(fakePage);
 
@@ -22,13 +31,12 @@ describe('outputter as svgr', () => {
         })(pages);
 
         expect(writeFileSync).to.be.calledThrice;
-        expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/FigmaLogo.jsx', 'function FigmaLogo(props) {');
-        expect(writeFileSync.secondCall).to.be.calledWithMatch('output/fakePage/Search.jsx', 'function Search(props) {');
+        expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/FigmaLogo.jsx');
+        expect(writeFileSync.secondCall).to.be.calledWithMatch('output/fakePage/Search.jsx');
         expect(writeFileSync.thirdCall).to.be.calledWithMatch('output/fakePage/index.js', "export { default as FigmaLogo } from './FigmaLogo.jsx';");
     });
 
     it('should create folder if component names contain slashes', async () => {
-        const writeFileSync = sinon.stub(fs, 'writeFileSync');
         const fakePage = figmaDocument.createPage([figmaDocument.componentWithSlashedName]);
         const pages = figma.getPages(fakePage);
 
@@ -46,50 +54,43 @@ describe('outputter as svgr', () => {
         const pages = figma.getPages(fakePage);
 
         it('should be able to customize "dirname"', async () => {
-            const writeFileSync = sinon.stub(fs, 'writeFileSync');
-
             await outputter({
                 output: 'output',
                 getDirname: (options) => `${options.dirname}`,
             })(pages);
 
-            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/icon/Eye.jsx', 'function Eye(props) {');
+            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/icon/Eye.jsx');
             expect(writeFileSync.secondCall).to.be.calledWithMatch('output/icon/index.js', "from './Eye.jsx';");
         });
 
         it('should be able to customize "componentName"', async () => {
-            const writeFileSync = sinon.stub(fs, 'writeFileSync');
-
             await outputter({
                 output: 'output',
                 getComponentName: (options) => `${options.basename}`,
             })(pages);
 
-            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/eye.jsx', 'function eye(props) {');
+            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/eye.jsx');
             expect(writeFileSync.secondCall).to.be.calledWithMatch('output/fakePage/icon/index.js', "from './eye.jsx';");
         });
 
         it('should be able to customize "fileExtension"', async () => {
-            const writeFileSync = sinon.stub(fs, 'writeFileSync');
-
             await outputter({
                 output: 'output',
                 getFileExtension: () => '.js',
             })(pages);
 
-            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/Eye.js', 'function Eye(props) {');
+            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/Eye.js');
             expect(writeFileSync.secondCall).to.be.calledWithMatch('output/fakePage/icon/index.js', "from './Eye.js';");
         });
 
         it('should be able to customize "svgrConfig"', async () => {
-            const writeFileSync = sinon.stub(fs, 'writeFileSync');
-
             await outputter({
                 output: 'output',
                 getSvgrConfig: () => ({ native: true }),
             })(pages);
 
-            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/Eye.jsx', 'from "react-native-svg"');
+            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/Eye.jsx');
+            expect(svgrAsync.firstCall).to.be.calledWithMatch(figmaDocument.componentWithSlashedName.svg, { native: true });
         });
     });
 });