yeoman/generator-webapp

How to include the source files I want to test?

hcbh96 opened this issue · 1 comments

There are two similar threads to this at #4 - the answer provided leads to this #101

I havn't found that any of them yet really answer the question of how to inlcude the source files I want to test - I'm gonna go onto read the gulp documentation https://github.com/gulpjs/gulp/tree/master/docs

I am currently trying to unit test the following function
I've included my source and spec files like so

  <!-- include source files here... -->
  <script type="text/javascript" src="../app/scripts/textarea-auto-resize.js"></script>
  <script type="text/javascript" src="../app/main.js"></script>

  <!-- include spec files here... -->
  <script src="spec/test.js"></script>
  <!-- <script src="spec/unit/textarea-auto-resize.test.js"></script> -->

The problem is of course that this ../app/scripts/textarea-auto-resize.js doesn't work as the folder structure is like so

-app/
    -scripts/
        -textarea-auto-resize.js
-test/
    -index.html (base html for tests)
       -spec/
           -unit-test/

I beleive I need to add something more to my gulpfile or my gulpfile is slightly off but not quite sure yet - the scripts function in the gulp file looks like so...

  return src('app/scripts/**/*.js')
    .pipe($.plumber())
    .pipe($.if(!isProd, $.sourcemaps.init()))
    .pipe($.babel())
    .pipe($.if(!isProd, $.sourcemaps.write('.')))
    .pipe(dest('.tmp/scripts'))
    .pipe(server.reload({ stream: true }));
}```

For anyone else asking this question I've dug a bit deeper with this ... understanding GULP is really helpful and here is a great video to help you do just that

https://www.youtube.com/watch?v=1rw9MfIleEg

This issue helps to understand what I was doing wrong

https://teamtreehouse.com/community/having-trouble-testing-in-yeoman-gulpwebapp

Basically though the test suit in my case does work!! 🤦‍♀️

I just needed to change the script tag for ...
<script type="text/javascript" src="../app/scripts/textarea-auto-resize.js"></script>
to
<script type="text/javascript" src="/scripts/textarea-auto-resize.js"></script>

This is because when running
"serve:test": "cross-env NODE_ENV=test gulp serve",

The Gulp file calls this series...
serve = series(clean, scripts, startTestServer);

The final function in this series looks like so...

server.init({
 notify: false,
 port,
 ui: false,
 server: {
   baseDir: 'test',
   routes: {
     '/scripts': '.tmp/scripts',
     '/node_modules': 'node_modules',
   },
 },
});

And under routes you can see the '/scripts': '.tmp/scripts',

Therefore my script inclusion tag has to start with /scripts instead of ../app/scripts

I've learned lots and now get and like gulp 👍 so I am one happy coder 🤓