Just enough JavaScript, part 1: values and variables

Yesterday you typed a real test and ran it; today you start learning to read it, beginning with the smallest pieces JavaScript has. You do not need to become a developer for this course. Tests use a small corner of the language, three days covers that corner, and every example works on store data, because abstract examples teach abstract skills.

Values: strings and numbers

A string is text in quotes: ‘Deluxe Plantain Plate’. A number has no quotes: 4500. The difference matters, because the plus sign joins strings and adds numbers:

console.log('4500' + 500);         // 4500500, a string glued to a number
console.log(Number('4500') + 500); // 5000, real arithmetic

Read that back: the first line produced nonsense money. The store keeps each price on its button as an attribute, and attributes are always strings, so the store’s own code converts with Number() before doing any maths. Data that looks like a number is not a number until you make it one, and price bugs love that gap.

Variables: const and let

A variable is a name for a value. const names something that will not be reassigned; let names something that will. Save this as price.js in your tumble-kitchen-tests folder and run node price.js:

const price = 4500;
const name = 'Deluxe Plantain Plate';

let label = price.toLocaleString('en-JM');
label = label + ' JMD';

console.log(name + ' costs ' + label);
// Deluxe Plantain Plate costs 4,500 JMD

Read it back: price and name are facts, so they are const. label gets built in two steps, so it is let. toLocaleString(‘en-JM’) turns 4500 into 4,500 with the comma, which is exactly how the store formats every price on its cards. Reach for const first; when the language stops you reassigning one, that is it catching a mistake for free.

One thing you will meet in other people’s code: JavaScript also has template strings, written between backtick characters with each value wrapped in a dollar sign and curly braces. They read nicely. Plain joining with the plus sign does the same job, it is what every sample in this course uses, and you will be able to read both.

Put it straight into a test

Here is today’s material earning a place in your suite. The first card on the store is the Deluxe Plantain Plate, so we can hold its price label to a value we build ourselves:

import { test, expect } from '@playwright/test';

test('verify that the first card shows the price built from the number', async ({ page }) => {
  const price = 4500;
  const expected = price.toLocaleString('en-JM') + ' JMD';

  await page.goto('https://juliapottinger.com/practice/tumble-kitchen/');

  const card = page.getByTestId('product-card').first();
  await expect(card.getByTestId('product-price')).toHaveText(expected);
});

Read it back: the expected value is built from the raw number 4500 the same way the store builds it, and the assertion holds the card to it. Notice what variables bought you: the test states its facts at the top, and the assertion line reads almost like the sentence in the test name.

Name your values. A test that says price and expected fails better than one full of raw numbers.

Do this today

Two pieces, both small. In price.js, build and print the JMD label for the six main-dish prices: 4,500 / 6,800 / 3,900 / 8,200 / 1,800 / 5,600. Then type the test above into your project and run it green. Tomorrow: the shapes that hold test data, objects and arrays.