Skip to content

Commit

Permalink
Enforce passing id and parentID for registered elements (#555)
Browse files Browse the repository at this point in the history
* Use `*.test.tsx` for unit testing instead of mocking DOM elements.

* Replace `@swc/jest` with `ts-jest`.

* keep all shared dependencies inside the `package.json` in the root directory. 

* Refactor playground using shared `DFlexDnDComponent` for all cases.

* Start Using underscore-dangle for private properties.

* Remove `ref` from registry input options and depends only on `id` which is required now along with `parentID`.
  • Loading branch information
jalal246 authored Jun 8, 2022
1 parent 49a54ea commit 284614d
Show file tree
Hide file tree
Showing 83 changed files with 1,822 additions and 2,277 deletions.
211 changes: 21 additions & 190 deletions jest.config.ts
Original file line number Diff line number Diff line change
@@ -1,202 +1,33 @@
/*
* For a detailed explanation regarding each configuration property and type check, visit:
* https://jestjs.io/docs/configuration
*/
import type { InitialOptionsTsJest } from "ts-jest";

export default {
// All imported modules in your tests should be mocked automatically
// automock: false,

// Stop running tests after `n` failures
// bail: 0,

// The directory where Jest should store its cached dependency information
// cacheDirectory: "C:\\Users\\jalal\\AppData\\Local\\Temp\\jest",

// Automatically clear mock calls, instances and results before every test
const tsJestConfig: InitialOptionsTsJest = {
clearMocks: true,

// Indicates whether the coverage information should be collected while executing the test
// collectCoverage: false,

// An array of glob patterns indicating a set of files for which coverage information should be collected
// collectCoverageFrom: undefined,

// The directory where Jest should output its coverage files
// coverageDirectory: undefined,

// An array of regexp pattern strings used to skip coverage collection
// coveragePathIgnorePatterns: [
// "\\\\node_modules\\\\"
// ],

// Indicates which provider should be used to instrument code for coverage
coverageProvider: "v8",

// A list of reporter names that Jest uses when writing coverage reports
// coverageReporters: [
// "json",
// "text",
// "lcov",
// "clover"
// ],

// An object that configures minimum threshold enforcement for coverage results
// coverageThreshold: undefined,

// A path to a custom dependency extractor
// dependencyExtractor: undefined,

// Make calling deprecated APIs throw helpful error messages
// errorOnDeprecated: false,

// Force coverage collection from ignored files using an array of glob patterns
// forceCoverageMatch: [],

// A path to a module which exports an async function that is triggered once before all test suites
// globalSetup: undefined,

// A path to a module which exports an async function that is triggered once after all test suites
// globalTeardown: undefined,

// A set of global variables that need to be available in all test environments
moduleFileExtensions: ["js", "ts", "tsx", "json"],
globals: {
__DEV__: true,
// https://github.com/testing-library/react-testing-library/issues/1061#issuecomment-1117450890
IS_REACT_ACT_ENVIRONMENT: true,
"ts-jest": {
tsconfig: "tsconfig.json",
},
},

// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
// maxWorkers: "50%",

// An array of directory names to be searched recursively up from the requiring module's location
// moduleDirectories: [
// "node_modules"
// ],

// An array of file extensions your modules use
moduleFileExtensions: ["js", "ts"],

// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
moduleNameMapper: {
"@dflex/utils": "<rootDir>/packages/dflex-utils/src/index.ts",
"@dflex/dom-gen": "<rootDir>/packages/dflex-dom-gen/src/index.ts",
"@dflex/core-instance":
"^./dist/(.+)": "./src/$1",
"^@dflex/utils$": "<rootDir>/packages/dflex-utils/src/index.ts",
"^@dflex/dom-gen$": "<rootDir>/packages/dflex-dom-gen/src/index.ts",
"^@dflex/core-instance$":
"<rootDir>/packages/dflex-core-instance/src/index.ts",
"@dflex/store": "<rootDir>/packages/dflex-store/src/index.ts",
"@dflex/draggable": "<rootDir>/packages/dflex-draggable/src/index.ts",
"@dflex/dnd": "<rootDir>/packages/dflex-dnd/src/index.ts",
"^@dflex/store$": "<rootDir>/packages/dflex-store/src/index.ts",
"^@dflex/draggable$": "<rootDir>/packages/dflex-draggable/src/index.ts",
"^@dflex/dnd$": "<rootDir>/packages/dflex-dnd/src/index.ts",
},

// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
// modulePathIgnorePatterns: [],

// Activates notifications for test results
// notify: false,

// An enum that specifies notification mode. Requires { notify: true }
// notifyMode: "failure-change",

// A preset that is used as a base for Jest's configuration
// preset: undefined,

// Run tests from one or more projects
// projects: undefined,

// Use this configuration option to add custom reporters to Jest
// reporters: undefined,

// Automatically reset mock state before every test
// resetMocks: false,

// Reset the module registry before running each individual test
// resetModules: false,

// A path to a custom resolver
// resolver: undefined,

// Automatically restore mock state and implementation before every test
// restoreMocks: false,

// The root directory that Jest should scan for tests and modules within
// rootDir: undefined,

// A list of paths to directories that Jest should use to search for files in
// roots: [
// "<rootDir>"
// ],

// Allows you to use a custom runner instead of Jest's default test runner
// runner: "jest-runner",

// The paths to modules that run some code to configure or set up the testing environment before each test
// setupFiles: [],

// A list of paths to modules that run some code to configure or set up the testing framework before each test
// setupFilesAfterEnv: [],

// The number of seconds after which a test is considered as slow and reported as such in the results.
// slowTestThreshold: 5,

// A list of paths to snapshot serializer modules Jest should use for snapshot testing
// snapshotSerializers: [],

// The test environment that will be used for testing
testEnvironment: "jsdom",

// Options that will be passed to the testEnvironment
// testEnvironmentOptions: {},

// Adds a location field to test results
// testLocationInResults: false,

// The glob patterns Jest uses to detect test files
// testMatch: [
// "**/__tests__/**/*.[jt]s?(x)",
// "**/?(*.)+(spec|test).[tj]s?(x)"
// ],

// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
testPathIgnorePatterns: [
"\\\\node_modules\\\\",
"cypress",
"site",
"test/integration",
],

// The regexp pattern or array of patterns that Jest uses to detect test files
// testRegex: [],

// This option allows the use of a custom results processor
// testResultsProcessor: undefined,

// This option allows use of a custom test runner
// testRunner: "jest-circus/runner",

// This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
// testURL: "http://localhost",

// Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
// timers: "real",

// A map from regular expressions to paths to transformers
testPathIgnorePatterns: ["cypress"],
preset: "ts-jest",
transform: {
"^.+\\.ts?$": "@swc/jest",
"^.+\\.ts?$": "ts-jest",
},

// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
// transformIgnorePatterns: [
// "\\\\node_modules\\\\",
// "\\.pnp\\.[^\\\\]+$"
// ],

// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
// unmockedModulePathPatterns: undefined,

// Indicates whether each individual test should be reported during the run
// verbose: undefined,

// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
// watchPathIgnorePatterns: [],

// Whether to use watchman for file crawling
// watchman: true,
testMatch: ["**/test/**/*.test{.ts,.tsx,.js,.jsx}"],
};

export default tsJestConfig;
14 changes: 11 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"author": "Jalal Maskoun",
"scripts": {
"start": "cross-env NODE_ENV=development pnpm -F dflex-dnd-playground dev",
"start:draggable-only": "cross-env NODE_ENV=development pnpm -F dflex-draggable-playground dev",
"dev-cypress": "cross-env NODE_ENV=development && pnpm start-server-and-test 'pnpm run start' http-get://localhost:3001 'cypress open --env extended=true --project packages/dflex-dnd-playground'",
"cy:run:vertical:chrome": "cypress run --env extended=true --project packages/dflex-dnd-playground --headless --spec 'packages/dflex-dnd-playground/cypress/e2e/same-container-vertical/**/*.cy.ts' --config-file cypress.config.ts --browser chrome",
"cy:run:multi:chrome": "cypress run --project packages/dflex-dnd-playground --headless --spec 'packages/dflex-dnd-playground/cypress/e2e/multiple-containers/**/*.cy.ts' --config-file cypress.config.ts --browser chrome",
Expand All @@ -29,11 +30,16 @@
"update-version": "pnpm changeset version && pnpm install"
},
"devDependencies": {
"@changesets/cli": "^2.22.0",
"@swc/core": "^1.2.196",
"@swc/jest": "^0.2.21",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"@types/react": "^18.0.10",
"@types/react-dom": "^18.0.5",
"@types/react-router-dom": "^5.3.3",
"@types/jest": "^28.1.0",
"@types/node": "^17.0.39",
"ts-jest": "^28.0.4",
"@changesets/cli": "^2.22.0",
"cross-env": "^7.0.3",
"cypress": "^10.0.2",
"eslint-config-dflex": "workspace:*",
Expand All @@ -45,6 +51,8 @@
"start-server-and-test": "^1.14.0",
"ts-node": "^10.8.1",
"typescript": "^4.7.3",
"@vitejs/plugin-react": "^1.3.2",
"vite-plugin-replace": "^0.1.1",
"vite": "^2.9.9"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ import type {
RectDimensions,
} from "@dflex/utils";

import type { IContainer } from "./types";
import type { IDFlexContainer } from "./types";

class Container implements IContainer {
private boundariesByRow: {
class DFlexContainer implements IDFlexContainer {
private _boundariesByRow: {
[row: number]: RectBoundaries;
};

Expand All @@ -25,46 +25,46 @@ class Container implements IContainer {

scroll!: IScroll;

private gridSiblingsHasNewRow: boolean;
private _gridSiblingsHasNewRow: boolean;

lastElmPosition!: IPointNum;

static OUT_OF_RANGE = -1;

constructor() {
this.grid = new PointNum(1, 1);
this.originLength = Container.OUT_OF_RANGE;
this.boundariesByRow = {};
this.gridSiblingsHasNewRow = false;
this.originLength = DFlexContainer.OUT_OF_RANGE;
this._boundariesByRow = {};
this._gridSiblingsHasNewRow = false;
}

private addNewElmToGridIndicator(rect: RectBoundaries) {
if (!this.boundariesByRow[this.grid.x]) {
this.boundariesByRow[this.grid.x] = {
private _addNewElmToGridIndicator(rect: RectBoundaries) {
if (!this._boundariesByRow[this.grid.x]) {
this._boundariesByRow[this.grid.x] = {
...rect,
};

return;
}

const $ = this.boundariesByRow[this.grid.x];
const $ = this._boundariesByRow[this.grid.x];

// Defining elements in different row.
if (rect.bottom > $.bottom || rect.top < $.top) {
this.grid.y += 1;

this.gridSiblingsHasNewRow = true;
this._gridSiblingsHasNewRow = true;

$.left = 0;
$.right = 0;
}

// Defining elements in different column.
if (rect.left > $.right || rect.right < $.left) {
if (this.gridSiblingsHasNewRow) {
if (this._gridSiblingsHasNewRow) {
this.grid.x = 1;

this.gridSiblingsHasNewRow = false;
this._gridSiblingsHasNewRow = false;
} else {
this.grid.x += 1;
}
Expand Down Expand Up @@ -98,7 +98,7 @@ class Container implements IContainer {
dirtyAssignBiggestRect(this.boundaries, elmRectBoundaries);
}

this.addNewElmToGridIndicator(elmRectBoundaries);
this._addNewElmToGridIndicator(elmRectBoundaries);

const $ = this.boundaries;

Expand All @@ -122,13 +122,13 @@ class Container implements IContainer {
// @ts-expect-error - Just resetting the boundaries.
this.boundaries = null;
this.grid.setAxes(1, 1);
this.boundariesByRow = {};
this.gridSiblingsHasNewRow = false;
this._boundariesByRow = {};
this._gridSiblingsHasNewRow = false;
}

preservePosition(position: IPointAxes) {
this.lastElmPosition = new PointNum(position.x, position.y);
}
}

export default Container;
export default DFlexContainer;
4 changes: 2 additions & 2 deletions packages/dflex-core-instance/src/Container/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export type { IContainer } from "./types";
export type { IDFlexContainer } from "./types";

export { default as Container } from "./Container";
export { default as DFlexContainer } from "./DFlexContainer";
9 changes: 8 additions & 1 deletion packages/dflex-core-instance/src/Container/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import type {
IScroll,
} from "@dflex/utils";

export interface IContainer {
export interface IDFlexContainer {
/**
* Preserve the last element position in the list .
* Usage: Getting this position when the dragged is going back from the tail.
Expand All @@ -20,8 +20,15 @@ export interface IContainer {
/** Numbers of total columns and rows each container has. */
readonly grid: IPointNum;

/**
* Origin length for container before being transformed used to prevent
* layout shift.
* */
originLength: number;

/** Direct reference to interactive element. */
ref?: HTMLElement | null;

/** Container scroll instance. */
scroll: IScroll;
registerNewElm(
Expand Down
Loading

0 comments on commit 284614d

Please sign in to comment.