|
| 1 | +/** |
| 2 | + * @jest-environment jsdom |
| 3 | + */ |
| 4 | + |
| 5 | +const {getVariantFromSerializedArray} = require('@shopify/theme-product'); |
| 6 | +const {getUrlWithVariant, ProductForm} = require('../theme-product-form'); |
| 7 | +const productJSON = require('../__fixtures__/product-object.json'); |
| 8 | + |
| 9 | +const defaultVariant = productJSON.variants[0]; |
| 10 | +const defaultQuantity = 3; |
| 11 | +const defaultOptions = [ |
| 12 | + {name: 'Color', value: 'Silver'}, |
| 13 | + {name: 'Voltage', value: '220 Volts'}, |
| 14 | + {name: 'Size', value: 'Small'} |
| 15 | +]; |
| 16 | +const defaultProperties = [ |
| 17 | + {name: 'Message', value: 'derp'}, |
| 18 | + {name: 'Hidden', value: 'something'}, |
| 19 | + {name: 'Subscribe', value: 'true'} |
| 20 | +]; |
| 21 | + |
| 22 | +beforeEach(() => { |
| 23 | + document.body.innerHTML = ` |
| 24 | + <form id="form"> |
| 25 | + <select name="options[Color]"> |
| 26 | + <option value="Silver" selected="selected">Silver</option> |
| 27 | + <option value="Nickel">Nickel</option> |
| 28 | + <option value="Cobalt">Cobalt</option> |
| 29 | + <option value="White">White</option> |
| 30 | + </select> |
| 31 | +
|
| 32 | + <select name="options[Voltage]"> |
| 33 | + <option value="220 Volts" selected="selected">220 Volts</option> |
| 34 | + <option value="110 Volts">110 Volts</option> |
| 35 | + </select> |
| 36 | +
|
| 37 | + <input type="radio" name="options[Size]" value="Small" checked /> |
| 38 | + <input type="radio" name="options[Size]" value="Large" /> |
| 39 | +
|
| 40 | + <input type="number" name="quantity" value=3 /> |
| 41 | +
|
| 42 | + <input type="text" name="properties[Message]" value="derp" /> |
| 43 | + <input type="hidden" name="properties[Hidden]" value="something" /> |
| 44 | + <input type="checkbox" name="properties[Subscribe]" value="true" checked/> |
| 45 | + </form>`; |
| 46 | +}); |
| 47 | + |
| 48 | +function expectFormEventDataset( |
| 49 | + event, |
| 50 | + { |
| 51 | + options = defaultOptions, |
| 52 | + quantity = defaultQuantity, |
| 53 | + properties = defaultProperties |
| 54 | + } |
| 55 | +) { |
| 56 | + expect(event.dataset.options).toMatchObject(options); |
| 57 | + expect(event.dataset.variant).toMatchObject( |
| 58 | + getVariantFromSerializedArray(productJSON, options) |
| 59 | + ); |
| 60 | + expect(event.dataset.properties.length).toBe(properties.length); |
| 61 | + expect(event.dataset.properties).toMatchObject(properties); |
| 62 | + expect(event.dataset.quantity).toBe(quantity); |
| 63 | +} |
| 64 | + |
| 65 | +describe('getUrlWithVariant()', () => { |
| 66 | + test('is a function exported by theme-product.js', () => { |
| 67 | + expect(typeof getUrlWithVariant).toBe('function'); |
| 68 | + }); |
| 69 | + |
| 70 | + test('adds the "variant" query parameter if it does not exist in the URL', () => { |
| 71 | + expect(getUrlWithVariant('https://shop1.myshopify.com', 12345678)).toBe( |
| 72 | + 'https://shop1.myshopify.com?variant=12345678' |
| 73 | + ); |
| 74 | + }); |
| 75 | + |
| 76 | + test('replaces the value of the "variant" query parameter if it does already exist in the URL', () => { |
| 77 | + expect( |
| 78 | + getUrlWithVariant( |
| 79 | + 'https://shop1.myshopify.com?variant=12345678', |
| 80 | + 87654321 |
| 81 | + ) |
| 82 | + ).toBe('https://shop1.myshopify.com?variant=87654321'); |
| 83 | + }); |
| 84 | + |
| 85 | + test('only modifies the query parameter with the "variant" key', () => { |
| 86 | + expect( |
| 87 | + getUrlWithVariant( |
| 88 | + 'https://shop1.myshopify.com?variant=12345678&id=12345678', |
| 89 | + 87654321 |
| 90 | + ) |
| 91 | + ).toBe('https://shop1.myshopify.com?variant=87654321&id=12345678'); |
| 92 | + expect( |
| 93 | + getUrlWithVariant( |
| 94 | + 'https://shop1.myshopify.com?id=12345678&variant=12345678', |
| 95 | + 87654321 |
| 96 | + ) |
| 97 | + ).toBe('https://shop1.myshopify.com?id=12345678&variant=87654321'); |
| 98 | + expect( |
| 99 | + getUrlWithVariant('https://shop1.myshopify.com?id=12345678', 87654321) |
| 100 | + ).toBe('https://shop1.myshopify.com?id=12345678&variant=87654321'); |
| 101 | + }); |
| 102 | +}); |
| 103 | + |
| 104 | +describe('ProductForm()', () => { |
| 105 | + test('is a constructor', () => { |
| 106 | + const element = document.getElementById('form'); |
| 107 | + const productForm = new ProductForm(element, productJSON); |
| 108 | + |
| 109 | + expect(productForm).toBeInstanceOf(ProductForm); |
| 110 | + }); |
| 111 | + |
| 112 | + test('throws an error if the first argument is not a DOM element', () => { |
| 113 | + expect(() => new ProductForm(null, productJSON)).toThrowError(TypeError); |
| 114 | + }); |
| 115 | + |
| 116 | + test('throws an error if the second argument is not a valid product object', () => { |
| 117 | + const element = document.getElementById('form'); |
| 118 | + expect(() => new ProductForm(element)).toThrowError(TypeError); |
| 119 | + }); |
| 120 | + |
| 121 | + test('assigns the form element that was passed as the first argument to .element', () => { |
| 122 | + const element = document.getElementById('form'); |
| 123 | + const productForm = new ProductForm(element, productJSON); |
| 124 | + |
| 125 | + expect(productForm.element).toBe(element); |
| 126 | + }); |
| 127 | + |
| 128 | + test('assigns the product object that is passed as the second argument to .element', () => { |
| 129 | + const element = document.getElementById('form'); |
| 130 | + const productForm = new ProductForm(element, productJSON); |
| 131 | + |
| 132 | + expect(productForm.element).toBe(element); |
| 133 | + }); |
| 134 | + |
| 135 | + test('assigns all option inputs which have a name attribute that starts with "options" to .optionInputs', () => { |
| 136 | + const element = document.getElementById('form'); |
| 137 | + const productForm = new ProductForm(element, productJSON); |
| 138 | + |
| 139 | + expect(productForm.optionInputs.length).toBe(4); |
| 140 | + }); |
| 141 | + |
| 142 | + test('assign all quantity inputs which have the name attribute equal to "quantity" to .quantityInputs', () => { |
| 143 | + const element = document.getElementById('form'); |
| 144 | + const productForm = new ProductForm(element, productJSON); |
| 145 | + |
| 146 | + expect(productForm.quantityInputs.length).toBe(1); |
| 147 | + }); |
| 148 | + |
| 149 | + test('assign all property inputs which have the name attribute that starts with "properties" to .propertyInputs', () => { |
| 150 | + const element = document.getElementById('form'); |
| 151 | + const productForm = new ProductForm(element, productJSON); |
| 152 | + |
| 153 | + expect(productForm.propertyInputs.length).toBe(defaultProperties.length); |
| 154 | + }); |
| 155 | + |
| 156 | + test('calls the method assigned to the onOptionChange option when the value of an option input changes', () => { |
| 157 | + const element = document.getElementById('form'); |
| 158 | + const colorSelect = element.querySelector('[name="options[Color]"]'); |
| 159 | + const sizeSelects = element.querySelectorAll('[name="options[Size]"]'); |
| 160 | + const changeEvent = new Event('change'); |
| 161 | + const config = { |
| 162 | + onOptionChange: jest.fn() |
| 163 | + }; |
| 164 | + const options = [ |
| 165 | + {name: 'Color', value: 'Cobalt'}, |
| 166 | + {name: 'Voltage', value: '220 Volts'}, |
| 167 | + {name: 'Size', value: 'Large'} |
| 168 | + ]; |
| 169 | + |
| 170 | + // eslint-disable-next-line no-unused-vars |
| 171 | + const productForm = new ProductForm(element, productJSON, config); |
| 172 | + |
| 173 | + sizeSelects[0].removeAttribute('checked'); |
| 174 | + sizeSelects[1].setAttribute('checked', true); |
| 175 | + colorSelect.value = options[0].value; |
| 176 | + colorSelect.dispatchEvent(changeEvent); |
| 177 | + sizeSelects[1].dispatchEvent(changeEvent); |
| 178 | + |
| 179 | + expect(config.onOptionChange).toHaveBeenCalledWith(changeEvent); |
| 180 | + expectFormEventDataset(changeEvent, {options}); |
| 181 | + }); |
| 182 | + |
| 183 | + test('calls the method assigned to the onQuantityChange option when the value of a quantity input changes', () => { |
| 184 | + const element = document.getElementById('form'); |
| 185 | + const quantityElement = element.querySelector('[name="quantity"]'); |
| 186 | + const changeEvent = new Event('change'); |
| 187 | + const config = { |
| 188 | + onQuantityChange: jest.fn() |
| 189 | + }; |
| 190 | + const quantity = 10; |
| 191 | + |
| 192 | + // eslint-disable-next-line no-unused-vars |
| 193 | + const productForm = new ProductForm(element, productJSON, config); |
| 194 | + |
| 195 | + quantityElement.value = quantity; |
| 196 | + quantityElement.dispatchEvent(changeEvent); |
| 197 | + |
| 198 | + expect(config.onQuantityChange).toHaveBeenCalledWith(changeEvent); |
| 199 | + expectFormEventDataset(changeEvent, {quantity}); |
| 200 | + }); |
| 201 | + |
| 202 | + test('calls the method assigned to the onPropertyChange option when the value of a property input changes', () => { |
| 203 | + const element = document.getElementById('form'); |
| 204 | + const propertyElement = element.querySelector( |
| 205 | + '[name="properties[Message]"]' |
| 206 | + ); |
| 207 | + const changeEvent = new Event('change'); |
| 208 | + const config = { |
| 209 | + onPropertyChange: jest.fn() |
| 210 | + }; |
| 211 | + const properties = [ |
| 212 | + {name: 'Message', value: 'doh'}, |
| 213 | + {name: 'Hidden', value: 'something'}, |
| 214 | + {name: 'Subscribe', value: 'true'} |
| 215 | + ]; |
| 216 | + |
| 217 | + // eslint-disable-next-line no-unused-vars |
| 218 | + const productForm = new ProductForm(element, productJSON, config); |
| 219 | + |
| 220 | + propertyElement.value = properties[0].value; |
| 221 | + propertyElement.dispatchEvent(changeEvent); |
| 222 | + |
| 223 | + expect(config.onPropertyChange).toHaveBeenCalledWith(changeEvent); |
| 224 | + expectFormEventDataset(changeEvent, {properties}); |
| 225 | + }); |
| 226 | + |
| 227 | + test('calls the method assigned to the onFormSubmit option when the form is submitted', () => { |
| 228 | + const element = document.getElementById('form'); |
| 229 | + const submitEvent = new Event('submit'); |
| 230 | + const config = { |
| 231 | + onFormSubmit: jest.fn() |
| 232 | + }; |
| 233 | + |
| 234 | + const productForm = new ProductForm(element, productJSON, config); |
| 235 | + |
| 236 | + productForm.element.dispatchEvent(submitEvent); |
| 237 | + |
| 238 | + expect(config.onFormSubmit).toHaveBeenCalledWith(submitEvent); |
| 239 | + expectFormEventDataset(submitEvent, {}); |
| 240 | + }); |
| 241 | +}); |
| 242 | + |
| 243 | +describe('ProductForm.destroy()', () => { |
| 244 | + test('removes all event listeners that were assigned by ProductForm()', () => { |
| 245 | + const element = document.getElementById('form'); |
| 246 | + const colorSelect = element.querySelector('[name="options[Color]"]'); |
| 247 | + const quantityElement = element.querySelector('[name="quantity"]'); |
| 248 | + const propertyElement = element.querySelector('[name^="properties"]'); |
| 249 | + |
| 250 | + const changeEvent = new Event('change'); |
| 251 | + const submitEvent = new Event('submit'); |
| 252 | + |
| 253 | + const config = { |
| 254 | + onOptionChange: jest.fn(), |
| 255 | + onQuantityChange: jest.fn(), |
| 256 | + onPropertyChange: jest.fn(), |
| 257 | + onFormSubmit: jest.fn() |
| 258 | + }; |
| 259 | + |
| 260 | + const productForm = new ProductForm(element, productJSON, config); |
| 261 | + |
| 262 | + productForm.destroy(); |
| 263 | + |
| 264 | + colorSelect.dispatchEvent(changeEvent); |
| 265 | + quantityElement.dispatchEvent(changeEvent); |
| 266 | + propertyElement.dispatchEvent(changeEvent); |
| 267 | + productForm.element.dispatchEvent(submitEvent); |
| 268 | + |
| 269 | + expect(config.onOptionChange).not.toHaveBeenCalled(); |
| 270 | + expect(config.onQuantityChange).not.toHaveBeenCalled(); |
| 271 | + expect(config.onPropertyChange).not.toHaveBeenCalled(); |
| 272 | + expect(config.onFormSubmit).not.toHaveBeenCalled(); |
| 273 | + }); |
| 274 | +}); |
| 275 | + |
| 276 | +describe('ProductForm.options()', () => { |
| 277 | + test('returns an ordered array of currently selected option values', () => { |
| 278 | + const element = document.getElementById('form'); |
| 279 | + const productForm = new ProductForm(element, productJSON); |
| 280 | + |
| 281 | + expect(productForm.options()).toMatchObject(defaultOptions); |
| 282 | + }); |
| 283 | +}); |
| 284 | + |
| 285 | +describe('ProductForm.variant()', () => { |
| 286 | + test('returns the current variant of the form', () => { |
| 287 | + const element = document.getElementById('form'); |
| 288 | + const productForm = new ProductForm(element, productJSON); |
| 289 | + |
| 290 | + expect(productForm.variant()).toMatchObject(defaultVariant); |
| 291 | + }); |
| 292 | + |
| 293 | + test('returns null if the currently selected form options do not have a matching variant', () => { |
| 294 | + const element = document.getElementById('form'); |
| 295 | + const colorSelect = element.querySelector('[name="options[Color]"]'); |
| 296 | + const productForm = new ProductForm(element, productJSON); |
| 297 | + |
| 298 | + colorSelect.value = 'Cobalt'; |
| 299 | + |
| 300 | + expect(productForm.variant()).toBe(null); |
| 301 | + }); |
| 302 | +}); |
| 303 | + |
| 304 | +describe('ProductForm.properties()', () => { |
| 305 | + test('returns a collection of objects containing the name and value of properties', () => { |
| 306 | + const element = document.getElementById('form'); |
| 307 | + const productForm = new ProductForm(element, productJSON); |
| 308 | + |
| 309 | + expect(productForm.properties()).toMatchObject(defaultProperties); |
| 310 | + }); |
| 311 | +}); |
| 312 | + |
| 313 | +describe('ProductForm.quantity()', () => { |
| 314 | + test('returns the current quantity specified in the form', () => { |
| 315 | + const element = document.getElementById('form'); |
| 316 | + const productForm = new ProductForm(element, productJSON); |
| 317 | + |
| 318 | + expect(productForm.quantity()).toBe(defaultQuantity); |
| 319 | + }); |
| 320 | + |
| 321 | + test('returns 1 if no quantity input exists in the form', () => { |
| 322 | + document.body.innerHTML = `<form id="form"></form>`; |
| 323 | + const element = document.getElementById('form'); |
| 324 | + const productForm = new ProductForm(element, productJSON); |
| 325 | + |
| 326 | + expect(productForm.quantity()).toBe(1); |
| 327 | + }); |
| 328 | +}); |
