Merge pull request #208 from Wikia/COTECT-713-tests

Tests!

.gitignore

@@ -10,3 +10,4 @@ dist
 standalone-dist
 /vault-gcs.json
 stats.html
+coverage

jest.config.ts

@@ -0,0 +1,6 @@
+module.exports = {
+ testEnvironment: 'jsdom',
+ moduleDirectories: ['node_modules', 'src'],
+ restoreMocks: true,
+ collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!**/node_modules/**'],
+};

package.json

@@ -12,7 +12,9 @@
  "./CanonicalVideoLoader": "./dist/CanonicalVideoLoader.js",
  "./RedVentureVideoPlayer": "./dist/RedVentureVideoPlayer.js"
  },
- "files": ["dist"],
+ "files": [
+ "dist"
+ ],
  "types": "./dist/main.d.ts",
  "install-peers": "install-peers",
  "scripts": {
@@ -35,7 +37,7 @@
  "lint:eslint:scripts": "eslint --cache --fix scripts",
  "lint:eslint:tests": "eslint --cache --fix tests",
  "lint:eslint": "npm-run-all --continue-on-error --parallel lint:eslint:src",
- "test": "echo 'No Tests yet'",
+ "test": "jest",
  "prepare": "husky install",
  "pub:patch": "npm version patch && yarn pub",
  "pub:minor": "npm version minor && yarn pub",
@@ -100,6 +102,8 @@
  "@rollup/plugin-node-resolve": "13.1.3",
  "@rollup/plugin-replace": "4.0.0",
  "@rollup/plugin-typescript": "8.3.0",
+ "@testing-library/react": "14.0.0",
+ "@types/jest": "29.5.5",
  "@types/react": "17.0.39",
  "@types/youtube": "^0.0.47",
  "@typescript-eslint/eslint-plugin": "5.16.0",
@@ -109,6 +113,8 @@
  "eslint": "^7.0.0",
  "eslint-config-prettier": "8.4.0",
  "husky": ">=6",
+ "jest": "29.7.0",
+ "jest-environment-jsdom": "29.7.0",
  "lint-staged": "12.3.4",
  "node-sass": "^7.0.3",
  "node-watch": "0.7.3",
@@ -119,11 +125,13 @@
  "postcss-nested": "6.0.1",
  "postcss-simple-vars": "7.0.1",
  "prettier": "2.5.1",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
  "rollup": "2.68.0",
+ "rollup-plugin-analyzer": "^4.0.0",
  "rollup-plugin-dts": "4.2.0",
  "rollup-plugin-postcss": "4.0.2",
  "rollup-plugin-terser": "^7.0.2",
- "rollup-plugin-analyzer": "^4.0.0",
  "rollup-plugin-visualizer": "5.9.0",
  "semver": "7.5.4",
  "ts-node": "^10.4.0",

src/jwplayer/players/DesktopArticleVideoPlayer/DesktopArticleVideoPlayer.tsx

@@ -23,7 +23,7 @@ import {
  ON_SCROLL_LARGER_CUSTOM_UX_WITHOUT_TITLE_BAR_VARIANT_ID,
  PLAYER_WITH_ON_SCROLL_ENABLED_URL,
 } from 'utils/experiments/onScrollExperiment';
-import { useOptimizelyVariation } from 'optimizely/useOptimizelyVatiation';
+import { useOptimizelyVariation } from 'optimizely/useOptimizelyVariation';
 
 import styles from './DesktopArticleVideoPlayer.module.scss';
 

src/optimizely/OptimizelyContext.tsx

@@ -14,7 +14,7 @@ type OptimizelyContextType = {
  variationMap?: VariationMap;
 };
 
-interface WindowWithOptimizely extends Window {
+export interface WindowWithOptimizely extends Window {
  optimizely?: {
  get: (type: string) => {
  getVariationMap: () => VariationMap;

src/optimizely/getForcedOptimizely.test.ts

@@ -0,0 +1,24 @@
+import { getForcedOptimizely } from './getForcedOptimizely';
+
+const originalLocation = window.location;
+describe('getForcedOptimizely', () => {
+ it('should return undefined if there is no forced variation', () => {
+ expect(getForcedOptimizely()).toBe(undefined);
+ });
+
+ it('should return experimentId and variationId if there is a forced variation', () => {
+ const experimentId = '123456789';
+ const variationId = '987654321';
+ const searchParams = new URLSearchParams();
+ searchParams.set('video_optimizely_force', `${experimentId}_${variationId}`);
+ jest.spyOn(window, 'location', 'get').mockImplementation(() => ({
+ ...originalLocation,
+ search: searchParams.toString(),
+ }));
+
+ expect(getForcedOptimizely()).toEqual({
+ experimentId,
+ variationId,
+ });
+ });
+});

src/optimizely/useOptimizelyVariation.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+
+import { getCommunicationService } from 'jwplayer/utils/communication/communicationService';
+
+import { OptimizelyContextProvider, WindowWithOptimizely } from './OptimizelyContext';
+import { useOptimizelyVariation } from './useOptimizelyVariation';
+
+const communicationService = getCommunicationService();
+
+declare let window: WindowWithOptimizely;
+
+const originalLocation = window.location;
+
+afterEach(() => {
+ delete window.optimizely;
+});
+
+const setup = (experimentId = '1234') => {
+ return renderHook(
+ () => {
+ return useOptimizelyVariation(experimentId);
+ },
+ {
+ wrapper: ({ children }) => <OptimizelyContextProvider>{children}</OptimizelyContextProvider>,
+ },
+ );
+};
+
+describe('useOptimizelyVariation', () => {
+ it('should return undefined if the optimizely is not available and the experiment is not forced', () => {
+ const { result } = setup();
+
+ expect(result.current).toBeUndefined();
+ });
+
+ it('should return the forced variation if the experiment is forced', () => {
+ const experimentId = '1234';
+ const variationId = '5678';
+ const searchParams = new URLSearchParams();
+ searchParams.set('video_optimizely_force', `${experimentId}_${variationId}`);
+
+ jest.spyOn(window, 'location', 'get').mockImplementation(() => ({
+ ...originalLocation,
+ search: searchParams.toString(),
+ }));
+
+ const { result } = setup(experimentId);
+
+ expect(result.current).toBe(variationId);
+ });
+
+ it('should return the variation if the experiment is available', async () => {
+ const experimentId = '1234';
+ const variationId = '5678';
+ const variationName = 'test';
+
+ window.optimizely = {
+ get: () => ({
+ getVariationMap: () => ({
+ [experimentId]: {
+ id: variationId,
+ name: variationName,
+ },
+ }),
+ }),
+ };
+
+ const { result } = setup(experimentId);
+
+ act(() => {
+ communicationService.dispatch({ type: '[Platform] optimizely loaded' });
+ });
+
+ expect(result.current).toBe(variationId);
+ });
+});

tsconfig.json

@@ -1,5 +1,5 @@
 {
- "include": ["src/**/*.ts", "src/**/*.tsx", "src/*.d.ts"],
+ "include": ["src/**/*.ts", "src/**/*.tsx", "src/*.d.ts", "*.ts"],
  "exclude": ["node_modules", "old/**/*", "src/locales/**/*", "dist/**/*"],
  "compilerOptions": {
  "outDir": "dist",