@elastic/synthetics 1.0.0-beta.26 → 1.0.0-beta.29

package/templates/journeys/advanced-example-helpers.ts

@@ -0,0 +1,54 @@
+import { step, Page, expect } from '@elastic/synthetics';
+
+// This file contains helper files for advanced-example.journey.ts
+// The functions here let you write more concise tests  and re-use functionality
+// across tests.
+
+export const loadAppStep = (page: Page, url: string) => {
+  step('launch app', async () => {
+    await page.goto(url);
+  });
+};
+
+export const addTaskStep = (page: Page, task: string) => {
+  step(`add task ${task}`, async () => {
+    const input = await page.$('input.new-todo');
+    await input.type(task);
+    await input.press('Enter');
+  });
+};
+
+const todosSelector = 'ul.todo-list li.todo';
+
+export const findTask = async (page: Page, task: string) => {
+  return await page.waitForSelector(`${todosSelector} >> text="${task}"`);
+};
+
+export const assertTaskListSizeStep = async (page: Page, size: number) => {
+  step(`check that task list has exactly ${size} elements`, async () => {
+    expect((await page.$$(todosSelector)).length).toBe(size);
+  });
+};
+
+export const checkForTaskStep = async (page: Page, task: string) => {
+  step(`check for task '${task}' in list`, async () => {
+    return findTask(page, task);
+  });
+};
+
+export const destroyTaskStep = async (page: Page, task: string) => {
+  step(`destroy task '${task}'`, async () => {
+    const label = await findTask(page, task);
+    // xpath indexes arrays starting at 1!!! Easy to forget!
+    const li = await label.$('xpath=ancestor::li[1]');
+    const destroyButton = await li.$('button');
+
+    // The destroy button is not visible until hovered. Setup a click test which
+    // will wait up to 30s for the button to be visible.
+    const clickFuture = destroyButton.click();
+    // now hover, making the destroy button clickable
+    li.hover();
+    // now we are done
+    await clickFuture;
+  });
+};

package/templates/journeys/advanced-example.journey.ts

@@ -0,0 +1,43 @@
+import { journey } from '@elastic/synthetics';
+import {
+  loadAppStep,
+  addTaskStep,
+  assertTaskListSizeStep,
+  checkForTaskStep,
+  destroyTaskStep,
+} from './advanced-example-helpers';
+
+// This file shows the use of re-usable functions, imported from
+// `advanced-example-helpers.ts` to make writing tests that perform
+// different combinations of similar functions simpler and with less
+// duplication.
+
+journey('addition and completion of single task', ({ page, params }) => {
+  const testText = "Don't put salt in your eyes";
+
+  loadAppStep(page, params.url);
+  addTaskStep(page, testText);
+  assertTaskListSizeStep(page, 1);
+  checkForTaskStep(page, testText);
+  destroyTaskStep(page, testText);
+  assertTaskListSizeStep(page, 0);
+});
+
+journey('adding and removing multiple tasks', ({ page, params }) => {
+  const testTasks = ['Task 1', 'Task 2', 'Task 3'];
+
+  loadAppStep(page, params.url);
+  testTasks.forEach(t => {
+    addTaskStep(page, t);
+  });
+
+  assertTaskListSizeStep(page, 3);
+
+  // remove the middle task and check that it worked
+  destroyTaskStep(page, testTasks[1]);
+  assertTaskListSizeStep(page, 2);
+
+  // add a new task and check it exists
+  addTaskStep(page, 'Task 4');
+  assertTaskListSizeStep(page, 3);
+});

package/templates/synthetics.config.ts

@@ -8,6 +8,13 @@ export default env => {
     playwrightOptions: {
       ignoreHTTPSErrors: false,
     },
+    /**
+     * Configure global monitor settings
+     */
+    monitor: {
+      schedule: '{{schedule}}',
+      locations: ["'{{locations}}'"],
+    },
   };
   if (env !== 'development') {
     /**