openfoodnetwork/spec/javascripts/stimulus/variant_controller_test.js

/**
 * @jest-environment jsdom
 */

import { Application } from "stimulus";
import variant_controller from "controllers/variant_controller";


describe("VariantController", () => {
  beforeAll(() => {
    // Requires global var from page
    global.ofn_available_units_sorted = {
      "weight": {
       "1.0":{"name":"g","system":"metric"},
       "1000.0":{"name":"kg","system":"metric"},
       "1000000.0":{"name":"T","system":"metric"}
      },
      "volume":{
        "0.001":{"name":"mL","system":"metric"},
        "1.0":{"name":"L","system":"metric"},
        "4.54609":{"name":"gal","system":"imperial"},
        "1000.0":{"name":"kL","system":"metric"}
       }
    };

    const mockedT = jest.fn();
    mockedT.mockImplementation((string, opts) => (string + ', ' + JSON.stringify(opts)));

    global.I18n =  { t: mockedT };

    const application = Application.start();
    application.register("variant", variant_controller);
  });

  afterAll(() => {
    delete global.I18n;
  })

  describe("variant_unit_with_scale", () => {
    beforeEach(() => {
      document.body.innerHTML = `
        <div data-controller="variant">
          <input id="variant_unit" name="[products][0][variants_attributes][0][variant_unit]" value="weight">
          <input id="variant_unit_scale" name="[products][0][variants_attributes][0][variant_unit_scale]" value="1.0">
          <select id="variant_unit_with_scale" name="[products][0][variants_attributes][0][variant_unit_with_scale]">
            <option selected="selected" value="weight_1">Weight (g)</option>
            <option value="weight_1000">Weight (kg)</option>
            <option value="volume_4.54609">Volume (gal)</option>
            <option value="items">Items</option>
          </select>
          <input id="variant_unit_name" name="[products][0][variants_attributes][0][variant_unit_name]" type="text" >
          <button id="unit_to_display" name="[products][0][variants_attributes][][0][unit_to_display]" type="submit" >2kg</button>
          <input id="unit_value" name="[products][0][variants_attributes][0][unit_value]" value="2000.0"  >
          <input id="unit_description" name="[products][0][variants_attributes][0][unit_description]" >
          <input id="unit_value_with_description" name="[products][0][variants_attributes][0][unit_value_with_description]" value="2" type="text" >
          <input id="display_as" name="[products][0][variants_attributes][0][display_as]" placeholder="2kg" type="text" >
        </div>
      `;
    });

    describe("change", () => {
      it("weight_1000", () => {
        variant_unit_with_scale.selectedIndex = 1;
        variant_unit_with_scale.dispatchEvent(new Event("change"));

        expect(variant_unit.value).toBe("weight");
        expect(variant_unit_scale.value).toBe("1000");
      });

      it("volume_4.54609", () => {
        variant_unit_with_scale.selectedIndex = 2;
        variant_unit_with_scale.dispatchEvent(new Event("change"));

        expect(variant_unit.value).toBe("volume");
        expect(variant_unit_scale.value).toBe("4.54609");
      });

      it("items", () => {
        variant_unit_with_scale.selectedIndex = 3;
        variant_unit_with_scale.dispatchEvent(new Event("change"));

        expect(variant_unit.value).toBe("items");
        expect(variant_unit_scale.value).toBe("");
      });
    })
  });
});