Linking my JS file to the Jasmine spec file

In an attempt to create tests for my tic-tac-toe game, I encountered some errors stating 'ReferenceError: CountClick is not defined' and 'ReferenceError: Board is not defined'.

My assumption is that the TicTacToeSpec file is having trouble accessing my TicTacToe.js file. How can I establish a connection between the two?

Location of TicTacToeSpec file: spec/javascripts/TicTacToeSpec.js


   describe('Count clicks', function() {                     
     it('adds 1 to counter when clicked', function() {       
       counter = 0;                                          
       CountClick();                                         
       expect(counter).toEqual(1);                           
     });                                                     
   });

Location of index.html:


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type='text/javascript'></script>
  <script src="TicTacToe.js"></script>
  <script src="spec/javascripts/TicTacToeSpec.js"></script>

Contents of Gemfile:


  gem 'jquery-rails', '~> 2.0.0'
  gem 'jasmine'
  gem 'jasminerice'

Content of TicTacToe.js:


 function CountClick() {
   counter++;
 };

 function Board() {
   this.initialBoard();
   this.newBoard();
   game.firstMove();
 }

Answer №1

Check out the file structure of Pivotal's Jasmine at this link and incorporate the lib file into your project with a similar index page setup.

Answer №2

To successfully run your tests, ensure that both TicTacToe.js and TicTacToeSpec.js are added to your HTML test environment. It appears that the code snippet you shared is missing the inclusion of TicTacToe.js. To rectify this, make sure to include the following scripts:

<script src="path/to/TicTacToe.js"></script>
<script src="spec/javascripts/TicTacToeSpec.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps should I follow to set JSONP as the dataType for a request in an Angular $http service?

I have a good understanding of how to use jQuery's $.ajax: $.ajax({ url: //twitter endpoint, method:"GET", dataType:"jsonp", success:function() { //stuff } }); Is there a way to set the JSONP datatype for an angular $http service reque ...

Issues have arisen with the @keydown.ctrl and @keyup.ctrl event modifiers in Vue.js, as they are not properly responding

I have a project in VueJS where I need to implement a custom context menu that will pop up when the user hovers over specific elements on the page. This context menu is dynamic, meaning it changes as the user moves between different items. If the user hold ...

What is the best way to distinguish between relative blocks and convert them to absolute positioning?

What is the best way to locate relative blocks and convert them to absolute position while keeping them in the same place? Is this something that can be achieved using JavaScript or jQuery, or is it simply not possible? Thank you very much. ...

Is there a way to show new chat messages instantly without needing to refresh the entire page?

Creating a real-time chat application presents the challenge of displaying new messages instantly without requiring a page reload. Exploring different methods like reloading only the chat message container or treating new messages as individual chatMessage ...

Creating a Form with Dynamic HTML when Button is Clicked

I have been working on enhancing the functionality of my website app located at , but unfortunately, I have not been successful so far. My goal is to introduce a vendor information form with just one click of a button and then enable users to add products ...

The integration of Zoom SDK with React and Node inevitably leads to encountering errors

I have been struggling to integrate zoomsdk into my react app and have followed all the steps mentioned here. The backend part is functioning properly, and I am receiving the signature response. However, when attempting to run the frontend portion, I encou ...

Page redirects automatically after AJAX call

I'm a beginner when it comes to using AJAX and I am trying to delete a student from a list through an AJAX request. I want the response of the request to be displayed on the same page within a specific div, but instead, the response keeps redirecting ...

pm2 initiates two identical processes using distinct versions

I am currently using pm2 version 4.2.3 Upon executing the command: pm2 start node launchers/engine_launcher.js --name "engine", it initiates the following processes: id │ name │ namespace │ version │ mode │ pid - ...

I seem to be experiencing difficulty receiving the JavaScript alert on my controller page

In my ActionResult function, I have the following code: public ActionResult Copy( int bvVariableid ) { var iReturn = _bvRepository.CopyBenefitVariable( bvVariableid, CurrentHealthPlanId, CurrentControlPlanId, _bvRepository.GetSecInfo( ).UserId ...

Tailwind CSS compilation failure | Unexpected token found at 26:33 in Acorn

While attempting to implement tailwindcss using default CSS, an unexpected issue arose... tailwindcss 2.0.2 ? Building from default CSS... (No input file provided) ? SyntaxError: Unexpected token (26:33) at _class.pp$4.raise (C:\xampp& ...

Middleware in Express.js designed to alter the response object

One method I'd like to explore is using middleware functions to alter the response. app.use(function(request, response, next) { .. do something .. next(); // moves to next middleware }); When it comes to modifying the request and response ob ...

Ensure that JavaScript functions are executed sequentially without overlapping

Important : Absolutely no jQuery allowed I have developed four distinct functions and I am looking to execute them sequentially, one after the other in JavaScript without using jQuery. I have scoured the internet for a solution but unfortunately have not ...

Create a timestamp with Javascript rendering

Looking to convert a Unix timestamp into a human-readable format without adjusting for my browser's timezone. For example, if the timestamp is 1400167800 (05 / 15 / 14 @ 3:30:00pm UTC) and my timezone is +2, how can I display this timestamp as ' ...

What is the best way to incorporate an object into the Redux state within a React application?

Every time I try to add an item (obj), I end up with an empty array. However, when I use useState, the data is saved in an array but only the last clicked item is added. I want to store the items in the state so that they can be used in other components. ...

The attribute selector specifically targets the number 3, excluding numbers such as 13 or 23 from being selected

Within a form, there is a segment that displays groups of 4 weeks in each division. Take a look at the code snippet provided below <div class="form-check" data-weeknr="1,2,3,4"></div> <div class="form-check" dat ...

"Resetting the state of a form in AngularJS2: A step-by

Looking to reset the form state from dirty/touched in angular? I am currently delving into the world of angular2 and working on a form with validation. In my journey, I came across this code snippet: <form *ngIf="booleanFlag">..</form> This ...

`Switching between two buttons: A guide`

Here is the codepin: https://jsfiddle.net/magicschoolbusdropout/dwbmo3aj/18/ I currently have a functionality in my code that allows me to toggle between two buttons. When I click on one button, content opens and then closes when clicked again. The same b ...

Combining mouse interactions with animated bar transitions

I want to create a graph with dynamic bar height transitions whenever it is drawn or redrawn. Once the bars are displayed, I would like mouse events (mouseenter, mouseleave, and mousemove) to trigger a tooltip showing information about the specific bar bei ...

When a selection is made, the tab changes to a new URL. However, what happens if the tab is closed during the next selection change?

Is there a way for me to detect if the user has closed the browser tab that I opened and redirected to a URL? Here is the code I have so far. It checks if the user changes the value of a select dropdown, then it verifies whether the browser window was alr ...

Save the URL from the newly opened tab into local storage

Trying to open a new tab from an existing one and saving the link of the newly opened tab in local storage. Despite using the following JS code, the link is not being stored locally. The original plan was to execute a callback once the tab had finished l ...