Having Trouble Setting Up a Proxy for my File in Typescript - Can't Locate it or Get it to Serve

Latest Update

I discovered that placing my KioskTemplates.html file at the root of my testing folder resolved the issue. However, I am still curious if there is a way to use a relative path instead. Do I need to adjust the "basePath" in my karma.conf file to achieve this?

The Current Scenario:

  1. I have a Typescript module that requires testing with Karma/Jasmine
  2. Within this module, there is a class containing a method named renderUI
  3. This method utilizes a jQuery $.get method to retrieve a Mustache template from an HTML file
  4. My objective is to test this functionality using Karma/Jasmine
  5. Including the file in karma.conf.js with "included:false, serve:true"
  6. I am attempting to proxy it as "/KioskTemplates.html" to fulfill the $.get request

Challenges Faced:

  1. The test continues to fail with a

WARN [web-server] : 404: /base/KioskTemplates.html

  1. Even after trying an absolute path to include the file, I am unable to locate it on the web server.

If you have any suggestions or assistance, please share!

Here is the relevant code:

Below is the renderUI method snippet:

        
public renderUI() {
        var visitReasonData = this.setupVisitReasonData()
        var thePromise:Observable<any> = new Observable(observer => {
            $.get('KioskTemplates.html', templates => {  
                let theTemplate = $(templates).filter('#tmpVisitReasons').html();
                let html = Mustache.to_html(theTemplate, visitReasonData);
                $('#tblVisitReasons').html(html);
                applyFontSize('.Panels', this.page);
                changeColorsFromArray([
                    '.fa-circle-thin','.fa-check','.fa-square-o','.fa-check-square-o','.fa-arrow-circle-o-right','.fa-arrow-circle-o-left','.fa-text-height'],
                    '.formbutt',
                    'background-color'
                )
                window.scrollTo(0, 0);
            }).done(() => { observer.next(true) })
        })
        return thePromise
    }

Additionally shared is my karma.conf.js configuration:

    
module.exports = function(config) {
      config.set({
        basePath: '',
        frameworks: ['jasmine','karma-typescript','fixture'],
        files: [
          '../secrets.ts',
          'tests/*.ts',
          "../node_modules/font-awesome/css/**/*.css",
          "../../../../Websites/VirtualOneStop/Vos/vosnet/JavaScript/StaffEfficiency/source/*.ts",
          "../../../../Websites/VirtualOneStop/Vos/vosnet/JavaScript/StaffEfficiency/entry-points/*.ts",
          "tests/**/*.json", 
          { pattern: '../../../../Websites/VirtualOneStop/Vos/vosnet/OneStopEfficiency/KioskTemplates.html', included:true, served:true }
        ],
        proxies : {
          '/KioskTemplates.html':'/base/KioskTemplates.html'
        },
        karmaTypescriptConfig: {
          compilerOptions: {...},
          include: [...],
          exclude: [...]
        },
        preprocessors: {
          "../../../../Websites/VirtualOneStop/Vos/vosnet/JavaScript/StaffEfficiency/source/*.ts":['karma-typescript'],
          ...
        },
        reporters: ['dots'],
        jsonFixturesPreprocessor: {...},
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false,
      })
}

The encountered error:


Chrome 60.0.3112 (Windows 7 0.0.0): Executed 218 of 218 (1 FAILED) (6.172 secs / 5.603 secs)
21 09 2017 11:23:10.577:INFO [compiler.karma-typescript]: Compiling project using Typescript 2.5.2
...
LOG: true
...
LOG: 0
.
Chrome 60.0.3112 (Windows 7 0.0.0): Executed 218 of 218 SUCCESS (1.241 secs / 0.62 secs)

Answer №1

After some trial and error, I finally found the solution.

The root cause of my issue was that the basePath value needed to be set as the actual base path.

Instead of the previous configuration, I made the following adjustment:

config.set({
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '../../../../../Source',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine', 'karma-typescript'],

    // list of files / patterns to load in the browser
    files: [
      { pattern: "Websites/VirtualOneStop/Vos/vosnet/OneStopEfficiency/KioskTemplates.html", included: false, served: true, nocache: true },
      { pattern:"Websites/VirtualOneStop/Vos/vosnet/JavaScript/StaffEfficiency/source/**/*.ts"},
      { pattern:"Testing/JavascriptUnitTests/StaffEfficiency/VOSGreeter/KioskVisitReasonsTest.ts"},
    ],

    proxies: {
      "/KioskTemplates.html": "/base/Websites/VirtualOneStop/Vos/vosnet/OneStopEfficiency/KioskTemplates.html"},

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

I am encountering syntax errors with the @Page decorator and constructor () while working on the Ionic 2 template project

Recently, I created an Ionic 2 beta app, but encountered syntax errors when opening it in Visual Studio (VS) 2015. The errors were present inside all the .js files for the @Page decorator and the contructor () { }. As a newcomer to Ionic 2, pinpointing whe ...

React encounters an unfamiliar issue: "index.js:63 Uncaught TypeError: Unable to access property 'nodeName' of a null value"

Utilizing React and Bootstrap to generate a dialog (removed unnecessary elements, but encountering persistent error): import React, { Component, } from 'react'; import { Modal, } from 'react-bootstrap'; class MyDialog_Mul ...

Combining Angular subscriptions to fetch multiple data streams

I am looking to retrieve the most recent subscription from a group of subscriptions. Whenever the value of my FormControl changes, I want to capture only the latest value after the user has finished typing. Below is the code snippet I am using - let cont ...

Substitute all properties of a specific type with a predetermined value in Typescript using recursive substitution

If we consider the given type structure: type Person = { name: string age: number experience: { length: number title: string } } Can we create a type like this: type FieldsOfPerson = { name: true age: true experience: { length: t ...

There is an issue with the Svelte TypeScript error related to the $: syntax, specifically stating that a declaration cannot be used in a

I encountered an issue where I am receiving the error message "Cannot use a declaration in a single-statement context" while using $: syntax in a script with lang="ts" within my +page.svelte file. Additionally, when I check the version control system (VCS) ...

Ensure that the MUI icon color is set accurately

I created a functional component to set default values for react-admin's BooleanField. Here is the code: import ClearIcon from '@mui/icons-material/Clear' import DoneIcon from '@mui/icons-material/Done' import get from ...

Including a screenshot in the allure report

I am struggling to figure out how to include a screenshot in my allure report using cypress and mocha-allure-reporter. Despite the report generating correctly, I have not been able to find any examples or guidance on how to set it up and add screenshots ...

Is there a way to ensure that Tailwind CSS loads before rendering components in NextJS?

While developing my web application, I encountered an issue with the tailwind CSS styling. The styles seem to load correctly, but there is a slight delay before they take effect. This results in users seeing the unstyled version of the website briefly befo ...

Utilizing child component HTTP responses within a parent component in Angular: a comprehensive guide

As a newcomer to Angular, I find myself struggling with http requests in my application. The issue arises when I have component A responsible for retrieving a list of IDs that need to be accessed by multiple other components. In component B, I attempted t ...

How do I activate Angular/Backbone/jQuery intellisense in VSCode for a project that does not have a package.json file?

Currently, I find myself at a standstill trying to enable code autocompletion for popular libraries like BackboneJS, Angular, and jQuery. Unfortunately, the recommended method provided by the VS Code official documentation is not accessible to me (which in ...

The type {properties .....} is incompatible with the type ActionReducer<AdminState, Action> in Angular 12 using NGRX

Implementing NGRX library for redux to organize the state of the application in a structured way: export interface ApplicationState { adminState: AdminState } export interface AdminState { adminProductCategory: ProductCategoryState; adminProdu ...

What is the best way to provide inputs to a personalized validation function?

I am seeking a solution to pass an array of prefix strings to my custom validator in order to validate that the value begins with one of the specified prefixes. Below is the code snippet for my current validator: @ValidatorConstraint({ name: 'prefixVa ...

Unable to achieve any outcomes with the @input directive in Angular

I've seen this question asked before with a lot of answers available through Google search. However, I'm still unable to figure out what I'm doing wrong in passing a value from one component to another. Here's what I have tried: < ...

utilize Angular's interface-calling capabilities

In the backend, I have an interface structured like this: export interface DailyGoal extends Base { date: Date; percentage: number; } Now, I am attempting to reference that in my component.ts file import { DailyGoal } from '../../interfaces' ...

Exploring Angular2: Understanding how to retrieve an object with an unknown key

I am trying to showcase a specific value from different objects within a template. The path of the desired value depends on the object being referenced. For example: let obj = { "a": "a", "b": { "1": "1", "2": "READ ME" } } let ...

A secure method for converting a key and a corresponding value into an object containing only that specific key/value pair

I need to implement a function called valueToObject that takes a key and a value as arguments and returns an object with that key and value pair, like this: valueToObject('myKey', 3); // should yield {myKey: 3} I attempted to write the followin ...

Issue with the declaration of custom types in Typescript

I've created a type declaration for r-dom as shown below: /// <reference types="react" /> declare module 'r-dom' { interface IRDOMFacade extends React.ReactDOM { (component: React.Component<any, any>, properties?: ...

Is it feasible to link an Angular property value to the value of an HTML data attribute?

Can an Angular property value be bound to a data attribute on a template element? <h1 data-name="{{name}}">Hello from {{ name }}!</h1> Example Link After running the code, it results in the following error: Error in src/main.ts (11: ...

Enzyme tests using the mount() method are unable to access the content of React modal dialogs

Having a React component with a modal dialog (using reactstrap, but similar issues reported with react-bootstrap and other modal components). Enzyme is unable to locate any components within the modal, even though they are visible in the app. Here is a bas ...

Guide to Utilizing the Dracula Graph Library in Angular

Recently, I stumbled upon a JavaScript library that seems to be an ideal fit for my project. The library can be found at: After installing the necessary libraries using npm - npm i raphael graphdracula - new folders were created in node_modules and th ...