← Back to Question Center
0
ਇਕਾਈ ਦੀ ਆਪਣੀ ਜਾਚ ਵਰਤੋ Mocha ਅਤੇ Chai ਵਰਤ ਇਕਾਈ ਦੀ ਆਪਣੀ ਜਾਚ ਵਰਤੋ Mocha ਅਤੇ Chai ਦੁਆਰਾ ਵਰਤੇ ਗਏ ਵਿਸ਼ਿਆਂ: AngularJSES6Raw ਮਿਡਲ
March 1, 2018
1 answers:
ਇਕਾਈ ਦੀ ਆਪਣੀ ਜਾਚ ਵਰਤੋ Mocha ਅਤੇ Chai ਵਰਤ
ਇਸ ਲੇਖ ਵਿੱਚ ਪੀਅਯੋਇਤੀਸ «ਪੀਵੀਆਰਡੀਆਰ» ਵੈਲੀਿਸਰਾਕੋਸ, ਮਾਰਕ ਬਰਾਊਨ ਅਤੇ ਟੌਮ ਗ੍ਰੇਕੋ ਦੁਆਰਾ ਸਮੀਖਿਆ ਕੀਤੀ ਗਈ ਸੀ. ਸਮਾਲਟ ਸਮਗਰੀ ਲਈ ਸਮਾਲਟ ਦੇ ਸਾਰੇ ਸਮਾਰਕਾਂ ਦਾ ਧੰਨਵਾਦ ਸਭ ਤੋਂ ਵਧੀਆ ਇਹ ਹੋ ਸਕਦਾ ਹੈ!
ਕੀ ਤੁਸੀਂ ਕਦੇ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਕੁਝ ਬਦਲਾਵ ਕੀਤੇ ਹਨ, ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਪਤਾ ਲੱਗਿਆ ਹੈ ਕਿ ਇਹ ਕੁਝ ਤੋੜਨ ਲਈ ਕੁਝ ਹੋਰ ਹੈ?
ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਾਡੇ ਵਿਚੋਂ ਬਹੁਤ ਸਾਰੇ ਕੋਲ ਹੈ. ਇਹ ਲਗਭਗ ਅਟੱਲ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਵੱਡੀ ਮਾਤਰਾ ਵਿੱਚ ਕੋਡ ਹੋਵੇ ਇਕ ਗੱਲ ਦੂਜੀ ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ, ਅਤੇ ਫਿਰ ਇਸ ਨੂੰ ਬਦਲਣ ਨਾਲ ਨਤੀਜਾ ਕੁਝ ਹੋਰ ਭੰਗ ਹੋ ਜਾਂਦਾ ਹੈ.
ਪਰ ਜੇ ਅਜਿਹਾ ਨਾ ਹੁੰਦਾ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ? ਉਦੋਂ ਕੀ ਹੋਇਆ ਜੇ ਤੁਹਾਡੇ ਜਾਣਨ ਦਾ ਤਰੀਕਾ ਸੀ ਕਿ ਕੁਝ ਬਦਲਾਵ ਦੇ ਨਤੀਜੇ ਵਜੋਂ ਕੁਝ ਭੰਗ ਹੋ ਜਾਂਦਾ ਹੈ? ਇਹ ਬਹੁਤ ਵਧੀਆ ਹੋਵੇਗਾ. ਤੁਸੀਂ ਕੁਝ ਨੂੰ ਤੋੜਨ ਬਾਰੇ ਚਿੰਤਾ ਕੀਤੇ ਬਿਨਾਂ ਆਪਣੇ ਕੋਡ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰ ਸਕਦੇ ਹੋ, ਤੁਹਾਡੇ ਕੋਲ ਥੋੜ੍ਹੀਆਂ ਬੱਗ ਹਨ ਅਤੇ ਤੁਸੀਂ ਘੱਟ ਸਮਾਂ ਡੀਬੱਗ ਕਰਨਾ ਹੈ
ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿਥੇ ਯੂਨਿਟ ਟੈਸਟ ਚਮਕਦਾ ਹੈ. ਉਹ ਆਪਣੇ ਆਪ ਤੁਹਾਡੇ ਲਈ ਕੋਡ ਵਿੱਚ ਕਿਸੇ ਵੀ ਸਮੱਸਿਆ ਦਾ ਪਤਾ ਲਗਾਉਣਗੇ. ਕੋਈ ਤਬਦੀਲੀ ਕਰੋ, ਆਪਣੇ ਟੈਸਟ ਚਲਾਓ ਅਤੇ ਜੇ ਕੁਝ ਵੀ ਟੁੱਟ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਤੁਰੰਤ ਇਹ ਪਤਾ ਕਰੋਗੇ ਕਿ ਕੀ ਹੋਇਆ, ਕਿੱਥੇ ਸਮੱਸਿਆ ਹੈ ਅਤੇ ਸਹੀ ਵਿਵਹਾਰ ਕੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਇਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਿਸੇ ਵੀ ਗਲਤ ਕੰਮ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ!
ਇਸ ਲੇਖ ਵਿਚ, ਮੈਂ ਤੁਹਾਨੂੰ ਦਿਖਾਂਗਾ ਕਿ ਤੁਹਾਡੇ ਜਾਵਾ-ਸਕ੍ਰਿਪਟ ਕੋਡ ਨੂੰ ਕਿਵੇਂ ਸ਼ੁਰੂ ਕਰਨਾ ਹੈ. ਇਸ ਲੇਖ ਵਿਚ ਦਿਖਾਈਆਂ ਉਦਾਹਰਨਾਂ ਅਤੇ ਤਕਨੀਕਾਂ ਨੂੰ ਬ੍ਰਾਉਜ਼ਰ-ਅਧਾਰਿਤ ਕੋਡ ਅਤੇ ਮਿਮਲ ਕੋਡ ਦੋਨਾਂ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ.
ਇਸ ਟਿਊਟੋਰਿਅਲ ਦਾ ਕੋਡ ਸਾਮਾਲ ਰੈਪੋ ਤੋਂ ਉਪਲਬਧ ਹੈ.
ਇਕਾਈ ਟੈਸਟਿੰਗ ਕੀ ਹੈ
ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਕੋਡਬੇਸ ਦੀ ਜਾਂਚ ਕਰਦੇ ਹੋ, ਤੁਸੀਂ ਕੋਡ ਦਾ ਇੱਕ ਟੁਕੜਾ ਲੈਂਦੇ ਹੋ - ਆਮ ਤੌਰ ਤੇ ਇੱਕ ਫੰਕਸ਼ਨ - ਅਤੇ ਇਸ ਦੀ ਤਸਦੀਕ ਕਰਦੇ ਹਾਂ ਕਿ ਕਿਸੇ ਖਾਸ ਸਥਿਤੀ ਵਿੱਚ ਇਹ ਸਹੀ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ. ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਇਹ ਕਰਨ ਦਾ ਇੱਕ ਢਾਂਚਾ ਅਤੇ ਸਵੈਚਾਲਿਤ ਤਰੀਕਾ ਹੈ. ਨਤੀਜੇ ਵੱਜੋਂ, ਜਿੰਨੇ ਜ਼ਿਆਦਾ ਟੈਸਟ ਤੁਸੀਂ ਲਿਖੋਗੇ, ਤੁਹਾਡੇ ਦੁਆਰਾ ਪ੍ਰਾਪਤ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਲਾਭ ਦਾ ਵੱਡਾ ਫਾਇਦਾ. ਤੁਹਾਡੇ ਕੋਡਬੇਸ ਵਿੱਚ ਤੁਹਾਡੇ ਕੋਲ ਭਰੋਸੇ ਦਾ ਵੱਧ ਪੱਧਰ ਵੀ ਹੋਵੇਗਾ ਕਿਉਂਕਿ ਤੁਸੀਂ ਇਸਨੂੰ ਵਿਕਸਿਤ ਕਰਦੇ ਰਹੋ
ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਦੇ ਨਾਲ ਮੁੱਖ ਵਿਚਾਰ ਇਕ ਫੰਕਸ਼ਨ ਦੇ ਵਤੀਰੇ ਦੀ ਜਾਂਚ ਕਰਨਾ ਹੈ ਜਦੋਂ ਇਹ ਕੁਝ ਨਿਸ਼ਚਤ ਸੈੱਟਾਂ ਦਿੰਦਾ ਹੈ ਤੁਸੀਂ ਕੁਝ ਪੈਰਾਮੀਟਰਾਂ ਨਾਲ ਇੱਕ ਫੋਰਮ ਨੂੰ ਕਾਲ ਕਰਦੇ ਹੋ ਅਤੇ ਇਹ ਜਾਂਚ ਕਰਦੇ ਹੋ ਕਿ ਤੁਹਾਨੂੰ ਸਹੀ ਨਤੀਜੇ ਮਿਲੇ ਹਨ
// ਦਿੱਤੇ 1 ਅਤੇ 10 ਇੰਪੁੱਟ ਦੇ ਰੂਪ ਵਿੱਚ var ਨਤੀਜਾ = ਮਥਾਨ. ਅਧਿਕਤਮ (1, 10);// ਸਾਨੂੰ ਆਉਟਪੁੱਟ ਵਜੋਂ 10 ਪ੍ਰਾਪਤ ਕਰਨੇ ਚਾਹੀਦੇ ਹਨਜੇ (ਨਤੀਜਾ! == 10) {ਨਵ ਗਲਤੀ ('ਫੇਲ') ਸੁੱਟੋ;} ਅਭਿਆਸ ਵਿੱਚ, ਕਈ ਵਾਰ ਪ੍ਰੀਖਿਆਵਾਂ ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਹੋ ਸਕਦੀਆਂ ਹਨ ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਤੁਹਾਡੀ ਫੰਕਸ਼ਨ ਇੱਕ ਅਜ਼ੈਕਕ ਬੇਨਤੀ ਕਰਦਾ ਹੈ, ਤਾਂ ਟੈਸਟ ਲਈ ਹੋਰ ਵਧੇਰੇ ਸੈਟਅਪ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, ਪਰ "ਕੁਝ ਨਿਸ਼ਚਿਤ ਅਦਾਇਗੀਆਂ ਦਿੱਤੇ ਗਏ ਹਨ, ਅਸੀਂ ਇੱਕ ਖਾਸ ਨਤੀਜੇ ਦੀ ਉਮੀਦ" ਅਜੇ ਵੀ ਲਾਗੂ ਹੁੰਦਾ ਹੈ.
ਟੂਲ ਸਥਾਪਤ ਕਰਨਾ
ਇਸ ਲੇਖ ਲਈ, ਅਸੀਂ Mocha ਦਾ ਉਪਯੋਗ ਕਰਾਂਗੇ. ਇਸ ਨਾਲ ਸ਼ੁਰੂ ਕਰਨਾ ਆਸਾਨ ਹੈ, ਬ੍ਰਾਊਜ਼ਰ-ਅਧਾਰਤ ਟੈਸਟਿੰਗ ਅਤੇ ਸਾਮਾਲ ਟੈਸਟਿੰਗ ਦੋਨਾਂ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਅਤੇ ਇਹ ਹੋਰ ਟੈਸਟਿੰਗ ਟੂਲਸ ਨਾਲ ਵਧੀਆ ਢੰਗ ਨਾਲ ਖੇਡਦਾ ਹੈ.
Mocha ਨੂੰ ਇੰਸਟਾਲ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ npm ਦੁਆਰਾ ਹੈ (ਜਿਸ ਲਈ ਸਾਨੂੰ ਨੋਡ ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ. ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਸਿਸਟਮ ਤੇ ਐਨਪੀਐਮ ਜਾਂ ਨੋਡ ਨੂੰ ਇੰਸਟਾਲ ਕਰਨ ਬਾਰੇ ਯਕੀਨੀ ਨਹੀਂ ਹੋ, ਤਾਂ ਸਾਡੀ ਟਿਊਟੋਰਿਅਲ ਨਾਲ ਗੱਲ ਕਰੋ: ਐਨਪੀਐਮ ਲਈ ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਗਾਈਡ - ਨੋਡ ਪੈਕੇਜ ਮੈਨੇਜਰ
ਨੋਡ ਸਥਾਪਿਤ ਹੋਣ ਨਾਲ, ਆਪਣੀ ਪ੍ਰੋਜੈਕਟ ਦੀ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਇੱਕ ਟਰਮੀਨਲ ਜਾਂ ਕਮਾਂਡ ਲਾਈਨ ਖੋਲੋ
- ਜੇਕਰ ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿਚ ਕੋਡ ਦੀ ਜਾਂਚ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਚਲਾਓ
npm ਇੰਸਟਾਲ ਮਚਚਾ ਚਾਈ --ਸਵ-ਦੇਵ - ਜੇਕਰ ਤੁਸੀਂ ਨੋਡ ਦੀ ਜਾਂਚ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ. js ਕੋਡ, ਉਪਰੋਕਤ ਤੋਂ ਇਲਾਵਾ,
npm ਇੰਸਟਾਲ-ਜੀ ਮੋਚਾ
ਇਹ ਪੈਕੇਜ ਇੰਸਟਾਲ ਕਰਦਾ ਹੈ ਮੋਚਾ ਅਤੇ ਚਾਈ . ਮੋਚਾ ਉਹ ਲਾਇਬਰੇਰੀ ਹੈ ਜੋ ਸਾਨੂੰ ਟੈਸਟ ਕਰਵਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ, ਅਤੇ ਚਾਈ ਵਿੱਚ ਕੁਝ ਮਦਦਗਾਰ ਕਾਰਜ ਸ਼ਾਮਲ ਹਨ ਜੋ ਅਸੀਂ ਸਾਡੇ ਟੈਸਟ ਦੇ ਨਤੀਜਿਆਂ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ ਵਰਤਾਂਗੇ.
ਨੋਡ ਤੇ ਟੈਸਟ ਕਰਨਾ. ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਜੇ.ਐਸ. ਬਨਾਮ ਟੈਸਟਿੰਗ
ਬ੍ਰਾਉਜ਼ਰ ਵਿਚਲੇ ਟੈਸਟਾਂ ਨੂੰ ਚਲਾਉਣ ਤੇ ਇਹ ਉਦਾਹਰਨਾਂ ਹਨ ਜੋ ਕੰਮ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ. ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਸਾਮਾਲਕ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਇਕਾਈ ਦੀ ਪਰੀਖਣ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਹਨਾਂ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ
- ਨੋਡ ਲਈ, ਤੁਹਾਨੂੰ ਟੈਸਟ ਦੌੜਾਕ ਫਾਈਲ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ.
- ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹਣ ਦੀ ਬਜਾਏ
ਮੋਚਾਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਟੈਸਟਾਂ ਨੂੰ ਚਲਾਓ.
ਡਾਇਰੈਕਟਰੀ ਢਾਂਚਾ ਸਥਾਪਤ ਕਰਨਾ
ਤੁਹਾਨੂੰ ਆਪਣੇ ਟੈਸਟ ਤੁਹਾਡੀਆਂ ਮੁੱਖ ਕੋਡ ਫਾਈਲਾਂ ਤੋਂ ਵੱਖਰੀ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ. ਇਹ ਉਨ੍ਹਾਂ ਨੂੰ ਢਾਂਚਾ ਬਣਾਉਣਾ ਸੌਖਾ ਬਣਾਉਂਦਾ ਹੈ, ਉਦਾਹਰਨ ਲਈ ਜੇ ਤੁਸੀਂ ਭਵਿੱਖ ਵਿੱਚ ਹੋਰ ਪ੍ਰਕਾਰ ਦੇ ਟੈਸਟਾਂ ਨੂੰ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ (ਜਿਵੇਂ ਕਿ ਐਂਟੀਗਰੇਸ਼ਨ ਟੈਸਲ ਜਾਂ ਫੰਕਸ਼ਨਲ ਟੈਸਟ)
ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਦੇ ਨਾਲ ਸਭ ਤੋਂ ਪ੍ਰਚਲਿਤ ਪ੍ਰਥਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਰੂਟ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਟੈਸਟ / ਡਾਇਰੈਕਟਰੀ ਹੈ. ਫਿਰ, ਹਰੇਕ ਟੈਸਟ ਫਾਈਲ ਨੂੰ ਟੈਸਟ / ਕੁਝ ਮੋਡੀਊਲਟੈਸਟ ਅਧੀਨ ਰੱਖਿਆ ਗਿਆ ਹੈ. ਜੇ ਐਸ ਚੋਣਵੇਂ ਰੂਪ ਵਿੱਚ, ਤੁਸੀਂ ਡਾਇਰੈਕਟਰੀ ਨੂੰ ਟੈਸਟ ਵਿੱਚ / ਅੰਦਰ ਵੀ ਇਸਤੇਮਾਲ ਕਰ ਸਕਦੇ ਹੋ, ਪਰ ਮੈਂ ਸਾਵਧਾਨੀ ਨਾਲ ਚੀਜਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦਾ ਹਾਂ - ਜੇ ਲੋੜ ਹੋਵੇ ਤਾਂ ਤੁਸੀਂ ਬਾਅਦ ਵਿੱਚ ਇਸਨੂੰ ਹਮੇਸ਼ਾਂ ਬਦਲ ਸਕਦੇ ਹੋ
ਇੱਕ ਟੈਸਟ ਰਨਨਰ ਸਥਾਪਤ ਕਰਨਾ
ਕਿਸੇ ਬ੍ਰਾਉਜ਼ਰ ਵਿਚ ਸਾਡੇ ਟੈਸਟਾਂ ਨੂੰ ਚਲਾਉਣ ਲਈ, ਸਾਨੂੰ ਸਾਡੀਆਂ ਟੈਸਟ ਰਨਰ ਪੰਨੇ ਤੇ ਸਾਧਾਰਣ HTML ਸਫਾ ਸਥਾਪਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ. ਪੰਨਾ ਲੋਡ ਕਰਦਾ ਹੈ Mocha, ਪ੍ਰੀਖਣ ਲਾਈਬ੍ਰੇਰੀਆਂ ਅਤੇ ਸਾਡੇ ਅਸਲ ਟੈਸਟ ਫਾਇਲ. ਟੈਸਟਾਂ ਨੂੰ ਚਲਾਉਣ ਲਈ, ਅਸੀਂ ਬਸ ਬ੍ਰਾਉਜ਼ਰ ਵਿਚ ਦੌੜਾਕ ਖੋਲ੍ਹ ਦਿਆਂਗੇ.
ਜੇਕਰ ਤੁਸੀਂ ਨੋਡ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ. ਜੇ ਐਸ, ਤੁਸੀਂ ਇਹ ਕਦਮ ਛੱਡ ਸਕਦੇ ਹੋ. ਨੋਡ ਜੇ ਐਸ ਯੂ ਯੂਨਿਟ ਟੈਸਟਾਂ ਨੂੰ ਹੁਕਮ ਮੋਚਾ ਦਾ ਇਸਤੇਮਾਲ ਕਰਕੇ ਚਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਇਹ ਮੰਨ ਕੇ ਕਿ ਤੁਸੀਂ ਸਿਫਾਰਿਸ਼ ਕੀਤੀ ਡਾਇਰੈਕਟਰੀ ਢਾਂਚੇ ਦਾ ਪਾਲਣ ਕੀਤਾ ਹੈ.
ਹੇਠਾਂ ਉਹ ਕੋਡ ਹੈ ਜੋ ਅਸੀਂ ਟੈਸਟ ਦੇ ਦੌੜਾਕ ਲਈ ਵਰਤਾਂਗੇ. ਮੈਂ ਇਸ ਫਾਇਲ ਨੂੰ ਟੈਸਟਰਨਨਰ ਦੇ ਤੌਰ ਤੇ ਸੇਵ ਕਰਾਂਗਾ. html
ਮੋਚ ਟੈਸਟ </ title><link rel = "ਸਟਾਈਲਸ਼ੀਟ" href = "ਨੋਡ_ਮੋਡੀਊਲ / ਮੋਚਾ / ਮੋਚਾ. ਸੀ ਐਸ ਐਸ"></ head><body><div id = "mocha"> </div> <script src = "node_modules / mocha / mocha. js"> </ script><script src = "node_modules / chai / chai. js"> </ script><ਸਕਰਿਪਟ> ਮੋਚਾ ਸੈੱਟਅੱਪ ('bdd') </ script><! - ਲੋਡ ਕੋਡ ਜੋ ਤੁਸੀਂ ਇੱਥੇ ਟੈਸਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ -><! - ਆਪਣੀਆਂ ਟੈਸਟ ਫਾਈਲਾਂ ਇੱਥੇ ਲੋਡ ਕਰੋ -><script>ਮੋਚਾ ਰਨ <span class="f-c-white l-mr3"> ;</ ਸਕ੍ਰਿਪਟ></ body></ html> </code> </pre> <p> ਟੈਸਟ ਦੇ ਦੌੜਾਕਾਂ ਵਿਚ ਮਹੱਤਵਪੂਰਨ ਬਿੱਟ ਹਨ: </p> <ul> <li> ਅਸੀਂ ਮੋਚਾ ਦੀ CSS ਸਟਾਈਲ ਨੂੰ ਲੋਡ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ ਸਾਡੇ ਟੈਸਟ ਦੇ ਨਤੀਜੇ ਚੰਗੇ ਫਾਰਮੈਟਿੰਗ ਦੇ ਸਕਣ. </li> <li> ਅਸੀਂ ਆਈਡੀ <code> ਮੋਚਾ </code> ਦੇ ਨਾਲ ਇੱਕ ਡੀਵੀ ਬਣਾਉਂਦੇ ਹਾਂ. ਇਹ ਉਹ ਸਥਾਨ ਹੈ ਜਿੱਥੇ ਟੈਸਟ ਦੇ ਨਤੀਜੇ ਪਾਏ ਜਾਂਦੇ ਹਨ. </li> <li> ਅਸੀਂ ਮੋਚਾ ਅਤੇ ਚਾਈ ਨੂੰ ਲੋਡ ਕਰਦੇ ਹਾਂ. ਉਹ <code> ਨੋਡ_ਮੋਡੀਊਲ </code> ਫੋਲਡਰ ਦੇ ਸਬਫੋਲਡਰ ਵਿੱਚ ਸਥਿਤ ਹਨ ਕਿਉਂਕਿ ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ ਐਨਐਮਪੀ ਦੁਆਰਾ ਲਗਾਇਆ ਹੈ. </li> <li> ਕਾਲ ਕਰਕੇ <code> ਮੋਚਾ ਸੈੱਟਅੱਪ </code> , ਅਸੀਂ ਮੋਚਾ ਦੇ ਟੈਸਟਿੰਗ ਹੈਲਪਰਾਂ ਨੂੰ ਉਪਲਬਧ ਕਰਦੇ ਹਾਂ </li> <li> ਫੇਰ, ਅਸੀਂ ਉਹ ਕੋਡ ਲੋਡ ਕਰਦੇ ਹਾਂ ਜੋ ਅਸੀਂ ਜਾਂਚ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ ਅਤੇ ਟੈਸਟ ਫਾਇਲ. ਸਾਡੇ ਕੋਲ ਹਾਲੇ ਕੁਝ ਨਹੀਂ ਹੈ. </li> <li> ਆਖ਼ਰੀ, ਅਸੀਂ <code> ਮੋਚਾ ਕਹਿੰਦੇ ਹਾਂ ਟੈਸਟ ਚਲਾਓ </code> ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਇਸ ਨੂੰ <em> ਦੇ ਬਾਅਦ </em> ਸਰੋਤ ਅਤੇ ਟੈਸਟ ਫਾਈਲਾਂ ਨੂੰ ਲੋਡ ਕਰਨ ਤੋਂ ਬਾਅਦ ਕਾਲ ਕਰੋ </li> </ul> <h2 id="the-basic-test-building-blocks"> ਬੁਨਿਆਦੀ ਟੈਸਟ ਬਿਲਡਿੰਗ ਬਲਾਕ </h2> <p> ਹੁਣ ਅਸੀਂ ਟੈਸਟ ਚਲਾ ਸਕਦੇ ਹਾਂ, ਆਓ ਕੁਝ ਲਿਖਣਾ ਸ਼ੁਰੂ ਕਰੀਏ. </p> <p> ਅਸੀਂ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾ ਕੇ ਸ਼ੁਰੂਆਤ ਕਰਾਂਗੇ <code> test / arrayTest ਜੇ ਐਸ </code> ਇੱਕ ਵਿਅਕਤੀਗਤ ਟੈਸਟ ਫਾਇਲ ਜਿਵੇਂ ਕਿ ਇਸ ਨੂੰ <em> ਟੈਸਟ ਕੇਸ </em> ਦੇ ਤੌਰ ਤੇ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ. ਮੈਂ ਇਸਨੂੰ ਕਾਲ ਕਰ ਰਿਹਾ ਹਾਂ <code> ਐਰੇਟੈਸਟ ਜੇ ਐਸ </code> ਇਸ ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ ਕੁਝ ਬੁਨਿਆਦੀ ਐਰੇ ਕਾਰਜਸ਼ੀਲਤਾ ਦੀ ਜਾਂਚ ਕਰਾਂਗੇ. </p> <p> ਹਰੇਕ ਟੈਸਟ ਦੇ ਕੇਸ ਦੀ ਫ਼ਾਈਲ ਇੱਕੋ ਮੂਲ ਪੈਟਰਨ ਦੀ ਪਾਲਣਾ ਕਰਦੀ ਹੈ. ਪਹਿਲਾਂ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ <code> ਦਾ ਵਰਣਨ </code> ਬਲਾਕ ਹੈ: </p> <pre> <code> ਦਾ ਵਰਣਨ ਕਰੋ ('ਅਰੇ', ਫੰਕਸ਼ਨ)// ਪ੍ਰੀਖਿਆ ਲਈ ਹੋਰ ਕੋਡ ਇੱਥੇ ਹੈ}); </code> </pre> <p> <code> ਦਾ ਵਰਣਨ </code> ਵਿਅਕਤੀਗਤ ਟੈਸਟਾਂ ਨੂੰ ਇਕੱਠਾ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ. ਪਹਿਲੇ ਪੈਰਾਮੀਟਰ ਨੂੰ ਇਹ ਦਰਸਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਅਸੀਂ ਕੀ ਜਾਂਚ ਕਰ ਰਹੇ ਹਾਂ - ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਕਿਉਂਕਿ ਅਸੀਂ ਐਰੇ ਫੰਕਸ਼ਨਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ, ਮੈਂ ਸਤਰ <code> 'ਅਰੇ' </code> ਵਿੱਚ ਪਾਸ ਕੀਤੀ ਹੈ. </p> <p> ਦੂਜਾ, <code> ਵਿਚ </code> ਵਰਣਨ </code> , ਸਾਡੇ ਕੋਲ <code> ਇਸ </code> ਬਲਾਕ ਹੋਣਗੇ: </p> <pre> <code> ਦਾ ਵਰਣਨ ਕਰੋ ('ਅਰੇ', ਫੰਕਸ਼ਨ)ਇਹ ('ਖਾਲੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ', ਫੰਕਸ਼ਨ <span class="f-c-white l-mr3"> {// ਟੈਸਟ ਦਾ ਅਮਲ ਇੱਥੇ ਚਲਾ ਜਾਂਦਾ ਹੈ});// ਅਸੀਂ ਇਸ ਦੇ ਹੋਰ ਵੀ ਬਹੁਤ ਕੁਝ ਕਰ ਸਕਦੇ ਹਾਂ}); </code> </pre> <p> <code> ਇਸ ਨੂੰ </code> ਅਸਲ ਟੈਸਟ ਤਿਆਰ ਕਰਨ ਲਈ ਵਰਤਿਆ ਗਿਆ ਹੈ ਪਹਿਲੇ ਪੈਰਾਮੀਟਰ <code> ਇਸ </code> ਨੂੰ ਟੈਸਟ ਦੇ ਇੱਕ ਮਨੁੱਖੀ-ਪੜ੍ਹਨਯੋਗ ਵੇਰਵਾ ਪ੍ਰਦਾਨ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ. ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ ਉਪਰਲੇ ਪੜਾਅ ਨੂੰ "ਇਹ ਖਾਲੀ ਸ਼ੁਰੂ ਕਰਨਾ" ਦੇ ਰੂਪ ਵਿੱਚ ਪੜ੍ਹ ਸਕਦੇ ਹਾਂ, ਜੋ ਕਿ ਵਧੀਆ ਢੰਗ ਹੈ ਕਿ ਕਿਵੇਂ ਅਰੇ ਦੀ ਵਿਵਹਾਰ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ. </p> <p> ਸਾਰੇ ਸਮਾਲਟ ਟੈਸਟ ਇਨ੍ਹਾਂ ਬਿਲਡਿੰਗ ਬਲਾਕਾਂ ਤੋਂ ਬਣਾਏ ਗਏ ਹਨ, ਅਤੇ ਉਹ ਇਸ ਬੁਨਿਆਦੀ ਪੈਟਰਨ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ. </p> <ul> <li> ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਅਸੀਂ <code> ਵਰਣਨ ਕਰਦੇ ਹਾਂ ਕਿ </code> ਅਸੀਂ ਕੀ ਕਹਿ ਰਹੇ ਹਾਂ - ਉਦਾਹਰਣ ਲਈ, "ਦੱਸੋ ਕਿ ਐਰੇ ਨੂੰ ਕਿਵੇਂ ਕੰਮ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ". </li> <li> ਤਦ, ਅਸੀਂ ਵਿਅਕਤੀਗਤ ਟੈਸਟ ਬਣਾਉਣ ਲਈ ਕਈ <code> ਇਸ </code> ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ- ਹਰੇਕ <code> ਇਸ ਨੂੰ </code> ਇੱਕ ਵਿਸ਼ੇਸ਼ ਵਿਵਹਾਰ ਵਿਆਖਿਆ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਸਾਡੇ ਐਰੇ ਕੇਸ ਲਈ "ਇਹ ਖਾਲੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ" ਉਪਰੋਕਤ </li> </ul> <h2 id="writing-the-test-code"> ਟੈਸਟ ਕੋਡ ਲਿਖਣਾ </h2> <p> ਹੁਣ ਜਦੋਂ ਅਸੀਂ ਜਾਣਦੇ ਹਾਂ ਕਿ ਟੈਸਟ ਦੇ ਕੇਸ ਨੂੰ ਕਿਵੇਂ ਢਾਲਣਾ ਹੈ, ਤਾਂ ਆਓ ਆਪਾਂ ਮਜ਼ੇਦਾਰ ਭਾਗ ਵਿਚ ਚਲੇ ਜਾਈਏ - ਪ੍ਰੀਖਿਆ ਨੂੰ ਲਾਗੂ ਕਰਨਾ. </p> <p> ਸੈਮਟਟ ਅਸੀਂ ਇਹ ਜਾਂਚ ਕਰ ਰਹੇ ਹਾਂ ਕਿ ਇਕ ਐਰੇ ਨੂੰ ਖਾਲੀ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਸਾਨੂੰ ਇੱਕ ਐਰੇ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ ਅਤੇ ਫਿਰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਇਹ ਖਾਲੀ ਹੈ ਇਸ ਟੈਸਟ ਲਈ ਅਮਲ ਬਹੁਤ ਸਰਲ ਹੈ: </p> <pre> <code> ਵਰ ਐਸਰਟ = ਚਾਈ. ਦਾਅਵਾ ਕਰੋ;ਵਰਣਨ ਕਰੋ ('ਅਰੇ', ਫੰਕਸ਼ਨ)ਇਹ ('ਖਾਲੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ', ਫੰਕਸ਼ਨ <span class="f-c-white l-mr3"> {var arr = [];ਦਾਅਵਾ ਕਰੋ ਬਰਾਬਰ (ਏਆਰ ਦੀ ਲੰਬਾਈ, 0);});}); </code> </pre> <p> ਪਹਿਲੀ ਲਾਈਨ 'ਤੇ ਨੋਟ ਕਰੋ, ਅਸੀਂ <code> ਜ਼ਬਰਦਸਤੀ </code> ਵੇਰੀਏਬਲ ਸਥਾਪਤ ਕੀਤੀ. ਇਹ ਤਾਂ ਹੀ ਹੈ, ਇਸ ਲਈ ਸਾਨੂੰ ਟਾਈਪਿੰਗ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ <code> ਚਾਈ. ਹਰ ਥਾਂ ਤੇ ਦਾਅਵਾ ਕਰੋ </code> </p> <p> <code> ਇਸ </code> ਫੰਕਸ਼ਨ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਐਰੇ ਬਣਾਉਂਦੇ ਹਾਂ ਅਤੇ ਇਸਦੀ ਲੰਬਾਈ ਦੇਖੋ. ਹਾਲਾਂਕਿ ਸਧਾਰਣ, ਇਹ ਵਧੀਆ ਮਿਸਾਲ ਹੈ ਕਿ ਟੈਸਟ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ </p> <p> ਪਹਿਲਾਂ, ਤੁਹਾਡੇ ਕੋਲ ਕੁਝ ਅਜਿਹਾ ਹੈ ਜਿਸਦੀ ਤੁਸੀਂ ਜਾਂਚ ਕਰ ਰਹੇ ਹੋ - ਇਸ ਨੂੰ <em> ਸਿਸਟਮ ਇਨ ਟੈਸਟ </em> ਜਾਂ <em> ਸੁਟ </em> ਕਿਹਾ ਜਾਂਦਾ ਹੈ. ਫਿਰ, ਜੇ ਜਰੂਰੀ ਹੋਵੇ, ਤੁਸੀਂ ਸੁਟ ਨਾਲ ਕੁਝ ਕਰੋ. ਇਸ ਟੈਸਟ ਵਿਚ, ਅਸੀਂ ਕੁਝ ਵੀ ਨਹੀਂ ਕਰ ਰਹੇ, ਕਿਉਂਕਿ ਅਸੀਂ ਜਾਂਚ ਕਰ ਰਹੇ ਹਾਂ ਕਿ ਅਰੇ ਸ਼ੁਰੂ ਹੋਣ ਨਾਲ ਖਾਲੀ ਹੋਵੇਗਾ </p> <p> ਪ੍ਰੀਖਿਆ ਵਿਚ ਆਖਰੀ ਗੱਲ ਪ੍ਰਮਾਣਿਕਤਾ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ - ਇੱਕ <em> ਦਾਅਵਾ </em> ਜਿਹੜਾ ਨਤੀਜਾ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ. ਇੱਥੇ, ਅਸੀਂ ਵਰਤ ਰਹੇ ਹਾਂ <code> ਦਾਅਵਾ ਕਰੋ. ਅਜਿਹਾ ਕਰਨ ਲਈ ਬਰਾਬਰ </code> ਜ਼ਿਆਦਾਤਰ ਦਾਅਵੇ ਵਾਲੇ ਫੰਕਸ਼ਨ ਉਸੇ ਕ੍ਰਮ ਵਿੱਚ ਮਾਪਦੰਡ ਲੈਂਦੇ ਹਨ: ਪਹਿਲਾਂ "ਅਸਲ" ਮੁੱਲ, ਅਤੇ ਫਿਰ "ਉਮੀਦ ਕੀਤੀ" ਮੁੱਲ. </p> <ul> <li> ਇਹ <em> ਅਸਲ </em> ਮੁੱਲ ਤੁਹਾਡੇ ਟੈਸਟ ਕੋਡ ਦਾ ਨਤੀਜਾ ਹੈ, ਇਸ ਲਈ ਇਸ ਕੇਸ ਵਿੱਚ <code> arr. ਲੰਬਾਈ </code> </li> <li> <em> ਉਮੀਦ ਕੀਤੀ ਜਾ ਰਹੀ ਹੈ </em> ਮੁੱਲ ਉਹ ਨਤੀਜਾ ਹੈ <em> </em> ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ. ਇਕ ਐਰੇ ਨੂੰ ਖਾਲੀ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਇਸ ਟੈਸਟ ਵਿਚ ਅਨੁਮਾਨਿਤ ਮੁੱਲ <code> 0 </code> ਹੈ. </li> </ul> <p> ਚਾਈ ਅਭਿਲਾਸ਼ੀ ਲਿਖਣ ਦੀਆਂ ਦੋ ਵੱਖਰੀਆਂ ਸਟਾਈਲ ਵੀ ਪੇਸ਼ ਕਰਦੀ ਹੈ, ਪਰ ਅਸੀਂ ਹੁਣ ਚੀਜ਼ਾਂ ਨੂੰ ਸਰਲ ਬਣਾਉਣ ਲਈ ਜ਼ੋਰ ਪਾ ਰਹੇ ਹਾਂ. ਜਦੋਂ ਤੁਸੀਂ ਲਿਖਤੀ ਟੈਸਟਾਂ ਦੇ ਨਾਲ ਵਧੇਰੇ ਤਜਰਬੇਕਾਰ ਹੋ ਜਾਂਦੇ ਹੋ, ਤੁਸੀਂ ਇਸ ਦੀ ਬਜਾਏ ਉਮੀਦਵਾਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹ ਸਕਦੇ ਹੋ, ਕਿਉਂਕਿ ਉਹ ਕੁਝ ਹੋਰ ਲਚਕਤਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ. </p> <h2 id="running-the-test"> ਟੈਸਟ ਚਲਾਉਣਾ </h2> <p> ਇਸ ਟੈਸਟ ਨੂੰ ਚਲਾਉਣ ਲਈ ਸਾਨੂੰ ਇਸ ਨੂੰ ਟੈਸਟ ਰੇਅਰਰ ਫਾਈਲ ਵਿੱਚ ਜੋੜਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਜੋ ਅਸੀਂ ਪਹਿਲਾਂ ਬਣਾਈ ਸੀ. </p> <p> ਜੇਕਰ ਤੁਸੀਂ ਨੋਡ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ. ਜੇ ਐਸ, ਤੁਸੀਂ ਇਸ ਪਗ ਨੂੰ ਛੱਡ ਸਕਦੇ ਹੋ, ਅਤੇ ਟੈਸਟ ਚਲਾਉਣ ਲਈ ਕਮਾਂਡ <code> ਮੋਚਾ </code> ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ. ਤੁਸੀਂ ਟਰਮੀਨਲ ਵਿਚ ਟੈਸਟ ਦੇ ਨਤੀਜੇ ਵੇਖੋਗੇ. </p> <p> ਸੈਮੂਅਲ, ਇਸ ਟੈਸਟ ਨੂੰ ਰਨਰ ਨੂੰ ਜੋੜਨ ਲਈ, ਬਸ ਸ਼ਾਮਲ ਕਰੋ: </p> <pre> <code> <script src = "test / arrayTest. Js"> </ script> </code> </pre> <p> ਹੇਠਾਂ: </p> <pre> <code> <! - ਆਪਣੀਆਂ ਟੈਸਟ ਫਾਇਲਾਂ ਇੱਥੇ ਲੋਡ ਕਰੋ -> </code> </pre> <p> ਜਦੋਂ ਤੁਸੀਂ ਸਕ੍ਰਿਪਟ ਜੋੜ ਲੈਂਦੇ ਹੋ, ਤੁਸੀਂ ਆਪਣੀ ਪਸੰਦ ਦੇ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਟੈਸਟ ਦੇ ਦੌੜਾਕ ਪੇਜ ਨੂੰ ਲੋਡ ਕਰ ਸਕਦੇ ਹੋ. </p> <h2 id="the-test-results"> ਟੈਸਟ ਦੇ ਨਤੀਜੇ </h2> <p> ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਟੈਸਟ ਚਲਾਉਂਦੇ ਹੋ, ਤਾਂ ਟੈਸਟ ਦੇ ਨਤੀਜੇ ਇਸ ਤਰਾਂ ਦਿੱਸਣਗੇ: </p> <p> <img src="/img/d4088f278b6ea3753bead38d065707700.jpg" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/> <p> ਨੋਟ ਕਰੋ ਕਿ ਜੋ ਅਸੀਂ <code> ਵਰਣਨ </code> ਅਤੇ <code> ਇਸ </code> ਫੰਕਸ਼ਨ ਆਊਟਪੁਟ ਵਿੱਚ ਦਿਖਾਏ ਹਨ - ਟੈਸਟਾਂ ਨੂੰ ਵੇਰਵਾ ਦੇ ਅਧੀਨ ਵੰਡਿਆ ਗਿਆ ਹੈ ਨੋਟ ਕਰੋ ਕਿ ਇਹ ਵੀ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਆਲ੍ਹਣਾ <code> ਦਾ ਵਰਣਨ </code> ਹੋਰ ਉਪ-ਗਰੁੱਪ ਬਣਾਉਣ ਲਈ ਬਲਾਕ </p> <p> ਮਿਮੈਲ ਵਿਚ ਇਹ ਪਤਾ ਕਰੋ ਕਿ ਅਸਫਲ ਟੈਸਟ ਕਿਸ ਤਰ੍ਹਾਂ ਦਿਖਦਾ ਹੈ. </p> <p> ਪ੍ਰੀਖਿਆ ਵਿਚ ਜੋ ਕਹਿੰਦਾ ਹੈ: </p> <pre> <code> ਦਾਅਵਾ ਕਰੋ. ਬਰਾਬਰ (ਏਆਰ ਦੀ ਲੰਬਾਈ, 0); </code> </pre> <p> ਨੰਬਰ ਨੂੰ ਬਦਲੋ <code> 0 </code> ਦੇ ਨਾਲ <code> 1 </code> . ਇਹ ਟੈਸਟ ਨੂੰ ਅਸਫਲ ਬਣਾ ਦਿੰਦਾ ਹੈ, ਕਿਉਂਕਿ ਐਰੇ ਦੀ ਲੰਬਾਈ ਹੁਣ ਉਮੀਦ ਕੀਤੀ ਮੁੱਲ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦੀ. </p> <p> ਜੇ ਤੁਸੀਂ ਦੁਬਾਰਾ ਟੈਸਟ ਕਰਵਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਗਲਤ ਕੀ ਹੋਣ ਦਾ ਵੇਰਵਾ ਦੇ ਨਾਲ ਲਾਲ ਵਿਚ ਫੇਲ੍ਹ ਹੋਣ ਵਾਲੀ ਟੈਸਟ ਦੇਖੋਗੇ. ਅਸੀਂ ਭਾਵੇਂ ਇਸ ਨੂੰ ਠੀਕ ਕਰ ਸਕਦੇ ਹਾਂ </p> <p> ਜਿਆਦਾਤਰ ਦਾਅਵਾ ਫੰਕਸ਼ਨ ਇੱਕ ਵਿਕਲਪਿਕ <code> ਸੁਨੇਹਾ </code> ਪੈਰਾਮੀਟਰ ਲੈ ਸਕਦੇ ਹਨ. ਇਹ ਉਹ ਸੰਦੇਸ਼ ਹੈ ਜੋ ਉਦੋਂ ਵਿਖਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਦਾਅਵਾ ਫੇਲ ਹੁੰਦਾ ਹੈ. ਇਸ ਮਾਪਦੰਡ ਨੂੰ ਸਮਝਣ ਲਈ ਸੌਖਾ ਹੋ ਗਿਆ ਹੈ ਇਸ ਲਈ ਇਸ ਪੈਰਾਮੀਟਰ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਇੱਕ ਵਧੀਆ ਵਿਚਾਰ ਹੈ. </p> <p> ਅਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਆਪਣੇ ਦਾਅਵੇ ਨੂੰ ਇਕ ਸੰਦੇਸ਼ ਦੇ ਸਕਦੇ ਹਾਂ: </p> <pre> <code> ਦਾਅਵਾ ਕਰੋ. ਬਰਾਬਰ (ਐਰਮ ਲੰਬਾਈ, 1, 'ਅਰੇ ਦੀ ਲੰਬਾਈ 0 ਨਹੀਂ ਸੀ); </code> </pre> <p> ਜੇ ਤੁਸੀਂ ਦੁਬਾਰਾ ਟੈਸਟ ਕਰਵਾਉਂਦੇ ਹੋ, ਤਾਂ ਕਸਟਮ ਸੁਨੇਹਾ ਡਿਫੌਲਟ ਦੀ ਬਜਾਏ ਦਿਖਾਈ ਦੇਵੇਗਾ. </p> <p> ਆਉ ਇਸ ਗੱਲ ਤੇ ਵਾਪਸ ਜਾਣ ਦਾ ਤਰੀਕਾ ਬਦਲ ਦੇਈਏ- <code> 1 </code> ਦੇ ਨਾਲ <code> 0 </code> , ਅਤੇ ਜਾਂਚ ਦੁਬਾਰਾ ਕਰਨ ਲਈ ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਉਹ ਪਾਸ ਹੋਣ. </p> <h2 id="putting-it-together"> ਇਸ ਨੂੰ ਇਕੱਠੇ ਕਰਨਾ </h2> <p> ਹੁਣ ਤਕ ਅਸੀਂ ਕਾਫ਼ੀ ਸਧਾਰਨ ਉਦਾਹਰਣਾਂ ਵੱਲ ਧਿਆਨ ਦਿੱਤਾ ਹੈ. ਸਿਮਟਲ ਨੇ ਜੋ ਅਸੀਂ ਅਭਿਆਸ ਵਿੱਚ ਸਿੱਖ ਲਿਆ ਹੈ ਉਸ ਨੂੰ ਪਾਉ ਅਤੇ ਵੇਖੋ ਕਿ ਅਸੀਂ ਕੋਡ ਦੇ ਇੱਕ ਹੋਰ ਵਧੇਰੇ ਯਥਾਰਥਕ ਟੁਕੜੇ ਦੀ ਕਿਵੇਂ ਜਾਂਚ ਕਰਾਂਗੇ. </p> <p> ਇੱਥੇ ਇਕ ਅਜਿਹਾ ਫੰਕਸ਼ਨ ਹੈ ਜੋ ਇਕ ਐਲੀਮੈਂਟ ਵਿੱਚ CSS ਕਲਾਸ ਜੋੜਦਾ ਹੈ. ਇਹ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਵਿੱਚ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ <code> js / className. ਜੇ ਐਸ </code> </p> <pre> <code> ਫੰਕਸ਼ਨ ਐਡ ਕਲਾਸ (ਐਲ, ਨਿਊ ਕਲਾਸ) {ਜੇ (ਐਲ. ਕਲਾਸ ਨਾਮ. ਇੰਡੈਕਸ ਓਫ (ਨਵਾਂ ਕਲਾਸ) === -1) {el className + = newClass;}} </code> </pre> <p> ਇਸ ਨੂੰ ਥੋੜਾ ਹੋਰ ਦਿਲਚਸਪ ਬਣਾਉਣ ਲਈ, ਮੈਂ ਇਸ ਨੂੰ ਇਕ ਨਵਾਂ ਕਲਾਸ ਜੋੜਦਾ ਸੀ ਜਦੋਂ ਇਹ ਕਲਾਸ ਇਕ ਐਲੀਮੈਂਟ ਦੇ <code> ਕਲਾਸ ਨੇਮ </code> ਦੀ ਜਾਇਦਾਦ ਵਿਚ ਮੌਜੂਦ ਨਹੀਂ ਹੁੰਦੀ - ਜੋ ਦੇਖਣ ਨੂੰ ਚਾਹੁੰਦਾ ਹੈ <code> <div class = " ਹੈਲੋ ਹੈਲੋ ਹੈਲੋ ਹੈਲੋ "> </code> ਸਭ ਦੇ ਬਾਅਦ? </p> <p> ਵਧੀਆ ਕੇਸ ਵਿਚ, ਅਸੀਂ ਇਸ ਫੰਕਸ਼ਨ <em> ਤੋਂ ਪਹਿਲਾਂ </em> ਲਿਖਤ ਲਿਖਾਂਗੇ ਕਿ ਅਸੀਂ ਕੋਡ ਲਿਖਦੇ ਹਾਂ. ਪਰ ਟੈਸਟ-ਚਲਾਏ ਵਿਕਾਸ ਇੱਕ ਗੁੰਝਲਦਾਰ ਵਿਸ਼ਾ ਹੈ, ਅਤੇ ਹੁਣ ਲਈ ਅਸੀਂ ਸਿਰਫ ਲਿਖਤੀ ਟੈਸਟਾਂ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ. </p> <p> ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ, ਆਓ ਇਕਾਈ ਟੈਸਟਾਂ ਦੇ ਪਿੱਛੇ ਮੁਢਲੇ ਵਿਚਾਰ ਨੂੰ ਯਾਦ ਕਰੀਏ: ਅਸੀਂ ਫੰਕਸ਼ਨ ਕੁਝ ਇੰਪੁੱਟਾਂ ਨੂੰ ਦਿੰਦੇ ਹਾਂ ਅਤੇ ਫੇਰ ਕਿਰਿਆ ਦੀ ਪੁਸ਼ਟੀ ਕਰਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਉਮੀਦ ਕੀਤੀ ਜਾਂਦੀ ਹੈ. ਇਸ ਫੰਕਸ਼ਨ ਲਈ ਇੰਪੁੱਟ ਅਤੇ ਵਿਹਾਰ ਕੀ ਹਨ? </p> <p> ਇਕ ਤੱਤ ਅਤੇ ਇਕ ਕਲਾਸ ਦਾ ਨਾਮ: </p> <ul> <li> ਜੇਕਰ ਤੱਤ ਦੇ <code> ਕਲਾਸ ਨਾਂ </code> ਦੀ ਪ੍ਰਾਪਰਟੀ ਵਿੱਚ ਕਲਾਸ ਨਾਂ ਸ਼ਾਮਿਲ ਨਹੀਂ ਹੈ, ਤਾਂ ਇਸ ਨੂੰ ਜੋੜਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ. </li> <li> ਜੇਕਰ ਤੱਤ ਦੇ <code> ਕਲਾਸ ਨਾਮ </code> ਦੀ ਜਾਇਦਾਦ ਵਿੱਚ ਕਲਾਸ ਦਾ ਨਾਮ ਹੋਵੇ, ਤਾਂ ਇਸਨੂੰ ਜੋੜਿਆ ਨਹੀਂ ਜਾਣਾ ਚਾਹੀਦਾ. </li> </ul> <p> ਆਉ ਇਹਨਾਂ ਕੇਸਾਂ ਦਾ ਦੋ ਟੈਸਟਾਂ ਵਿੱਚ ਅਨੁਵਾਦ ਕਰੀਏ. <code> ਟੈਸਟ </code> ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ, ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਉ <code> classNameTest ਜੇ ਐਸ </code> ਅਤੇ ਹੇਠ ਲਿਖੇ ਸ਼ਾਮਲ ਕਰੋ: </p> <pre> <code> ਦਾ ਵਰਣਨ ਕਰੋ ('ਐਡ-ਕਲਾਸ', ਫੰਕਸ਼ਨ)ਇਹ ('ਕਲਾਸ ਨੂੰ ਐਲੀਮੈਂਟ' ਵਿੱਚ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ);ਇਹ ('ਉਹ ਕਲਾਸ ਨਹੀਂ ਜੋੜਨਾ ਚਾਹੀਦਾ ਜੋ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ');}); </code> </pre> <p> ਅਸੀਂ ਸ਼ਬਦ ਨੂੰ ਥੋੜ੍ਹਾ ਜਿਹਾ ਬਦਲਕੇ "ਇਸ ਨੂੰ X" ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਜੋ ਟੈਸਟਾਂ ਨਾਲ ਵਰਤਿਆ ਗਿਆ ਹੈ. ਇਸਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ ਇਹ ਥੋੜਾ ਵਧੀਆ ਢੰਗ ਨਾਲ ਪੜ੍ਹਦਾ ਹੈ, ਪਰ ਜ਼ਰੂਰੀ ਤੌਰ ਤੇ ਇਹ ਉਹੀ ਮਨੁੱਖੀ-ਪੜ੍ਹਿਆ ਜਾਣ ਵਾਲਾ ਰੂਪ ਹੈ ਜੋ ਅਸੀਂ ਉੱਪਰ ਸੂਚੀਬੱਧ ਕੀਤਾ ਹੈ. ਆਮ ਤੌਰ 'ਤੇ ਮਿਡਲ ਤੋਂ ਲੈ ਕੇ ਜਾਂਚ ਤੋਂ ਲੈ ਕੇ ਜਾਣ ਤੋਂ ਲੈ ਕੇ ਮੀਲਟ ਜ਼ਿਆਦਾ ਮੁਸ਼ਕਲ ਨਹੀਂ ਹੁੰਦਾ </p> <p> ਪਰ ਉਡੀਕ ਕਰੋ, ਕਿੱਥੇ ਟੈਸਟ ਦੇ ਕੰਮ ਹਨ? ਠੀਕ ਹੈ, ਜਦੋਂ ਅਸੀਂ ਦੂਜੀ ਪੈਰਾਮੀਟਰ ਨੂੰ <code> ਇਸ ਨੂੰ </code> ਛੱਡਦੇ ਹਾਂ, ਮੋਚ ਟੈਸਟ ਦੇ ਨਤੀਜਿਆਂ ਵਿੱਚ <em> ਬਕਾਇਆ </em> ਦੇ ਤੌਰ ਤੇ ਇਨ੍ਹਾਂ ਟੈਸਟਾਂ ਦੀ ਨਿਸ਼ਾਨਦੇਹੀ ਕਰਦਾ ਹੈ. ਇਹ ਬਹੁਤ ਸਾਰੇ ਟੈਸਟਾਂ ਦੀ ਸਥਾਪਨਾ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਹੈ - ਕਿਸ ਤਰਤੀਬ ਦੀ ਲਿਖਤ ਲਿਖਣ ਦਾ ਤੁਹਾਡਾ ਇਰਾਦਾ ਹੈ </p> <p> ਸੈਮੂਅਲ ਪਹਿਲੇ ਟੈਸਟ ਨੂੰ ਲਾਗੂ ਕਰਕੇ ਜਾਰੀ ਹੈ. </p> <pre> <code> ਦਾ ਵਰਣਨ ਕਰੋ ('ਐਡ-ਕਲਾਸ', ਫੰਕਸ਼ਨ)ਇਹ ('ਕਲਾਸ ਨੂੰ ਐਲੀਮੈਂਟ' ਵਿੱਚ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ, ਫੰਕਸ਼ਨ <span class="f-c-white l-mr3"> {var element = {className: ''};addClass (ਤੱਤ, 'ਟੈਸਟ-ਕਲਾਸ');ਦਾਅਵਾ ਕਰੋ ਬਰਾਬਰ (ਐਲੀਮੈਂਟ. className, 'test-class');});ਇਹ ('ਉਹ ਕਲਾਸ ਨਹੀਂ ਜੋੜਨਾ ਚਾਹੀਦਾ ਜੋ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ');}); </code> </pre> <p> ਇਸ ਟੈਸਟ ਵਿਚ, ਅਸੀਂ <code> ਇਕਾਈ </code> ਵੇਰੀਏਬਲ ਬਣਾਉਂਦੇ ਹਾਂ ਅਤੇ ਇਸ ਨੂੰ <code> ਐਡ-ਕਲਾਸ </code> ਫੰਕਸ਼ਨ ਨਾਲ ਇੱਕ ਸਤਰ <code> ਟੈਸਟ-ਵਰਗ </code> ਦੇ ਨਾਲ ਪੈਰਾਮੀਟਰ ਦੇ ਤੌਰ ਤੇ ਪਾਸ ਕਰਦੇ ਹਾਂ. ਨਵਾਂ ਕਲਾਸ ਜੋੜਣ ਲਈ) ਫਿਰ, ਅਸੀਂ ਜਾਂਚ ਕਰਦੇ ਹਾਂ ਕਿ ਕਲਾਸ ਇੱਕ ਕੀਮਤ ਦਾ ਇਸਤੇਮਾਲ ਕਰਕੇ ਮੁੱਲ ਵਿੱਚ ਸ਼ਾਮਲ ਹੈ. </p> <p> ਸੈਮੂਟ, ਅਸੀਂ ਆਪਣੇ ਸ਼ੁਰੂਆਤੀ ਵਿਚਾਰ ਤੋਂ ਗਏ - ਇਕ ਤੱਤ ਅਤੇ ਕਲਾਸ ਦਾ ਨਾਮ ਦਿੱਤਾ, ਇਸ ਨੂੰ ਕਲਾਸ ਸੂਚੀ ਵਿਚ ਜੋੜਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ - ਅਤੇ ਇਸ ਨੂੰ ਕੋਡ ਵਿਚ ਕਾਫ਼ੀ ਸਿੱਧੇ ਤਰੀਕੇ ਨਾਲ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ. </p> <p> ਹਾਲਾਂਕਿ ਇਹ ਫੰਕਸ਼ਨ DOM ਐਲੀਮੈਂਟਸ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ, ਅਸੀਂ ਇੱਥੇ ਇੱਕ ਸਧਾਰਨ JS ਔਬਜੈਕਟ ਵਰਤ ਰਹੇ ਹਾਂ. ਕਦੇ-ਕਦੇ ਅਸੀਂ ਸਾਡੇ ਟੈਸਟਾਂ ਨੂੰ ਸੌਖਾ ਕਰਨ ਲਈ ਇਸ ਢੰਗ ਨਾਲ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਪ੍ਰਕਿਰਤੀ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ. ਇੱਕ ਵਧੀਕ ਲਾਭ ਦੇ ਤੌਰ ਤੇ, ਕਿਉਂਕਿ ਅਸੀਂ DOM ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਦੇ, ਅਸੀਂ ਵੀ ਇਹ ਟੈਸਟ ਸੈਮਵਲ ਵਿੱਚ ਚਲਾ ਸਕਦੇ ਹਾਂ ਜੇ ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ </p> <h3 id="running-the-tests-in-the-browser"> ਬ੍ਰਾਉਜ਼ਰ ਵਿਚ ਟੈਸਟ ਚਲਾਉਣਾ </h3> <p> ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਟੈਸਟ ਨੂੰ ਚਲਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ <code> ਕਲਾਸ ਨੇਮ ਨੂੰ ਜੋੜਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ. ਜੇ ਐਸ </code> ਅਤੇ <code> ਕਲਾਸਨਾਮੀਟੈਸਟ ਜੇਰਸ </code> ਦੌੜਾਕ: </p> <pre> <code class="code-markup"> <! - ਲੋਡ ਕੋਡ ਜੋ ਤੁਸੀਂ ਇੱਥੇ ਟੈਸਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ -><script src = "js / className. js"> </ script><! - ਆਪਣੀਆਂ ਟੈਸਟ ਫਾਈਲਾਂ ਇੱਥੇ ਲੋਡ ਕਰੋ -><script src = "test / classNameTest. js"> </ script> </code> </pre> <p> ਹੁਣ ਤੁਹਾਨੂੰ ਇਕ ਟੈਸਟ ਪਾਸ ਵੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਇਕ ਹੋਰ ਟੈਸਟ ਨੂੰ ਬਕਾਇਆ ਹੋਣ ਦੇ ਰੂਪ ਵਿਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ, ਜਿਵੇਂ ਕਿ ਹੇਠਲੇ ਸਿਮਟ ਦੁਆਰਾ ਦਿਖਾਇਆ ਗਿਆ ਹੈ. ਯਾਦ ਰੱਖੋ ਕਿ ਵਿਧੀ ਤੋਂ ਕੋਡ ਨੂੰ ਕੰਮ ਕਰਨ ਲਈ ਉਦਾਹਰਨ ਤੋਂ ਥੋੜ੍ਹਾ ਵੱਖਰਾ ਹੁੰਦਾ ਹੈ. </p> <p data-height="300" data-theme-id="6441" data-slug-hash="XXzXLX" data-default-tab="result" data-user="SitePoint" class="codepen"> ਕੋਡਪੈਨ ਤੇ ਸਾਈਟਪੁਆਇੰਟ (@ਸੇਟਪੁਆਇੰਟ) ਦੁਆਰਾ ਮੋਚਾ </span> ਨਾਲ ਪੈਨ ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਦੇਖੋ. </p> <p> </p> <p> ਅੱਗੇ, ਆਓ ਦੂਜਾ ਟੈਸਟ ਲਾਗੂ ਕਰੀਏ . </p> <pre> <code> ਇਸ ਨੂੰ ('ਇੱਕ ਕਲਾਸ ਨਹੀਂ ਜੋੜਨਾ ਚਾਹੀਦਾ ਜੋ ਪਹਿਲਾਂ ਹੀ ਮੌਜੂਦ ਹੈ', ਫੰਕਸ਼ਨ <span class="f-c-white l-mr3"> {var ਐਲੀਮੈਂਟ = {className: 'ਮੌਜੂਦ ਹੈ'};addClass (ਤੱਤ, 'ਮੌਜੂਦ ਹੈ');var numClasses = ਇਕਾਈ ਕਲਾਸ ਵੰਡ(' '). ਲੰਬਾਈ;ਦਾਅਵਾ ਕਰੋ ਬਰਾਬਰ (numClasses, 1);}); </code> </pre> <p> ਆਪਣੇ ਟੈਸਟਾਂ ਨੂੰ ਅਕਸਰ ਚਲਾਉਣ ਲਈ ਚੰਗੀ ਆਦਤ ਪਾਓ, ਇਸ ਲਈ ਆਓ ਦੇਖੀਏ ਕਿ ਜੇਕਰ ਅਸੀਂ ਹੁਣ ਟੈਸਟ ਕਰਵਾਉਂਦੇ ਹਾਂ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ? ਜਿਵੇਂ ਕਿ ਉਮੀਦ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਉਹਨਾਂ ਨੂੰ ਪਾਸ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ </p> <p> ਲਾਗੂ ਕੀਤੀ ਦੂਜੀ ਟੈਸਟ ਨਾਲ ਇੱਥੇ ਇਕ ਹੋਰ ਸਾਮਾਲ ਹੈ. </p> <p data-height="300" data-theme-id="6441" data-slug-hash="pgdyzz" data-default-tab="result" data-user="SitePoint" class="codepen"> ਕੋਡਪੈਨ ਤੇ ਸਾਈਟਪੁਆਇੰਟ (@ਸੀਟਪੁਆਇੰਟ) ਦੁਆਰਾ ਮੋਚਾ <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3"> ਨਾਲ ਪੈਨ ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਦੇਖੋ. </p> <p> </p> <p> ਪਰ ਲਟਕ! ਮੈਂ ਅਸਲ ਵਿੱਚ ਤੁਹਾਨੂੰ ਇੱਕ ਬਿੱਟ ਧੋਖਾ ਦਿੱਤਾ. ਇਸ ਫੰਕਸ਼ਨ ਲਈ ਇਕ ਤੀਜਾ ਵਿਵਹਾਰ ਹੈ ਜਿਸ ਬਾਰੇ ਅਸੀਂ ਵਿਚਾਰ ਨਹੀਂ ਕੀਤਾ ਹੈ. ਫੰਕਸ਼ਨ ਵਿਚ ਇਕ ਬੱਗ ਵੀ ਹੈ- ਇਕ ਬਹੁਤ ਹੀ ਗੰਭੀਰ ਇਕ ਸਿਰਫ 3 ਲਾਈਟ ਫੰਕਸ਼ਨ ਨੂੰ ਮਿਲਾਓ, ਪਰ ਕੀ ਤੁਸੀਂ ਇਸਦਾ ਧਿਆਨ ਲਾਇਆ ਹੈ? </p> <p> ਸੈਮਵਲ ਤੀਜੇ ਵਿਵਹਾਰ ਲਈ ਇਕ ਹੋਰ ਟੈਸਟ ਲਿਖਦਾ ਹੈ ਜੋ ਬੱਗ ਨੂੰ ਬੋਨਸ ਵਜੋਂ ਦਰਸਾਉਂਦਾ ਹੈ. </p> <pre> <code> ਇਸ ('ਮੌਜੂਦਾ ਕਲਾਸ ਦੇ ਬਾਅਦ ਨਵਾਂ ਕਲਾਸ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ', ਫੰਕਸ਼ਨ <span class="f-c-white l-mr3"> {var ਐਲੀਮੈਂਟ = {className: 'ਮੌਜੂਦ ਹੈ'};addClass (ਤੱਤ, 'ਨਵਾਂ-ਕਲਾਸ');var ਕਲਾਸ = ਐਲੀਮੈਂਟ ਕਲਾਸ ਵੰਡ(' ');ਦਾਅਵਾ ਕਰੋ ਬਰਾਬਰ (ਵਰਗਾਂ [1], 'ਨਵੇਂ-ਕਲਾਸ');}); </code> </pre> <p> ਇਸ ਵਾਰ ਟੈਸਟ ਫੇਲ੍ਹ ਹੋ ਜਾਂਦਾ ਹੈ. ਤੁਸੀਂ ਹੇਠ ਲਿਖੇ ਕੋਡਪੈਨ ਵਿਚ ਕਾਰਵਾਈ ਕਰ ਸਕਦੇ ਹੋ. ਇੱਥੇ ਸਮੱਸਿਆ ਅਸਾਨ ਹੈ: ਤੱਤ ਵਿੱਚ CSS ਕਲਾਸ ਨਾਂ ਇੱਕ ਸਪੇਸ ਦੁਆਰਾ ਵੱਖ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ. ਹਾਲਾਂਕਿ, ਸਾਡੇ <code> ਐਡ-ਕਲਾਸ </code> ਦੇ ਮੌਜੂਦਾ ਲਾਗੂਕਰਨ ਨਾਲ ਇੱਕ ਥਾਂ ਨਹੀਂ ਸ਼ਾਮਿਲ ਹੁੰਦੀ ਹੈ! </p> <p data-height="600" data-theme-id="6441" data-slug-hash="oboxve" data-default-tab="result" data-user="SitePoint" class="codepen"> ਕੋਡਪੈਨ ਤੇ ਸਾਈਟਪੁਆਇੰਟ (@ਸੀਟਪੁਆਇੰਟ) ਦੁਆਰਾ ਮੋਚੀ <div class="widget maestro maestro-content-type-html hide-for-mobile-SP" id="maestro-659"> ਨਾਲ ਪੈਨ ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਦੇਖੋ. </p> <p> </p> <p> ਸੈਮਿਟ ਫੰਕ ਨੂੰ ਠੀਕ ਕਰੋ ਅਤੇ ਟੈਸਟ ਪਾਸ ਕਰੋ. </p> <pre> <code> ਫੰਕਸ਼ਨ ਐਡ ਕਲਾਸ (ਐਲ, ਨਿਊ ਕਲਾਸ) {ਜੇ (ਐਲ. ਕਲਾਸ.ਨਾਮ. ਇੰਡੈਕਸਆਫ (ਨਵਾਂ ਕਲਾਸ)! == -1) {ਵਾਪਸੀ;}ਜੇ (ਐਲ. ਕਲਾਸਨਾਮ! == '') {// ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਕਲਾਸ ਨਾਂ ਇੱਕ ਸਪੇਸ ਦੁਆਰਾ ਵੱਖ ਕੀਤੇ ਹਨnewClass = '' + newClass;}el className + = newClass;} </code> </pre> <p> ਅਤੇ ਇੱਥੇ ਫਿਕਸਡ ਫੰਕਸ਼ਨ ਅਤੇ ਪਾਸ ਕਰਨ ਵਾਲੇ ਟੈਸਟਾਂ ਨਾਲ ਅੰਤਮ ਸਮਾਲ ਹੈ. </p> <p data-height="266" data-theme-id="6441" data-slug-hash="BjmKBG" data-default-tab="result" data-user="SitePoint" class="codepen"> ਕੋਡਪੈਨ ਤੇ ਸਾਈਟਪੁਆਇੰਟ ਦੁਆਰਾ (@ਸੀਟਪੁਆਇੰਟ) ਮੋਚ ਦੇ ਨਾਲ ਪੈਨ ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਦੇਖੋ. </p> <p> </p> <h3 id="running-the-tests-on-node"> ਨੌਂਡ ਟੈਸਟ </h3> <p> ਨੋਡ ਵਿੱਚ, ਚੀਜ਼ਾਂ ਕੇਵਲ ਉਸੇ ਫਾਈਲਾਂ ਵਿੱਚ ਦੂਜੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ ਦਿਖਾਈ ਦਿੰਦੀਆਂ ਹਨ. ਜਿਵੇਂ <code> ਕਲਾਸ ਨੇਮ ਜੇ ਐਸ </code> ਅਤੇ <code> ਕਲਾਸਨਾਮੀਟੈਸਟ ਜੇ ਐਸ </code> ਵੱਖਰੀਆਂ ਫਾਈਲਾਂ ਵਿਚ ਹਨ, ਤਾਂ ਸਾਨੂੰ ਇਕ ਤੋਂ ਦੂਜੀ ਨੂੰ ਬੇਨਕਾਬ ਕਰਨ ਦਾ ਤਰੀਕਾ ਲੱਭਣ ਦੀ ਲੋੜ ਹੈ. ਅਜਿਹਾ ਕਰਨ ਦਾ ਮਿਆਰੀ ਤਰੀਕਾ <code> ਮੈਡਿਊਲ ਦੇ ਇਸਤੇਮਾਲ ਰਾਹੀਂ ਹੈ. ਨਿਰਯਾਤ </code> ਜੇ ਤੁਹਾਨੂੰ ਇੱਕ ਰਿਫਰੈਸ਼ਰ ਦੀ ਲੋੜ ਹੈ, ਤੁਸੀਂ ਉਸ ਬਾਰੇ ਇੱਥੇ ਪੜ੍ਹ ਸਕਦੇ ਹੋ: ਮੋਡੀਊਲ ਨੂੰ ਸਮਝਣਾ ਬਰਾਮਦ ਅਤੇ ਨਿਰਯਾਤ ਵਿਚ ਬਰਾਮਦ. ਜੇ ਐਸ </p> <p> ਕੋਡ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਉਹੀ ਰਹਿੰਦਾ ਹੈ, ਪਰ ਕੁਝ ਵੱਖਰੇ ਢੰਗ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ: </p> <pre> <code> // ਕਲਾਸ ਨੇਮ ਜੇ ਐਸਮੋਡੀਊਲ ਨਿਰਯਾਤ = {addClass: ਫੰਕਸ਼ਨ (ਐਲ, ਨਿਊ ਕਲਾਸ) {ਜੇ (ਐਲ. ਕਲਾਸ.ਨਾਮ. ਇੰਡੈਕਸਆਫ (ਨਵਾਂ ਕਲਾਸ)! == -1) {ਵਾਪਸੀ;}ਜੇ (ਐਲ. ਕਲਾਸਨਾਮ! == '') {// ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਕਲਾਸ ਨਾਂ ਇੱਕ ਸਪੇਸ ਦੁਆਰਾ ਵੱਖ ਕੀਤੇ ਹਨnewClass = '' + newClass;}el className + = newClass;}} </code> </pre> <pre> <code> // classNameTest ਜੇ ਐਸvar ਚਾਈ = ਲੋੜ ('ਚਾਈ');var assert = chai ਦਾਅਵਾ ਕਰੋ;var className = ਲੋੜ ਹੈ ('. / js / className. js');var addClass = className }); </code> </pre> <p> ਅਤੇ ਜਿਵੇਂ ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ, ਟੈਸਟ ਪਾਸ ਹੁੰਦੇ ਹਨ. </p> <p> <img src="/img/69815a7ce3b0fa013fc322c4b3df3b0b2.png" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/> <h2 id="whats-next"> ਅੱਗੇ ਕੀ ਹੈ? </h2> <p> ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ, ਟੈਸਟਿੰਗ ਲਈ ਗੁੰਝਲਦਾਰ ਜਾਂ ਮੁਸ਼ਕਲ ਨਹੀਂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਸਾਮਾਟ ਐਪਸ ਲਿਖਣ ਦੇ ਹੋਰ ਪਹਿਲੂਆਂ ਦੇ ਨਾਲ, ਤੁਹਾਡੇ ਕੋਲ ਕੁਝ ਮੁਢਲੇ ਪੈਟਰਨ ਹਨ ਜੋ ਦੁਹਰਾਉਂਦੇ ਹਨ. ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਉਹਨਾਂ ਤੋਂ ਜਾਣੂ ਹੋ ਜਾਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਵਾਰ-ਵਾਰ ਇਸਤੇਮਾਲ ਕਰ ਸਕਦੇ ਹੋ. </p> <p> ਪਰ ਇਹ ਕੇਵਲ ਸਤ੍ਹਾ ਨੂੰ ਵਲੂੰਧਰਨਾ ਕਰ ਰਿਹਾ ਹੈ. ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਬਾਰੇ ਜਾਣਨ ਲਈ ਬਹੁਤ ਕੁਝ ਹੋਰ. </p> <ul> <li> ਹੋਰ ਗੁੰਝਲਦਾਰ ਪ੍ਰਣਾਲੀਆਂ ਦੀ ਜਾਂਚ ਕਰਨੀ </li> <li> ਅਜੈਕਸ, ਡੈਟਾਬੇਸ ਅਤੇ ਹੋਰ "ਬਾਹਰੀ" ਚੀਜ਼ਾਂ ਨਾਲ ਕਿਵੇਂ ਨਜਿੱਠਣਾ ਹੈ? </li> <li> ਟੈਸਟ ਡਰਾਇਵਿੰਗ ਡਿਵੈਲਪਮੈਂਟ </li> </ul> <p> ਜੇ ਤੁਸੀਂ ਇਹ ਅਤੇ ਹੋਰ ਜਿਆਦਾ ਸਿੱਖਣਾ ਜਾਰੀ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਮੈਂ ਇੱਕ ਮੁਫਤ ਸਮਾਲਟ ਯੂਨਿਟ ਟੈਸਟ ਕਸਟਮਰਸਟਾਈਨ ਲੜੀ ਬਣਾ ਲਈ ਹੈ. ਜੇ ਤੁਸੀਂ ਇਹ ਲੇਖ ਲਾਭਦਾਇਕ ਪਾਇਆ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਇਸ ਦੀ ਜਾਂਚ ਜ਼ਰੂਰ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ. </p> <p> ਬਦਲਵੇਂ ਰੂਪ ਵਿੱਚ, ਜੇਕਰ ਵਿਡੀਓ ਤੁਹਾਡਾ ਸਟਾਈਲ ਜ਼ਿਆਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਸਾਈਟਪੁਆਇੰਟ ਪ੍ਰੀਮੀਅਮ ਦੇ ਕੋਰਸ ਵਿੱਚ ਦਿਲਚਸਪੀ ਹੋ ਸਕਦੀ ਹੈ: ਟੈਸਟ ਡੂਵੈਲਪਮੈਂਟ ਇਨ ਨੋਡ ਵਿੱਚ. ਜੇ ਐਸ </p> <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3"> <div class="l-d-f l-pt3"> <img src="/img/69815a7ce3b0fa013fc322c4b3df3b0b3.jpg" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/> <div class="f-lh-title"> <div class="f-c-grey-300"> ਲੇਖਕ ਨੂੰ ਮਿਲੋ </div> <div class="f-large"> ਜਨ ਹਾਰਟਿਕਨੇਨ <i class="fa fa-twitter"> </i> <i class="fa fa-google-plus"> </i> </div> </div> </div> <div class="f-light f-lh-copy l-mt3"> ਜਾਨੀ ਨੇ 15 ਸਾਲਾਂ ਤੋਂ ਵੱਧ ਸਮੇਂ ਲਈ ਸਾਰੀਆਂ ਕਿਸਮਾਂ ਦੇ ਐੱਸ ਐੱਸਜ਼ ਬਣਾਉਣੇ ਹਨ. ਆਪਣੇ ਬਲਾਗ 'ਤੇ, ਉਹ JavaScript ਡਿਵੈਲਪਰ ਨੂੰ ਬੁਰੇ ਕੋਡ ਨੂੰ ਖਤਮ ਕਰਨ ਲਈ ਸਿੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਉਹ ਵਧੀਆ ਐਪਸ ਲਿਖਣ ਅਤੇ ਅਸਲ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਨ' ਤੇ ਧਿਆਨ ਦੇ ਸਕਣ Source . </div> </div> </div> </div> </span> </span> </span> </span> </span> </div> </div> </div> </p> </p> </html> </head> March 1, 2018