Shotgun Surgery + Unit Testing

[yFaizuS]

cart.js

```javascript ajaxRequest( 'api/basket', //Integrasi dengan API basket menggunakan endpoint get untuk menampilkan semua data yang ada di api Basket 'GET', JSON.stringify(data), function (response) { getCart(response) }, function (jqXHR, textStatus, errorThrown) { }, headers ); ``` ```javascript ajaxRequest( `api/basket/dish/${id}`, 'POST', JSON.stringify(data), function (response) { alert("Berhasil menambahkan ke cart") }, function (jqXHR, textStatus, errorThrown) { if (jqXHR.status == 200) { getCartAjax() } else { alert("Gagal menambahkan ke cart") } }, headers ); ``` ```javascript ajaxRequest( `api/basket/dish/${id}?increase=${bool}`, 'DELETE', JSON.stringify(data), function (response) { getCartAjax() alert("asu") }, function (jqXHR, textStatus, errorThrown) { if (jqXHR.status == 200) { getCartAjax() if (bool == false) { alert("berhasil mengahapus dari cart") } } else { alert("gagal mengahapus dari cart") } }, headers ); ``` The Code is mainly Dependant to the API headers and endpoint. if there is a change to the API some changes need to be done to some of the functions

[LidiaIvanova]

0,8

[yFaizuS]

Code Flaw The Code is mainly Dependant to the API headers and endpoint. if there is a change to the API some changes need to be done to some of the functions as such we will try to test by modifiying the API

1.Testing the changes of API in ajaxRequest Function from the getCartAjax by changing the api location

  const getCartAjax = () => {
    const data = "";
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    };
    ajaxRequest(
      'api/dish', //Integrasi dengan API basket menggunakan endpoint get untuk menampilkan semua data yang ada di api Basket
      'GET',
      JSON.stringify(data),
      function (response) {
        getCart(response)
      },
      function (jqXHR, textStatus, errorThrown) {
      },
      headers
    );
  }

by changing the api/basket into another api for example we use api/dish the result will be an error in getting the API data it because it is dependant on the API headers

2.Testing the changes of API in ajaxRequest Function from the getCartAjax by adding a more specified location in the API

  const getCartAjax = () => {
    const data = "";
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    };
    ajaxRequest(
      'api/basket/dish', //Integrasi dengan API basket menggunakan endpoint get untuk menampilkan semua data yang ada di api Basket
      'POST',
      JSON.stringify(data),
      function (response) {
        getCart(response)
      },
      function (jqXHR, textStatus, errorThrown) {
      },
      headers
    );
  }

here we use the api/basket/dish and also changed from GET to POST then the test shows an error due to the change of API

3. Testing the changes of API in ajaxRequest function from the addCart by changing the API location address

  const addCart = (id) => {
    const data = "";
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    };
    // Fungsi untuk menambahkan cart dengan endpoint POST pada halaman menu
    ajaxRequest(
      `api/dish/{id}`,
      'POST',
      JSON.stringify(data),
      function (response) {
        alert("Berhasil menambahkan ke cart")
      },
      function (jqXHR, textStatus, errorThrown) {
        if (jqXHR.status == 200) {
          getCartAjax()
        } else {
          alert("Gagal menambahkan ke cart")
        }
      },
      headers
    );
  }

so we change from api/basket/dish/${id} into another api location for example api/dish/{id} it will show an error thus the test shows the dependancies of the code towards API's and it shows dependancy on the API request from before, fromt the getCartAjax

4. Testing the changes of API in ajaxRequest function from the removeCart by changing the API location address

const removeCart = (id, bool) => {
    const data = ""; 
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    };
    // Fungsi untuk menghapus cart dengan menggunakan endpoint DELETE
    ajaxRequest(
      `api/basket/dish/${id}?increase=${bool}`,
      'DELETE',
      JSON.stringify(data),
      function (response) {
        getCartAjax()
        alert("asu")
      },
      function (jqXHR, textStatus, errorThrown) {
        if (jqXHR.status == 200) {
          getCartAjax()
          if (bool == false) {
            alert("berhasil mengahapus dari cart")
          }
        } else {
          alert("gagal mengahapus dari cart")
        }
      },
      headers
    );
  }

here we change the API from api/basket/dish/${id}?increase=${bool} into for example api/dish/${id} it shows an error showing a dependancy towards API requests

5. Testing of removing the API request from ajaxRequest Function from the getCartAjax

  const getCartAjax = () => {
    const data = "";
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    };
    ajaxRequest(
     // 'api/basket', //Integrasi dengan API basket menggunakan endpoint get untuk menampilkan semua data yang ada di api Basket
      'GET',
      JSON.stringify(data),
      function (response) {
        getCart(response)
      },
      function (jqXHR, textStatus, errorThrown) {
      },
      headers
    );
  }

here we remove the API request by remarking the request 'api/basket' it will show an error, shows the dependancy towards the API request

6. Testing of removing the API request from ajaxRequest Function from the addCart

const addCart = (id) => {
    const data = "";
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    };
    // Fungsi untuk menambahkan cart dengan endpoint POST pada halaman menu
    ajaxRequest(
     // `api/basket/dish/${id}`,
      'POST',
      JSON.stringify(data),
      function (response) {
        alert("Berhasil menambahkan ke cart")
      },
      function (jqXHR, textStatus, errorThrown) {
        if (jqXHR.status == 200) {
          getCartAjax()
        } else {
          alert("Gagal menambahkan ke cart")
        }
      },
      headers
    );
  }

We remove the API request above by remarking it, the result shows an error thus showing dependancy towards API

7. Testing of removing the API request from ajaxRequest Function from the removeCart

