All files / xstate/examples/e2e test.js

0% Statements 0/32
0% Branches 0/9
0% Functions 0/7
0% Lines 0/31

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85                                                                                                                                                                         
const puppeteer = require('puppeteer');
const {
  getShortestValuePaths,
  deserializeStateString
} = require('xstate/lib/graph');
 
const { ticTacToeMachine } = require('../src/ticTacToeMachine');
 
const shortestValuePaths = getShortestValuePaths(ticTacToeMachine, {
  events: {
    PLAY: [
      { type: 'PLAY', value: 0 },
      { type: 'PLAY', value: 1 },
      { type: 'PLAY', value: 2 },
      { type: 'PLAY', value: 3 },
      { type: 'PLAY', value: 4 },
      { type: 'PLAY', value: 5 },
      { type: 'PLAY', value: 6 },
      { type: 'PLAY', value: 7 },
      { type: 'PLAY', value: 8 }
    ]
  },
  filter: state => {
    return state.context.moves <= 5;
  }
});
 
const winningPaths = Object.keys(shortestValuePaths).filter(stateString => {
  const { value, context } = deserializeStateString(stateString);
 
  return (
    value === 'winner' && context.winner === 'x' && context.board[0] !== 'x'
  );
});
 
function deserializeEventString(eventString) {
  const [type, payload] = eventString.split(' | ');
 
  return {
    type,
    ...(payload ? JSON.parse(payload) : {})
  };
}
 
async function sleep(ms) {
  await new Promise(res => setTimeout(res, ms));
}
 
async function runSimulations() {
  const browser = await puppeteer.launch({ headless: false });
 
  const page = await browser.newPage();
  await page.goto('http://localhost:3000');
 
  const eventMap = {
    PLAY: async event => {
      await page.click(`[data-testid="square-${event.value}"]`);
    }
  };
 
  for (const targetStateString of winningPaths) {
    const { value, context } = deserializeStateString(targetStateString);
    const pathConfig = shortestValuePaths[targetStateString];
 
    for (const { state, event: eventString } of pathConfig) {
      if (!eventString) {
        continue;
      }
      const event = deserializeEventString(eventString);
      const realEvent = eventMap[event.type];
 
      if (realEvent) {
        await realEvent(event);
      }
      await sleep(100);
    }
    await sleep(200);
    await page.reload();
  }
 
  await browser.close();
}
 
runSimulations();