The latest articles on DEV Community by Bilel Jegham (@bileljegham). https://dev.to/bileljegham https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F328824%2F1dc715ef-80fe-47e4-8e4e-03baa9125699.jpeg https://dev.to/bileljegham en Bilel Jegham Wed, 09 Sep 2020 11:54:41 +0000 https://dev.to/bileljegham/tests-build-deliver-vue-project-with-storybook-1cpb https://dev.to/bileljegham/tests-build-deliver-vue-project-with-storybook-1cpb <h3> My Workflow </h3> <p>This Github Action workflow presents a complete testing process with Unit Tests, e2e Tests and visual Tests for a Vuejs project.</p> <p>The project includes Storybook module useful to isolate components and make visual tests.</p> <h4> Step of the workflow </h4> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ANynja_W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/g8fnqp69888dvykq1jr1.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ANynja_W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/g8fnqp69888dvykq1jr1.png" alt="workflow"></a></p> <ol> <li>Launch lint</li> <li>Launch Unit Test and send coverage report to <a href="https://codecov.io/">CodeCov</a> with <a href="https://github.com/marketplace/actions/codecov">CodeCov Action </a> </li> <li>Launch e2e Test</li> <li>Launch build</li> <li>Launch Storybook build and test all components with <a href="https://www.chromatic.com/">Chromatic</a> and <a href="https://github.com/marketplace/actions/chromatic-action">Chromatic Action</a> </li> </ol> <h3> Submission Category: </h3> <p>Maintainer Must-Haves</p> <h3> Yaml File or Link to Code </h3> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vJ70wriM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/github-logo-ba8488d21cd8ee1fee097b8410db9deaa41d0ca30b004c0c63de0a479114156f.svg" alt="GitHub logo"> <a href="https://github.com/idesys-dev"> idesys-dev </a> / <a href="https://github.com/idesys-dev/jeh-maker"> jeh-maker </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <h1> IdéSYS- JEHMaker</h1> <p><a href="https://jeh-marker-storybook.netlify.com" rel="nofollow"><img src="https://camo.githubusercontent.com/4c64e07178937065fd61d9ba90de13291394dd56/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f73746f7279626f6f6b6a732f6272616e64406d61737465722f62616467652f62616467652d73746f7279626f6f6b2e737667" alt="Storybook"></a> <a rel="noopener noreferrer" href="https://github.com/idesys-dev/jeh-maker/workflows/CI/badge.svg"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JgFa9s8R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/idesys-dev/jeh-maker/workflows/CI/badge.svg" alt='"Github Action"'></a><a href="https://www.codefactor.io/repository/github/idesys-dev/jeh-maker" rel="nofollow"><img src="https://camo.githubusercontent.com/de9a71f9c993bbac049d464796bd60a5c9aee372/68747470733a2f2f7777772e636f6465666163746f722e696f2f7265706f7369746f72792f6769746875622f6964657379732d6465762f6a65682d6d616b65722f6261646765" alt="CodeFactor"></a><a href="https://codecov.io/gh/idesys-dev/jeh-maker" rel="nofollow"><img src="https://camo.githubusercontent.com/c12b94458a0ec861debdbd0725241dc2d73d2ba9/68747470733a2f2f636f6465636f762e696f2f67682f6964657379732d6465762f6a65682d6d616b65722f6272616e63682f6d61737465722f67726170682f62616467652e737667" alt="codecov"></a></p> <blockquote> <p><a href="https://github.com/idesys-dev/jeh-maker">https://github.com/idesys-dev/jeh-maker</a></p> </blockquote> <h2> A propos</h2> <p>Le Jeh Marker est un outil dédié aux Junior-Entreprises pour l'accompagnement dans la création d'un budget.</p> <h2> Commandes</h2> <div class="highlight highlight-source-shell"><pre><span class="pl-c"><span class="pl-c">#</span> Project setup</span> npm install <span class="pl-c"><span class="pl-c">#</span> Compiles and hot-reloads for development</span> npm run serve <span class="pl-c"><span class="pl-c">#</span> Compiles and minifies for production</span> npm run build <span class="pl-c"><span class="pl-c">#</span> Run your tests</span> npm run <span class="pl-c1">test</span> <span class="pl-c"><span class="pl-c">#</span> Lints and fixes files</span> npm run lint <span class="pl-c"><span class="pl-c">#</span> Run your unit tests</span> npm run test:unit</pre></div> </div> </div> <br> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/idesys-dev/jeh-maker">View on GitHub</a></div> <br> </div> <br> <h3> Additional Resources / Info </h3> <ul> <li><a href="https://storybook.js.org/">https://storybook.js.org/</a></li> <li><a href="https://www.chromatic.com/">https://www.chromatic.com/</a></li> <li><a href="https://vuejs.org/">https://vuejs.org/</a></li> </ul> actionshackathon vue storybook testing