How to use the react-cosmos-shared2/util.replaceKeys function in react-cosmos-shared2

it('serves index.html on / route with template vars replaced', async () => {
  const res = await request('http://127.0.0.1:9005/');
  const source = readFileSync(
    require.resolve('../../../shared/static/index.html'),
    'utf8'
  );

  expect(res).toEqual(
    replaceKeys(source, {
      __PLAYGROUND_OPTS__: JSON.stringify({
        platform: 'web',
        projectKey: mockRootPath,
        loaderUri: '/_loader.html',
        webpackConfigType: 'custom', // <<< This is relevant in this test
        deps: {
          'html-webpack-plugin': true
        }
      })
    })
  );
});

it('serves index.html on / route with template vars replaced', async () => {
  const res = await request('http://127.0.0.1:9006/');
  const source = readFileSync(
    require.resolve('../../../shared/static/index.html'),
    'utf8'
  );

  expect(res).toEqual(
    replaceKeys(source, {
      __PLAYGROUND_OPTS__: JSON.stringify({
        platform: 'web',
        projectKey: mockRootPath,
        loaderUri: '/_loader.html',
        webpackConfigType: 'custom', // <<< This is relevant in this test
        deps: {
          'html-webpack-plugin': true
        }
      })
    })
  );
});

it('exports index.html with template vars replaced', () => {
    const inputPath = slash(__dirname, '../../shared/static/index.html');
    const outputPath = slash(mockOutputPath, 'index.html');
    const optsStr = JSON.stringify({
      platform: 'web',
      projectKey: mockRootPath,
      loaderUri: '/_loader.html',
      webpackConfigType: 'default',
      deps: {
        'html-webpack-plugin': true
      }
    });

    expect(readFileSync(outputPath, 'utf8')).toBe(
      replaceKeys(readFileSync(inputPath, 'utf8'), {
        __PLAYGROUND_OPTS__: optsStr
      })
    );
  });
});

it('serves index.html on / route with template vars replaced', async () => {
  const res = await request('http://127.0.0.1:9001/');
  const source = readFileSync(
    require.resolve('../../../shared/static/index.html'),
    'utf8'
  );

  expect(res).toEqual(
    replaceKeys(source, {
      __PLAYGROUND_OPTS__: JSON.stringify({
        platform: 'web',
        projectKey: mockRootPath,
        loaderUri: '/_loader.html',
        webpackConfigType: 'default',
        deps: {
          'html-webpack-plugin': true
        }
      })
    })
  );
});

it('serves index.html on / route with template vars replaced', async () => {
  const res = await request('http://127.0.0.1:9004/');
  const source = readFileSync(
    require.resolve('../../../shared/static/index.html'),
    'utf8'
  );

  expect(res).toEqual(
    replaceKeys(source, {
      __PLAYGROUND_OPTS__: JSON.stringify({
        platform: 'web',
        projectKey: mockRootPath,
        loaderUri: '/static/_loader.html',
        webpackConfigType: 'default',
        deps: {
          'html-webpack-plugin': true
        }
      })
    })
  );
});

it('serves index.html on / route with template vars replaced', async () => {
  const res = await request('http://127.0.0.1:10001/');
  const source = await readFile(
    require.resolve('../../shared/static/index.html'),
    'utf8'
  );

  const playgroundOpts = {
    platform: 'native',
    projectKey: mockRootPath
  };
  expect(res).toEqual(
    replaceKeys(source, {
      __PLAYGROUND_OPTS__: JSON.stringify(playgroundOpts)
    })
  );
});

export function getPlaygroundHtml(playgroundOpts: PlaygroundOpts) {
  return replaceKeys(getHtmlTemplate(), {
    __PLAYGROUND_OPTS__: JSON.stringify(playgroundOpts)
  });
}

export function getPlaygroundHtmlNext(config: PlaygroundConfig) {
  return replaceKeys(getHtmlTemplate(), {
    __PLAYGROUND_OPTS__: JSON.stringify(config)
  });
}