const removeCart = (id, bool) => {
    const data = "";
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    };
    // Fungsi untuk menghapus cart dengan menggunakan endpoint DELETE
    ajaxRequest(
     // `api/basket/dish/${id}?increase=${bool}`,
      'DELETE',
      JSON.stringify(data),
      function (response) {
        getCartAjax()
        alert("asu")
      },
      function (jqXHR, textStatus, errorThrown) {
        if (jqXHR.status == 200) {
          getCartAjax()
          if (bool == false) {
            alert("berhasil mengahapus dari cart")
          }
        } else {
          alert("gagal mengahapus dari cart")
        }
      },
      headers
    );
  }

we remove the API request by remarking it the test shows an error, thus showing a dependancy towards the API requests

[yFaizuS]

Code for Unit testing

getCartAjax Function

const jquery = require('jquery');
const { JSDOM } = require('jsdom');
const localStorageMock = require('jest-localstorage-mock');

const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
const { window } = dom;

global.window = window;
global.document = window.document;
global.$ = jquery(window);

const { getCartAjax } = require('./cart.js');
const ajaxRequest = require('./ajaxRequest');

jest.mock('./ajaxRequest', () => jest.fn());

describe('Profile', () => {
  describe('getCartAjax', () => {
    it('should fetch cart data and update UI', async () => {
      // Set up the necessary variables and mocks
      const mockResponse = [
        { id: 1, name: 'Item 1', price: 10 },
        { id: 2, name: 'Item 2', price: 15 },
      ];
      const getCartMock = jest.fn();

      ajaxRequest.mockReturnValue(Promise.resolve(mockResponse));

      // Call the getCartAjax function
      console.log('calling ajaxRequest...');
      await getCartAjax();

      // Assert that the expected API request is made
      expect(ajaxRequest).toHaveBeenCalledWith(
        'api/basket',
        'GET',

        '',
        expect.any(Function),
        expect.any(Function),
        expect.objectContaining({
            'Authorization' : expect.any(String),
            'Content-Type' : expect.any(String)
        })
      );

      // Assert that the getCart function is called with the mocked response
      expect(getCartMock).toHaveBeenCalledWith(mockResponse);

      // You can also assert any other expectations related to the UI update

      // Restore the original implementation of ajaxRequest
      ajaxRequest.mockRestore();
    });
  });
});

This test shows that the API request works but have encountered en error as it does not have the expected output but it proves that it take the data for the code to run from the API

Addcart Function

const jquery = require('jquery');
const { JSDOM } = require('jsdom');
const localStorageMock = require('jest-localstorage-mock');

const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
const { window } = dom;

global.window = window;
global.document = window.document;
global.$ = jquery(window);

const { getCartAjax } = require('./cart.js');
const ajaxRequest = require('./ajaxRequest');

jest.mock('./ajaxRequest', () => jest.fn());

describe('Profile', () => {
  describe('getCartAjax', () => {
    it('should fetch cart data and update UI', async () => {
      // Set up the necessary variables and mocks
      const mockResponse = [
        { id: 1, name: 'Item 1', price: 10 },
        { id: 2, name: 'Item 2', price: 15 },
      ];
      const getCartMock = jest.fn();

      ajaxRequest.mockReturnValue(Promise.resolve(mockResponse));

      // Call the getCartAjax function
      console.log('calling ajaxRequest...');
      await getCartAjax();
      const id = '3fa85f64-5717-4562-b3fc-2c963f66afa6';

      // Assert that the expected API request is made
      expect(ajaxRequest).toHaveBeenCalledWith(
        `api/basket/dish/${id}`,
      'POST',
        '',
        expect.any(Function),
        expect.any(Function),
        expect.objectContaining({
            'Authorization' : expect.any(String),
            'Content-Type' : expect.any(String)
        })
      );

      // Assert that the getCart function is called with the mocked response
      expect(getCartMock).toHaveBeenCalledWith(mockResponse);

      // You can also assert any other expectations related to the UI update

      // Restore the original implementation of ajaxRequest
      ajaxRequest.mockRestore();
    });
  });
});

The test purpose is to check if the API request is successful, which asserts that the function is dependant with the API

removeCart

const jquery = require('jquery');
const { JSDOM } = require('jsdom');
const localStorageMock = require('jest-localstorage-mock');

const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
const { window } = dom;

global.window = window;
global.document = window.document;
global.$ = jquery(window);

const { getCartAjax } = require('./cart.js');
const ajaxRequest = require('./ajaxRequest');

jest.mock('./ajaxRequest', () => jest.fn());

describe('Profile', () => {
  describe('getCartAjax', () => {
    it('should fetch cart data and update UI', async () => {
      // Set up the necessary variables and mocks
      const mockResponse = [
        { id: 1, name: 'Item 1', price: 10 },
        { id: 2, name: 'Item 2', price: 15 },
      ];
      const getCartMock = jest.fn();

      ajaxRequest.mockReturnValue(Promise.resolve(mockResponse));

      // Call the getCartAjax function
      console.log('calling ajaxRequest...');
      await getCartAjax();
      const id = '3fa85f64-5717-4562-b3fc-2c963f66afa6';
      const bool = 'true';
      // Assert that the expected API request is made
      expect(ajaxRequest).toHaveBeenCalledWith(
        `api/basket/dish/${id}?increase=${bool}`,
      'DELETE',
        '',
        expect.any(Function),
        expect.any(Function),
        expect.objectContaining({
            'Authorization' : expect.any(String),
            'Content-Type' : expect.any(String)
        })
      );

      // Assert that the getCart function is called with the mocked response
      expect(getCartMock).toHaveBeenCalledWith(mockResponse);

      // You can also assert any other expectations related to the UI update

      // Restore the original implementation of ajaxRequest
      ajaxRequest.mockRestore();
    });
  });
});

the test shows what the data's received although it isn't as expected out put but it shows dependancy towards API